Previously, we've learnt how to add classes to a CSS file and use them in the HTML file. It's always recommended to use external CSS files to avoid repetition in our code.
But at one point you would find that writing CSS rules for a large scale project takes a lot of time.
So instead of doing that, we're going to jump ahead a bit, and show you what a lot of professional developers do these days - which is to use CSS frameworks that makes styling much simpler.
In this lesson, we will learn about CSS framworks.
In essence, a CSS framework consists of several CSS style sheets ready for use by web developers and designers like you and me. These style sheets helps us to quickly add web design functions to our HTML, such as: setting colors, layout, fonts, navbars, etc.
With a CSS framework, you only have to code the HTML with accurate classes, structure, and IDs to set up a web page. The framework already has built-in classes for common web elements like – buttons, cards, slider, navigation bar, column-based layouts, and so on.
- First, you can quickly create a user-friendly and visually appealing User Interface.
- CSS frameworks make it simple to create websites that are compatible with multiple browsers and browser versions.
- Teams with multiple developers, especially larger ones, can really appreciate the standards that a CSS framework brings to the table.
I can’t think of a conversation about CSS frameworks that wouldn’t include Bootstrap. Twitter introduced the framework in 2011 to make responsive web design easily accessible to developers. Here are some reasons why you should consider using it in your projects.
- Most popular front-end framework: Bootstrap is among the most popular open source projects in existence.
- Massive Ecosystem: Among front-end frameworks, Bootstrap’s ecosystem is unmatched. It offers, out of the box, a vast library of layouts, themes, UI elements, panels, modals, buttons, alerts, cards, etc., that devs and designers can choose from and implement.
- Bootstrap is easily customizable.
Bootstrap website Link: http://getbootstrap.com/
“Most CSS frameworks do too much” — Tailwind‘s motto clearly explains why it’s a lightweight framework that offers freedom to developers. It doesn’t come with a specific set of design elements, but rather allows you to implement your own unique style faster. Reasons to Use Tailwind
- Highly Customizable: Tailwind CSS comes with a default configuration, but it allows us to easily customize the - styling, themes, spacing, palettes, etc.
- It comes with commonly used Utility Patterns to deal with standard requirements: specifying and organizing classes, cascading classes, etc.
- Even though Tailwind doesn’t include any pre-designed components, it allows you to create your own custom components that you can reuse throughout your projects.
Tailwind website Link: https://tailwindcss.com/
To conclude
There are a lot other CSS frameworks available in the market today such as: Foundation, Bulma, Miligram, Materialize etc. Some of them offer pre-made components, some only provide utility classes and don’t offer styling. In one way or another, they all help us to boost our productivity.
So, choosing a framework with a high level of community support, such as Bootstrap or Foundation, is a safe choice since the large community supports the project.
But on the other hand, since many frameworks become bloated over time, newer and better options start emerging. Tailwind is one of them as is focuses on improving coding productivity while maintaining a small size and a very specific set of features.
So, in the next lesson we will find out, how to use a CSS framework for styling.