Merge pull request #2 from sneas/bootstrap-prefix

fix: Prefix bootstrap classes to prevent collisions with users's CSS/JS

assets/js/cl.js

@@ -8,7 +8,7 @@
 
     function toggle() {
         collapsible.slideToggle('fast', function() {
-            collapsible.toggleClass('in');
+            collapsible.toggleClass('cl-bs-in');
         });
     }
 
@@ -21,11 +21,11 @@
             return;
         }
 
-        if ($(e.target).is('.navbar-toggle')) {
+        if ($(e.target).is('.cl-bs-navbar-toggle')) {
             return;
         }
 
-        if ($(this).is('.has-submenu.highlighted') || !$(this).is('.has-submenu')) {
+        if ($(this).is('.cl-bs-has-submenu.cl-bs-highlighted') || !$(this).is('cl-bs-.has-submenu')) {
             toggle();
         }
     });
@@ -37,8 +37,8 @@
  */
 (function($) {
     var input = $('#cl-search');
-    var wrapper = input.parents('.dropdown:first');
-    var dropdown = wrapper.find('.dropdown-menu');
+    var wrapper = input.parents('.cl-bs-dropdown:first');
+    var dropdown = wrapper.find('.cl-bs-dropdown-menu');
     var likelyIn = 0;
     var outTimeout = false;
     var upStrikesOnFirstItem = 0;
@@ -53,7 +53,7 @@
         outTimeout = setTimeout(function() {
             outTimeout = false;
             if (likelyIn <= 0) {
-                wrapper.removeClass('open');
+                wrapper.removeClass('cl-bs-open');
                 likelyIn = 0;
             } else {
                 showWhenNeeded();
@@ -69,14 +69,14 @@
     input.keyup(function(event) {
         // Arrow down pressed
         if (event.keyCode === 40) {
-            dropdown.find('li:not(.hidden):first a').focus();
+            dropdown.find('li:not(.cl-bs-hidden):first a').focus();
             upStrikesOnFirstItem = 1;
             return;
         }
 
         var searchString = input.val().toLowerCase();
         dropdown.find('li').each(function() {
-            $(this).toggleClass('hidden', $(this).text().toLowerCase().indexOf(searchString) === -1);
+            $(this).toggleClass('cl-bs-hidden', $(this).text().toLowerCase().indexOf(searchString) === -1);
         });
 
         showWhenNeeded();
@@ -103,10 +103,10 @@
     });
 
     function showWhenNeeded() {
-        if (input.val().length === 0 || dropdown.find('li:not(.hidden)').length === 0) {
-            wrapper.removeClass('open');
+        if (input.val().length === 0 || dropdown.find('li:not(.cl-bs-hidden)').length === 0) {
+            wrapper.removeClass('cl-bs-open');
         } else {
-            wrapper.addClass('open');
+            wrapper.addClass('cl-bs-open');
         }
     }
 })(jQuery);

demo/templates/0.intro.html

@@ -1,3 +1,3 @@
 <p>
-    Demo library based on <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework.
+    Demo library based on <a href="//getbootstrap.com/">Bootstrap</a> CSS framework.
 </p>

demo/templates/1.foundation/Images.html

@@ -1,7 +1,7 @@
 <p>
-    <img src="http://placehold.it/120x120" class="img-rounded">
-    <img src="http://placehold.it/120x120" class="img-circle">
-    <img src="http://placehold.it/120x120" class="img-thumbnail">
+    <img src="//placehold.it/120x120" class="img-rounded">
+    <img src="//placehold.it/120x120" class="img-circle">
+    <img src="//placehold.it/120x120" class="img-thumbnail">
 </p>
 <p>
-<img src="http://placehold.it/1200x300" class="img-responsive"/>
+<img src="//placehold.it/1200x300" class="img-responsive"/>

demo/templates/2.components/Media Objects/default.html

@@ -1,6 +1,6 @@
 <div class="media">
     <a class="pull-left" href="#">
-        <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+        <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
     </a>
     <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
@@ -11,7 +11,7 @@ <h4 class="media-heading">Media heading</h4>
 </div>
 <div class="media">
     <a class="pull-left" href="#">
-        <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+        <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
     </a>
     <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
@@ -20,7 +20,7 @@ <h4 class="media-heading">Media heading</h4>
         Donec lacinia congue felis in faucibus.
         <div class="media">
             <a class="pull-left" href="#">
-                <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+                <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
             </a>
             <div class="media-body">
                 <h4 class="media-heading">Nested media heading</h4>

demo/templates/2.components/Media Objects/list.html

@@ -1,23 +1,23 @@
 <ul class="media-list">
     <li class="media">
         <a class="pull-left" href="#">
-            <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+            <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
         </a>
         <div class="media-body">
             <h4 class="media-heading">Media heading</h4>
             <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                 purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
             <div class="media">
                 <a class="pull-left" href="#">
-                    <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+                    <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
                 </a>
                 <div class="media-body">
                     <h4 class="media-heading">Nested media heading</h4>
                     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                     Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                     <div class="media">
                         <a class="pull-left" href="#">
-                            <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+                            <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
                         </a>
                         <div class="media-body">
                             <h4 class="media-heading">Nested media heading</h4>
@@ -29,7 +29,7 @@ <h4 class="media-heading">Nested media heading</h4>
             </div>
             <div class="media">
                 <a class="pull-left" href="#">
-                    <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+                    <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
                 </a>
                 <div class="media-body">
                     <h4 class="media-heading">Nested media heading</h4>
@@ -41,7 +41,7 @@ <h4 class="media-heading">Nested media heading</h4>
     </li>
     <li class="media">
         <a class="pull-right" href="#">
-            <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
+            <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
         </a>
         <div class="media-body">
             <h4 class="media-heading">Media heading</h4>

package.json

@@ -29,16 +29,17 @@
     "publish-demo": "gh-pages -d demo/public/component-library"
   },
   "dependencies": {
-    "bootstrap-sass": "^3.3.7",
+    "bootstrap-sass-namespace": "3.3.7-alpha.3",
     "directory-tree": "^1.0.0",
     "font-awesome": "^4.6.3",
     "gulp": "^3.9.1",
     "highlight.js": "9.9.0",
+    "jquery": "^3.2.1",
     "lodash": "^4.13.1",
     "node-modules-resolve": "^1.3.0",
     "npm-sass": "^1.3.0",
     "nunjucks": "3.0.0",
-    "smartmenus": "1.0.0",
+    "smartmenus-namespace": "1.0.1-alpha.4",
     "writefile": "^0.2.8"
   },
   "devDependencies": {

sass/_init.scss

@@ -0,0 +1,17 @@
+// Initialize Bootstrap
+@import "bootstrap/variables";
+@import "bootstrap-sass-namespace/assets/stylesheets/_bootstrap.scss";
+@import "bootstrap/theme";
+
+// Initialize highlight.js
+.cl {
+    @import "highlight.js/styles/github";
+}
+
+// Initialize Smartmenus
+@import "smartmenus-namespace/dist/addons/bootstrap/jquery.smartmenus.bootstrap";
+
+// Initialize Font Awesome
+$fa-font-path:        "../fonts" !default;
+$fa-css-prefix:       cl-fa !default;
+@import "font-awesome/scss/font-awesome";

sass/_layout.scss

@@ -1,7 +1,3 @@
-@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
-@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix";
-@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/grid";
-
 .cl-content-wrapper {
     padding-top: $navbar-height;
 }

sass/_tree.scss

@@ -1,5 +1,3 @@
-@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
-
 .cl-node {
     $anchor-offset: $navbar-height + 50px;
 

sass/bootstrap/_theme.scss

@@ -1,23 +1,34 @@
-.navbar-inverse {
+.#{$class-prefix}-navbar-inverse {
     background-image: none;
 }
 
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
+.#{$class-prefix}-dropdown-menu > .#{$class-prefix}-tag-li > .#{$class-prefix}-tag-a:hover,
+.#{$class-prefix}-dropdown-menu > .#{$class-prefix}-tag-li > .#{$class-prefix}-tag-a:focus {
     background-image: none;
     outline: none;
 }
 
-.navbar-toggle {
+.#{$class-prefix}-navbar-toggle {
     @include navbar-vertical-align(30px);
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
-.navbar-nav {
+.#{$class-prefix}-navbar-nav {
     @media (min-width: $grid-float-breakpoint) {
         margin-left: -30px;
     }
 }
 
-.navbar-form {
+.#{$class-prefix}-navbar-form {
     padding-right: 0px;
+}
+
+.#{$class-prefix}-nav .#{$class-prefix}-open > .#{$class-prefix}-tag-a,
+.#{$class-prefix}-nav .#{$class-prefix}-open > .#{$class-prefix}-tag-a:hover,
+.#{$class-prefix}-nav .#{$class-prefix}-open > .#{$class-prefix}-tag-a:focus {
+    @media (max-width: $grid-float-breakpoint) {
+        background-color: transparent;
+        border-color: transparent;
+    }
 }

sass/bootstrap/_variables.scss

@@ -0,0 +1,7 @@
+$border-radius-base: 0px;
+$navbar-inverse-bg: #333333;
+$padding-base-vertical: 0px;
+$navbar-padding-vertical: 5px;
+$navbar-height: 30px;
+$class-prefix: cl-bs;
+@import "bootstrap-sass-namespace/assets/stylesheets/bootstrap/_variables.scss";

sass/cl.scss

@@ -1,7 +1,4 @@
-@import "type";
+@import "init";
 @import "layout";
-@import "navigation";
 @import "tree";
-@import "components";
-@import "icons";
-@import "grid";
+@import "components";

sass/components/_icon-list.scss

@@ -1,6 +1,3 @@
-@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
-@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss";
-
 .cl-icon-list {
     list-style: none;
     padding: 0;

sass/components/_palette.scss

@@ -1,5 +1,3 @@
-@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
-
 $color-border-radius: 5px !default;
 
 .cl-palette {

src/assemblers/__tests__/templates.test.js

@@ -19,7 +19,7 @@ describe('templates assembler', function() {
             const $ = cheerio.load(fs.readFileSync(overviewFile, 'utf8'), {
                 normalizeWhitespace: true
             });
-            expect($('.cl-node-header.h1').text().trim()).to.be.equal('Overview');
+            expect($('.cl-node-header.cl-bs-tag-h1').text().trim()).to.be.equal('Overview');
             done();
         });
     });

src/assemblers/templates.js

@@ -63,7 +63,7 @@ export default function(inputDir, outputDir, options = {}) {
         js: [],
         css: [],
         favicon: {
-            href: options.baseUrl + 'assets/favicons/favicon-32x32.png',
+            href: options.baseUrl + '_assets/assets/favicons/favicon-32x32.png',
             rel: 'icon',
             type: 'image/component-library/favicons/png'
         }