Hello Front End Devs
Why now this?
I use the HTML5 Boilerplate for nearly every front end project as a quick and simple starting point. Adding the SMACSS (BEM will follow in v1.1) methodology to my own front end mojo and to this personalised boilerplate, I started a while ago, truly boosted my development. Timewise and codewise. If this boilerplate is as helpful to you as it is to me … Hooray :-)
How to …
Basically just download or fork this repo and start writing down your code! Edit all your html files and stylings in the
_source folder and compile them. Jade and Sass will need some ‘magic’ help to compile their files, everything else works nicely out of the box.
Install & watch via the command line
Install Jade via npm
npm install jade
and Sass via Ruby Gems
gem install sass
Watch the files you are working with in the
_source folder and compile them into
_site. More on the folders in a second.
Install & watch via there’s an app for that
If you and your command line are not the best friends (yet) and your are asking yourself: Is there an app for that? The answer is YES, more than one ;-) There are quite a few good apps on the web that help you with all the compiling mumbo-jumbo. My favourite one is CodeKit as it does a lot more than compiling files and I use it on most front end projects. Give it a try, it comes with a 15 days trial.
Intention & usage of the folder structure
There are basically two folders. The
_source folder is the home to the Jade and Sass files. HTML5 Boilerplate’s html and CSS files are inside as a starting point.
/_source/ |-- _jade # The Jade template files to edit | |-- 404.html # HTML5 Boilerplate’s 404 page, Jade styled | `-- index.html # HTML5 Boilerplate’s index file, Jade styled |-- _sass # The mighty SMACSS adapted directory | |-- 1-tools # External resources like Normalize.css and Bourbon | |-- 2-base # Fundamental defauls for your site | |-- 3-layouts # Sections of your pages like header and footer | |-- 4-modules # Reusable modules like call to actions | |-- 5-states # Actives and other states | |-- 6-pages # Page style, the classy theming way | |-- 7-utilities # Utilities needed | |-- 8-development # Temporary development hacks | `-- style.sass # One to import them all, one to compile `-- icons.sketch # Template for your system icons
_site folder is the output I use for the compiled files. This folder is the root that gets deployed later.
_site already contains some basic and compiled files, mainly from HTML5 Boilerplate:
SpH5B is based on and includes the resources listed below. Version numbers indicate the current version used for SpH5B. Thanks to all the fine people who made these great resources!
- Bourbon v4.2.2: a lightweight mixin library for your Sass
- HTML5 Boilperplate v5.3.0: the core as you might have guessed
- jQuery v1.11.3: everybody knows jQuery, right?
- Modernizr v2.8.3: detect HTML5 and CSS3 features and style them
- Normalize.css v3.0.2: HTML5-ready CSS reset
Languages / Syntaxes
- Jade: a high performance node template engine
- Sass: one of the most known and mature CSS preprocessors
- SMACSS is a style guide based CSS library that helps you to structure your CSS files and folders in a logic, scalable and brilliant manner supporting your development, workflow and maintance. If you’re a front end coder you really have to get Jonathan Snook’s book. You will love it!
Version 1.1 (23/01/16)
- Implement updates from HTML5 Boilperplate v5.3.0
- Add Print CSS to the repo
Version 1.0 (28/06/15)
- Finally cleaned up this repo and published it
If you find any errors or missing parts please create a new issue. That makes tracking and adding those easy.
SpH5B is licensed under the MIT license.