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.
Why Have a CSS Framework
Having a solid CSS framework as part
- Uniformity across teams of developers
- Documented features
- New features are added by the package owner or community
- A set of classes and components
Let’s take a look at some of the top CSS Frameworks you can use to power your webpages.
Here are a few of the other features.
- Flexbox based
- Built with Sass so only use what you need
- Fully responsive and mobile–first
Watch out for a tutorial on how to use Bulma here!
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.
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.
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
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:
Fun fact about Tailwind. Two of the creators of Tailwind Adam
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
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
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!