Looking for Best CSS Frameworks in 2022? 🧐 Well, here we have listed down some of the best trending CSS frameworks so that you can get a detailed o...
For further actions, you may consider blocking this person and/or reporting abuse
It's 2020. These are all THE WORST. Seriously. This list should be called "the best ways to write CSS for those who are absolutely terrified to even try to learn CSS." Or "The best ways to write the worst markup."
CSS Framework users: explain yourselves.
It's not your fault. This a great list. Good research! But - these are all just sidestepping an absolute truth - that CSS is just AMAZING now / and you don't need all this crap.
JUST LEARN CSS - on the discord
Almost all layout comes down to a few lines of code
Baby talk for computers
Exploring a tailwind component
Are developers jerks (are we jerks?)
"37 and a half ways to avoid just learning a simple declarative language"
We're pushing "like" on this post - because we think the work you put into it is A+ / but if we could put a 💩x20 on the 'frameworks' vs CSS / we would.
(added this example)
Which one of these is readable?
But if you don't want to learn CSS - then maybe frameworks are helpful? / but also if they are sooo fast and helpful - hopefully you don't bill by the hour - because doesn't that mean you'll be out of a job in the near future? Or is it the opposite?
While I agree with the general sentiment that most frameworks suck, a handful of them are actually useful and save time (If you are an experienced developer, I am sure you are saving snippets or bootstrap files of your own to try and reduce the amount of repetition in every project. So you're writing your own framework in one way or another).
That said, lightweight and simple frameworks (written in pure CSS with no compilation required) are always the way to go. Devs should stay away from the monster frameworks that are like using a sledgehammer to put in a nail.
Please, stop lying to yourself. "writing your own framework" is miles away from using a pre-made one that fits all needs (but yours, really).
A framework would never be "written in pure CSS" anyway, that would be a nightmare to maintain. You might only have access to a monolithic, pre-compiled and non configurable version of it, but it doesn't make it simpler. I would even tend to say it's worse as you can't customise it to your needs (if such a thing really exists).
Here are some pure CSS frameworks that spring to mind:
Those frameworks use just a single uncompiled CSS stylesheet, so they require only 1 extra request to load, and they are extremely easy to customise (some of them use a handful of CSS variables to change the entire appearance). To me that's not much of a big deal.
If you want to go one step further, you can use a classless framework, requiring zero modification to HTML code: github.com/troxler/awesome-css-fra....
I wouldn't call a classless framework a "framework", it's just an opinionated CSS reset.
Google defines a framework as: "a basic structure underlying a system, concept, or text." or "an essential supporting structure of a building, vehicle, or object."
CSS Resets are actually frameworks by that definition: github.com/troxler/awesome-css-fra...
Many experienced developers hear the word "framework" and freak out - without really considering that there are some really useful, extremely lightweight systems out there that are helpful and fully customisable. Of course, no one is forcing you to use them, but you'll find Normalize.css on many websites for a very good reason - it's handy and it saves time.
A framework that doesn't save you time is worthless, I 100% agree with that. But I don't agree with the kneejerk reaction that "All frameworks suck!"
It's 2020, we don't need CSS "frameworks" anymore :)
AMEN!
Let's see a list of "things we can just do" already...
If you're making a quick MVP for a desktop-only dashboard app - and you only have a night... and you already know bootstrap from years of already using it... then great... but otherwise? Just write CSS!
I always prefer CSS Grid or Flex Box before I consider using a CSS framework. And if I do use one it is because a company wants to use it for a project or something. Vanilla is more than good enough now.
I agree in terms of layout and what not and also admit that yes, I have to because employer X has already decided.
I use this term vanilla javascript and vanilla css because it's such a well-understood one. But am I being fidgety that I prefer now to say platform javascript or platform css? Vanilla has always bugged me somehow. I literally had a debate with a friend because on AgnosticUI site it says "It even works in vanilla JavaScript 😎 "; and it links out to that funny vanilla javascript page that pretends to be an actual framework. But I feel we should rename this thing. What do you think?
Well... it depends a lot on the project... personally even though I like writing up raw CSS (making use of --var declarations to emulate what frameworks do) it is handy to have a simple scaffolding stylesheet to lean on and do a lot of the heavy lifting. When you have many projects on at once you need to find all the time you can get for delivering them, and simpler lightweight frameworks are perfect for that.
I personally try to stay away from clunky and bloated frameworks, and opt for things like Tailwind.css that you can just sprinkle here and there to help out with some of the more tedious parts of UI design. The framework shouldn't dictate the appearance too heavily (like Bootstrap does), but it should just be there to catch your fall when you need it, and let you stay in the driver's seat in terms of appearance.
This is the bit that excites me, and gives me new confidence in frameworks. More and more of them are opting to be just a single simple CSS stylesheet, mostly using --var declarations to do all of the hard work, and the result is frameworks that are more flexible and 'modern' than the old days where we'd have to override thousands of styles by hand. Tailwind is a great example of that new approach.
How is tailwind modern? It's just a ton of unreadable utility styles that you have to memorize. They've just created a new metalanguage - and now they can charge people to use 'pro.' It's like the first idea that ever happened... and then we realized it was bad - and now tailwind is doing it x100 10 years later. How is that modern?
You know what all these frameworks do?
They make believe junior developers know HTML and CSS. Every single time we get interns, they can't debug even debug CSS issues because they don't have the most basic knowledge. Don't know about the most critical properties like position and display, or the difference between px, rem and em.
When I show them how little code you need to write the most complex components, they are blown away.
Bring the craftsmanship back instead of pooping more useless tools that re-invent the wheel (but all they do is create a square one).
While everyone talking about which is better, am actually surprised at some the numbers, especially "number of sites" maybe the because of the teams I have worked with. I always thought Bootstrap was the most used, due to its popularity. Well, thanks for sharing.
These CSS "frameworks" are the dumbest idea people had since using tables for layout, and back then they at least had the excuse that there was no alternative method, which isn't even remotely true now.
What all these frameworks really bring to your project:
In short, most of what these frameworks achieve is roll back all the benefits of CSS to write HTML like the "good old days" again.
I feel like I need to add that the article itself is very well written. I just wish it was about all the great things vanilla CSS can do and how to reduce the styling-related code instead of spreading it all over the markup.
Ive always found css a bit alien so upto about 4 years ago tended to be steered towards the likes of bootstrap but rightly or wrongly found myself still adding a ton of css just to make things not look a bit samey between projects. I then found skeleton and liked the way you started out with a clean slate and a basic set of styles but quickly started re-using the same css across multiple projects so came up with a boilerplate css starting point.
We have now used this on a multitude of projects and dont ever get the feeling of we are battling with a framework. Its simple and gives us a good leg up to build upon. Its not popular but might help some folks (karmacss.com).
Every project seems different and its difficult to come up with a minimal starting point without creating bloatware but this works for us..
Thank you very much for your feedback.👍
Another to add to the list - minicss.org/docs - I like this one because it's a single CSS stylesheet with no compiling necessary, and the main variables are driven by --var declarations. It isn't as open ended as Tailwind, and provides common component styles so it's easier for beginners to get into.
I do like the stats and bundlephobia research and what not. I always double check against bundlephobia though because sometimes it assumes I'm going to reference the wrong dist file.
I would say reading many of the comments there's a mix of folks that say don't use a framework at all vs. those that feel it's beneficial. I would definitely say that the grid and layout part of things should probably be learned via CSS's own flexbox and grid at this point. It's prolific and well supported and you're really just replacing it with a whole new DSL. I've heard Tailwind doesn't include a grid and I have to imagine this is because they figured, well they can just use CSS grid/flexbox for such things.
Open props is an interesting approach I've come to discover. It uses CSS custom properties similar to how a utilities framework would but seems liberating a bit. You could certainly look at that code and create your own custom custom props utilities quite easily.
I created AgnosticUI which is a component-based framework probably similar in many respects to Bootstrap as I use SMACSS or class chaining, but I sprinkle some utilities in there minimally. I had a huge Flexbox based grid abstraction that I gutted because I agree that in 2022 it's time for folks to just use platform CSS for this stuff.
Btw, we should also use logical properties! replace
margin-leftwithmargin-inline-start. If you don't know why or haven't heard of these things I strongly suggest googling it! Global writing modes for free. IE11 will EOL June 15. No need to worry about it! Embrace the platform and use CSS frameworks intelligently and only import modules you actually use or fork the project and create your own custom system. The creators will not be offended (unless you repurpose it as a framework of course lol).And lastly, of course you must learn some CSS whichever way you go but you can do it!! 💪 ⭐ 🙌
These and more Frameworks and Libs in this repo: github.com/gabrielizalo/Awesome-CS...
Great list of options to help us choose the right tool for the job ;)
My take on this based on some pains and learning from others;
Note that Semantic UI is no longer maintained for over two years now. The Formantic UI fork is actively maintained. I've used this on projects.
I personally prefer WEAVV been using it for years.
A colossal low-level utility CSS framework for crafting a beautiful and elegant user interface at an atomic level
A colossal low-level utility CSS framework for crafting a beautiful and elegant user interface at an atomic level.
Version 1.0.1
Documentation
Tools
Build
$ git clone https://github.com/weavv-css/weavv-css.git $ cd weavv-css $ npm installBuild full version,
Build minimal version,
Build file is locate in
./dist/directory.Community
Credits
Sass, NodeJs, Gulp, Normalize, PostCSS.
MIT
try mvp.css andybrewer.github.io/mvp/
"A minimalist stylesheet for HTML elements
No class names, no frameworks, just semantic HTML and you're done."
Hi.Please take a look on agilecss.com CSS framework and UI kit, it provides some unique features not available in other frameworks, for example all the common used UI elements without JavaScript.
I personally use milligram.io/. I have been using it for a long time just to prototype some projects.
I like how skeleton comes close.
Very well documented , amazing and very helpfull , Thanks
MaterializeCSS has a new github repository
Materialize, a CSS Framework based on Material Design
MaterializeCSS
Materialize, a CSS Framework based on material design
-- Browse the docs --
Table of Contents
Quickstart:
Read the getting started guide for more information on how to use materialize.
git clone https://github.com/materializecss/materialize.gitnpm install @materializecss/materialize(Beta:npm install @materializecss/materialize@next)Documentation
The documentation can be found at materializecss.github.io/materialize. To run the documentation locally on your machine, you need Node.js installed on your computer.
Running documentation locally
Run these commands to set up the documentation:
git clone https://github.com/materializecss/materialize cd materialize npm installThen run
npm run devto compile the documentation. When it finishes, open a new browser window and navigate tolocalhost:8000/docs. We use BrowserSync to display the documentation.Documentation
…EDIT: and yet another sponsored post
We prefer the original Repo created by Author: github.com/dogfalo/materialize which is mentioned on the framework materializecss.com/ website too.
Where is unocss?
And Fundation is dead from years now.
My team uses beercss.com. We are very happy with it. And it's nice for PWAs.
I'm a contributor and developed some templates here codepen.io/collection/nMNQvq
Do you like it?
Thanks for your input, updated it.
The newest CSS framework now is Get Lookover,
Check out our website to use it:
get-lookover.github.io/
Here are outher pure CSS frameworks: