I’m trying to be super DRY (don’t repeat yourself) about my styling for my website builder. I want a single source of truth for colors, fonts, sizing, breakpoints, etc. so it’s easy to make quick style changes 🌵
Eventually, I’d even like to be able to customize my website’s style from the UI 💡
With this in mind, I’m trying to take my time to read through Chakra UI’s documentation and experiment with the different options before I make any final style decisions.
Last night, I learned about recipes and they’re pretty dang cool! With recipes, you can create multi-variant styles and bake them directly into a React component. You define the component’s base style and its possible variants in a simple JSON recipe and then let Chakra bake it into a component for you 🍳
I made a Heading component to test it out and I’m pretty pleased! I have three main Headings in my website builder design: the company name in the header, optional page headings, and section headings.
Since I don’t have any pages or sections yet, I just tested out two variants: header and page. Here’s the code and the results!
What do you think?! 🤔
Want to develop your codings skills and network with other developers? Join the Coding with Callie community!
Coding with Callie – https://coding-with-callie.com/
LinkedIn – https://www.linkedin.com/company/coding-with-callie/
