I have started using Bootstrap framework so many years back for styling my websites and apps. It really helped me to easily style things same way across the browsers as there were more differences how each browsers handled the styles. We had to use lot of browser specific markups. But things have changed a lot from that time till now. We are not in IE era any more.

There are many new CSS frameworks available now to choose from. Also the mostly used browsers all support standard styling. So we don’t need to use browser specific styles in app. I was looking for a CSS stylesheet which is light weight and allows me to choose as less component as possible. It is possible to choose specific component from Bootstrap I feel like it is unnecessarily heavy for when I use only some part of styles. Also I want to keep my HTML code clean as possible and don’t like to use so many utility classes.

There are many promising CSS frameworks are available now to choose from. Here are the top ones in 2022.

• Tailwind CSS
• Bulma CSS Framework
• Bootstrap.
• Materialize CSS.
• UI Kit.
• Milligram.

Tailwind CSS

Tailwind CSS is a very popular CSS framework it is low-level, utility-first, and robust choice. The framework itself can be used progressively or as a foundation for your entire design and UI. With this framework you have some advantages like, you can just use the pre-defined CSS classes and start building your layout and design. No annoying overriding styles, just simple build blocks that you can follow. This one you can adopt progressively in your design instead of locking inside like Bootstrap CSS.

Bulma CSS

We can call this modern alternative to Bootstrap CSS as this comes with many predefined components. It is known for its simple syntax and progressive nature.

It says in its website “No CSS knowledge is required” to use it. Kind of promising for starters. Also modular framework you can import the Sass files you want to use.

Bootstrap

Bootstrap is great and that is why it is mostly used CSS framework in the world. But I feel like it is not looking modern and as this is widely used the style doesn’t impress new users and you cannot control everything by SaSS variables to create completely unique styles.

UI Kit

A lightweight and modular front-end framework for developing fast and powerful web interfaces. You can setup Auto complete in Visual Studio code for this one plus point of this framework.

Materilize CSS

modern responsive front-end framework based on Material Design. Focus on user experience, by utilizing elements and principles of Material Design. Incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.

Milligram

A minimalist CSS framework. It provides a minimal setup of styles for a fast and clean starting point. Only 2kb gzipped! It’s not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.

It styles elements by default and users doesn’t have to assign special classes for the element.

Custom Style

If you have some this I will reveal what I have chosen for my app. None of the above. As I said earlier most of the time all of the standard browsers support standard styles. With the support of grid and flex display we can quickly create any layout we want. Creating unique styles for any HTML elements won’t take much time. I am not a fan of utility classes like to tune the style but want to style in my own way. That is why instead of adding a base style by a CSS framework and then overriding with my stylesheet, I choose to create a complete stylesheet myself. It went very well than expected and my compiled CSS file from SaSS source file was 10 time smaller.

In the next project you can also try that and you will be amazed how quickly you can create a website it works well in all devices and look nice too. First create a layout using grid template area and grid row, column styling. Then using flex display to create smaller components and align them well. Then style the native HTML elements by applying style without any class and you are good to go. Your HTML also will look more readable when you style them by default without utility classes.