Remember the days when CSS was only used to make some important text more glitchy, more catchy like it’s a neon billboard out on the streets? These needs slowly outgrew themselves, adding spacing, positioning, and more complex things such as flexbox. Days, months, years passed, but one thing remained for us — becoming more and more complicated, especially for beginners — the CSS.
You are not even a real web developer if you did not search for the sentence “how to center a div” and forget it by the next day, repeating it all over at least 3 times. Don’t be so hard on yourself, admirable solutions were born at the end of the day, throwing lifebelt to the coders, dealing with the complexity of this world. And we should use these!
In today’s fast-paced world, a unique visual appearance that lifts a brand or service from the digital noise around us is essential for a project’s competitiveness. At 5mart Studio, we work on innovative solutions that let us set the bar as high as possible.
Chakra UI
So okay, what is Chakra UI and why is it important to us?
“Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.”
And that’s it! A good starting point for projects where the customization breaks borders and you can treat your CSS lines as you are just programming! Coming out of the box with simple, composable components, that will help you out with real-life UI design problems, as well as, principles that keep them fairly consistent.
(Chakra UI uses CSS-in-JS under the hood (emotion + styled-system))
Easy. Logical. Scalable.
Starting a project with Chakra UI is as easy as any other React component library or design system. Just import some components, make a little refinement on the theme and you’ll find yourself in love with how simple and powerful it is.
So we already know that using style prop in a React app is accepted. What if I tell you that you can bring this to another level? You need to set the width to be 100%, simply add width=”100%” or w=”100%” to your component and that’s it. Thinking about giving more style props at once? Use the sx prop and give ’em in JS style: sx={{ m: 0, p: 2, h: “150px” }}. “m” is for margin, “p” for padding and yes, “h” sets the height of the element. It’s simple, right? But be careful, giving as padding simply 2 and “2px” it’s not the same! If you provide 2, Chakra will use it as a token, bringing predefined values from its theme.
But what is the theme? Can I configure it?
“The theme object is where you define your application’s color palette, type scale, font stacks, breakpoints, border-radius values, and more.”
Here is an example of use: You define your color palette, set some colors for the property “primary”, now you can set a Box’s (the Chakra div) background color as bg=”primary.500”. Simplicity, consistency, and beauty at once!
Let’s talk about the “more” of the quote. We have already touched on how cool these components are. The theme object brings components even higher. Their approach of theming components consists of this basic idea: each component has a baseStyle, where you can define how your basic item will look. And you can stop here if you want, but there are two other things you can set as well: the size and the variant. That’s right, unlimited variants of unlimited sizes of your components! Multipart components? Not a problem, simply make your style objects with sub-objects, naming the part you want to change.
You did not find your component? This is sad, why don’t you make your own, and use your styling as it is easy for a Chakra UI component? useStyleConfig and useMultiStyleConfig got you covered. Create a custom component, let’s say a Select that you need to use from another package. You don’t want to mess up the consistency that’s in your theme file, you don’t need to! Add your component as you add components you are overriding, make the styling as you normally do, and start using on your component with this simple line: const styles = useMultiStyleConfig(‘Select’, { size, variant });
Tell the hook your size and variant, and he will give you back your styles as an object, which are good to be used with the style prop.
Want to keep in even better touch with your components?
Many companies have their insider component libraries and design systems, which help boost the process of making a project. If you follow my words carefully, you already know someone who matches these two. Chakra UI, of course!
But! As my personal advice, I don’t recommend relying on using the built-in components directly. Yes, there are cases when it’s irrelevant to waste time on building up a complete “framework”, yet there are cases when it is! You may think that a component fulfills all your needs, but we all know how these stories end: the project is full with the Button imported from Chakra, you find out that there will be a custom button, which needs some custom logic under the hood. You create it in a custom file, and now what? Are you going to use your old Buttons with your newly created ones? (hope I don’t need to explain how bad this is) Or are you going through your whole project changing to your new button? Meh…
You start working on a project, writing your first input field. Although it is a small project, you need to define a little bit of logic at the beginning, why don’t you start writing this in a custom component, as the first piece of your framework? The project becomes bigger and bigger, you need another type of button, and *BAMM* you just add a new variant, implement some custom logic, and that’s all. Your button is shining like it is meant to be.
No restrictions on style, no restrictions on functionality.
Creating a framework with Chakra UI and using it is all I wanted when I started to work with React. There is a place for the custom logic and another one for the style. Dressing the project with styling lines is no longer a problem, in fact, I started liking it. It’s so easy I can focus more on the power of CSS, rather than hacking methods, you need to use in many cases.
Chakra creates a connection between designers and coders that I have never seen before and I’m glad I found it!
