Notice: This entry was published 5 years ago and may no longer reflect my views today.

Mint Chip Theme for Tumblr

Here’s my latest theme for Tumblr! It’s called Mint Chip, a fresh and serene theme to invigorate your (tum)blog. Unlike my previously released theme, this one is much more usable and is back to following web standards!

I started making this theme about three months ago, when we’ve just moved here and didn’t have internet for the first two weeks. I had a vague idea of a fresh, easy on the eyes theme. Yeah, it’s green. I really like green themes, and I don’t think it’ll stop anytime soon. Luckily, you can change the look to any sort of color scheme. Make it as simple or as bold as you like. You can even swap the sidebar to the left!

mint-chip-bold mint-chip-simple

Much options such wow

This theme was about 90% done before I let it sit for a month or two. I moved on to other projects like redesigning this blog and fiddling with web applications. I’ve learned so much since then.

But I remembered this theme, and I decided to come back to it last week because I was so close to finishing. I took one look at the code and cringed. Hot mess. I mean, it wasn’t horrible but it could definitely be better. It’s crazy how much one can learn in a few months! So I cleaned up the code, decided to get off my lazy butt and place any styling that didn’t use Tumblr blocks in a separate CSS file (really should’ve been doing this since the beginning), and minified my external assets.

Minifying your external stylesheets and scripts means removing unnecessary whitespace and redundant code. Formatting your code is good practice in development because it’s easier to read, but all those spaces and line breaks actually contribute to the file size. Once you’re ready to deploy your site, you should take them off to decrease the size and consequently decrease loading time and bandwidth consumption.

Formatted CSS Minified CSS

Formatted vs minified CSS

Removing all those spaces by hand is really annoying and boring. Imagine if you had hundreds of code to go through! I’m not here for that, so I used Grunt. Grunt is a Javascript task runner that does all the repetitive stuff for you. It is also wonderful and magical. It doesn’t just minify your assets, it can also concatenate multiple JS files, convert CSS into inline styles for HTML emails, compress images, and so much more. I love Grunt. ♥ Here’s a tutorial to get started if you’re interested! It’s a bit of a process to get up and running, but once you do, all it takes is one command line to work. Totally worth it.

I also used Grunt to minify the assets on this blog. Thanks to minification, my stylesheet went from ~37kb down to ~15kb. Feels good man.

I will end this post now before it gets even more meandering. It’s Wednesday tomorrow (hump day!), and I’m still doing the internship + work thing. I need to sleep soon. Do tell me what you think of my new theme as well as Grunt! Till next time, everyone!

Comments

  1. Hahah “such wow”. You are extremely talented! Mint Chip is extremely cute!! And it actually looks like a whole other theme with its more ‘darker’ version. If you take on projects for WordPress themes, we should talk ;)
    C recently posted…Etsy Shop: TheSweetLifeBakeryKyMy Profile

  2. The mint chip theme looks cute! I like the greenness of the theme; the colors are soft and attractive. The color options look just as great too! The flower looks nicely packed and the white/blue is simple :D. Sometimes, it takes time for some of that creative gear to kick in to make that awesome layout!

    It’s nice to have an organized CSS or HTML file, but file size is at risk. If it’s set for final release, it makes sense to minify it!
    Nancy recently posted…Projecten AheadMy Profile

Comments on this entry are now closed. Send me an email or a tweet me at @sweetraiscake if you'd like to keep the discussion going. I love mentions!