Monday, 7 January, 2019 UTC
Summary
Creating consistent, concise, and effective CSS can be quite a lot of work. There are so many things to consider like responsiveness, accessibility, and structure. This is exactly why CSS Frameworks exist, to take that burden off of you! Let's take a look at some of the top CSS Frameworks of 2019.
Bulma
Let's kick this off with the CSS Framework used and loved by Scotch (Scotch.io is on Bulma right now!) One of the benefits of Bulma is that it is purely CSS, no JavaScript. This means you just need to include one .css file in your project to get going, no .js required.
Here are a few of the other features.
- Flexbox based
- Built with Sass so only use what you need
- Fully responsive and mobile-first
Flexbox for building a grid-based layout is an incredible improvement on using floats. That said, although Bootstrap is more popular, it took a while for Bootstrap to adopt Flexbox with v. 4.0. This helped Bulma to gain some popularity while Bootstrap 4.0 was in the works.
Looking for a Bulma tutorial? Check out "Get to Know Bulma"!
Did I mention that Scotch loves Bulma?!?! See that Chris guy in there? Hint... look bottom middle.
Tailwind CSS
Tailwind is a bit different in that it focuses more on utility classes instead of fully-fledged UI components. I, personally, love this concept since it gives you the ability to really build your own look and feel while leveraging classes to do so.
By having a bunch of utility classes, you can compose your markup on the fly:
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>While this may look ugly to some, it is nice to have classes ready to go instead of having to create a new class just for this button and styling with a couple CSS properties.
If you're looking for a framework that gives you a bit more custom look and feel, check out Tailwind!
This is an interesting approach considering that Bootstrap sites, for example, are easy to pick out since they typically look very similar. With Tailwind, it is unlikely that two sites will look that similar!
It's very easy to customize Tailwind to create things like alert boxes:
Refactoring UI
Fun fact about Tailwind. Two of the creators of Tailwind Adam Watham and Steve Schoger, the masterminds behind Refactoring UI. Refactoring UI is a platform for learning how to take design into your own hands, and it's incredible! They just released their book/course with some of the best design tips and trick you can find.
Bootstrap 4The Refactoring UI book/course is hot off the press with some of the best tips in design!
Bootstrap has consistently been one of the biggest CSS Frameworks there is. It is often de facto framework, especially for Web Developers. After several years of work, in early 2018, the official 4.0 version released! Bootstrap 4.0 was a significant update.
- new color schemes
- new utility classes
- built on flexbox
- built with SASS vs LESS
I quickly made the jump from version 3.x to 4.x, and I have really enjoyed it. As I mentioned earlier, I'm a big fan of utility classes, so I love the fact that Bootstrap added these. If you're already using version 3.x, take a look at 4.x. If you're interested in using Bootstrap for the first time, go ahead and start with 4.x.
Semantic UI
Semantic UI takes a unique approach that focuses on writing "human-friendly HTML". In other words, classes are named as closely as possible to how a person would speak. This makes writing HTML intuitive especially for newer developers.
In Semantic UI, "words and classes are exchangeable concepts."
Semantic uses Gulp as its build tool. Many workflows have moved away from Grunt/Gulp in favor of Webpack, so Gulp might be a positive or negative for you depending on your perspective. Here's a quick look at the workflow.
- install node and gulp
- install semantic-ui (you will be prompted for configuration input)
- change into your directory and run gulp build
Foundation by Zurb checks off most of the features that we've talked about so far: responsive, mobile-first, acessibility, etc. It is a bit more sophisticated than most other options and advertises itself as a more "professional" choice. Zurb is happy to provide training classes at a cost which does seem more like an enterprise solution.
Foundation can be used to create great looking HTML emails!
Foundation can also be used to create great looking HTML emails. Creating HTML emails are historically pretty difficult (you don't get access to all HTML and CSS features you're used to), so this can be incredibly useful for those that are sending emails.
Starter Templates
Foundation also provides several responsive starter templates to help you out. Check them out!
It's worth noting that there are some pretty big companies using Foundation, so take that as a good sign.
Materialize CSS
As you might expect, Materialize implements Google's Material Design, one of the most popular design languages out there. Google has done an incredible job with pushing this design language and has created a very consistent and elegant look and feel on the Android platform. If you're looking to build a website that with material design, this is the right route to go.
One of the really interesting fun facts about Materialize is that it was created by four different students at Carnegie Melon. This is not technically relevant, but worth mentioning as a bit of inspiration that everyone can contribute no matter the age, experience, etc!