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.