Skip to content
Bourbonpug is an opinionated template or boilerplate based on Bourbon and Jade you can use as a starter for small static multipage websites
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Bourbonpug logo


Bourbonpug is an opinionated template or boilerplate you can use as a starter for small static multipage websites. We included popular effects such as parallax images or sticky navigation, which you can of course use or not. As a core framework we used Bourbon, Neat, Bitters and Refills, which rely on JQuery for some dynamic behaviors.

Preprocessor and templating engine

Editing in HTML and CSS would be specially tough without a template engine and a CSS preprocessor. In this project we rely on Jade and SASS. Jade is now called Pug, so now you know where we made the project name up from. By using mixins, nesting & variables in CSS and dry syntax with partials for the HTML structure, productivity is greatly enhanced. Despite this belief, we've had a bad experience with workflow or dependency managers based on node.js (gulp, grunt, bower), and we can't use solutions based in Ruby, because Windows is not Ruby-friendly. Our best candidate for processing is Prepros, so we included the Prepros config file.

Jade is very helpful in drying the HTML syntax, but its real power arises when you use it as a templating language. In this project we've only used the partials feature, allowing us to write repetitive parts only once (header, footer). Slim is another cool templating language, which many consider still dryer than Jade, plus it uses Ruby (just like SASS). But the include plugin is a bit more confusing, so we decided to start with Jade. Later on we managed to solve the issues with Slim, and started a new version of this project called Bourbonslim, so now you can choose either language, although we plan to keep the Slim version ahead in upgrades.

CSS Maintainability

New in version 1.0.2 CSS maintainability is managed by layering all the SCSS in logical groups. After a first attempt to bring up a custom architecture to fit our needs (1.0.1), we decided to follow the ITCSS standard. SMACSS is more topological, meaning that it separates selectors and elements depending on their global or local location within the layout. This looked conceptually more intuitive at first, but we ended up having unclassed elements and classes mixed with mixins. ITCSS uses a more code-level logic, and separates classes in a top-down scheme, with increasing specificity and decreasing reach. While this may feel less intuitive and less design-related, it's also less confusing. However, its main advantage is it uses the same sequence and logic of the CSS cascading hierarchy.

In terms of naming conventions, and selector-level maintainability, since we're basically reusing existing components and resources, we decided not to tackle this issue, and leave all classes untouched. This is also important in the eventual case of upgrading part of the third party code. Moreover, we prefer keeping HTML as dry as possible, as semantic as possible (no classitis, no divitis), despite the widespread opinion that the best practice in CSS is to watch over specificity issues and to avoid tag selectors.

Installation & Usage


Use this method if you're okay with the template design as it is, or need minor local changes, and basically just need to customize contents. Simply download Bourbonpug, and ignore jade / scss folders. Go ahead and edit HTML contents and CSS styles with your preferred editor.

With preprocessing

If you need deeper changes, and want better control of the overall design, you should follow this method using Prepros, or port it to the workflow of your choice. Download Bourbonpug and drop the folder onto Prepros. Any changes made to Jade or SCSS documents will be processed into HTML/CSS.

Tools and resources used

You can’t perform that action at this time.