CSS is one of the key to make web designs appealing and mordern according to 2021 sites. Thanks to these frameworks who helps us from last decade solving major huddles of creating features or better UI and UX. In this article we will learn one of the best CSS frameworks out there and the best use case of each.
1) Tailwind CSS
A utility-first CSS framework packed with classes like
rotate-90 that can be composed to build any design, directly in your markup. Tailwind in created by Adam Wathan he is the CEO at Tailwind labs.
It’s tiny in production.
Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10KB of CSS to the client.
Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you build responsive designs right in your HTML instead.
Throw a screen size in front of literally any utility class and watch it magically apply at a specific breakpoint.
Hover and focus states? We got ’em.
Want to style something on hover? Stick
hover: at the beginning of the class you want to add. Works for
focus-visible, and even fancy states we invented ourselves like
Sites Build with Talwind:
- Windy Blocks
- Larval Spark
CDN link https://getbootstrap.com/docs/4.3/getting-started/introduction/
Bootstrap pros CSS
- Mobile first
- Grid system
- Support for LESS and SASS
Sites Build with Bootstarp:
Bulma is open source free framework which provides ready to use components of html. The end result of bulma is single css file. You also need saas setup installed this can be acheived by node-saas, Saas CLI and Webpack. It handels responiveness by it self and support various breakpoints.
If you are working on Jam stack you can install bulma by command
npm install bulma
Mannualy by cdn or going to their site Bulma.
<link rel="stylesheet" href="https://firstname.lastname@example.org/css/bulma.min.css">
Sites using Bulma.
Boostrap is still popular than talwind and Bulma according to google trends however there are great components offer by both talwind and bulma if we already worked with bootstrap it worth to try these new css frameworks.