How to use an HTML boilerplate

[Rss Bot 1]

Using an HTML boilerplate saves you from starting from scratch every time you build a site

Though websites are all unique from a content and design perspective, the underlying foundations of the vast majority of sites are very similar. So why start each one from scratch when you can use a reliable boilerplate for the initial work?

Typically, people creating sites want to deal with the quirks of individual browsers, stripping out any proprietary styling that such software might add to specific web page elements. Additionally, they may use scripts for dealing with the shortcomings of older browsers, and might also drop in basic default styles, for horizontal rules and elements that are supposed to be hidden.

Doing this again and again for every project is a massive waste of time and energy. Not only will you mostly be repeating yourself, you might also make unique errors during every attempt to start afresh. 

Furthermore, for some people there will be the horror of a blank document that leaves them simply not sure where to start. If you're smart, you won't attempt to reinvent the wheel when others have done the work for you, and you'll use an HTML boilerplate.

What is an HTML boilerplate?

Boilerplates are similar to templates, but more helpful, in that they often contain text and graphics to start you off rather than just layouts for these elements.

An HTML boilerplate is a set of files that you can download, which provide a foundation for any website you create. Typically, they have been built by industry professionals but freely released to the community, so you can use them as the basis for your own projects. This speeds things up and ensures that the basics of your site are sound.

Note that the term 'HTML boilerplate' doesn't mean you just get an HTML document or even a bunch of them. Boilerplates may contain a range of file types, including HTML documents, but also add CSS, JavaScript, placeholder images, and documentation on how to use what you've just downloaded.

Popular boilerplates

HTML5 Boilerplate is a good place to start. The self-described "web's most popular front-end template", is a sleek and simple HTML5 template that's the result of the pooled knowledge of many dozens of developers. It provides the basic scaffolding or framework for building an entire website.

There are alternative methods, which happen to provide more assistance. Bootstrap, Web Starter Kit and Skeleton add things like a typography base and responsive grid, giving you a further head-start when working on your design. 

However, they do so at the expense of additional default code, which you may find yourself having to edit or override. There are also arguments that rather too many designers in recent years have relied heavily on Bootstrap, thereby resulting in many sites looking alike. 

Using a simpler HTML5 Boilerplate foundation and going your own way could therefore be a better choice, depending on your level of ability, confidence and needs.

Using HTML5 Boilerplate

When downloaded, this free, open-source boilerplate provides you with documentation and licensing in Markdown format, some CSS, two placeholder images, two HTML files, some JavaScript, and some server config files.

You can click on your favourite option for each filter!

On downloading the archive, make a copy and keep it clean and untouched. It can then serve as reference for any changes you make.

For your new site, you can ditch all of the .md documents. First, replace the two .png files with your logo, which will appear as your site's favicon and the icon when your site is saved to someone's iOS Home screen. An online generator can help you create new images.

In the HTML, there might be some things that you're not familiar with. The majority of these additions deal with issues relating to legacy browsers. The final script element is for Google Analytics and can be removed entirely if you don't use that. Leave the other script elements that are found towards the end of the file, because they load jQuery.

Add content to the body of the document after the 'Add your site or application content here' comment. You'll also need to give the page a title and fill the 'content' value in the 'description' meta tag.

Note also that all links are relative in this document, and so you may need to change them to root-relative or absolute links if you start nesting web pages in folders.

You can add comments if you make any major changes to the HTML, to remind yourself later.

CSS edits

HTML5 Boilerplate is a great way to save time when creating new websites

Of the two CSS documents included with HTML5 Boilerplate, there's no need to touch normalize.css. This is the reset document that ensures all browsers start on a level playing field when it comes to your website. By contrast, main.css includes what the document terms "opinionated defaults", including some basic styles for selections, horizontal rules, images, and forms, helpers for item visibility, and @media rules for responsive web design and print.

Everything here is fair game for updating, although carefully consider whether you should do so. There's an area set aside for the author's custom styles (ie, yours) or you could create an entirely separate CSS document and attach that to your HTML as well.

Whatever your choice, be mindful of how you'll deal with subsequent updates to HTML5 Boilerplate itself. If you edit any of the default main.css styles, changes made in future versions of HTML5 Boilerplate (which would either be added by replacing files, or replacing parts of files) won't necessarily come across to your site, or will override your own edits. Therefore, again make use of comments for any changes, thereby making later comparisons much easier.

Advanced boilerplates

Based on HTLM5 Boilerplate, Initializr generates a clean customizable template for you

Once you gain experience, it's worth considering a custom build using Initializr, retaining the components you need and ditching those you don't. Also, if you're creating a WordPress site, explore a WordPress-specific blank theme, such as HTML5 Blank.

These downloads and services are all free, so you can check out and experiment with them at your leisure. 

Still, whatever you do, a little work and investigation now should save you a whole lot of time later, when you just pull out your boilerplate to get cracking on a new website.

Get your ticket for Generate New York now

Three-day web design event Generate New York is back. Taking place between 25-27 April 2018, headline speakers include SuperFriendly’s Dan Mall, web animation consultant Val Head, full-stack JavaScript developer Wes Bos and more.

There’s also a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now.

Liked this? Read these:

• 16 amazing HTML examples
• 5 of the best resources for learning HTML and CSS
• 16 top online coding courses

View the full article