Flounder on different devices

The Prompt

I knew that I wanted to design a blog-focused WordPress theme that took advantage of post formats in a fun, colorful way.

My Process

Before I started designing Flounder, I had been spending some time learning how to use the CSS-preprocessor Sass. As a designer, one of my favorite features of Sass is its amazing color functions, which allow you to make incredibly powerful changes to color with ease. I was especially inspired by the ability to lighten or darken colors with just a line of css. Could I design a theme based around the idea of color functions?

I designed Flounder’s basic structure and then dove into making a color set for each post format. I derived color inspiration from Flat UI Colors, using a handful of their colors as a base for my post formats, pages and widgets, and then filling in the rest of the colors to create a harmonious, 11-color palette. Then, keeping the same base hue, I added or subtracted saturation and brightness to create the sidebar colors, background colors, and link colors. The result was a color system that was easy to translate into either Sass or LESS, another CSS pre-processor with similarly powerful color functions.

Flounder was also designed from the start to be responsive. It features four main layouts which break based on content, rather than devices. I wanted Flounder to look awesome at any size.

Once I had enough designs to hand off to my development partner, Kelly Dwan, she started coding it out using _s and LESS, building on my original idea of using color functions in a super smart, compact way. The result is a startlingly small theme despite its visual complexity.


The Result

Flounder is a flat, minimally styled theme for bloggers which features colorful support for post formats and a clean, responsive layout. It’s designed to work seamlessly with the popular WordPress plugin Jetpack, taking advantage of such features as infinite scroll and enhanced gallery support. Flounder is available both for download on WordPress.org, and for use on WordPress.com.

← Back to All Work