We earn commission when you buy through affiliate links.
This does not influence our reviews or recommendations.Learn more.
And it makes me feel bad that this joke has a lot of truth in it.
Unless youve encountered it before.
And saved the code snippet somewhere.
CSS ties for the first spot of necessary web evils along with JavaScript.
No wonder, then, that CSS frameworks emerged over time and took most of the pain away.
But how do you know your framework is the best for the job at hand?
Also, if youre new to front-end development, which framework should help you pick?
This post casts a sweeping glance at the front-end development landscape and compares the front-runners among CSS frameworks.
So if youre tired of hand-coding CSS rules, dive in for some quick relief!
Bootstrap
An initiative by Twitter,Bootstraptakes credit for introducing responsive design on a large scale.
It was the first framework to promote the philosophy of mobile-first.
A grid is an invisible partition of the screen into columns (along with the width).
The syntax now is a lot more pleasant, though it demands familiarity with Flexbox.
Well, Bootstrap is no exception.
Over time, Bootstrap has come under heavy fire by designers and UI experts.
Heres why:
Want tomaster CSS?
Check out thisUdemy online course.
No discussion of modern CSS frameworks is complete without mentioning Foundation, so here we go.
At first glance, it looks like a tall claim to go with a marketing campaign.
However, adherents of the Foundation framework know theres at least some truth to that.
No more twelve column grids and figuring out what 4/12 is supposed to be!
While Foundation is much less popular than Bootstrap, its a trade secret for many expert front-end developers.
For Bootstrap developers, Bulma has a separate section to convince and help them migrate over.
UIkit
The thing that comes to mind when thinking ofUIkitis minimalism.
If super-clean, elegant, non-whitespace-shy designs are your thing, UIkit has you covered.
Just head over to the UIkit website and check out all the incredible components it has on offer.
But is there a catch, youre wondering.
Yes, there is.
There are more than 3000 theming variables, which results in a massive breadth.
Or so the docs say.
It also has one of the steepest learning curves, and coding conventions are much more strict.
Try it; Id say, and see if it looks like something you might prefer.
Susy
Susyis a little-known framework at this point, but its a fascinating and refreshing idea.
In the hands of the expert developer, Susy is like a flamethrower than blows everything else away.
Lesser mortals, of course, will manage to burn their hands.
Materialize
If youre in love with Googles Material Design, Materialize is aframeworkyoull enjoy.
There are few customization options, and Materialize follows the popular 12-column grid format established by Bootstrap.
If you ask me, though, aMaterial designis becoming so common, and is so .
Flat by default, that pretty soon well be complaining about it as we do about Bootstraps all-websites-look-the-same problem.
Still, its a nice framework to start with.
Pure
Is Yahoo dead?
A quick look impresses me, and I wonder why this offering is not known to more people.
Anyway, what makes Pure, well, pure, is that its apureCSS framework.
Itsboilerplate, and contains only 400 lines of source code!
Milligram
Milligram, a CSS framework designed for speed and productivity.
The developers have kept it under 2 KB in size, which by todays standards, means a lot.
A milligram is a fun little take on CSS frameworks that youll appreciate working with.
Tailwind CSS
Tailwindadvocated a style of writing and using CSS that sent many screaming in disgust.
And while theres no inline CSS here, it feels like that given how explicit (and ugly?)
the class names are.
Today, utility-based CSS has made a sizeable dent.
Tacit
Tacit is somebodys side-project that I came across while looking for interesting things for this article.
Yup, simply a side project; nothing more than one persons work based on their liking.
Why do I stress that so much?
Because this generally means the risk of getting abandoned is very high.
So, what exactly is this Tacit thing?
As the screenshot says,Tacitis for those who dont know CSS or have bad taste in design.
And does a Tacit website look good?
If you want to take my word for it, Id say the design style chosen is very good.
But you’ve got the option to compare and decide for yourself.
In any case, let me add a couple of screenshots from Tacits look-and-feel.
), layout (grids, hero section, navbar, etc.
), utilities (loaders, spinners, etc.
), and more.
What do I think about Spectre?
Im more or less sold, but there are a couple of things I want to mention.
But this is hardly a deal-breaker if Im able to develop fast and get good results.
So, Ill say go ahead and try Spectre fearlessly!
Primer
Primer isnota CSS framework or library.
Its not even a collection of CSS classes or some other weird twist on terminology.
Then why is it on this list?
Ive been struggling to find the right words to describe Primer.
Their own Design System Team calls it .
Primerincludes many things, the importance of which may not be immediately obvious.
At least to backend/full-stack developers.
And then, some people find one particular part (or even a part of the part!)
of Primer useful and run with it.
Fictoan
Fictoanis an intuitive framework for web designers who want to build user interfaces.
The framework was created to blur the lines between the developers and the designers.
The creators believe that designers should fully control the user experience and UI.
On the other hand, developers should focus on performance and things like deployment.
you might create a simple React app to demonstrate how it works.
Vanilla is used in mostCanonicalproducts, such as Ubuntu and JAAS.
To start using Vanilla, create a project file and navigate into it.
you’re able to then install Vanilla usingyarnornpm.
Why use Vanilla?
Downsides of using Vanilla
So, which CSS framework is the best?
Admit it, youve asked similar questions before and received the following disappointing answer: none.
If you want my advice, here it is: Cut out the noise.
