6 Months in the Making, This is Base
05 November 2013
I’m not really sure how to do these launch posts. I wondered if I should be all grandiose, “this will change the way you web” style. Revolutionary. Best thing since the last best thing since sliced bread.
Base isn’t really that. It’s changed the way I work, but it’s just a humble little project I’ve put together with some of the brilliant minds at Agency.
Base is a grid system, wrapped in a simple CSS framework. It is responsive from the ground up, intelligent, flexible and so powerful. It’s compiled with LESS, properly semantic with no presentational or grid classes and with no fat. In the 6 months I’ve been using it in various forms I’ve never had to overwrite a single line of CSS, only changes and additions.
You can read about it, try it out, and download it at base.gs, or just go straight to the GitHub repo. We’re currently at Version 1.0.1, it’s not perfect yet but it’s production ready. Bugs, features or issues should all go up on GitHub.
The framework emerged out of a frustration with Bootstrap, but not one that is unique to Bootstrap. Every grid system I have ever used or seen is class based. Compiled or not, you lay your grid using a supposedly semantic system that will often look like
.offset-2. You’re left with ugly HTML that completely forgets the whole purpose of CSS as HTML-independent styles. You want to change the width of some boxes on a page? Can’t do that in the CSS, you’ve got to go into the DOM and change the class everywhere that you need it changed.
A few of the LESS/SCSS flavoured frameworks include Bootstrap ship with a mixin to create columns which is great because you’re styles are where they need to be. These mixins are never responsive, and therefore not very useful for any contemporary website.
Base is attempts to resolve this. It is a LESS framework (though easily ported to SCSS if anyone’s keen) with a
.column() mixin that sets column number, offset and padding. Those columns are created within a layout file, and compiled responsively. It’s a semantic grid that is automatically responsive. Using it is so easy.
To make it a full replacement for Bootstrap in Agency’s process we bundled it with a sensible reset. Styles for everything you need to start a site quickly, but without the visual bloat of a UI framework.