Please Support - Ride for the child

This week I gave a presentation at work, it was my first presentation since graduating from university. It was quite daunting and I did have some jitters, but overall it went pretty well. The talk itself was on the boilerplate and a brief overview of my notes are below…..

What is it a boilerplate?

In code terms Boilerplate basically means sections of code that are used repeatedly with little or no change.

The word dates back to the early 1900’s in the print industry where printing plates consisting of text, which would be used multiple times, were cast in steel. These pieces of metal came to be know as boilerplates.

Other commonly used names for these boilerplates include front-end template and framework.

What does it do?

I like to compare it to a builder who will have certain methods in place so that when he gets on site his tools are easily accessible, his cement might be ready to mix and his bricks are nicely positioned for him to get cracking.

When you start a web project there are some elements that almost always stay the same. So to be able to simply download some files and immediately start on a project is very handy.

There are plenty of FE templates on the web and some of the most popular are HTML5 boilerplate, Zurb foundation and Bootstrap.

I personally think the term Boilerplate should be made redundant in some cases. Some templates are much more extensive than others and sections of code are much more probable to be changed or used less frequently. After looking at the origin of the word boilerplate and its meaning, I never use the term boilerplate. They are (Front-End) templates (FE templates) to me.


I have my own FE template and I guess that’s the reason why I decided to talk about this particular topic. Some key points

  • Created 2 years ago whilst at university and has massively improved over the years
  • Main reason for creating was to give me a better understanding of frameworks
  • Available to download files/view on git
  • Use on almost all of my projects
  • Downloaded just under 3k times.

Basic things

FE templates take care of all the laborious work that needs to be done upon the start of a project such as:-

  • Doctype – an instruction to the web browser about what version of HTML the page is written in.,
  • Charset – specifies the character-set of the linked document
  • Title and Meta tags – For SEO purposes
  • Viewport – enable mobile-optimized site
  • Favicon – little icon you see on the browser tabs
  • Google analytics snippet
  • Creating files and folders (HTML, CSS, JS)
  • Javascript libraries/plugins – Mainly jquery
  • Initialise advanced UI (Javascrip enabled) – enables styling with or without js
  • Neatness – everything is neatly in place with correct spacing, commenting, titles
  • Example @font-face code ready set up – x browser

 CSS reset

By default different browsers apply different styles to elements, meaning that websites without a reset they look different within each browser.

Therefore the goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. A CSS reset basically removes any default styling from page elements, which allows a developer to “start fresh” with any attributes that they apply when coding.

Basic Example

*{ padding: 0; margin: 0;}

This would remove padding and margin from every single element on a webpage. Then as a developer codes their website margin & padding is added to elements which require them. This is a much better approach than going backwards and removing margin/padding from elements that don’t need them.

One of the most comprehensive CSS resets is Eric Meyer’s masterpiece. It effectively neutralizes virtually every significant aspect of default, browser-applied CSS rules.

There is no correct way to reset CSS. It will all come down to the developer’s preference. Many developers – including myself – use a modified version of a popular reset. I use a modified Normalize.css reset as it’s pretty modern and in my opinion it takes modern HTML into consideration more than its competition.

I persoanlly use a modified version of normalize.css as its support for HTML5 seems to be the best on the market.

Basic/base styles

Every web includes a wide range of HTML elements that will need to be styled. More often than not many of these elements will be similar, if not the same, on many different projects.

Good examples include

  •  Typography – Line height, font sizes
  • Headings – margin, Padding
  • Tables – Borders, backgrounds
  • Form elements – border, widths
  • Links – Colour, hover effect

By having some simple styles readily available for your site it ensures that a developer is able to get started on a project much quicker than if they had to write every bit of CSS from scratch. Once the developer has some styled marked on their page, they would then be able to style each element to match their design.

I like to keep my Base template design to an absolute minimum so that people won’t be making sites the same. It’s not a theme.

All the CSS should be mobile first as it’s – in my opinion – best practice. Basically you load all the basic CSS first which would be the mobile version and base styles of a website. This means you put your best stuff forward on mobile to the best of its ability and then as the viewport gets wider the site is enhanced for larger platforms with fewer constraints. Progressive enhancement is the key word.

Media queries

Although projects will differ on their layout and width it’s nice to have some basic media queries that can get a developer started. For example the most common layouts include a two, three and four col.

These media queries are readily set up so any developer wanting to use them can simply create HTML that includes the classes for the media queries.

Most FE templates will include a demo so that you can easily see how the media queries work and copy their markup if needs be. This is ideal for those who are learning as obviously gives them opportunity to example live code and see how things are working.


My FE template includes all the JS files hooked up and ready to go. There are some example variables and namespaces to allow a user to easily copy, paste and edit.

The jQuery is linked to google’s CDN to potentially allow faster loading. I have also added a local fallback, just in case there are issues, it also works nice for local development too.

I have also included a plugin folder which includes some fancy scripts. Any plugins should be compressed and added to this folder.


Neat and tidy – it’s very neat and tidy. The indention, spacing and layout is perfect.


  • I use SASS as it’s my preference
  • Compiles to standard CSS files
  • I use Codekit but you can do other fancy stuff with command line
  • Base includes ready made variables
  • SASS sheets are split into separate modules

Modernizer – This allows conditional CSS and JS depending on the users browser

Font awesome – Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.



  • Made by experts with lots of experience and knowledge
  •  Constantly updated to ensure you’re up to date
  •  Fast, best practice == great starting point?


  •  Boilerplates/FE templates for beginners – good or bad? Do they know what all these things do and how they work? Or are they just using them (bad practice)?
  • Too many assumptions, where does it end? Do you need conditional IE statements? Do you need Icons? Forms?
  •  Is there code in a end project that you don’t need? If code is left in a project that isn’t being used then that’s bad practice.
  • A Template should be added too, not subtracted from. I’ve tried to make base as minimal as possible. It’s not a boilerplate. It’s more extensive than that. But I personally think it’s a good balance without being even slightly exhaustive.