This is a part of series, where we explore CSS frameworks that are well-made and have great ideas, but never took off like the “big two”. In the first article in this series, I ranted about the wonders of Titon Toolkit. I loved it because it was made to be customized, to be abused, and built upon.
Well, I’ll try not to rant about that sort of thing too much, because it’s a feature common to a few of the frameworks that I’ve selected for this series, including today’s. It’s called spaceBase, and the first release appeared in January 2015.
It’s a small framework, but the organization and thinking behind it are interesting.
The best parts
Many frameworks try to strike a balance between having all the features and speed. spaceBase has actually pulled it off pretty well. The entire framework, with all dependencies and minified, weighs in at 29kb.
Like just about every other framework these days, it’s modular. But I find that the way the modules are split to be interesting. For example, most frameworks would put helper classes, like .pull and .push into the main grid module. spaceBase puts them in separate files.
It might seem like taking modularization to an extreme, but for those of us who like to be able to customize almost everything, it’s pretty smart thinking. Everything else is modularized to that level as well. Fonts are separated from typography, mixins are separated from helper classes, and lists are separated from everything else.
Also, the grid is an interesting one. I mean, it’s one of those grids that measures everything in fractions. Classes look like .one-half, and .three-quarters. A simple measuring system, yes, but nothing new.
What I liked were the fairly semantic class prefixes used for setting up the layout across devices: hand, lap, and desk. So classes look like .hand-one-whole, .lap-one-half, or .desk-one-third. They’re classes based on usage and context, rather than device size.
Features
Well, it’s based on SASS. I almost feel like I shouldn’t even mention that anymore, because aren’t they all based on SASS? It’s also designed to be installed with Bower, if that’s your thing.
Styles are included for the following native and extra elements:
- Basic typography
- Buttons
- The grid
- Forms
- Media objects (like comments)
- Harry Robert’s “island” object (This functions a bit like the “cards” that we’ve been seeing in many frameworks.)
- Lists
Conclusion
Yeah, that’s a short list of features. But for me, the cool thing is not how many they managed to pack in, but how they were organized. I’ve seen other collections of code that were “modular”, but those modules were huge, and sometimes badly inter-dependent.
spaceBase shows how larger frameworks could be organized to be even more customizable, focuses on context over device size, and is very prettily organized. It’s like file-and-folder Tetris, and they won.
It’s a good thing too, because there’s no decent documentation. You have to actually open the thing up to understand it. But then, it’s worth it.
