A partially impartial look at CSS Frameworks
Gather ’round the rocking chair. Pappy Ryan is going to tell you a story about CSS in my day. When I began my career as a developer in 2008, my first taste of excitement from coding came when I was introduced to the wonderment of cascading style sheets. This was back before CSS compilers, asset pipelines, and standardized frameworks were really even being considered as teachable curriculum. Sure there was always a grid based system, but more often than not it was compared to, or even used within (shudder…) tables.
Fastforward a few years (an eon in programming years) to 2011 when I was introduced to a basic PHP cms with a CSS framework. At the time I had no real world experience using a framework, but I immediately saw the benefit of using one. This particular one was the Zurb Foundation framework.
Now, if you aren’t familiar with Foundation, or what a CSS framework is, the basic thing you need to grasp is that it is a collection of pre-determined styles that make your life a little easier. Easier because you no longer have to copy and paste styles for different types of buttons, or calculate the padding needed around an element to make it display within your grid system. Instead the fine folks at Zurb, Twitter, Google, and Semantic have taken the time to write up some basic styles to give your application standardization.
Depending on what style you prefer, each grid based framework is essentially as good as the next. There may be nay-sayers out there who are more inclined to use one over the others, but when you boil it all down to the essence, these all accomplish pretty much the same thing. And their documentation is pretty sniffty too.
Zurb Foundation
Foundation has been on the scene for a really long time. At the time of this article they are touting version 6 of their framework. This is the first one I ever had exposure to, so maybe it holds a fuzzy little place in my heart, although I don’t visit often or call as much as I should.
The fact that they are now on the sixth iteration of their framework should tell you that they are constantly updating and keeping their code relevant to industry standards. They have recently added support for CSS flexbox. Although they don’t have as many bells and whistles in terms of pre-made styles available for you to use, it is a great option for a bare-bones grid system that you can customize and make into your own flavor.
Twitter Bootstrap
The fact that it is created and endorsed by the big blue bird in the sky should tell you that it is not going away anytime soon and will always be up-to-date with industry standards. Currently Bootstrap is in version 4 land with mentions and rumors of version 5 just around the corner. Bootstrap is most likely to be the foundation you will encounter if you start working at a development shop today. A majority of the tutorials that are out there for Ruby on Rails walk you through how to set up your app and usually include the twitter-bootstrap gem.
As an extra added level of sweetness, the folks over at Bootstrap also now offer you a catalog of themes you can choose from. So if you aren’t so inclined to have your site starting off looking like a tweet-tastic experience, one of their helpful theme packages should be able to help you create the look you’re going for.
Material UI
The approach taken by Material UI is quite fascinating. They have gone a step further than simply creating another CSS framework. They created a style philosophy. Instead of dictating shapes, colors, and fonts, the engineers, designers, and user experience experts at Google analyzed actual physical objects in space and used their findings for inspiration of UI elements. For example, content is always placed in a card. Think of this like a page. Buttons are always presented in a meaningful way with consistent placement in the given space. Interactive elements appear to be protruding to a higher level and seem to press down when you act upon them.
I’m not going to say I didn’t fan-boy over this in the early stages. Most of the time we developers take Google’s musings as gospel. But in this case I think the fanfare was fully warranted. The thought that went into this framework and the science behind the why’s and how’s really speak for themselves.
Semantic UI
Sort of a late-comer to the scene, Semantic UI takes a slightly different approach. In my honest opinion, it is like they started from a version of Bootstrap or Foundation and simply changed the way elements are named. Which, don’t get me wrong, is not a dig on them at all. In fact it’s quite clever. For instance look at the markup for a simple panel for Bootstrap:
# HAML CODE
.row
.col-md-4.col-md-offset-4
.panel
.panel-body
.row
.col-md-12
h1 With some content
p More content goes here in paragraph form
And now the same thing in Semantic UI:
.ui.four.column.grid
.row
.column
.ui.card
.content
.description
With some content
.extra.content
More content goes here in paragraph form
I’m not saying it is always going to use less code or cleaner looking code. What I am trying to illustrate here is that the class names are, well, semantic. Classes that make more human sense like “ui”, “four”, “column”, “grid” is easier to understand than the “col-md-4”. Which doesn’t really even afford you the knowledge of what “md” is. Is this medium? If so, medium in relation to what?
Take aways and final thoughts
As I said in the beginning, this is a partially impartial assessment of the four most popular frameworks. Your definition of popular might be different from my opinion of popular. Maybe you like Bulma better. Maybe there is a framework that you know which I haven’t considered. By the way, can you guess which one I’m more partial to? I saw a couple hands for Google. A few of you voted Foundation. Actually, it’s Bootstrap. Although there are some issues I have pointed out with the B that I’m not particularly fond of, it’s what I have used the most and gotten most comfortable with. That doesn’t mean it’s the best. That doesn’t even mean it’s the best for me. It just means that I am willing to admit that it may be time for me to start using something new. I encourage you to do the same.
On the Road Code 