I started out on my journey to redesign my portfolio website a few months ago. I created many designs, just to question it and make another. Eventually, I hit the jackpot with a prototype and decided it was time to realize it.
After hearing great things about it, I also decided to host the website on Zeit.co. So, before I started coding, I was scrolling through Product Hunt and I saw Atomize React. It immediately intrigued me, so I went to their homepage and got more information.
"Atomize React is a UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly" - Atomize React
I went into the quick start and well, got started. After having to setup the Styletron engine for next.js (the framework I decided on), I was already a little worried. But my doubts quickly faded away as I used Atomize, or at least some of my doubts. For example, the framework itself worked well, but it felt difficult to get into the Atomic Design approach and they didn't really do too much to help. Also, the attributes to style the Components were so strange that I was pretty much glued to the documentation. There were a few other issues, but most of them are just little problems.
So, I built out the site, component by component, consulting the documentation regularly. This went fine and I published the site within 2 days of starting. However, after publishing the site, I realized a few issues that I hadn't thought of. One was the max width of the container. On different sizes, the <Container> element had a max width. This caused the container to be only half of my screen width. Another problem was that my row was configured strangely, so an <Image> and a <Text> tag weren't on the same line as they should've been.
My last big issue was kind of on me for bad implementation. After releasing the site and fixing everything else, I started working on adding a dark mode. At first, I passed the background and color of each component as a Stateful variable. Then, when I wanted to toggle dark mode, I could just change the state and it would update. However, it was extremely messy and dirty code. I also had trouble deploying the code, so I rolled back the commit and started again.
This time, however, it went much better. I took a different approach, utilizing the Styletron engine and the useState() hook, located in my index.js file. I then passed the variable to set the state to my App.js as a prop. The state variable was used to append custom colors to my Styletron Config. Basically, you can set custom colors and variables to use in the attributes of your components, and I changed the custom colors to match dark mode or light mode. This worked and resulted in much cleaner code.
Overall, my experience was pretty good. It had it's road bumps, but the issues were small and very manageable.
Ratings
Next.js - 8/10
Atomize React - 8/10
Zeit.co - 10/10
If you read all the way through this, thanks for reading.
Links
Updates
I rebuilt the site without using any component library, mostly because maintenance was extremely annoying
Top comments (1)
Thanks for this.
I have tried styled components, atomize, styled system, css modules and jsx css.
All of them are overly complicated and have caveats.
I have asked nextjs to please allow us to import scss files into pages so we can work the normal way. Its so simple and it works.
Dont know why everyone is trying to force css in js but its got so many gotchas for such simple things and crazy setup. When i saw the process to setup styletron i was like 'wtf is this'.
Pity because atomize comes with some really nice components and i like the atomic apporach but anyways.