These days, the number one requirement of any website is to run correctly on all kinds of devices (especially mobiles). For that end, Bootstrap has been one of the most popular front-end frameworks and has been featured in the top list of many developers for designing mobile-friendly websites.
While Bootstrap is undoubtedly amazing at what it does, there are some other frameworks that are equally good and may fit your requirements better.
1. Tailwind CSS
Tailwind CSS is a highly-customizable, low-level CSS framework built entirely around the concept of utility classes, which Bootstrap also provides out-of-the-box. With utility classes, you can mix and match CSS properties anywhere without necessarily resorting to inline styles.
2. Bulma
Bulma came to market around 3 years ago and became instantly popular. It was one of the first CSS frameworks to have implemented a full-fledged flexbox grid. Except this, it has a huge selection of components needed to code any kind of website. Bulma comes with a beautiful range of colors out-of-the-box and it won’t be wrong if we call it the most beautiful framework out there in the market. It can be used directly to get really nice looking websites with very least effort.
The only downside it has as compared to Bootstrap is, it is only a CSS framework, no JavaScript. So you will have to write your own JavaScript or Jquery to toggle your dropdowns or perform other basic interactions of the sort. Overall it is a great alternative to Bootstrap, which is also being updated very frequently.
3. Foundation by Zurb
"A Framework for any device, medium, and accessibility." is what they call themselves and they certainly are true. With all the perks of an advanced framework, Foundation is definitely the strongest alternative to Bootstrap. It is being used by some of the biggest organizations in the world for e.g. Adobe, Amazon, HP, eBay etc to quote a few. It included all the necessary components of an application like a responsive grid, buttons, basic typography, and many other UI elements.
Not only this, but they also have ‘Foundation for Emails’ which is a framework to code responsive HTML emails. Hence, whenever you are looking for an alternative to Bootstrap, do give Foundation a try.
4. Pure css
Pure is a CSS framework developed by YAHOO. It helps you develop faster, beautiful and responsive websites with a minimal footprint (the entire set of module clocks is around 4KB). It uses Normalize.css and provides layout and styling for common UI components. It's like a better and slightly fancier Normalize. It uses the SMACSS architecture to modularize the CSS code, which makes it a modular framework by nature.
It allows the developers to create responsive layouts by using grids, menus, menus, forms, buttons and much more. This small yet useful framework outperforms Bootstrap when it comes to mobile devices.
5. Materialize
Materialize is a modern responsive front-end framework based on Material Design principles of Google. Material design is a design language created by Google, which combines traditional methods of designs along with innovations and technology. This framework is perfect for the developers who wish to incorporate a touch of Material Design on their website without any complicated code. It offers card design, Sass mixins, drag-out mobile menu, ripple effect animation and much more. The developers of the framework have also provided code examples and detailed documentation to help users new users get started with the framework.
Do you know any others plz let me know :)
also read: Why Web Browsers are Free? How Browsers Make Money?
Top comments (18)
For me Mateiral UI and its documentation is my preferred component library!
I tried using Material for a project but ended up not loving it because something I consider fairly basic was missing and that was sizes. I didn't see any classes for adjusting the size of buttons, inputs, or other controls. That's something that is fairly basic for Bootstrap but I did not find in Material.
I can definitely see that. Material UI actually gives you several ways you can change a component's style. I do agree it's more complex than Bootstrap. But I think that once you learn how to customize components, it looks better than Boostrap. But that's my opinion of course!
Materal ui Buttons has a size property with small, large and medium value
Also worth checking out Tachyons.io, it's an Open Source design system that one can custom to fit the needs.
Actually, Tailwind CSS is a little bit more than just a css framework. After prototyping you website using the classes. But, whene everything is finished, you can compile all you project to reduce the number of classes and create reusable classes and, in other words, reusable components.
You should take a look at this video : youtu.be/D6-g6JgiUIs
Well, this technically can be done with any CSS, not just tailwind. The class purging is done by PurgeCSS
An alternative I've using the last months has been Semantic UI, it has a good amount of components with good variations and easy integration with the app.
It is a option to have in mind.
Unfortunately it looks like development on Semantic has stopped or stalled. There's a somewhat more active community fork here: github.com/fomantic/Fomantic-UI
Thanks Dylan, i will give it a look. Is kind of sad that the project has been without much news lately, but it still has good material to work with
Add CodyFrame to the list. They have a ton of pre-built components too.
Aww... Nostalgic. A very good tool.
In older time I used skeleton and for react - because how easy to use with - material UI.
[tl;dr]
I would like to add a little extra thinking for it: the overhead and the modularity. Tailwind is populer because you can actually really narrow down the structure and size. Most of the people do not like bootstrap or zurb, but when you just using the small parts, what your project really needs, then they could be pretty small also.
[/tl;dr]
I was thinking that PureCSS is not maintained, but looks like they have regrouped and created a 2.0 release this year. Great to see, a few years back I used PureCSS on a small project and it was a great fit. Otherwise, Bootstrap really solves all my needs and I enjoy using it.
I think HalfMoon is best alternative.
I'm basically a backend developer. But for my frontend tries I'm using UIKit. Seems to fit most of my needs. Here it is UIKit
Also add Yogurt on the list, please. A very powerful nano crafting tool for frontend development.