Customizing Twenty Twelve

October 24th, 2013

Twenty Twelve is my favorite of the WordPress default ‘twenty’ themes. Its elegant and responsive. I like the smartphone menu.

Twenty Ten is not responsive at all. Twenty Eleven is simply less classy. Twenty Thirteen looks like a good full-screen theme, but I have not yet done anything with it.

Twenty Twelve should be a perfect candidate for child-theming. You would think. But the stylesheet is written is a bizarre and complex way. Its not something you would want to maintain.  For example, dimensions are written in rems, with a fallback style in pixels. And, most dimensions are calculated to a nine digit accuracy:

font-size: 16px
font-size: 1.142857143rem;

This is a spectacular piece of design, but not the sort of code I want to have to adjust. What I do, so I can modify Twenty Twelve to my liking, is change all rem units to ems, and delete the pixel fallback. I also rounded off numbers to two decimal places. This actually shortens the stylesheet from 1700 lines to 1400. I also minified the reset and other boilerplate sections. I use this stylesheet without importing the parent sheet. And here is my simplified twenty twelve stylesheet. Make your own child theme with it.

Leave a Reply

Your email address will not be published. Required fields are marked *