Bootstrap has become the go to CSS framework, at least for me and most designers I know. But sometimes it feels a little bit too cumbersome with it’s overabundance of nested elements and plethora of CSS classed; additionally, it’s file size it’s quite large.
Bootstrap
It’s a good and complete framework, but maybe it’s too much for 80% of the tasks we need it for; most of the time that will be to create a simple two column responsive layout or add a navigation bar. We could definitely hand code these solutions based on standard HTML/CSS, but sometimes you need to quickly build and test something and have the confidence it will be cross platform compatible without having to invest 100% of your attention to it.
This year, I had the opportunity to work with two other frameworks; they felt like a breath of fresh air coming from Bootstrpa, but I can’t say that the search is over, there is still room to improve.
Materialize CSS
Some time ago, I discovered Materialize CSS, a CSS framework based on Google Material Design concepts. It was created by a team of students from Carnegie Mellon University.
“The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.”
What I really liked about Materialize CSS was the simplicity of the markup to create similar elements that previously took a longer patch of HTML to achieve in Bootstrap. The concepts for the columns or other visual elements and the class names are very similar to Bootstrap, so it’s a painless migration.
The only drawback I have encountered is that the project hasn’t been updated in quite a while. At the present time, it has over 500 issues reported on GitHub and almost 180 pull requests with no feedback. The project appears to be funded via Patreon, but somehow there aren’t any news about updates to the framework. Frankly, it would be great if someone else could take the reigns of the project instead of letting it fade away.
MUI CSS
MUI is a lightweight CSS framework that follows Google’s Material Design guidelines. It was designed from the ground up to be fast, small and developer friendly.
The goal of the project is to provide a basic set of components and helper methods that developers can use to build sites that are fast and user-friendly.
MUI is an even simpler alternative to Bootstrap, it’s cleaner and has less clutter than Materialize. But, I’m still not satisfied, I had to custom code a lot of functionality, spacing and margin utility classes that we need to use on our projects; so, we might try another one or code a flexbox or CSS grid custom layout in the future.
I understand that they use the prefix “mui–” to help you separate their classes from your application classes, but it’s cumbersome to type that for every single layout class that you want to use. The layout it’s not using Flexbox so this might be a con for some people.
Other alternatives that I will be testing soon
All of these are on my “backlog” of frameworks to try out, so I can’t comment on them at the present time:
Semantic UI
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.
Bulma
Bulma is simply a collection of CSS classes. You write the HTML code you want, because Bulma solely comprises CSS classes, the HTML code you write has no impact on the styling of your page.
UI Kit
A lightweight and modular front-end frameworkfor developing fast and powerful web interfaces.
A change of paradigm: Tailwind
From what I understand, the purpose of Tailwind is to improve and speed up your development workflow being super customizable without having to fight with the framework, trying to understand which classes to override to make the markup look like your design. This is achieved by using low-level utility classes that let you build completely custom designs from your own HTML.
Just for fun: NES.css
https://nostalgic-css.github.io/NES.css/
This is a fun one: a CSS framework to simulate the old 8bit NES look and feel, it even changes the mouse cursor!
More Resources
This isn’t a comprenhensive list of ALL the CSS frameworks available out there, just wanted to share some of my experiences with some of them. You can find a great categorizations of Frameworks here: