Bootstrap Template Another Way - BTAW
This setup is based on Modern Business template from Start Bootstrap using the following:
- Grunt
- Bower components
- Assemble
- handlebars
- less
- concat
- uglify
- fontawesome
With this configuration it provides a scaffold structure that can be simply combined to form a single web-page or a multi-page website.
Web page structure
A website page consists of four main areas:
The header
This is where the doctype, meta data and css files are located which is common to all pages.
The navigation
The navigation menu is common to all pages and can be easily changed to suit requirements.
The body
The main content which will be different on each page.
The footer
Contains the copyright information and the JavaScript links.
With assemble the four main areas of the website page can be combined together to form a single page that can used in conjunction with other pages to form a complete website. With blocks of code located in the partials folder web pages can be put together as required and features added such as the modal popup.
Using bower components
In the src/tasks/concat.js file the bower files are concatenated together into 'dist/assets/js/core.js' which is referenced in /src/templates/partials/b-footer.hbs file so that it is common to all pages. Any additional javascript files are added by modifying concat.js file.
Grunt tasks
These are in the directory 'src/tasks/' and called from the gruntfile.js located in the root directory.
Installation
Requirements
Have nodejs and grunt-cli
For files
git clone https://github.com/pacav69/btaw.git
After downloading the files from github run the following:
npm install
bower install
Usage
grunt
will run the default tasks
grunt serve
will run local server and monitor/watch any configured file changes and carry out the associated tasks and refresh the browser.
grunt assemble
will run assemble on parts of the webpages
Customizing
main.css
The main.css is created with a combination of less files
The custom.less file '/src/assets/less/main/layout/custom.less' imports colors from the palette.less '/src/assets/less/main/layout/palette.less' this will override the default color scheme.
To visually see the palette first goto paletton and choose the desired color scheme, then select 'tables/export' button from there select the 'color list as less' option it will open up a page with the Palette color codes just highlight and copy the text then paste into palette.less file and save.
Table Of Contents (TOC)
in the pages that are required in the table of contents this data is in each of the pages
---
title: Toc-Page1
icon: fa fa-clock-o
sortOrder: 0
styleName: default
topTitle: Docs
---
Breakdown of each of the parts
- title: Toc-Page1 This is the title that will appear in the TOC list
- icon: fa fa-clock-o This is the icon that will appear in the TOC list next to the title
- sortOrder: 0 This is the sort order of each page in the TOC, it should be a unique number
- styleName: default This is the style used
- topTitle: Docs This is the topictitle that will be used by the tocbs file
In the tocbs.hbs file
{{! find each file from pages collection where data.topTitle matches Docs, then sort in order according to the data.sortOrder parameter and add an icon according to the data.icon contained in each of the hbs files }}
<!-- .tochbs -->
{{#withSort pages "data.sortOrder"}}
{{#is data.topTitle "Docs"}}
<li {{#is ../../page.dest this.dest}} class="active"{{/is}}>
<a href="{{relative ../../page.dest this.dest}}"><span class="{{data.icon}}"> {{data.title}}</a>
</li>
{{/is}}
{{/withSort}}
<!-- ./tochbs -->
this file will go through each of the pages to select files that meet the criteria of 'data.topTitle "Docs"' then sort according to the sortorder and add the icon and title.
In the navbar add the following:
<li>
{{> tocbs}}
</li>
Directory structure of src
src
│───│
│ ├───assets
│ ├───css
│ ├───fonts
│ ├───img
│ ├───js
│ │ └───core
│ └───less
│ ├───error
│ └───main
│ └───layout
├───data
├───helper
├───mddocs
├───tasks
├───templates
│ ├───custom-helpers
│ ├───layouts
│ ├───pages
│ └───partials
│ └───snippets
│ └───lorem-ipsum
└───_appref
├───bin
├───css
├───font-awesome
│ ├───css
│ ├───fonts
│ ├───less
│ └───scss
├───fonts
├───images
└───js