A powerful starting point for developing html5 templates on BootStrap, build on top of scffld - a tool that provides the environment for compiling superset of languages used in the template into ones that browser understands.
If you're here for the first time, I strongly recommend you skip the quickstart first and familiarize yourself with scffld-bs directory structure, using its' plugins and existing mixins.
Create a clean project directory, navigate to it in terminal and run the following command:
npm i scffld-bs
Clone this repository and then run
npm install from the Terminal.
You will get a prompt from
Scffld during installation process asking you to choose your build directory and css preprocessor. You can leave the default values by pressing enter, however it's important for
scffld-bs to have Sass selected for default CSS handling!
You're done! You can use one of many
scffld gulp tasks to build your template now, i.e.:
gulp serveto preview and watch for changes
gulp buildto compile production version
Check your system is setup to run
npm install -g gulp
Create na new clean project directory and go into it:
mkdir myproject && cd myproject
npm i scffld-bs.
Wait for the Scffld prompt to popup and select your build destination and
SASS for css.
After the process is finished, scffld will create a few files in your project root:
It will also add all gulp plugins into your package.json under devDependencies for autoloading and a config under
"scffld" key, on which the gulp tasks operate. You can modify it to your liking, but probbaly won't need to for this bootstrap package.
First! There's some rules you'll need to follow, but hey it's no rocket science. Scffld-bs has a predefined folder structure which is good to follow for the sake of sanity, but you can customize the build destinations for all resources (css, js, ...).
Template skeleton consists of three parts:
Pug files provide markup for pages, layots for diffrent kind of pages, mixins for bootstrap components and mixins for template components.
Layouts provide the basic markup skeleton with html head setup, website header and navigation and footer. They also include all the mixins that will make them available across all the pages.
Each pug file directly under
./src/ folder will be used to create a html page. This files extend layouts which wrap the page content with the html head, header and footer.
These mixins remove the static boilerplate for bootstrap components so you can focus directly on your custom markup. For example to create a bootstrap modal and a button to open it, instead of the relatively large html markup only three lines of code suffice:
button.btn(data-toggle="modal", data-target="#exampleModal") Open Modal!+modal("Modal title!", "exampleModal")p This is modal content
Explore their source code for usage, or example content for the use cases.
For every module you'll create in you page, setup mixins for the pug. This way you can later reuse them in your pages, and remove repetition, in turn you'll end up with easy maintainable code.
For example if you have an article markup and you need to use it multiple times you just inject it in your page:
each item in articles+article(item)+article(item)
If you want to load global data into your pug templates, you can add JSON/YAML files in
For example, add menu.json in
And it will be added to the
site.data object under the key of filename and it can be used like so:
Which outputs to:
Styles come packed with all the stylesheets from 3rd party libraries. The ones that provide a Sass source are required as such and can have their variables overwritten before the compilation proccess.
TIP: By tweaking the BS variables you can get very close to almost any design you'll need to implement with using nothing but bootstrap markup. This way you'll keep your code dry, won't pollute the global namespace with a bunch of custom classes and make it managable to any other developer that might come by.
Your starting point for writing global styles [fonts, colors, ...] should be in _app.scss. For any page specific styles or if your global styles get too big, i suggest you split them in parts, store them in
_styles/components/ folder and include them in your
These are included after global styles, and should be written at all times as standalone. Styles from modules should never change CSS outside of it's scope! They reside inside
_modules\modulName folders and you will create them as needed.
IMPORTANT: for every module you create, you need to include in
scffld-bs ships with some predefined mxins. The most useful ones are bootstrap BreakPoints and typography.
They follow the same logic as bootstrap classes - mobile first - and provide media queries on same widths. For example:
Typography - Font mixins
I urge you to use the
font-size() mixin to set font sizes across all styles that need responsive scaling. It will calculate a
rem unit for the font based on the base font size, and fonts will scale with the font size defined on the body.
Explore other mixins to see how to use them in your project.
There's a few modules packed in this skeleton that handle libraries and work out of the box, in a similar fashion as bootstrap components. All of them are triggered via html data-role attribute and you can use them without writing any JS.
Slick by default initializes a slider with display of one slide and slides for one element.
.my-slider(data-role="slick")img(src="..." alt="...")img(src="..." alt="...")img(src="..." alt="...")
Slick accepts also a few additional options:
data-dotswill add dot navigation to the slider.
data-arrowswill add left and right arrows to the slider.
data-show-xsdetermines how many slides to show on corresponding bootstrap breakpoints.
data-slide-xsdetermines how many slides to slide each time on corresponding bootstrap breakpoints. By default it's always one.
For example you want to slide some articles and have different number of slides on each breakpoints:
.article-slider(data-role="slick" data-dots data-show-lg="4" data-show-md="3" data-show-sm="2" data-show-xs="1")+article(...)+article(...)+article(...)+article(...)+article(...)
The default target type for popups is
image. You can change it in the
To trigger magnific popup on a link just add the data attribute to an anchor tag pointing to an image.
<nav> element with id and data attribute to the page and wrap your hamburger with an anchor pointing to the nav id:
All images in
src/_images will be optimized, reduced in files size and copied to your build folder in
Build process will also pick up fonts from slick, bootstrap and font-awesome and move them into
./fonts/ folder inside your build dir.
IMPORTANT Any other folder in
./src/ that is not prefixed with underscore ( _ ) will be simply copied into your build dir. So you never need to do anything in there, you always version only the source dir!
You build your template with gulp tasks provided by the sccfld:
gulp servewill build a unminified version of the template and boot up a developement server, that listens to changes in your source files and automaticaly updates them in the browser.
gulp buildcompiles a optimized and minified version of the template ready for production.
Check out a full list of available tasks on scffld repository
The MIT License (MIT). Please see License File for more information - © Matej Svajger