Buzzfeed just released a CSS framework, and you’ll never believe… okay, I’ll just stop myself there for everyone’s sake. The point is that yes, the Internet publishing giant has indeed released a CSS framework called Solid.
Is it any good? Yeah, basically. It’s good for them, at least.
Installation
Accomplished via NPM, and only NPM, for now. ’Nuff said.
Style
The thing to remember about Buzzfeed’s framework is that it was made by Buzzfeed, for Buzzfeed. All of the style-based components follow their branding guidelines, use their chosen fonts and colors, and generally won’t look like anything but Buzzfeed.
The good news for people who really want to adopt their CSS is that all of the styles are based on variables in the Sass. You only need to change those to get started.
They have styles for the standard stuff like typography, forms, tables, the color scheme, buttons (of course), and borders. Each of these includes a bunch of helper classes, so you can apply every style to any element. For example, you could apply the style for h2 to a paragraph.
Not sure why you’d want to, but you could.
Styles are also included for any error messages, alerts, or congratulatory copy that you’d like to throw at the user for any reason.
Layout
The main grid
Solid employs a classic percentage-based twelve-column grid for layout. Nothing new here. There is an interesting twist on the gutters, though.
The grid will not use gutters for columns unless you apply the .gutters class to the parent element. On the one hand, it’s an extra class, on the other, it’s an extra option.
The block grid
This is basically a simplified version of the grid designed for repeating content that will all be the same width, and possibly the same height. Think of an image gallery, or card-based design.
A few different frameworks have implemented this sort of extra grid option, now, which is useful for anyone who wants to integrate them with a CMS… like a huge blog/news site, for example.
Responsive class prefixes
One interesting feature is that there are responsive helper classes for everything. Add one of four prefixes to just about any class, and you’re good to go.
Conclusion
Even though it was developed for one specific website, there’s a surprising amount of flexibility in Solid, even though that sounds like a really weird thing to say out loud. It could be adapted to other projects easily enough.
I only have two qualms:
Now I know that most CSS frameworks aren’t terribly semantic in the first place, but Solid seems to have a ton of classes for every conceivable thing. If you’re building your app with Sass, you could probably cut down on that, but leaving it as-is could result in unmanageable HTML with “class soup” going on everywhere.
It’s a problem that nearly all frameworks have, though. It’s nothing new.
And that’s the other problem. The whole framework is nothing new. There is very little to differentiate it from dozens, maybe hundreds of other frameworks out there. On the whole, it’s good code, but it doesn’t bring anything new to the table. But then, they made it for themselves. It doesn’t have to.
Still, if you’re curious to see how a big brand does it, or you want to use their CSS to become the next Buzzfeed, check it out.
