Why do you need an HTML5 and CSS starter template?
If you ended up here, you’re probably looking for the best way to start a project with some HTML and CSS. An HTML and CSS starter template or boilerplate gives you a basic framework that you can use for your projects.
The advantage is that you use the same starting point for every project, which will cut down your development time. And as techniques change, it’s an opportunity to keep your boilerplate updated with new code, and remove the old stuff.
Should you use an existing solution or build your own?
The question arises, should you use something that’s already out there or build your own? If you use the HTML5 boilerplate, you’ll have a good starting point and the benefit of code that has been around a while and has been tested.
By building your own, you can set things up exactly how you want, and you’ll learn something new along the way.
The HTML5 boilerplate may be a good starting point for your own HTML5 and CSS starter template. In my case, it contains code I never use and always end up deleting. And I wanted a basic CSS framework to go along with it. So I just built my own, and borrowed a few things.
How to build your own
Assuming that you want to go down the route of building your own, I recommend you start from scratch with a basic HTML5 template, and add a few helper styles.
For the HTML, you only need to worry about the initial structure, as you will have the need for different page markup depending on the project. You can still create a few common templates such as blog articles, a portfolio, or a grid of items. Here’s an example of a plain HTML5 starter template:
For the CSS, you’ll likely want to use a reset of some sort or the normalize library. From there, you can add the basics for typography, form elements, tables, a basic grid, etc. It may be easiest to look at some examples and go from there.
I’m using Sass to keep the CSS organized. Here is what my main Sass file looks like:
See the links toward the bottom of this post for CSS code that you can use in your own starter template.
I recommend putting your boilerplate code in a repo on GitHub or Bitbucket, and keeping it updated. A good time to make updates is while you are working on a project, or when you just finished a project. Any new technique you used or changes you made while working on a project will be fresh in your mind, and you can apply them to your boilerplate.
So what makes a good HTML5 and CSS starter template?
You want to achieve a balance between a minimal set of styles needed to get started, and reusable components that you use on every project. I’ve found that it works best to keep components as isolated as possible so you can add and remove them easily.
As you include components, you may find that you’re on your way to building a framework. Something that you build will likely have a lighter footprint than a big framework such as Bootstrap. Just remember that the popular frameworks have been thoroughly tested. As you add your own components and functionality, things have a tendency to get complicated.
Adapt an existing framework
You may want to investigate some frameworks such as Bootstrap or Foundation, and I recommend that. But the point of a boilerplate is to give you a minimal starting point, and not include a whole bunch of stuff that you don’t need as you might find with a framework.
For example, you might use some elements from Bootstrap such as the layout grid, but you may not use any of the JavaScript components. It would make sense to use a modified version of Bootstrap, or add the Bootstrap grid to your own HTML and CSS templates so you’re not including unnecessary code in your project.
CSS preprocessors, naming conventions, and task runners, oh my!
You might be using Less or Sass in your projects. Now is a good time to take a look at your Sass files and see what can be applied to a boilerplate, and what can be turned into a component.
For example, you can place all of your basic typography-related styles into one file. Presentational classes can live in their own document. You can create a ‘variables’ file for all your color variables, breakpoints, and global settings.
Something like a top of page hero element is a perfect example of what can be turned into a component.
CSS Naming Conventions
It’s also a good time to review naming and organization conventions such as BEM, SMACSS, and Atomic CSS to see whether you can apply any of these guidelines to your own boilerplate. I tend to favor the code guide created by @mdo. I use some BEM-like syntax, but I largely just favor a common-sense approach to naming.
Whatever you choose, you want to avoid using IDs in your CSS, and vague class names combined with nesting. If you’ve ever worked on a large project over time, you will have undoubtedly run into the problem of tracking down an old style.
You might have a class name that’s generic and you don’t know where it’s used. You don’t know if removing or renaming it will break things. This is one problem these naming systems are trying to solve.
Task Runners
If you use a CSS preprocessor like Less or Sass, you will want to create a build process using a task runner such as Grunt Or Gulp. I started using Grunt and stuck with it. It’s easy to configure and works well for my purposes. Plenty of others prefer Gulp, use the package manager npm, Yarn, webpack, or something else.
If using a task runner sounds too complicated, just use plain CSS. It’s your own project!
Example HTML5 and CSS starter templates
Finally, here are a few examples of HTML and CSS starter templates and boilerplates.
I use a common set of styles on most projects. So it makes sense to include these in my boilerplate so I don’t have to rebuild them every time.
If you’re building with React or another JavaScript library or framework, you will probably be taking a different approach. These templates are more suited to standard HTML projects, whatever that means at this point.
HTML Base
Aside from my WordPress theme template, this is my most recently updated boilerplate. I’ve split up the CSS into base styles, classes, and components. I’ve also included some mixins and global variables. It uses a basic float grid, or you could just load the Bootstrap grid instead. It’s a work in progress, but maybe you can steal some ideas.
Project Boilerplate
With this project, I updated my earlier starter templates, and incorporated styles from recent projects. It uses Bootstrap and builds on top of it. I started organizing styles into base styles and components, and introduced variables and site styles. The HTML Base repo above is a bit more refined.
View Project Boilerplate at GitHub
Responsive Starter
In this version, I updated my earlier boilerplate and made it responsive by borrowing a lot from Bootstrap, Foundation, and other frameworks. I thought I was pretty clever with the grid naming conventions and fancy CSS comments back then. I later added Sass.
View Responsive Starter at GitHub
View Responsive Starter with Sass at GitHub
Original Version
This version was my first foray into building a starter template that I could reuse on projects. Being that it was created way back in 2012 or so, it’s not responsive. I was more focused on a 12-column grid and keeping lines of type in a vertical rhythm. Here’s the original blog post from back then.
Original Blog Post
Back in 2008 while working on two large website redesign projects, I needed to create a set of common reusable styles and a series of basic HTML layout patterns. One of the projects needed a comprehensive style guide detailing the CSS usage. The project also required several layout variations in anticipation of different content configurations. Both projects shared some common layout features.
In an effort to speed up production on future projects, I ended up creating a set of general HTML templates and reusable style sheets. I’ve used a variation of these templates on every HTML project since then. The original templates were too specific and made assumptions about the final product. I’ve greatly simplified the styles, and recently changed everything to HTML5.
This is meant to be a starting point for a project, not a framework or something that anticipates all needs. Instead, my goal is to start with a basic set of styles covering an element reset, typography, and some classes describing column layouts. All the specifics should be dictated by each project and defined in a separate style sheet.
As I recently switched from XHTML to HTML5 formatting, some of the HTML5 styling could use more specific declarations and other improvements. For example, I’m using the header and footer elements as the page header and footer, and I have one set of headings defined. So this template is somewhat transitional. Feel free to look through the code, and let me know if you find it useful.
