Merge pull request #3 from sneas/custom-layout

Custom layout
sneas · Apr 4, 2017 · c03d30f · c03d30f
2 parents 14044fc + 98098c2
commit c03d30f
Show file tree

Hide file tree

Showing 73 changed files with 186 additions and 132 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ npm install component-library
 
 Create an empty folder in your projects's file system and fill it with HTML files (components). One HTML file per one component.
 
-See [demo/templates](demo/templates) as an example.
+See [demo/src/templates](demo/src/templates) as an example.
 
 ### Integration with build process
 
@@ -75,6 +75,50 @@ gulp.task('cl:watch', ['cl'], function() {
 });
 ```
 
+## FAQ
+### What if my project has a custom initialization logic in layout?
+Create you own layout file by copying minimum HTML required:
+
+```html
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+    {{ content | safe }}
+</body>
+</html>
+```
+
+Add your custom code to it. **NB:** You can add only the required code. All the CSS links and JS scripts will be added automatically.
+Add the `layout` param to the configuration object. Example:
+```javascript
+var componentLibrary = require('component-library');
+
+componentLibrary(
+    '/project/component-library/templates/dir',
+    '/project/public/component-library',
+    {
+        layout: '/project/component-library/your-layout.html',
+        baseUrl: '/component-library/',
+        favicon: {
+            href: '/project/favicon.ico',
+            rel: 'shortcut icon',
+            type: 'image/x-icon'
+        },
+        js: [
+            //List of your project's JS files goes here
+            '/project/js/file.js'
+        ],
+        css: [
+            //List of your project's CSS files goes here
+            '/project/css/file.css'
+        ]
+    }
+);
+```
+
+See [demo/src/layout.html](demo/src/layout.html) as an example.
+
 ## License
 
 (MIT License)

diff --git a/demo/gulpfile.js b/demo/gulpfile.js
@@ -19,9 +19,10 @@ gulp.task('assets', ['clean'], function() {
 });
 
 gulp.task('compile', ['assets'], function(cb) {
-    var templatesDir = path.join(__dirname, 'templates');
+    var templatesDir = path.join(__dirname, 'src/templates');
     componentLibrary(templatesDir, publicDir, {
         baseUrl: '/component-library/',
+        layout: path.join(__dirname, 'src/layout.html'),
         js: [
             'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
             'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js',
@@ -41,5 +42,5 @@ gulp.task('compile', ['assets'], function(cb) {
 });
 
 gulp.task('watch', ['compile'], function() {
-    gulp.watch(['templates/**/*', 'assets/**/*', '../dist/assemblers/views/**/*', '../sass/**/*', '../assets/**/*'], ['compile']);
+    gulp.watch(['src/**/*', 'assets/**/*', '../dist/assemblers/views/**/*', '../sass/**/*', '../assets/**/*'], ['compile']);
 });
diff --git a/demo/src/layout.html b/demo/src/layout.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+    <div class="container">
+        {{ content | safe }}
+    </div>
+</body>
+</html>
diff --git a/demo/src/templates/0.intro.html b/demo/src/templates/0.intro.html
@@ -0,0 +1,3 @@
+<p>
+    Demo library based on <a href="https://getbootstrap.com/">Bootstrap</a> CSS framework.
+</p>
diff --git a/...ates/1.foundation/1.Colors/1.palette.html → ...ates/1.foundation/1.Colors/1.palette.html b/...ates/1.foundation/1.Colors/1.palette.html → ...ates/1.foundation/1.Colors/1.palette.html
diff --git a/....foundation/1.Colors/3.color-classes.html → ....foundation/1.Colors/3.color-classes.html b/....foundation/1.Colors/3.color-classes.html → ....foundation/1.Colors/3.color-classes.html
diff --git a/...tion/1.Colors/4.background-utilities.html → ...tion/1.Colors/4.background-utilities.html b/...tion/1.Colors/4.background-utilities.html → ...tion/1.Colors/4.background-utilities.html
diff --git a/...ates/1.foundation/2.Grid/simple-grid.html → ...ates/1.foundation/2.Grid/simple-grid.html b/...ates/1.foundation/2.Grid/simple-grid.html → ...ates/1.foundation/2.Grid/simple-grid.html
diff --git a/demo/templates/1.foundation/Addresses.html → ...src/templates/1.foundation/Addresses.html b/demo/templates/1.foundation/Addresses.html → ...src/templates/1.foundation/Addresses.html
diff --git a/demo/templates/1.foundation/Alerts.html → demo/src/templates/1.foundation/Alerts.html b/demo/templates/1.foundation/Alerts.html → demo/src/templates/1.foundation/Alerts.html
diff --git a/demo/templates/1.foundation/Badges.html → demo/src/templates/1.foundation/Badges.html b/demo/templates/1.foundation/Badges.html → demo/src/templates/1.foundation/Badges.html
diff --git a/...mplates/1.foundation/Buttons/1.basic.html → ...mplates/1.foundation/Buttons/1.basic.html b/...mplates/1.foundation/Buttons/1.basic.html → ...mplates/1.foundation/Buttons/1.basic.html
diff --git a/...s/1.foundation/Buttons/button-groups.html → ...s/1.foundation/Buttons/button-groups.html b/...s/1.foundation/Buttons/button-groups.html → ...s/1.foundation/Buttons/button-groups.html
diff --git a/...lates/1.foundation/Buttons/justified.html → ...lates/1.foundation/Buttons/justified.html b/...lates/1.foundation/Buttons/justified.html → ...lates/1.foundation/Buttons/justified.html
diff --git a/...plates/1.foundation/Buttons/vertical.html → ...plates/1.foundation/Buttons/vertical.html b/...plates/1.foundation/Buttons/vertical.html → ...plates/1.foundation/Buttons/vertical.html
diff --git a/.../1.foundation/Buttons/with-dropdowns.html → .../1.foundation/Buttons/with-dropdowns.html b/.../1.foundation/Buttons/with-dropdowns.html → .../1.foundation/Buttons/with-dropdowns.html
diff --git a/...undation/Definition Lists/1.vertical.html → ...undation/Definition Lists/1.vertical.html b/...undation/Definition Lists/1.vertical.html → ...undation/Definition Lists/1.vertical.html
diff --git a/...dation/Definition Lists/2.horizontal.html → ...dation/Definition Lists/2.horizontal.html b/...dation/Definition Lists/2.horizontal.html → ...dation/Definition Lists/2.horizontal.html
diff --git a/demo/templates/1.foundation/Dropdowns.html → ...src/templates/1.foundation/Dropdowns.html b/demo/templates/1.foundation/Dropdowns.html → ...src/templates/1.foundation/Dropdowns.html
diff --git a/...s/1.foundation/Forms/1.basic-example.html → ...s/1.foundation/Forms/1.basic-example.html b/...s/1.foundation/Forms/1.basic-example.html → ...s/1.foundation/Forms/1.basic-example.html
diff --git a/...tes/1.foundation/Forms/2.inline-form.html → ...tes/1.foundation/Forms/2.inline-form.html b/...tes/1.foundation/Forms/2.inline-form.html → ...tes/1.foundation/Forms/2.inline-form.html
diff --git a/...1.foundation/Forms/3.horizontal-form.html → ...1.foundation/Forms/3.horizontal-form.html b/...1.foundation/Forms/3.horizontal-form.html → ...1.foundation/Forms/3.horizontal-form.html
diff --git a/demo/templates/1.foundation/Images.html → demo/src/templates/1.foundation/Images.html b/demo/templates/1.foundation/Images.html → demo/src/templates/1.foundation/Images.html
diff --git a/demo/templates/1.foundation/Labels.html → demo/src/templates/1.foundation/Labels.html b/demo/templates/1.foundation/Labels.html → demo/src/templates/1.foundation/Labels.html
diff --git a/demo/templates/1.foundation/Tables.html → demo/src/templates/1.foundation/Tables.html b/demo/templates/1.foundation/Tables.html → demo/src/templates/1.foundation/Tables.html
diff --git a/...1.foundation/Typography/1.blockquote.html → ...1.foundation/Typography/1.blockquote.html b/...1.foundation/Typography/1.blockquote.html → ...1.foundation/Typography/1.blockquote.html
diff --git a/...tion/Typography/2.blockquote-reverse.html → ...tion/Typography/2.blockquote-reverse.html b/...tion/Typography/2.blockquote-reverse.html → ...tion/Typography/2.blockquote-reverse.html
diff --git a/...dation/Typography/Emphasis/bold-text.html → ...dation/Typography/Emphasis/bold-text.html b/...dation/Typography/Emphasis/bold-text.html → ...dation/Typography/Emphasis/bold-text.html
diff --git a/...ion/Typography/Emphasis/italics-text.html → ...ion/Typography/Emphasis/italics-text.html b/...ion/Typography/Emphasis/italics-text.html → ...ion/Typography/Emphasis/italics-text.html
diff --git a/...ation/Typography/Emphasis/small-text.html → ...ation/Typography/Emphasis/small-text.html b/...ation/Typography/Emphasis/small-text.html → ...ation/Typography/Emphasis/small-text.html
diff --git a/...ndation/Typography/Lists/list-inline.html → ...ndation/Typography/Lists/list-inline.html b/...ndation/Typography/Lists/list-inline.html → ...ndation/Typography/Lists/list-inline.html
diff --git a/...dation/Typography/Lists/list-ordered.html → ...dation/Typography/Lists/list-ordered.html b/...dation/Typography/Lists/list-ordered.html → ...dation/Typography/Lists/list-ordered.html
diff --git a/...tion/Typography/Lists/list-unordered.html → ...tion/Typography/Lists/list-unordered.html b/...tion/Typography/Lists/list-unordered.html → ...tion/Typography/Lists/list-unordered.html
diff --git a/...ation/Typography/Lists/list-unstyled.html → ...ation/Typography/Lists/list-unstyled.html b/...ation/Typography/Lists/list-unstyled.html → ...ation/Typography/Lists/list-unstyled.html
diff --git a/...es/1.foundation/Typography/body-copy.html → ...es/1.foundation/Typography/body-copy.html b/...es/1.foundation/Typography/body-copy.html → ...es/1.foundation/Typography/body-copy.html
diff --git a/...tes/1.foundation/Typography/headings.html → ...tes/1.foundation/Typography/headings.html b/...tes/1.foundation/Typography/headings.html → ...tes/1.foundation/Typography/headings.html
diff --git a/...es/1.foundation/Typography/lead-copy.html → ...es/1.foundation/Typography/lead-copy.html b/...es/1.foundation/Typography/lead-copy.html → ...es/1.foundation/Typography/lead-copy.html
diff --git a/...plates/1.foundation/Typography/links.html → ...plates/1.foundation/Typography/links.html b/...plates/1.foundation/Typography/links.html → ...plates/1.foundation/Typography/links.html
diff --git a/...foundation/Typography/text-alignment.html → ...foundation/Typography/text-alignment.html b/...foundation/Typography/text-alignment.html → ...foundation/Typography/text-alignment.html
diff --git a/demo/templates/1.foundation/Well.html → demo/src/templates/1.foundation/Well.html b/demo/templates/1.foundation/Well.html → demo/src/templates/1.foundation/Well.html
diff --git a/demo/templates/1.foundation/icons.html → demo/src/templates/1.foundation/icons.html b/demo/templates/1.foundation/icons.html → demo/src/templates/1.foundation/icons.html
diff --git a/...s/2.components/Media Objects/default.html → ...s/2.components/Media Objects/default.html b/...s/2.components/Media Objects/default.html → ...s/2.components/Media Objects/default.html
diff --git a/...ates/2.components/Media Objects/list.html → ...ates/2.components/Media Objects/list.html b/...ates/2.components/Media Objects/list.html → ...ates/2.components/Media Objects/list.html
diff --git a/...tes/2.components/Navigation/1.Navbar.html → ...tes/2.components/Navigation/1.Navbar.html b/...tes/2.components/Navigation/1.Navbar.html → ...tes/2.components/Navigation/1.Navbar.html
diff --git a/...lates/2.components/Navigation/2.Tabs.html → ...lates/2.components/Navigation/2.Tabs.html b/...lates/2.components/Navigation/2.Tabs.html → ...lates/2.components/Navigation/2.Tabs.html
diff --git a/...mponents/Navigation/3.Justified-Tabs.html → ...mponents/Navigation/3.Justified-Tabs.html b/...mponents/Navigation/3.Justified-Tabs.html → ...mponents/Navigation/3.Justified-Tabs.html
diff --git a/...ates/2.components/Navigation/4.Pills.html → ...ates/2.components/Navigation/4.Pills.html b/...ates/2.components/Navigation/4.Pills.html → ...ates/2.components/Navigation/4.Pills.html
diff --git a/...omponents/Navigation/5.Stacked-Pills.html → ...omponents/Navigation/5.Stacked-Pills.html b/...omponents/Navigation/5.Stacked-Pills.html → ...omponents/Navigation/5.Stacked-Pills.html
diff --git a/...omponents/Navigation/6.Dropdown-Tabs.html → ...omponents/Navigation/6.Dropdown-Tabs.html b/...omponents/Navigation/6.Dropdown-Tabs.html → ...omponents/Navigation/6.Dropdown-Tabs.html
diff --git a/...es/2.components/Pagination/1.default.html → ...es/2.components/Pagination/1.default.html b/...es/2.components/Pagination/1.default.html → ...es/2.components/Pagination/1.default.html
diff --git a/...ates/2.components/Pagination/2.large.html → ...ates/2.components/Pagination/2.large.html b/...ates/2.components/Pagination/2.large.html → ...ates/2.components/Pagination/2.large.html
diff --git a/...ates/2.components/Pagination/3.small.html → ...ates/2.components/Pagination/3.small.html b/...ates/2.components/Pagination/3.small.html → ...ates/2.components/Pagination/3.small.html
diff --git a/demo/templates/2.components/breadcrumbs.html → ...c/templates/2.components/breadcrumbs.html b/demo/templates/2.components/breadcrumbs.html → ...c/templates/2.components/breadcrumbs.html
diff --git a/demo/templates/2.components/list-groups.html → ...c/templates/2.components/list-groups.html b/demo/templates/2.components/list-groups.html → ...c/templates/2.components/list-groups.html
diff --git a/demo/templates/2.components/pager.html → demo/src/templates/2.components/pager.html b/demo/templates/2.components/pager.html → demo/src/templates/2.components/pager.html
diff --git a/...templates/2.components/progress-bars.html → ...templates/2.components/progress-bars.html b/...templates/2.components/progress-bars.html → ...templates/2.components/progress-bars.html
diff --git a/demo/templates/2.components/thumbnails.html → ...rc/templates/2.components/thumbnails.html b/demo/templates/2.components/thumbnails.html → ...rc/templates/2.components/thumbnails.html
diff --git a/demo/templates/0.intro.html b/demo/templates/0.intro.html
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "publish-demo": "gh-pages -d demo/public/component-library"
   },
   "dependencies": {
-    "bootstrap-sass-namespace": "3.3.7-alpha.3",
+    "bootstrap-sass-namespace": "3.3.7-alpha.5",
+    "cheerio": "^0.22.0",
     "directory-tree": "^1.0.0",
     "font-awesome": "^4.6.3",
     "gulp": "^3.9.1",
@@ -39,7 +40,7 @@
     "node-modules-resolve": "^1.3.0",
     "npm-sass": "^1.3.0",
     "nunjucks": "3.0.0",
-    "smartmenus-namespace": "1.0.1-alpha.4",
+    "smartmenus-namespace": "1.0.1-alpha.5",
     "writefile": "^0.2.8"
   },
   "devDependencies": {

diff --git a/sass/_layout.scss b/sass/_layout.scss
diff --git a/sass/bootstrap/_theme.scss b/sass/bootstrap/_theme.scss
@@ -2,8 +2,8 @@
     background-image: none;
 }
 
-.#{$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 {
+.#{$class-prefix}-dropdown-menu > .#{$class-prefix}-html-li > .#{$class-prefix}-html-a:hover,
+.#{$class-prefix}-dropdown-menu > .#{$class-prefix}-html-li > .#{$class-prefix}-html-a:focus {
     background-image: none;
     outline: none;
 }
@@ -24,11 +24,15 @@
     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 {
+.#{$class-prefix}-nav .#{$class-prefix}-open > .#{$class-prefix}-html-a,
+.#{$class-prefix}-nav .#{$class-prefix}-open > .#{$class-prefix}-html-a:hover,
+.#{$class-prefix}-nav .#{$class-prefix}-open > .#{$class-prefix}-html-a:focus {
     @media (max-width: $grid-float-breakpoint) {
         background-color: transparent;
         border-color: transparent;
     }
+}
+
+.cl-navbar-placeholder {
+    min-height: $navbar-height;
 }
diff --git a/sass/cl.scss b/sass/cl.scss
@@ -1,4 +1,3 @@
 @import "init";
-@import "layout";
 @import "tree";
 @import "components";
diff --git a/src/assemblers/__tests__/templates.test.js b/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.cl-bs-tag-h1').text().trim()).to.be.equal('Overview');
+            expect($('.cl-node-header.cl-bs-html-h1').text().trim()).to.be.equal('Overview');
             done();
         });
     });

diff --git a/src/assemblers/templates.js b/src/assemblers/templates.js
@@ -5,6 +5,7 @@ import path from 'path';
 import writefile from 'writefile';
 import nunjucks from 'nunjucks';
 import hljs from 'highlight.js';
+import cheerio from 'cheerio';
 
 function refineTree(item, rootDir) {
     //Remove firsts numbers and extensions
@@ -34,22 +35,49 @@ function compileTree(item, outputDir, tree, options = {}) {
 
     renderers.push(
         new Promise(function(resolve, reject) {
-            nunjucks.render(
-                'page.njk',
-                _.extend({}, options, {
-                    tree: tree,
-                    current: item
-                }),
-                function(err, res) {
-                    if (err) {
-                        reject(err);
-                    }
-
-                    writefile(outputPath, res, function() {
-                        resolve();
-                    });
-                }
-            );
+            const params = _.extend({}, options, {
+                tree: tree,
+                current: item
+            });
+
+            const navigationHtml = nunjucks.render('navigation.njk', params);
+            const contentHtml = nunjucks.render('content.njk', params);
+            const layoutHtml = nunjucks.render(options.layout, {content: contentHtml});
+
+            const $ = cheerio.load(layoutHtml);
+            const head = $('head');
+            const body = $('body');
+
+            head.prepend(nunjucks.render('css.njk', params));
+
+            if (head.find('title').length === 0) {
+                head.prepend($('<title></title>').text(options.title));
+            }
+
+            _.forEach(options.css, function(cssLink) {
+                head.append($('<link rel="stylesheet">').attr('href', cssLink));
+            });
+
+            if (head.find('meta[charset]').length === 0) {
+                head.prepend('<meta charset="utf-8">');
+            }
+
+            if (head.find('link[rel=icon]').length === 0) {
+                head.append($('<link />').attr('href', options.favicon.href)
+                    .attr('rel', options.favicon.rel)
+                    .attr('type', options.favicon.type));
+            }
+
+            body.prepend(navigationHtml);
+            body.append(nunjucks.render('js.njk', params));
+
+            _.forEach(options.js, function(jsLink) {
+                body.append($('<script></script>').attr('src', jsLink));
+            });
+
+            writefile(outputPath, $.html(), function() {
+                resolve();
+            });
         })
     );
 
@@ -62,14 +90,15 @@ export default function(inputDir, outputDir, options = {}) {
         title: 'Component Library',
         js: [],
         css: [],
+        layout: path.join(__dirname, 'views/layout.njk'),
         favicon: {
             href: options.baseUrl + 'assets_/assets/favicons/favicon-32x32.png',
             rel: 'icon',
             type: 'image/component-library/favicons/png'
         }
     });
 
-    (new nunjucks.configure(path.resolve(__dirname, 'views')))
+    (new nunjucks.configure([path.join(__dirname, 'views'), '']))
         .addFilter('template', path => fs.readFileSync(path).toString())
         .addFilter('highlight', code => hljs.highlight('htmlbars', code, true, false).value);
 

diff --git a/src/assemblers/views/content.njk b/src/assemblers/views/content.njk
@@ -0,0 +1,2 @@
+{% from 'macro/element-tree.njk' import elementTree %}
+{{ elementTree(current, 1, baseUrl) }}
diff --git a/src/assemblers/views/css.njk b/src/assemblers/views/css.njk
@@ -0,0 +1 @@
+<link href="{{ baseUrl + 'assets_/css/cl.css' }}" rel="stylesheet">
diff --git a/src/assemblers/views/js.njk b/src/assemblers/views/js.njk
@@ -0,0 +1,9 @@
+<script>
+    BOOTSTRAP_NAMESPACE = 'cl-bs';
+</script>
+
+<script src="{{ baseUrl + 'assets_/jquery/jquery.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/smartmenus-namespace/jquery.smartmenus.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/smartmenus-namespace/addons/bootstrap/jquery.smartmenus.bootstrap.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/assets/js/cl.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/bootstrap-namespace/dropdown.js' }}"></script>
diff --git a/src/assemblers/views/layout.njk b/src/assemblers/views/layout.njk
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+    {{ content | safe }}
+</body>
+</html>
diff --git a/src/assemblers/views/macro/element-tree.njk b/src/assemblers/views/macro/element-tree.njk
@@ -1,8 +1,8 @@
 {% macro elementTree(element, depth, baseUrl) %}
     <div class="cl-node cl-node-level-{{ depth }}{{ 'cl-node-template' if not element.children }}" id="{{ baseUrl + element.relativePath }}">
-        <div class="cl-bs-tag-html">
-            <div class="cl-bs-tag-body">
-                <div class="cl-node-header cl-bs-tag-h{{ depth }}">
+        <div class="cl-bs-html-html">
+            <div class="cl-bs-html-body">
+                <div class="cl-node-header cl-bs-html-h{{ depth }}">
                     {{ element.name }}
                     <a href="{{ baseUrl + element.relativePath }}" class="cl-node-header-link">
                         <i class="cl-fa cl-fa-paragraph"></i>
@@ -20,13 +20,13 @@
             <div class="cl-node-template-preview">
                 {{ element.path | template | safe }}
             </div>
-            <div class="cl cl-bs-tag-html">
-                <div class="cl-bs-tag-body">
+            <div class="cl cl-bs-html-html">
+                <div class="cl-bs-html-body">
                     <div class="cl-node-temaplate-code cl-js-template-code">
-                        <button class="cl-bs-tag-button cl-bs-btn cl-bs-btn-default cl-bs-btn-xs cl-js-template-code-toggle">
+                        <button class="cl-bs-html-button cl-bs-btn cl-bs-btn-default cl-bs-btn-xs cl-js-template-code-toggle">
                             <i class="cl-fa cl-fa-code"></i>
                         </button>
-                        <pre class="cl-bs-tag-pre cl-node-template-code-content cl-js-template-code-content"><code class="html">{{ element.path | template | highlight | safe }}</code></pre>
+                        <pre class="cl-bs-html-pre cl-node-template-code-content cl-js-template-code-content"><code class="html">{{ element.path | template | highlight | safe }}</code></pre>
                     </div>
                 </div>
             </div>

diff --git a/src/assemblers/views/macro/navigation.njk b/src/assemblers/views/macro/navigation.njk
@@ -1,14 +1,14 @@
 {% macro navigation(tree, baseUrl, current) %}
-    <li class="cl-bs-tag-li">
-        <a class="cl-bs-tag-a" href="{{ baseUrl + 'index.html#' + baseUrl + tree.relativePath }}">
+    <li class="cl-bs-html-li">
+        <a class="cl-bs-html-a" href="{{ baseUrl + 'index.html#' + baseUrl + tree.relativePath }}">
             {{ tree.name }}
 
             {% if tree.children %}
                 <span class="cl-bs-caret"></span>
             {% endif %}
         </a>
         {% if tree.children %}
-            <ul class="cl-bs-tag-ul cl-bs-dropdown-menu">
+            <ul class="cl-bs-html-ul cl-bs-dropdown-menu">
                 {% for child in tree.children %}
                     {{ navigation(child, baseUrl, current) }}
                 {% endfor %}

diff --git a/src/assemblers/views/macro/search-tree.njk b/src/assemblers/views/macro/search-tree.njk
@@ -1,6 +1,6 @@
 {% macro searchTree(tree, baseUrl) %}
-    <li class="cl-bs-tag-li">
-        <a class="cl-bs-tag-a" href="{{ baseUrl + 'index.html#' + baseUrl + tree.relativePath }}">
+    <li class="cl-bs-html-li">
+        <a class="cl-bs-html-a" href="{{ baseUrl + 'index.html#' + baseUrl + tree.relativePath }}">
             {{ tree.name }}
         </a>
     </li>

diff --git a/src/assemblers/views/navigation.njk b/src/assemblers/views/navigation.njk
@@ -0,0 +1,36 @@
+{% from 'macro/navigation.njk' import navigation %}
+{% from 'macro/search-tree.njk' import searchTree %}
+<div class="cl-bs-html-html">
+    <div class="cl-bs-html-body">
+        <div class="cl-bs-navbar cl-bs-navbar-inverse cl-bs-navbar-fixed-top" role="navigation">
+            <div class="cl-bs-container">
+                <div class="cl-bs-navbar-header">
+                    <button type="button" class="cl-bs-navbar-toggle cl-bs-html-button cl-navigation-toggle">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="cl-bs-icon-bar"></span>
+                        <span class="cl-bs-icon-bar"></span>
+                        <span class="cl-bs-icon-bar"></span>
+                    </button>
+                </div>
+                <div class="cl-bs-navbar-collapse cl-bs-collapse cl-navigation-collapse">
+                    <ul class="cl-bs-html-ul cl-bs-nav cl-bs-navbar-nav">
+                        {% for child in tree.children %}
+                            {{ navigation(child, baseUrl, current) }}
+                        {% endfor %}
+                    </ul>
+
+                    <div class="cl-bs-navbar-form cl-bs-pull-right cl-bs-hidden-xs">
+                        <div class="cl-bs-dropdown">
+                            <input type="text" class="cl-bs-html-input cl-bs-form-control cl-bs-form-control-sm" placeholder="Search" id="cl-search">
+                            <ul class="cl-bs-dropdown-menu">
+                                {{ searchTree(tree, baseUrl) }}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="cl-navbar-placeholder"></div>
+    </div>
+</div>