I am not a designer. Though the design of this site is built largely from scratch, I’ve done my best to acknowledge others whose work has greatly influenced this site and from whom I’ve borrowed heavily.
Link to heading Layout
The design leans heavily into CSS grid I’m a relatively new student of CSS grid so I’m sure the approach could be improved. I built a 12 column layout using https://utopia.fyi to generate mathematically consistent grid, layout, and type settings as CSS variables.
Link to heading Colors
Speaking of, the color theme of the site is also driven by CSS variables. I liked the idea of building the color theme off a monochromatic scale similar to Tailwind’s color palettes. This led me to uicolors.app, a Tailwind color generator.
I had so much fun playing with different colors for the site, I decided to recreate that experience for you the reader. You can now visit the color scheme settings to swap out the color theme of the site. It’s currently hard-coded but a future release will allow readers to swap out the color themselves.
Link to heading UI Frameworks?
Joy of Rails does not currently use a UI framework, like Material or Bootstrap. The first iteration of this site’s design was built with Tailwind which I have removed. I have copied over a number of Tailwind utility classes I used in that first iteration as well as the generated Utopia CSS variables for layout, spacing, and typography.
I want to Joy of Rails to "own more" of its dependencies—part of why I implemented Authentication from Scratch. I love Tailwind, it was empowering to embrace the idea that I don’t need a UI framework. This does mean a more work is required in HTML and CSS to make styles and accessibility work better for readers.
Link to heading Illustrations
When I was in grade school, I doodled a lot. Drawing brought me a lot of joy. After years of working at a computer, I got away from it. But more recently, especially now that I have kids of my own, I’ve had the itch to return to my roots.
For Joy of Rails, I wanted to add some fun visuals to the in-depth articles. So, in this age of AI-generated imagery, I decided I would do the opposite of what everyone else seems to be doing—draw everything by hand. Pictures of rainbows, ice cream cones, and smiley faces on Joy of Rails serve as a reminder of the joy building and creating brings to my life.
Most of the illustrations are done in Procreate on my iPad with an Apple Pencil. Procreate is a great little app I highly recommend for anyone looking to rekindle their childhood doodling habit.