Скачать или смотреть Building a Website Builder: Create Custom React Components With Chakra UI

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 -   / coding-with-callie