Creating a Clarity UI Hugo Theme: A Journey of Discovery

As I sit here, typing away on my computer, I can’t help but feel a sense of pride and accomplishment. Over the past few weeks, I’ve been working on creating a new theme for my blog using VMware’s Clarity UI. It’s been an exciting journey, filled with moments of frustration, triumph, and discovery. In this post, I want to share with you the resources I used to build the theme, and provide some insight into the process itself.

Getting Started with Clarity UI

Before I dive into the nitty-gritty of building the theme, let me first say that the Project Clarity Documentation is an absolute must-read for anyone looking to create a Clarity UI theme. The documentation provides a wealth of information on how to use the framework, including card variations, grid systems, and more.

I also found Janne Kemppainen’s “An Introduction to the ‘Blog with Hugo’ series” to be an excellent resource for learning how to create the structure of the theme and how everything ties together. The official Hugo documentation was also useful, but I found it to be basic with regards to examples and explaining how particular functions tie together.

Building the Theme

With my resources in hand, I set out to build the theme from the ground up. I started by creating a basic layout for the homepage, including a header, sidebar, and content area. The header features a navigation menu and search bar, while the sidebar includes a list of tags and social media icons. The content area is where the magic happens, with cards displaying my latest blog posts.

I used a mix of clickable and non-clickable labels for tags, both in card lists and in the ‘tag cloud’ in the side bar. This allows me to highlight certain tags and provide a quick way for readers to explore related content. The flexible grid system provides the structure of the layout, separating the card lists from the sidebar.

One of the most challenging aspects of building the theme was handling images. To do this, I simply wrapped the standard HTML tag with a Hugo shortcode, and used it to scale the images to fit the content column. This allowed me to easily display images in my blog posts without sacrificing the look and feel of the theme.

Conclusion

Creating a Clarity UI Hugo theme was an exciting and rewarding experience. It forced me to learn new skills, experiment with different design elements, and push myself outside of my comfort zone. I’m thrilled with the final result, and I hope you like it too!

If you have any questions about creating a Clarity UI Hugo theme, feel free to reach out on Twitter. I’d be happy to help or provide guidance as needed.

© 2016-2020 Stellios Williams. Some rights reserved; please attribute properly and link back.