Unnati Bamania

Posted on Mar 24, 2021

Amazing CSS libraries for your next project

#html #css #javascript #tailwindcss

I've often heard this, 2020 is the era of flying cars but front-end developers are still struggling with positioning divs. Sounds funny but it's true. The solution to many problems like these is a must. Hence, here goes the list of the top 10 CSS frameworks which you must use at least once in your projects. These libraries will enhance your web design, coding experience and help you to outshine your resume.

Materialize CSS

Materialize CSS is a responsive front-end framework created by Google in 2014. It uses a famous 12-column grid for responsive design. This framework is quite commonly used. Developers use the very popular Material-UI with ReactJS mostly for designing.

Why use Materialize CSS?

Variety of features: If you're really a fan of Google's Material design then you must choose this framework. It also provides a lot of
Easy to use: Their documentation is the best guide and tutorial. One can follow along and learn easily. All the complex features are designed and coded in a simple form hence reducing the coding time.

Grid System in Materialize CSS

<div class="row">
   <div class="col s1">1</div>
   <div class="col s1">2</div>
   <div class="col s1">3</div>
   <div class="col s1">4</div>
   <div class="col s1">5</div>
   <div class="col s1">6</div>
</div>

Bulma CSS

Bulma is a relatively new framework and considered to be one of the best CSS frameworks to work with. According to the statistics, it ranked 5th in the category of best CSS framework in 2020. It attracts developers by the simplicity of its designs and variation in the components which is something different when compared with older frameworks.

Why use Bulma CSS?

Pure CSS, no JS: It has its component in pure CSS. If you wish to add it to your project, all you need is one CSS file and no JS file.
Easy to learn and versatile: It has thorough documentation hence developers don't need to seek various tutorials. Bulma comes with typography, forms, buttons, tables, and much more. This contributes to a solid foundation and high versatility of the framework

Box

<div class="box">
  I'm in a box.
</div>

Titles

<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>

Tailwind

Tailwind is a low-level CSS framework and a customizable CSS framework. Unlike Bootstrap that creates generic-looking UIs, Tailwind allows you to customize your designs and create a unique look and feel.

Why use Tailwind CSS?

Customizable: It gives you a lot of freedom to customize their components. Unlike other best frameworks of CSS, Tailwind doesn't tell you what your website should look like.
Greater Development Speed: Since tailwind almost eliminates the big step of having to write CSS, the development speed increases by manifold.

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">
    The feature you've all been waiting for.
  </p>
</div>

<button
  class="bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-50"
>
  <!-- ... -->
</button>

Bootstrap

Bootstrap is one of the extremely popular CSS frameworks. As it is easy to use and beginner-friendly it is the choice of most web designers. Its current version is Bootstrap 5. It is also supported by Sass and Less. Its powerful grid system, badges, buttons, card components, navbars, alerts, and simple designs make it popular, and developer-friendly. Bootstrap also provides a wide variety of themes that can be used in projects.

Why use Bootstrap?

Powerful responsive design: Bootstrap provides a powerful and responsive grid system that is easy to use and understand.
Low Learning Curve: It is one of the best frameworks for web beginners. The best part is, it has well-formatted documentation and a lot of tutorials hence it becomes easy for developers as well.

Positioning in Bootstrap

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Grid System in Bootstrap

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Foundation

Foundation is a widely used CSS framework. Foundation is a way more sophisticated framework. It is very flexible and easily customizable. Facebook, eBay, Mozilla, Adobe are some of the companies that use Foundation. The best part about Foundation is it gives freedom for developers to show their creativity and customize components.

Why use Foundation CSS?

More Uniqueness: It allows you to customize your site such that it doesn't look like other sites on Foundation.
More than just UI components: It is very flexible and responsive. And it is much more flexible than Bootstrap. The developers have included an advanced responsive image system, form-validation, right-to-left support, responsive embeds.

Grid system in Foundation

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>

Semantic UI

Semantic UI is also a responsive front-end framework. It has 3000+ Theming variables and 50+ UI components. It is also integrated with third-party libraries which are React, Angular, Ember, etc.

Why use Semantic UI?

Friendly Class names: Semantic UI is ** human-friendly HTML** Its class names are very readable and friendly.
Pretty LayoutsL Semantic UI has 3000+ amazing theming variables. Hence, it becomes easy for developers to select a theme and build projects.

UI Kit

UI Kit is a lightweight CSS framework. When you need a minimal design then a UI kit is the best framework for you. It is simple, clean, and elegant.

Why use UI?

Minimalism: UI Kit helps developers to create a modern, simple, and clean design.
Modular: Developers can select different designs and components without damaging the overall style of the site.

References and Credits

I've used Bootstrap, Materialize, Tailwind, and Bulma CSS in my projects. Which one is your favorite or you would like to use in your upcoming projects? Please do mention down in the comment section below