├── LICENCE
├── README.md
└── webflow-bootstrap.js


/LICENCE:
--------------------------------------------------------------------------------
1 | MIT License
2 | 
3 | Copyright (c) 2017 Samuel Liew <samliew@gmail.com>
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # webflow-bootstrap
 2 | 
 3 | [![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT)
 4 | 
 5 | 
 6 | ## About
 7 | 
 8 | Simple way to convert a Webflow site with Webflow components into a Bootstrap-themed website.
 9 | 
10 | **Do you:**
11 | 
12 | - prefer Bootstrap's default design over Webflow?
13 | - just want to quickly launch a minimal site without worrying much about styling individual components
14 | - want a 1140px-width Bootstrap container / or dislike the default 940px max-width Webflow container?
15 | - find it difficult to use dropdowns in the Webflow navbar?
16 | - etc...
17 | 
18 | 
19 | ## Demo
20 | 
21 | _Compare how your site could look before and after using this_
22 | 
23 | **Before:** [http://webflow-bootstrap-before.webflow.io](http://webflow-bootstrap-before.webflow.io)  
24 | **After:** [http://webflow-bootstrap.webflow.io](http://webflow-bootstrap.webflow.io)
25 | 
26 | 
27 | ## Instructions
28 | 
29 | 1. Use the instructions on [this forum thread](https://forum.webflow.com/t/how-to-embed-files-hosted-on-github/29281?u=samliew) to insert the script file [webflow-bootstrap.js](https://github.com/samliew/webflow-bootstrap/blob/master/webflow-bootstrap.js), into your project's *Site Settings > Footer Code*.  
30 |    It should be as simple as this:
31 |    `<script src="https://cdn.rawgit.com/samliew/webflow-bootstrap/master/webflow-bootstrap.js"></script>`
32 | 
33 | 2. Save and publish.
34 | 
35 | 
36 | ## Support
37 | 
38 | Please use the [issue tracker](https://github.com/samliew/webflow-bootstrap). Pull-requests welcome.


--------------------------------------------------------------------------------
/webflow-bootstrap.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * webflow-bootstrap - Webflow to Bootstrap convertor
  3 |  *
  4 |  * @author   Samuel Liew <samliew@gmail.com>
  5 |  * @license  MIT license
  6 |  * @version  1.0.0
  7 |  * @link     https://github.com/samliew/webflow-bootstrap
  8 |  */
  9 | 
 10 | /* global jQuery, $ */
 11 | 
 12 | var Webflow = Webflow || [];
 13 | Webflow.push(function() {
 14 |   
 15 |   // Helper functions
 16 |   function randNum() { return Math.floor(Math.random() * 999999) + 100000 };
 17 |   
 18 |   // Load Bootstrap stylesheet
 19 |   $('<link>').appendTo('head').attr({ type:'text/css', rel:'stylesheet', href:'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css'});
 20 |   
 21 |   // Convert Typography & Content
 22 |   $('.w-container').addClass('container').removeClass('w-container');
 23 |   $('blockquote').addClass('blockquote');
 24 |   $('table').addClass('table');
 25 |   $('.w-richtext-figure-type-image').addClass('figure').each(function() {
 26 |     $(this).find('img').addClass('figure-img img-fluid');
 27 |     $(this).find('figcaption').addClass('figure-caption').css('margin', 'auto');
 28 |   });
 29 |   
 30 |   // Convert Navigation
 31 |   $('.w-nav').each(function() {
 32 |     var navToggleId = 'navtt-' + randNum();
 33 |     $(this).children('.container').children().first().unwrap();
 34 |     $(this).find('.w-nav-brand').addClass('navbar-brand').removeClass('w-nav-brand');
 35 |     $(this).find('.w-nav-button').off().after('<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#'+navToggleId+'" />');
 36 |     $(this).find('.w-icon-nav-menu').addClass('navbar-toggler-icon').removeClass('w-icon-nav-menu').appendTo('.navbar-toggler');
 37 |     $(this).find('.w-nav-button').remove();
 38 |     $(this).find('.w-dropdown-toggle').off().addClass('nav-link dropdown-toggle').removeClass('w-dropdown-toggle').text((i,str) => str);
 39 |     $(this).find('.w-dropdown').each(function() {
 40 |       var randId = 'navdd-' + randNum();
 41 |       $('<li class="nav-item dropdown '+this.classList.value+'" />')
 42 |         .removeClass('w-dropdown')
 43 |         .attr('id', randId)
 44 |         .insertAfter($(this))
 45 |         .append($(this).children())
 46 |         .find('.dropdown-toggle').attr({
 47 |           'data-toggle': 'dropdown',
 48 |           'id': randId
 49 |         });
 50 |       $(this).remove();
 51 |     });
 52 |     $(this).find('.w-nav-menu').addClass('collapse navbar-collapse').removeClass('w-nav-menu').attr('id', navToggleId).appendTo(this);
 53 |     $(this).find('.w-nav-link').addClass('nav-link').removeClass('w-nav-link').attr('href', '#').wrap('<li class="nav-item" />');
 54 |     $(this).find('.nav-link.w--current').parent().addClass('active');
 55 |     $(this).find('.nav-item').wrapAll('<ul class="navbar-nav mr-auto" />');
 56 |     $(this).find('.w-nav-overlay').remove();
 57 |     $(this).off().addClass('navbar navbar-expand-lg navbar-light bg-light fixed-top').removeClass('w-nav');
 58 |   });
 59 |   
 60 |   // Convert all other dropdowns (not in w-nav)
 61 |   $('.w-dropdown-toggle').off().addClass('btn btn-secondary dropdown-toggle').removeClass('w-dropdown-toggle').text((i,str) => str);
 62 |   $('.w-dropdown').each(function() {
 63 |     var randId = 'dd-' + randNum();
 64 |     $('<div class="btn-group dropdown '+this.classList.value+'" />')
 65 |       .removeClass('w-dropdown')
 66 |       .attr('id', randId)
 67 |       .insertAfter($(this))
 68 |       .append($(this).children())
 69 |       .find('.dropdown-toggle').attr({
 70 |         'data-toggle': 'dropdown',
 71 |         'id': randId
 72 |       });
 73 |     $(this).remove();
 74 |   });
 75 |   $('.w-dropdown-list').addClass('dropdown-menu').removeClass('w-dropdown-list');
 76 |   $('.w-dropdown-link').addClass('dropdown-item').removeClass('w-dropdown-link');
 77 |   
 78 |   // Convert Forms
 79 |   $('.w-form-label').addClass('custom-control-label');
 80 |   $('label').not('.w-form-label').each(function() {
 81 |     var elems = $(this);
 82 |     var elem = $(this);
 83 |     while (elem.length) {
 84 |       elem = elem.next().not('label, button, input:submit, .form-group');
 85 |       elems = elems.add(elem);
 86 |     }
 87 |     elems.wrapAll('<div class="form-group" />')
 88 |   });
 89 |   $('.w-input').addClass('form-control').removeClass('w-input');
 90 |   $('.w-select').addClass('custom-select').removeClass('w-select');
 91 |   $('.w-checkbox').addClass('custom-control custom-checkbox').removeClass('w-checkbox');
 92 |   $('.w-radio').addClass('custom-control custom-radio').removeClass('w-radio');
 93 |   $('.w-checkbox-input, .w-radio-input').addClass('custom-control-input').removeClass('w-checkbox-input w-radio-input');
 94 |   $('.w-button').addClass('btn btn-primary').removeClass('w-button');
 95 |   $('.form-text').addClass('small');
 96 |   
 97 |   // Convert Tabs
 98 |   $('.w-tab-menu').addClass('nav nav-tabs').removeClass('w-tab-menu');
 99 |   $('.w-tab-link').off().addClass('nav-link').removeClass('w-tab-link').wrap('<div class="nav-item w-inline-block" />')
100 |   $('.nav-link.w--current').addClass('active');
101 |     
102 |   // Add tab click event
103 |   $('.nav-item').click(function() {
104 |     $(this).children().addClass('active w--current');
105 |     $(this).siblings().children().removeClass('active w--current');
106 |   });
107 |   
108 |   // Finally load the Bootstrap script
109 |   $.getScript("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js", 
110 |     function(data, textStatus, jqxhr){
111 |       console.info('Webflow to Bootstrap conversion completed. Info: https://github.com/samliew/webflow-bootstrap');
112 |     });
113 |   
114 | });
115 | // EOF
116 | 


--------------------------------------------------------------------------------