Boilerplates and helpers

A great starting point for a new web page is the HTML5 Boilerplate. Take some time to look through the documentation: every decision has solid reasoning behind, which they explain in detail.

A good CSS baseline to start from is Normalise. It gives you more consistent rendering across a variety of browsers without resetting everything to zero. If you’re particularly interested in typography, have a look at TypePlate.

Grid systems

If you want some help putting together a solid grid, you can use Gridly, a minimal grid system.

If you use Sass, Susy is handy. It’s a set of tools for creating powerful custom grid layouts.

Small frameworks

Milligram is a minimalist CSS framework. It’s light, but has few features. Skeleton is a straightforward, responsive boilerplate. Cutestrap is a trimmed down, cuter, version of Bootstrap (see below).

If you want something with a bit more, try Bulma (has more character) or Furtive (more opinionated, designed more as a starting point).

If you want to pick and choose what things you’re going to use, checl out Pure. It’s a set of small, responsive CSS modules.

If you need some JavaScript, check out MicroJS and You Might Not Need jQuery.

Preprocessor mixin libraries

If you are using a preprocessor there are a couple of mixin libraries that could be useful.

• Bourbon is a library of Sass mixins for things like vendor prefixes, typographic scale, animation. Pairs well with Bourbon Neat for grids.
• Bitters provides scaffolding for Bourbon projects, and Refills helps build components and patterns for Bourbon and Neat projects.
• Rucksack
• Concise

Starter Kits / Boilerplates

Google’s Web Start Kit is full of modern front-end best practices, but makes a lot of assumptions: gulp, sass, concatenation and minification of CSS, concatenation and minification of JS, babel, browsersync, PageSpeed, Service Workers, npm.

Full-on frameworks

If you do decide to use a big, off-the-shelf, Front-end framework, you use them by adding the <link> for the CSS at the top, and <script> for the JS at the bottom your HTML pages.

Twitter’s Bootstrap is one of the most widely known and widely used HTML, CSS, and JS frameworks. It’s easiest to use all of Bootstrap, not pieces of it. When you try and use pieces, or try and add extra bits to it, things get tricky. It can be a bit heavy, depending on your needs.

The other famous one is Zurb’s Foundation. It has pretty much the same ups and down as Bootstrap.

Both of these are great for doing prototypes: they let you put things together quickly. They’re not necessarily the best choice for your final application, though.

An alternative to those two big hitters is Materialize. A lighter alternative to that is Material Design Lite. Both frameworks are based on Google’s Material Design. Like Bootstrap and Foundation, they’re quite opinionated about the visual design, and trying to stray from that will be difficult.