This is a part of the Under-appreciated series, where we explore CSS frameworks that are well-made and have great ideas, but never took off like the “big two”. For a full introduction, see the first article in the series.
Outline bills itself as “The clean and simple framework”. Clean? Simple? You have my attention!
Really, though, Outline is a pretty basic, SASS-based framework. Now, if you’ve read this series, you know that’s not an issue. Basic can be very useful. The question is, as always: What makes it interesting?
For Outline, it’s all about the underlying philosophy.
The best parts
BEM
Outline is written according to the principles of BEM, which is a methodology for writing CSS, and keeping it maintainable. It stands for Block, Element, Modifier, and it’s a pretty interesting way to get things done, while keeping your code easy-to-read.
Here’s an example: Let’s say you’re creating an input field. The form itself might be the “block”. We’ll call it .input. Then, you decide that you want your input to be in text, and inherit the main styles from .input. You might call it *.input__text*. That’s the “element”.
Lastly, if you want to make one text input field look different from the rest, you’d add a “modifier” class. Something like .input–blue.
My only concern is that this methodology could easily lead to “class soup”, but that’s often par for the course when you build interfaces with a framework.
For a more thorough explanation, check out the article on CSS-Tricks.
Susy
Another smart thing about Outline is the integration of Susy. This is a custom layout engine for SASS. Basically, it works like Semantic.gs, by generating custom grids for you on the fly.
Many frameworks limit their usefulness and versatility by using a rigid, pre-defined grid. By integrating Susy, Outline makes itself usable in a very wide variety of projects.
The little details
I love the little things that framework creators do to make your life easier. For example, Outline’s creator included a folder just for the page-specific styles of your site. There’s nothing in there, but the need was anticipated.
FontAwesome is included for icons. You can install the framework manually, by cloning the repo, or with Bower. And, of course, there is the file full of variables for fast customization.
The standard stuff
Other components include:
- Buttons
- Code blocks
- Embed (makes embedded content responsive)
- Forms
- Functions (mostly for lightening or darkening colors)
- Helpers (a clear fix, floats, text alignment, etc.)
- Lists
- Media objects (premade layout for things like comments)
- Mixins
- Pagination
- Tables
- Typography styles
Conclusion
Outline truly shines when you look at the forethought its creator put into it. Sure, it’s very simple, but even simple things can be constraints.
Outline was clearly built to make it easier on whoever was writing the front-end code, without locking them into any specific kind of layout, or making them override too many styles.
