Blog

Souped-up CSS

22 April 2013

This is an old post, so may include broken links and/or out-of-date information

Since last writing about CSS we've developed our very own CSS framework – and we call it Soup.

Based upon Inuit.css (version 4.5.5) we've extended, adapted, and generally built-up a library of re-usable objects to form a framework that works well for us. Inuit is very lightweight and makes no design decisions whatsoever, so it made sense to start from there – as well as it coming from Harry Roberts (who gave us the talk on CSS).

So why not just use Inuit as a base for each project? Why make more stuff to sit on top of it?

Well, we found that as good as it is having Inuit not making any design decisions, there are some basics that we start with across many projects.

Forms are a good example here – we'll always want a certain set of base styles for all web forms across a site, and they'll have similar design functions – such as a 'normal' and a 'focussed' state – so it seemed sensible to extend Inuit's form setup; all it takes is colour and/or font changes (and any other specific alterations, if required) to quickly create a nicely designed form.

As we tend to use a similar typographical setup with respect to font sizes and vertical rhythm, we also added this into Soup – along with icons, buttons and a bunch of other helpers.

Another part of our extending Inuit to match our own needs is on the responsive side of things. We tend to use a mobile-first approach, initially including only the styles that a mobile device would need, then adding-in extra styling in a separate file for bigger devices (thanks Jeremy Keith).

Finally the other major aspect of Soup is the JavaScript; we include a few things from Twitter's Bootstrap as well as validation, some polyfills and a few other bits and bobs we use a lot of the time.

This approach of having a simple starting setup has saved us a lot of time over the past 6 months of using it. For example, combining this frontend Soup with our backend ExpressionEngine boilerplate helped us get dropletpay.com designed and built in under 2 weeks.

Here's to moving onwards and upwards with the recent release and stabilisation of Inuit version 5!

Related Posts