Web design kits, more commonly just referred to as bootstraps are kits that give you a way to start a website quickly and efficiently. They come with all the basics that you need to get running. There are a variety of bootstraps out there so today we’re going to look at them all and go over when you should and shouldn’t use them.

Bootstraps

Bootstraps are a blessing and a curse. In one way they’ve allowed us to create websites more efficiently, but in another they have led to what I like to call a ‘pick n’ mix’ web design proclivity which has become very acceptable across the internet.

The Implications

Effectively we live in a time when it’s possible to pick a bootstrap, pick a colour scheme, pick a bunch of fonts (including icon fonts) and voila, a website. In my opinion this is really stifling the creativity in a large section of the community and leading to an underclass of bootstrapped websites that follow the same design patterns. The twitter bootstrap has committed the most heinous of crimes in this sense, creating entire fleets of websites that are virtually identical.

However bootstraps can be used for good too. There are many websites that use bootstraps as a base or light touch to get things going on a large project and this is very acceptable. They solve all the immediate problems such as forms and lists while allowing us to add a layer of styling on top of that.

I think we’ve all been in positions where we have to style a bunch of inputs and just thought, “if only there was a quicker way to do this”, and bootstraps certainly do provide a way to do that. Just remember when you’re using these, use a bootstrap as a base, not the entire cake.

Bootstrap examples

There are many great bootstraps or modules, whether they be CSS, HTML or a combination, which can help provide a framework for you to work in. I’m going to go through some of the best below and provide an idea why they are so good.

Twitter: Number One Enemy

The most famous perhaps is the twitter bootstrap which sort of set the scene for most modern bootstraps and pre-made web kits. The twitter bootstrap is so well known because it literally provides you with everything and is widely used by many developers on small projects.

This is great if you want to get something up and running really fast, but as I’ve discussed earlier, it is the leading cause of Barely Any Difference Design (or BAD Design) in that it provides every component you can imagine.

cross

Even if you style over most of this stuff, to the keen eye it’s always quite visible that you are using it, and whether that is a good or bad thing is up to debate. One could say that bootstrap provides an overall sense of continuity across the web by giving common features, icons and animations, and that websites that once looked very bad will now have a base level of quality using the bootstrap.

The counter argument is that it removes all creativity from the design process. One of the funnest things to do in design is to take a regular anchor link and very slowly through CSS add a gradient, a border, a good font and continue until you have something you’re happy with. In many ways bootstrap could be seen as removing the individuality of design from web design.

I tend to side with the idea that bootstrap is removing the fun from design and turning it into this horrible mechanised procedure. For that reason I want to show you some alternatives that provide light touches or at least a little variety while also making your design process more efficient.

Pure CSS

PURECSS
Pure CSS is similar to twitter’s offerings with the claim that it was designed to be extensible and customizable. That’s promising, and pure sure have provided some persuasive designs that show signs of individuality. Pure also cuts out all the Javascript and just gives you a pure CSS kit (as the name implies) which is certainly appealing to those wishing for lightweight kick starters.

Cardinal

CARDINALCSS
Cardinal is interesting in that it concentrates largely on the mobile aspect of design. Lets face it, adapting for mobile devices can be a bit of a pain sometimes. Cardinal attempts to fix that by making you design a mobile site which adapts into a desktop site. An interesting approach, and it uses REM units! Which is fantastic.

UI Kit

UIKIT
Maybe you’re getting the vibe now that there are a hell of a lot of these bootstraps and quick start CSS/HTML kits, and you wouldn’t be wrong. UI Kit is another which I must say is quite beautiful. As I mentioned earlier, forms are such a hassle to style. The same goes with most UI elements and a lot of them carry the default vendors styles. UI Kit tries to solve that by prettifying the existing UI.

It does have a style with overarching similarities to the twitter bootstrap, but it’s just different enough to provide a little design independence. It’s probably as close as you’ll get to the twitter bootstrap without being the twitter bootstrap. It also comes with built in full support for right to left languages. Arabs rejoice!

Foundation

FOUNDATION
Foundation from Zurb is the ultimate in giving you a light weight start to any project. It gives you everything you need to build a website’s columns including add-ons for off canvas design on mobile devices and a lot more. To me, this is a perfect example of helping designers without being overbearing about it.

Column design is tricky and similar across all websites, so why not include foundation? It comes with a few other necessities that are usually quite similar across all sites including social icons and icon fonts.

Topcoat

TOPCOAT
Topcoat is master of minimalism, giving alternatives to key UI pieces that mean you don’t have to worry about the little things. It’s fast, clean and most of all, won’t stop you from innovating with design.

Notable Mentions

  • Centurion – Icon fonts and columns
  • Gridism – Just grids.
  • React – Javascript Framework for UI.
  • Groundwork – A lot of stuff including grids and icons.
  • Workless – Icons, Forms, Grids and more.

Final Words

Using bootstraps is a choice and sometimes a suitable, but generating your entire site using one is probably not in your interest. Take every project and treat it independently, and decide in that scenario whether a bootstrap would be useful. For instance, on a big project maybe a little bootstrapping would help, but not so much that it becomes clear you’ve just taken the easy route and made a carbon copy bootstrap site. As is always true, too much of a good thing can be bad.