Hey friends, today I want to talk to you about a conversation I had with a friend about awesome css frameworks that would help you design your frontend applications (React based). When we met up at a cafe to get some coding done, he saw that I was a React user and asked me if I knew anything about css frameworks. I told him, “Yes I am familiar with bootstrap and semantic UI.” He then introduced me to two frameworks he uses when he’s building his projects which were:
- Tailwind
- Chakra
Tailwind
This framework is great for low-level utility classes and works well with components. Instead of just having a .css, .scss, or some other file that deals with CSS we can design and style our elements in our classes!
In this example from the documentation, they have created a block element without writing any CSS. The benefits to this are that you can stop worrying about making changes, utilities make everything reusable, and you don’t have to use complicated class names. Once I make a project built with this framework, I will talk more about the utility.
Chakra
The documentation for this framework is well written and organized. It is meant for React and turns html elements into components and we could import all type of styles once you download it into your directory. I recently started to make a frontend project with it and I can’t wait to share my experience with it. As mentioned before you are allowed to use html elements as components.
The Box component does not just render a div, it is also responsive, used with props, and passing styles. It’s versatile and you can customize it even more by using their css terms!
They also have something called Data Display and the terms involved in this example are:
- Badge — The blue highlighted word “NEW”
- Image — The beautiful house being shown
- Icon — The rating icon (you’re able to import more)
Each have their own purpose and helps organize a singular component. You are also not restricted to a singular component, we can build a whole project built with React and Chakra. I believe that if you are a strong React developer and have not heard of Chakra, I highly recommend that you try this out! I hope you try this out instead of using the traditional CSS approach because time is precious and this speeds up the progress of building your project.
