Kick off your style guide . . .
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
pug v1.1.1 Nov 4, 2017
LICENSE v1.1.1 Nov 4, 2017
index.html v1.1.1 Nov 4, 2017

Atomic Boot Pug


Sorry, I couldn't resist the name. No actual pugs were booted in the making of this repository!

Inspired by Brad Frost's Atomic Design, Atomic Boot Pug is comprised of a set of Bootstrap 4 demo snippets (tranformed into Pug mixins) – essentially as coped from You will find these in the pug/bootstrap-4/ folder.

The style guide sections (wrapping the Bootstrap demos and adding a header and a place for your notes) are in the pug/styleguide/ folder.

In addition to the demos you see in index.html, many more mixins can be found on the Pug partials in the pug/bootstrap-4/ folder. Swap them into your style guide any way you need. And feel totally free to modify the Bootstrap 4 Pugs to make them more relevant for your own style guide.

Create new sections/ partials/ mixins for demos of your added CSS, scripts and plugins that you are including in your project.

Also, create your own webpage partials and templates. For rapid prototyping, you may temporarily include some of the Bootstrap Pug snippets before duplicating and swapping in your own actual content.



Kick off your project with Atomic Boot Pug -- and then make your website look less like Bootstrap!