UI Library
CSS Frameworks
#Overview
CSS frameworks provide pre-defined classes to easily add their pre-built UI components like buttons, forms, dropdown menus, and many more. Instead of thinking about different properties and values to apply to an element, the framework makes it easier for developers to build UI by using class that comes pre-styled with necessary properties. The frameworks are also built for responsive design with mobile-first approach media query breakpoints and easy-to-add responsive grid layouts. It can also make working in a team easier with their generalized class names and values so there is no conflict and ambiguity with having different class names.
#Should You Use It?
The UI components provided by the frameworks are indeed easy to add, but they are usually limited in their customization, so if the focus is not on making the website stand out with unusual layouts and animations but more on the functionalities, using a framework can be helpful. But if it’s to design an attractive and artistically inspired website, then using plain CSS or a CSS preprocessor is the main choice.
On the good part, the frameworks provide consistent visual styling while following the best practices and accessibility guidelines like the contrast ratio. Moreover, it reduces the time spent coding the functionalities, such as building a form or a modal. Therefore, when working on a big project, this can save a lot of time. Also, the generalized class names kind of solve the problem of naming the classes in large documents or other team members having their way of managing classes.
However, one of the reasons that people dislike using frameworks is the resulting bloated code, which makes the code harder to read. Let’s look at a simple navbar built using Bootstrap. You can create a navbar by just using a few class names like .navbar for the parent, .nav-item for the list of navigation links, and .nav-link for the anchor tag. Looks easy and clean but once you start adding other properties, it will result in lines of class names for just one element.
<nav class="navbar navbar-expand-lg navbar-dark
bg-primary p-2 p-md-4 d-flex justify-content-md-between">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>Another is the opinionated design system, due to which you may need to write the HTML elements following the rules defined by the framework. This raises another problem which is the learning curve as each framework has its own design system with different naming conventions and class names. So let’s look at a few popular CSS frameworks and differences.
#Bootstrap
If you have been in web development then you probably have heard about Bootstrap as it is the most popular framework. With millions of websites designed using Bootstrap, it's also infamous for the generic Bootstrap template that most designers hate. But with new recent updates, there are more options for customization through Sass. Then again if you don’t know how to use Sass, you probably need to add that to the learning curve as well.
Regarding the components, Bootstrap offers a lot of interactive components like dropdowns, tooltips, and navbar toggle which require their optional JavaScript and Popper plugin. Using this we can add interactive elements without writing any JavaScript. To use utility classes for applying different styles, Bootstrap has a class naming convention of appending the style name with the element’s class. For example; .navbar is the class for the navigation bar, to add the “light” variant style we define it as .navbar-light. The final result would be class="navbar navbar-light" and it can be combined with other classes like .bg-light for light background.
To build a mobile-friendly navigation with a menu toggle using the code from earlier, we need to add a button and give it a .navbar-toggler class. Along with data-bs-toggle and data-bs-target which are data attributes pre-defined by Bootstrap. The ul must be enclosed with an element of .collapse class and provide an id that is used by data-bs-target. With that, we have a toggle button for small screens.
As Bootstrap has been around for a long time with a large community, they have good documentation with plenty of examples along with tips to make an element more accessible.
Resources
#Bulma
Bulma is another modern CSS framework that has gained lots of popularity despite not being as old as other frameworks. Bulma is built on Sass and provides more functionality and flexibility using features like mixins, and function. The layouts are built using Flexbox for responsive columns that automatically adjust to the screen sizes. Unlike Bootstrap, it does not have JavaScript dependency so all the components are CSS-based making the framework lighter.
Being slightly new, it does not offer an extensive UI component but can be more beginner-friendly, requiring less use of class for styling and responsive behavior. The class naming convention in Bulma for utility classes follows a different method. They are affixed with .is-* and .has-* e.g. .has-text-white for white color text, or .is-primary to use the pre-defined theme that applies background, font, and hover styles but this may not be available for all components.
To build a navigation bar, the setup is similar to Bootstrap with both having identical classes like .navbar, .navbar-brand, and .navbar-item. The class name for the button is .navbar-burger along with the data-target attribute to provide id of the menu element. The menu items are contained by a parent div of a class .navbar-menu and each anchor tags have a class of .navbar-item. We can also add a dropdown menu without requiring JavaScript using has-dropdown and is-hoverable.
For the menu toggle function, we need to add our own JavaScript file since Bulma does not have built-in JavaScript support. But they provide the code in their documentation if you are unfamiliar with JavaScript.
Some noticeable difference is that we do not need to provide the breakpoint for the navigation menu to collapse. Bulma has a more modern design and the code also looks cleaner even with the added functionality of a dropdown. But here comes the problem with an opinionated design because in Bulma, the links are not wrapped inside ul and li tags which are a more common approach for writing navigation links as seen in the Bootstrap example. So depending on the framework, you are restricted in how you write your HTML document.
Resources
#Tailwind CSS
Unlike the previous two frameworks, Tailwind CSS does not provide any pre-built components as it's defined as a utility-first CSS framework. The utility classes work just like in Bootstrap or Bulma applying a specific CSS property like text color, background, padding, etc. With no pre-designed components, Tailwind has fewer constraints and leaves the UI design all in the developer's hands.
For example, to build an element like a button you can’t use a class like a .btn and expect all the necessary styles to be applied. Just like using plain CSS, you need to apply each and every property you want that button to have. So to style a button, you can leverage classes like .w-* for width, .h-* for height, .bg-* for background, .text-* for text color, and so on. In a way, you can imagine styling in Tailwind as an inline CSS styling but with predefined classes to make the design process faster.
<!-- The color values like blue-500 and
numbers for width are all predefined values -->
<button class="bg-blue-500
text-gray-100
rounded-md w-28 h-12">
Button
</button>This makes Tailwind more customizable and less opinionated which is why it has been getting a lot of attraction. But there are also developers who absolutely hate it since the final code looks unreadable as you need to keep repeating the classes for all the elements.
Again we can have a look at it by building an identical navigation bar. At first glance, the document has way more class names and this is only for a basic navigation menu. Most of the utility classes are pretty close to the CSS property values such as .flex sets display to flex, .px-4 and .py-4 sets padding to the x-axis and y-axis respectively. The .md: is used for breakpoints so the property will only be applied to medium screens and larger (default set to 768px for md:). Moreover, the pseudo-classes like :hover can be applied using the .hover: class.
The reusability is one major issue with Tailwind as seen with the styling in the anchor tag. Hence it is mainly popular among developers using a JavaScript framework since it can be used to make reusable components. So if you are using plain HTML for development it might be better to use other options.
Resources
- TailwindCSS Documentation
- TailwindCSS CheatSheet (Currently only includes v2.2.19)
- Video: CSS in 2023 by Theo (Categorizes popular UI libraries and differentiates them. Mainly focused on Tailwind CSS.)
- List of CSS frameworks (A list of other CSS frameworks besides these three)