Front-end Process - Flat Builds and Automation, Part 4: CSS Framework
Matt Bailey / +Matt / June 12, 2013
Step 1 - Install CSS framework
These days many developers use a CSS framework as the backbone of their projects. A framework could be something very fully-featured, such as Bootstrap, or a simple, un-opinionated code base such as inuit.css. A good framework should help speed up your development, provide cross-browser functionality, and encourage good coding habits. Some developers argue that frameworks are restrictive and add a lot of overhead to a project, but I would argue that, if used correctly', the benefits outweigh the negatives.
What you choose to use depends on your requirements, but I have settled on inuit.css. It comprises of a collection of objects and abstractions (object oriented) and, as I said above, is very un-opinionated. What I mean by that is that it contains little-to-no design, just design patterns. The core principles of inuit.css are scalability and reuse.
First of all you need to install inuit.css as a component. Although the inuit.css core is available as a package through Bower its actually the inuit.css web template I recommend you use as it does some of the initial scaffolding for you.
In your terminal navigate to the components folder: 'app/components/'.
Once in the 'components' folder run the following command to clone the inuit.css web template:
git clone --recursive email@example.com:csswizardry/inuit.css-web-template.git inuit.css
Then, navigate into the 'inuit.css' folder and run './go' to complete the set up.
Your inuit.css folder should look like this:
| |-- inuit.css/
| | `--
| |-- _vars.scss
| |-- style.scss
| `-- watch
You now have the inuit.css framework at your disposal. The most important thing to remember from now on is that once you have installed it as a component you should never edit the contents of this folder directly. This means that should you wish to update inuit.css in the future its a simple matter of replacing this folder with the newer version (in fact this applies to everything in the components folder).
So how does one go about using inuit.css if you cant edit the contents of the folder? Well heres how...
Step 2 - Using inuit.css
First of all we need to prepare our 'styles' folder to make it easier to organise things. Inside of 'styles' create three new folders; 'modules', 'partials' and 'vendor'.
- The 'modules' directory is reserved for Sass code that doesnt cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.
- The 'partials' directory is where most of the CSS is constructed, broken down into modular, reusable code, eg. typography, buttons, textboxes, select lists, etc. (SMACSS or OOCSS).
- The 'vendor' directory is for third-party CSS.
Go back into the 'app/components/inuit.css/css/' folder and open '_vars.scss'. Save a copy of this file into the 'modules' folder you just created.
Open 'main.scss' and remove all of the content. From now on you shouldnt put any regular css in this file, only imports of other files. On the first line of the file its good practice to define the character set of the file:
Then after that add the following imports:
These two lines will import the '_vars.scss' file you just created and the inuit.css framework.
In '_vars.scss' you will find options to enable/disable features. Initially they will all be disabled. You should only enable the features you want to use - this will keep your code nice and lean. For example, if you wanted to use the grid system you would set the 'use-grids' value to 'true':
To find out more about inuit.css and how to start using it in your projects you should read the documentation on github. If you want to see it in action there is a dedicated jsfiddle account containing lots of examples. The source code is also very well commented.
So, following the inuit.css philosophy you should start creating modular css files - 'main.scss' might start looking a bit like this:
* Never add styles directly to this file - set up imports
/* Setup inuit.css
// Base css
// Page structure
@import "partials/ie"; // IE specific css
@import "partials/shame"; // Stylesheet reserved for temporary hacky code
/* Vendor css
For help writing beautiful CSS I would highly recommend reading this document by Nicolas Gallagher: Principles of writing consistent, idiomatic CSS. I use this as a style guide for all my CSS documents.
For more advice on structuring your SASS projects (and from which Ive based most of my own project structure) I recommend the following articles:
So there you have it - the basics of a front-end, automated flat build process. I hope youve found this series of articles helpful and if you decide to take the plunge, good luck!
- inuit.css is a Sass based, Object Oriented CSS framework.
A note on why we are using SASS rather than Less
Up until now we have used Less as a CSS preprocessor. First of all let me just say that theres absolutely nothing wrong with Less and we will probably still use it on some of our projects - Boostrap uses Less (although there is a SASS port that is well maintained and used by Yeomans yo webapp generator) and we have a few projects based on Bootstrap. For those of you who like Bootstrap, but only want the mixins and variables and none of the extras, there is also the excellent PreBoot. But in general we believe SASS is the way forward for us.
One big selling point is that if you use SASS you can also use Compass, a fantastic CSS authoring framework containing reusable patterns, mixins and other tools. It also has actual logical and looping operators, and it has the @extend function and placeholders to name a few other benefits. The good thing about Compass is that it's also modular, so you only need to include the things you actually need. If you refer back to my example 'main.scss' file above you can see that I've included the Compass mixins for CSS3 cross-browser 'transition' and 'opacity'.
Also, and this is a more personal thing, most of the front-end people I follow use SASS, so I hear more about current SASS techniques and methods than I do for Less.
- Front-end Process - Flat Builds and Automation, Part 1: Introduction
- Front-end Process - Flat Builds and Automation, Part 2: Environment Setup & Yeoman
- Front-end Process - Flat Builds and Automation, Part 3: Grunt Tasks
- Front-end Process - Flat Builds and Automation, Part 4: CSS Framework