loading...
Cover image for Best CSS Frameworks in 2020

Best CSS Frameworks in 2020

theme_selection profile image themeselection Updated on ・15 min read

Looking for Best CSS Frameworks in 2020? 🧐 Well, here we have listed down some of the best trending CSS frameworks so that you can get a detailed overview of various CSS frameworks at once…!!

As we all know that a CSS framework is a code library that abstracts common web designs and makes the designs easier for a developer to implement in their web apps. In simple terms, a CSS framework is a collection of CSS style-sheets that are prepped and ready to use.

Why use CSS frameworks?
  • Speeds up your development
  • Enables cross-browser functionality
  • Enforces good web design habits
  • Gives you clean and symmetrical layouts
  • They make your styling workflow productive, clean, and maintainable

Besides, they’re structured for use in common situations, like setting up navbars and are often amplified by other technologies such as SASS and JavaScript. The major advantage of a proper CSS framework is, it saves your time as you don’t need to begin from scratch.

There are many CSS frameworks available, and of course, it is hard to search for the right CSS framework here and there. So, we have prepared this list of Best CSS Frameworks 2020, which will help you to get an overview of particular CSS frameworks.

With any of these frameworks mentioned in the list below; you’ll be fully equipped to build clean, maintainable projects with minimal time investment.

Best CSS Frameworks in 2020

This list is prepared carefully referring the following trusted sources:

1. Tailwind CSS: Low level, utility-first framework

Tailwind CSS framework

Tailwind CSS is a highly customizable, low-level utility first CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Unlike other CSS frameworks (Bootstrap or Materialize CSS) it doesn’t come with predefined components. Instead, it operates on a lower level and offers you a set of CSS helper classes. By using these classes you can rapidly create custom design easily. Tailwind CSS lets you create your own unique design.

You can check Tailwind’s Github page.

Reasons to use Tailwind:

  • No default theme
  • Doesn’t impose design decisions that you have to fight to undo
  • Offers a head start implementing a custom design with its own identity
  • Comes with a menu of predesigned widgets to build your site with

Tailwind CSS framework

Some additional Info:

  • Release date: November 2, 2017
  • Git star, Forks, Contributors: 27.1k, 1.3k, 255
  • Hacker News, Reddit, Stack overflow: h, 245,525
  • License: MIT
  • No. of sites: 11,671
  • Documentation: Good
  • Core concept: Utility first, responsive
  • Grid: Flexbox
  • Browser Support: All modern browser
  • Companies using: Setel, Livestorm, Mogic, Declik

2. Bootstrap: World’s Most Popular Framework

Bootstrap CSS framework

Bootstrap is the world’s best CSS framework with large community support. This framework is built in HTML, SASS, and javascript. Currently, Bootstrap 4.5.0 is the latest version with more responsiveness with utility classes and new components. It is directed at the responsive, mobile-first front end development which makes it usable for any device and developer-friendly. Bootstrap supports all modern browsers. The best advantage of bootstrap is, this framework has great javascript components with custom files or CDN.

You can check out Chameleonfree bootstrap admin template, it is a Modern Bootstrap 4 WebApp & Admin Dashboard Html Template elegant design, clean and organized code.

You can also check the bootstrap-based Vuexy Admin template and Frest Admin template. These both are advanced, highly customizable, and responsive admin templates.

Bootstrap 5 Alpha has already arrived, if you want to know more about it you can check the article on Bootstrap 5 Alpha Arrived What’s new and things you need to know about it.

Reasons to use Bootstrap:

  • Bootstrap offers lots of examples and a pre-set layout to get you started with.
  • With Bootstrap, the developers can easily stitch different components together and layouts to create a new and impressive page design.
  • Many detailed documentations are provided with those layouts so that the users can understand them easily.
  • Bootstrap is based on the MIT License, therefore it is free to use, free to distribute, so you can develop and you can contribute to the community as well.
  • Bootstrap’s Github page GitHub consists of more than 19,000 commits and 2000 contributors.

Bootstrap CSS framework

Some additional Info:

  • Release date: August 19, 2011
  • Git star, Forks, Contributors: 144k, 70.2k, 2261
  • Hacker News, Reddit, Stack overflow: 3.3k, 9k, 98k
  • License: MIT
  • No. of sites: 20,737,671
  • Documentation: Excellent
  • Customization: Basic GUI Customizer (need to put color values manually)
  • Core concept: RWD and mobile-first
  • Learning Curve: Mild
  • Grid: Flexbox-based up to 12 column
  • Browser Support: Latest Chrome, Safari, Firefox, Opera, Safari, Edge & IE 10+, Android v5.0+
  • Companies using: Spotify, Coursera, Vine, Twitter, Walmart, and many more

Ideal for:

  • A beginner who is new to CSS, as he or she can kick start Bootstrap without any hurdles.
  • A developer with little knowledge of JavaScript who can still use Bootstrap components without writing a line in JS.
  • A back-end developer who wants to make some UI changes even if he or she is new to both HTML and CSS.

3. Materialize CSS: A Material Design Based CSS Framework

Materialize CSS Framework

Materialize CSS is a responsive front-end framework based on the material design with collections of UI-components with minimal effects on which users can easily attract. Materialize is fully responsive in Tablets and mobile. It is easy to learn as well as excellent documentation is provided. This framework has large community support and great positive feedback. Materialize CSS allows you to customize options with an impressive set of color collections.

Materialize Admin Templates based on Materialize CSS framework are vastly used over the world due to its responsiveness.

If you are looking for some of the free admin templates/ bootstrap templates based on material design, then you can check the materialize admin template.

Reasons to use Materialize CSS:

  • The documentation page of Materialize is very comprehensive and pretty easy to start with.
  • Materialize’s GitHub lists more than 3,800 commits and 500 contributors.
  • Materialize’s components page includes cards, buttons, navigation, and many more added features.

Materialize CSS Framework

Some additional Info:

  • Release date: September 2011
  • Git star, Forks, Contributors: 38k, 4.9k, 515
  • Reddit, Stack overflow: 374, 3.2k
  • License: MIT
  • No. of sites: 111,481
  • Documentation: Good
  • Customization: Basic GUI Customizer
  • Core concept: RWD,mobile-first, semantic
  • Grid: XY 12- Column grid,Floted (flexbox in latest version)
  • Browser Support: Chrome 35+, Firefox 31+, Safari 9+, Opera, Edge, IE 11+
  • Company Using: Avhana Health, Mid Day, Architonic, and many more

Ideal For:

  • It is accessible to everyone and easy to pick up quickly.

4. Material Design Lite: Light framework based on Material Design

 Material design CSS framework

Material Design Lite is a UI component library created with CSS, HTML, and JavaScript. It lets you add a Material Design look and feel to your websites. Besides, It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. You can use the components to construct attractive, consistent, and functional web pages and web apps. Pages developed with MDL will be able to support all the modern web design principles like browser portability, graceful degradation, and device independence.

The MDL component library offers new versions of common user interface controls such as buttons, text fields, and checkboxes, which follows Material Design concepts. The library also includes advanced and specialized features like cards, spinners column layouts, sliders, typography, tabs, and more. MDL is free to download and use, and may be used with or without any library or development environment (such as Web Starter Kit). It is a cross-browser, cross-OS web developer’s toolkit.

You can check Material Design Lite’s Github.

Reasons to use Material Design Lite:

  • Created by Google, MDL is up to date, easy to use, has a wide feature coverage, and no external dependencies.
  • An important advantage is that MDL can be used with Elm, a language of graphical user interfaces.
  • MDL provides a great out-of-the-box look that may need no customization.
  • With their blogging templates, Material Design Lite enables you to get a blog started in minutes.
  • MDL provides a rich set of components, including material design buttons, text fields, tooltips, spinners, and many more.

 Material design CSS framework

Some additional Info:

  • Release date: June 19, 2014
  • Git star, Forks, Contributors: 31.7k, 5.3k, 345
  • Hacker News, Reddit, Stack overflow: h, 197, 648
  • License: Apache-2
  • No. of sites: 74,521
  • Documentation: Good
  • Core concept: Cross-device use
  • Learning Curve: Moderate
  • Grid: 12: Desktop: 12 desktop, 8- tablet, 4- phone
  • Browser Support: IE9, IE10, IE11, Chrome, Opera, Firefox, Safari, Chrome (Android), Mobile Safari
  • Companies using: Google wallet, Google Project Sunproof, Talks at Google.

Ideal for:

  • For everyone, who wants to write more productive, portable, and most importantly usable web pages as MDL essentially makes the concept accessible to pick up smoothly and with ease.

5. Bulma: Free, Open Source CSS Framework

Bulma CSS Framework comparison

Bulma is a responsive modern CSS framework. This framework is built-in HTML, SASS CSS prospector, and CSS flexbox. Bulma gives lots of options to customize with your requirements using sass files, web packs, and variables. Bulma is created in pure CSS., which means while using the framework all you need is one .css file and no .js.

This framework has some highly advanced features which help you to make your website more attractive and less code’s. You can use the utility’s functions to create dark and light color patterns. It has the same grids as bootstrap. Bulma allows you to add SASS Modularity. It is compatible with both Font Awesome 4 and Font Awesome 5 thanks to the .icon element.

Reasons to use Bulma:

  • Bulma offers clean and simple presets which make it easy to choose as per the topics the developer wants to explore.
  • Bulma provides a decent number of web components from which, one can just simply choose and use it to design as per requirements and modification.
  • Bulma’s GitHub page has more than, 1000 commits and 600 contributors.

Bulma CSS Framework comparison

Some additional Info:

  • Release date: January 24, 2016
  • Git star, Forks, Contributors: 41k, 3.5k, 655
  • Reddit, Stack overflow: 1.2k, 581
  • License: MIT
  • No. of sites: 30,987
  • Documentation: Good
  • Customization: Basic GUI Customizer
  • Core concept: RWD, mobile-first, Modern free
  • Grid: Simple building of column layout
  • Browser Support: Latest Chrome, Edge, Firefox, Opera, Safari, IE 10+ (Partially supported)
  • Companies using: Dev Tube, Economist, Rubrik, and many more

Ideal For:

  • From beginner to pro, any developer can use it due to its simplicity.

6. Foundation: The Most Advanced Front-end Framework

Foundation CSS Framework

Foundation is an advanced frontend CSS framework, built-in HTML, CSS, SASS, and javascript. This framework has a sass compiler with a faster way to design a website. Foundation has its own CLI to install in your pc/Laptop using specific commands and you can easily watch. Similar same file structure like bootstrap Bulma and materialize CSS. This is a mobile-first approach CSS framework with fully responsive with components.

Plenty of forums are available for supports and help to fix any type of issue quickly. Mostly this framework is used for large web applications, to make an amazing website with a stater template and to design an awesome website with an attractive user-interface. It is semantic, readable, flexible, and completely customizable. Foundation has comprehensive documentation and video tutorials on an official ZURB Foundation website.

Reasons to use Foundation:

  • Foundation is the most advanced CSS framework which allows users to create large web applications and many more.
  • Foundation’s GitHub page shows nearly 2,000 contributors and 17,000 commits.
  • It is modular and consists mainly of Sass style sheets.
  • It is updated constantly to support the newest features such as grids with flexbox support.

Foundation CSS Framework

Some additional Info:

  • Release date: November 4, 2014
  • Git star, Forks, Contributors: 28.6k, 5.8k, 2045
  • Reddit, Stack overflow: 1.2k, 803
  • License: MIT
  • No. of sites: 441,292
  • Documentation: Good
  • Customization: Advance GUI Customizer(for the previous version)
  • Core concept: RWD and mobile-first
  • Grid: Standard 12 column fluid responsive grid system
  • Browser Support: Last Two Versions of Chrome, Firefox, Safari, Opera, Mobile Safari, IE Mobile, Edge and IE 9+, Android Browser 4.4+
  • Companies using: Amazon, Hp, Adobe, Mozilla, EA, Disney, and many more

Ideal For:

  • Professional, highly skilled developers and designers whose aim is to create a unique website and wants to customize the framework.

7. Skeleton: Extremely light framework for basic UI elements

 Skeleton CSS framework

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. It is a tool for rapid development. You can get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, with an organized file structure, and super basic UI elements like lightly styled forms, buttons, tabs, and more.

You can check the Skeleton’s Github page.

Reasons to use Skelton:

  • Lightweight
  • Responsive Grid
  • Vanilla CSS
  • Media queries

 Skeleton CSS framework

Some additional Info:

  • Release date: May 15, 2020
  • Git star, Forks, Contributors: 17.8k, 3k, 41
  • Hacker News, Reddit, Stack overflow: 1.1k, 799, s
  • License: MIT
  • Core concept: RWD and mobile-first
  • Grid: 12-column fluid grid
  • Browser Support: Chrome latest, Firefox latest, Opera latest, Safari latest, IE lates
  • Companies using:

Ideal for:

  • Begginers, as it is the simplest framework

8. Semantic UI: Empowers designers and developers by creating a shared vocabulary for UI

 Semantic UI CSS framework

Semantic UI is built around the unique goal of creating a shared vocabulary around UI. Based on natural language principles, Semantic empowers designers and developers by making the code more readable and easier to understand. Users say Semantic UI is easy to work with and just makes sense.

Semantic UI stands out with functionality that goes beyond a CSS framework and includes simplified debugging, and the ability to define elements, collections, views, modules, and behaviors of UI elements.

You can check Semantic’s Github page.

Reasons to use Semantic UI:

  • Semantic UI offers very well-organized documentation. Moreover, the framework has a separate website with guides for getting started, customizing, and creating themes.
  • All Semantic UI classes are human words and coding resembles writing a regular text. This user-friendly approach makes it easier to grasp and understand the framework even for beginners.

 Semantic UI CSS framework

Some additional Info:

  • Release date: September 26, 2013
  • Git star, Forks, Contributors: 48.4k, 5.1k, 391
  • Hacker News, Reddit, Stack overflow: 1.5k, 897, 2.6k
  • License: MIT
  • No. of sites: 124,579
  • Documentation: Good
  • Core concept: Semantic tag, Ambivalence, Responsive
  • Learning Curve: Mild
  • Grid: Default theme: 16 columns
  • Browser Support: Last 2 Versions FF, Chrome, Safari Mac, IE 11+, Android 4.4+, Chrome for Android 44+, iOS Safari 7+, Microsoft Edge 12+
  • Companies using: Snapchat, ESPN, Avira Lingo.

Ideal for:

  • Advanced developers, who know JavaScript well.

9. Pure CSS: A set of small, responsive CSS modules

Pure CSS framework

Pure is a set of small, responsive CSS modules for all your needs. Pure’s size is incredibly small only 3.8 KB minified. Besides, if you choose to only use a subset of available modules, you’ll save even more bandwidth. It is built on Normalize.css, Pure provides layout and styling for native HTML elements, plus the most common UI components. Its minimal styles encourage you to write your application styles on top of it.

You can check the Pure CSS’ Github page.

Reasons to use Pure CSS:

  • Pure’s design makes it easier to override styles. Its minimalist look gives designers a foundation on which they can build their design. That said, Pure is super-easy to customize.
  • The framework is very simple. The class names are easy to remember, extend, and maintain.

Pure CSS framework

Some additional Info:

  • Release date: May 15, 2013
  • Git star, Forks, Contributors: 21.1k, 2.2k, 105
  • Hacker News, Reddit, Stack overflow: 825, 698,
  • License: Yahoo
  • No. of sites: 11,900
  • Documentation: Good
  • Core concept: SMACSS, Minimalism
  • Learning Curve: Mild
  • Grid: a 5ths 24ths unit based grid
  • Browser Support: IE 10+, Latest Stable: Firefox, Chrome, Safari, iOS 12+, Android 6+
  • Companies using: Yahoo, LastPass, Flickr, CanYouSeeMe.org.

Ideal for:

  • Those who don’t need a full-featured framework but only specific components to include in their work.

10. UI kit: Lightweight and modular front-end framework

UI kit CSS Framework

UI Kit is a lightweight, modular front-end CSS, and web UI design framework, which offers almost all the major features of other frameworks. UI kits have lots of pre-built components such as Accordion, Alert, Drop, Iconnav, animations, Padding, etc. which shows usage patterns, component options, and methods.

UI kit helps web developers to create clean and modern interfaces. It offers impressive features, especially when it comes to design, there is no competition with UI kit.

Basically, UIKit is the future of developing apps on Apple’s platforms.

Reasons to use UI Kit:

  • A lightweight and modular front-end framework for developing fast and powerful web interfaces. UI Kit defines the core components such as buttons, labels, navigation controllers, and table views
  • UI kit features pre-built components such as Drop, Alert, Accordion, Padding, Iconnav, animations, etc.
  • It helps to develop responsive, powerful, and fast web interfaces. It consists of a comprehensive collection of CSS, HTML, and JS components.
  • UI kit’s GitHub lists more than 4,000 commits.
  • It is extendable, simple to customize, and easy to use.

UI kit CSS Framework

Some additional Info:

  • Release date: July 19, 2013
  • Git star, Forks, Contributors: 15.7k, 2.2k, 51
  • Hacker News, Reddit, Stack overflow: 139, 21, 8.2k
  • License: MIT
  • No. of sites: 311,897
  • Documentation: Good
  • Customization: Basic GUI Customizer
  • Core concept: Responsive Webdesign, UX focused
  • Grid: Grid, flex and width, the border between grid column
  • Browser Support: Latest Chrome, Firefox, Opera, Edge & Safari 9.1,+ IE 11+
  • Company Using: Crunchyroll, LiteTube, Rover.com, and many more

Ideal For:

  • Professional and highly experienced developers because of the lack of available learning resources.

CONCLUSION:-

The above list gives a detailed overview of the best framework of 2020. Each framework has unique features and a variety of components which makes them preferable for your web applications. You will surely find this article useful and noteworthy, as we have covered all the major aspects of the CSS framework.

Here are some parameters you should consider for the right CSS framework:

  • What sort of CSS pre-processor do you need?
  • UI design preference.
  • Grid system
  • License
  • Browser support
  • Responsiveness
  • Community support

Although, you yourself know what is best for you so in the end what matters is your opinion and selection. So, we hope that you find this best CSS framework list helpful and noteworthy. After going through deep research and digging we have gathered these amazing, responsive, and highly recommended CSS Frameworks suitable for your project.

Do share this with your colleagues, friends, and social media much as you can with attribution. Because sharing is caring…!! Right? 😇

We are sure that after going through this list of Best CSS Frameworks 2020 you’ll be able to choose the right one as per your requirement.

SOURCES:

Posted on by:

theme_selection profile

themeselection

@theme_selection

ThemeSelection provide selected high quality, modern design, professional and easy-to-use Bootstrap HTML Themes, Admin Dashboard Template and UI Kits to create your applications faster!

Discussion

markdown guide
 

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)

tailwind madness
Which one of these is readable?
regular ol html

But if you don't want to learn CSS - then maybe frameworks are helpful / but also - hopefully you don't bill by the hour - because doesn't that mean you'll be out of a job in the near future?

 

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!"

Yeah. I guess we're just kinda mad that bootstrap create 50 billions "why doesn't my CSS work" questions across the internet. It's OK. We don't have to agree. You are correct. Everything is a framework.

If it was included the right way, Normalize should be invisible from the final CSS output tho. Either you merge it manually with your own declarations or you merge selectors with some PostCSS (although not recommended as this would potentially change the order of things). Another reason not to just throw some stuff and make an extra http call for things that you would rewrite anyway when writing your own custom CSS. Being able to tell it's used on many websites tells a lot about how much the devs responsible for them care about performance and optimisation.

Call me an old fart if you want but after close to 20 years of CSS I'm yet to find a CSS (not talking about JS here) framework that makes your life easier AND doesn't impact performance.

 

A whole handful? 😉

Yeah. We definitely have our own CSS rules and things we use on every project. But it's not really a 'framework' - and more of just some structural conventions. Our biggest problem is really just how the markup looks and the entire methodology of adding style by way of HTML. .pull-left type classes don't really make sense anymore.

 

Yep. That is exactly it. People just don't want to learn CSS. Companies have imbued an interest into our industry that only things that are programmatical in nature are valid (which they are, if your only interest is to cut expenses and make more money). But HTML, CSS and even JavaScript (in the context of a scripting language) were never made for "Programmers", they were made for everyone.

 

100% agree. CSS is in a very good place right now, especially with grid and flexbox, and with custom properties that can be manipulated with JS. CSS is VERY GOOD.

 

It's 2020, we don't need CSS "frameworks" anymore :)

 

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.

 

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?

Tailwind is highly modular, and doesn't hold your hand, so it's more 'modern' than the traditional frameworks like Bootstrap that have opinionated ideas about how a card or a menu bar should look. If you have a problem trying to memorise utility styles you can always refer to documentation, so I don't think that's an argument against Tailwind.

If you want to do absolutely zero thinking when you're writing HTML, but still have the power of a framework to support it, you can always turn to classless frameworks: github.com/troxler/awesome-css-fra...

 

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!

 

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:

  • More code, because you apply styles to elements instead of rules
  • Worse maintainability, because you have to stile similar elements individually
  • Less readability, because the markup is cluttered with styling information
  • All websites using the same toolkit look mostly the same

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.

 

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).

 

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.

 

Even though my favourite framework is Bulma, I seriously like plain ol' CSS, come on, It's just better, and Tailwind, it's just like inline CSS (which is seriously discouraged).

 

Looks like there's a small typo in the semantic UI "Reasons to use Tailwind" 😉

Great article! Thank you !

 

Thanks for your input, updated it.

 

Very well documented , amazing and very helpfull , Thanks

 

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;

  • Foundation UI - Design Driven Development (designs are in place) - bigger teams
  • Tailwind - Develop and Style as you go and possible prototyping. - smaller teams
  • Bootstrap - Prototyping Features and require some UI
  • Formantic UI - Personal or Smaller Projects requiring options & components

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 use milligram.io/. I have been using it for a long time just to prototype some projects.

I like how skeleton comes close.

 
 

MaterializeCSS has a new github repository

GitHub logo materializecss / materialize

Materialize, a CSS Framework based on Material Design

MaterializeCSS

Materialize, a CSS Framework based on material design
-- Browse the docs --

Travis CI badge npm version badge CDNJS version badge dependencies Status badge devDependency Status badge Gitter badge

Table of Contents

Quickstart:

Read the getting started guide for more information on how to use materialize.

  • Download the latest release of materialize directly from GitHub. (Beta)
  • Clone the repo: git clone https://github.com/materializecss/materialize.git (Beta: git clone -b v1-dev https://github.com/materializecss/materialize.git)
  • Include the files via cdnjs. More here. (Beta)
  • Install with npm: npm install materialize-css (Beta: npm install materialize-css@next)
  • Install with Bower: bower install materialize (DEPRECATED)
  • Install with Atmosphere: meteor add materialize:materialize (Beta: meteor add materialize:materialize@=1.0.0-beta)

Documentation

The documentation can be found at materializecss.com. 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

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.