Crunchy Bunny

I started working on a new theme for Crunchy Family last year. Really, I’ve been working on it for several years now, but I didn’t buckle down and take it seriously until last year. I intended to complete it before the GFAF Expo came to fruition, but alas it proved time-consuming and I was trying to avoid burnout.

For those of you who don’t know, Crunchy Family is my cousin Charlise’s blog. Sometimes I contribute to it, but most of the time I help out with the technical aspects because my own blog fills my plate and Crunchy Family is such a mess. We’re trying to work on the messiness part of it, but that’s beside the point. The important thing to note is that it’s not this blog, but another one that I designed, and I’m talking about it here for anyone who takes interest in reading about new blog themes (’cause I know I do!). We also don’t talk much about blogging on Crunchy Family, because it doesn’t really fit anywhere.~

Brief information

“Crunchy Bunny” is the name of theme because of an idea for the 404 page Charlise came up with as a play on the crunchy lifestyle. I figure we can play with future versions similarly, if we so wish.

In its most general sense, the theme symbolizes a rebrand for Crunchy Family. The site Charlise came from was sold to an IT guy who is just…letting it sit and essentially exploiting the community so the website just racks up money from display advertising. Before it was sold to said guy, the woman who owned it screwed over many of her writers, Charlise included; regrettably, this carried over to Crunchy Family. If I had to give Crunchy Family’s toddler years a theme song, it’d be Taylor Swift’s “Bad Blood”.

Mom blogging community be Drama City.

So this theme serves as a bit of a revival. We needed something that put the “fun” in “functional”, but also the “I” in “sophisticated”, if you catch my drift.

And this is what happened.~

Typography

I want to talk first about the typography, because it sticks out most to me. Finding the best combination was a struggle, but once I got it, I just…embraced it. Poppins was my initial choice; I’d experimented with it in the beginning of Crunchy Bunny’s typography hunt, but decided against it time and time again. It was much too rounded for me, or it didn’t suffice for the initial looks we were going for.

But Poppins worked well for the typography mood combination we were going for: professional body, playful headings.

So I finally relented after I decided just to try it, even for a stand-in of some sort, and now it’s like the mother-fucking poster font. I can’t picture the theme looking well without it.

It’s one of those tell-and-I’ll-cut-you situations, so.

Merriweather is the [serif] body font.

If you ask me, I think I’ve broken some rules with how I’ve arranged the typography, but do I care? Um, no. Because I’m a freaking rebel. Poppins is used for other areas of the body, but especially for post listings on the homepage and archive pages.

Colors

Color Safe is a nifty tool that lists accessible web color combinations. I first started using it for Smoothies by Color, with the idea of an accessible-first approach—something I seldom see on food blogs, but important to me because I’ve been going at it from the beginning with accessibility in mind.

Pink works as the background color of highlighted text, since Charlise is such a fan. Blue and orange serve as the blog’s new colors, rather than using every color under the sun. It’s also the color of <code> because I couldn’t find something else that worked well for it. I added in a touch of yellow, for h3 and h6 to offer more color, but that’s the only place it’s located. The background behind the branding of Crunchy Family is nesting, like a hive.

Visuals

One of the things I’ve envied about other blog designs is the visuals! I gotta say, I love visiting other blogs and having the ability to see a photo along with the title. It does something to me (ugh). Crunchy Family readers often skim and lurk, but the photos are what bring more of them together—so this was obviously important to include. Featured images and some other images (e.g. sidebar and pages) are in the shape of a hexagon thanks to CSS, so as to emphasize the hexagonal branding.

Since some posts rack in hundreds of comments, I forwent the need to load a Gravatar for everyone and just used the rest of the comment meta—name, URL, comment, date, etc.—to give it a cleaner appearance.

Overall

I surmise it’ll be riddled with issues because I threw it together and took Georgie’s lead re: releasing an imperfect theme into the world. I think website development is a work-in-progress always, so this doesn’t disturb me or anything—just feels a bit odd. If you spot any (list of known bugs), lemme know via comments, repository’s issues or bug@crunchyfamily.com.

This experience made me realize I’ve forgotten so much about coding, at the same time revealing I know more than I think I do. Experience is the best way to determine whether you know something and how much you know it—sometimes, you’ve just gotta go out there and do it. Coding is about screwing up and learning how to resolve your own mistakes. It’s why several professionals recommend teaching children how to code—the problem-solving skills code teaches are vital in life. You can’t just keep asking for help again and again and again—if you do, it’s probably not for you.

The theme is not completely accessible, as the primary priority was to create something functional that could be built upon later as time allowed. Like, Crunchy Family was desperate for a makeover. I also don’t know how to add all the accessibility features yet, as I’ve only recently learned about aria-labels. As previously stated, Crunchy Family’s a mess—so I’ve got to do a lot of behind-the-scenes work to make it accessible, anyway, re: images and ALT attributes.

In addition to the rebranding of Crunchy Family, it’s hosted under my reseller at OfBlue, so it also has an SSL certificate. I’m really excited about it.

P.S. I made this theme’s Github repository public if you’re capable of reading my mess—and I did clean up my CSS quite a bit, but alas…I am me.