Bunny.net Forum

Modern and on-brand styling for a Subreddit.

In an effort to expand their reach, the global edge platform Bunny.net, which provides a range of services including compute, content delivery, security, storage, and more, decided to open up a forum on the social media platform Reddit.

Old Reddit (a version of the site from prior to their 2018 rebrand) remains popular, especially among the more technical customer base Bunny targets, and supports comprehensive theming using CSS. Being largely unchanged since 2009, old Reddit looks visually dated, but by virtue of this custom theming, it can be brought into the modern era and overhauled to comprehensively follow an existing design system and brand identity.

I took on the effort of translating their design ideas and brand resources into code and spritesheets based on provided designs to sit upon and integrate with old Reddit’s interface.

Bunny.net has a well-defined brand with a strong palette of oranges and blues and plenty of custom illustrations. This brand translates well into a forum design. The forum feels alive and energetic thanks to the heavy use of custom graphics – particularly assorted rabbit and carrot based imagery. One of my favourite touches is the various bunnies poking around the edge of pinned announcement posts:

A branded Reddit post card with an illustrated rabbit peeking around from the right hand side, as if looking around a corner.

Much difficultly lay in implementing bespoke features, such as the ability for users to pick a flair and choose a custom icon or to filter posts based on type. Reddit doesn’t make affordances for these, so creative problem-solving using hacks such as suffixing links with anchors was required, all while ensuring compatibility with modern versions of Reddit and meeting the expectations of a modern audience.

The largest challenge of this project was working within the confines of old Reddit’s dated CSS support. Properties and functions we’re well familiar with now, such as gap, filter, and :has, were absent from my arsenal. I found myself building my stylesheets with floats and bitmap spritesheets rather than flexbox and SVGs. There is some newer CSS that can be used, but actual usability is few and far between thanks to limitations imposed by restrictions on adjacent functionality.

Given the state of CSS support, I decided to fall back on the tools of the time. Namely: SCSS. I heavily embraced SCSS to compile multiple files into the single file Reddit accepts and also to gain niceties such as nesting. SCSS also proved itself hugely useful for setting variables, maps, looping with @each, and interpolating, allowing me to write some lovely DRY code.

A blue and orange themed forum interface with lots of vibrant graphics. At the top is a header, to the right is a sidebar, and down the left is a list of posts.
The Subreddit post-overhaul.

Pleased with my work, bunny.net kept me on to incorporate support for Reddit Enhancement Suite (RES), a popular browser extension that brings many quality-of-life enhancements to the Reddit experience. Perhaps the most significant part of this was introducing full dark-mode support.

It was a lot of fun putting together such a project and working within the confines of predefined, uneditable HTML and legacy CSS. I’m confident that this is one of the most complex and comprehensive custom Subreddit styles ever created for Reddit.

Related to this project, but not as part of it, I wrote a full and comprehensive guide for creating old Reddit stylesheets.