Cool CSS Frameworks With React

Image for post
Image for post

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
Image for post
Image for post

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!

Image for post
Image for post
Looks ugly, but I recommend that you try it out!

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.

Image for post
Image for post

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.

Image for post
Image for post
Box stands for div

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!

Image for post
Image for post
An example Box component from AirBnb

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.

Interested in the structure of codes and chasing the Dopamine rush as I start to understand their structures.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store