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.
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.
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.
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.
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.
- Prepros by Subash Pathak for SASS / Jade preprocessing.
- Initializr by Jonathan Verrecchia for the boilerplate essentials. Including HTML5 Boilerplate v5.0 by the H5BP Team.
- Bourbon - Thanks to the design team at Thoughtbot for the Bourbon ecosystem.
- Bourbon v5.0.0 b7 - SASS mixins for fast prototyping.
- Neat v1.8.0 - Semantic grid for use with Bourbon. Must use v. 1.8.0 (refills will not work with Neat v2).
- Bitters v1.5.0 - base SASS variable set.
- Refills - Patterns and components (requires Bourbon + Neat). Used: cards, navigation, type system, footer.
- JQuery v3.2.1 by John Resig and the JQuery Foundation - JQuery plugins:
- Parallax.js v1.4.2 by PixelCog Inc. for the parallax effect.
- Sticky.js v1.0.4 by Anthony Garand for the sticky navigation bar.
- Web resources:
- HTML 2 Jade for the HTML > Jade(Pug) translation.
- Lorempixel for the placeholder images.
- LatLong for the map coordinate calculation.
- W3 Schools for the social icon procedure.