I was just wondering if anyone had experimented with importing other frameworks into Webflow such as Bootstrap 3 or Foundation and then using Webflow to start the design process by designing a single column layout in the visual editor and then once the single column layout was done, exporting the code out of webflow to then work on in another code editor such as sublime text, coda, brackets, dreamweaver etc.
I just did a brief experiment by importing the Bootstrap 3 CSS by putting it in the head code in the custom code section. Here’s the code that links to MaxCDN version:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Then back in the visual editor I just used divs so that they wouldn’t get any extra classes added to them and gave them the bootstrap classes such as container for the grid container, the row and col-sm-4 for a 3 column layout on tablet size and above.
These don’t do anything until you export the code (or publish as well I’m assuming). But once you do export the code and open the html, the Bootstrap 3 css then works and for example the one column design will become responsive and be whatever you’ve specified using the bootstrap classes on tablets and above. So in the above example, the once column design on mobile becomes 3 columns on tablets and above.
So from there you can use your code editor of choice to fine tune the non mobile responsive layouts.
Anyone else tried something similar, as I like the idea of being able to use other grid systems within webflow, and this seems to be one potential method. But am interested to see if anyone else has found an alternate method?