2012 in review: picking one CMS, and circles made of CSS

First year this blog existed, and the year I acted on the previous year's complaint. In 2011 I was maintaining four content management systems badly. By the end of 2012 all new work went onto one, and it was not any of the four.

Leaving a CMS I had contributed to

In March I signed a contributor agreement with the eZ Publish project and put work back upstream. Nine months later I had moved my new builds to SilverStripe. Those two facts look contradictory and they are not.

eZ Publish was the better system for the kind of enterprise content model I had been quoting. It was also heavy: a template language, a configuration layering system and a caching model that all had to be held in your head, none of which transferred anywhere else. For the size of project actually landing on my desk, I was paying enterprise complexity for a fifteen-page site.

SilverStripe won on a boring criterion: the admin interface. A content editor who can find the field they need does not send me an email. That is the whole business case, and it is worth an extra hour on every page type.

The second criterion was that its templates and models were plain enough that a developer who had never seen the project could read them. After four years of accumulating systems, "someone else can pick this up" had become the thing I valued most.

What standardising actually bought

Not speed on any individual build. What it bought was compounding: a module I wrote for one client was usable on the next, my mistakes were mistakes I had already made, and the answer to a question was in my own code rather than in four different sets of documentation.

The cost was saying no to work. Inherited sites on other systems now got a referral instead of a quote, and in a year where I was still counting invoices carefully, that was not a comfortable decision.

Responsive circles with CSS3

The technical trick I used most this year, and the first real post on this blog. Before CSS3 a circle was an image, or that hack with content: ' \25CF'; at an absurd font-size. Now it is one rule, and it can be responsive.

Say the circle is 25% of its container. In a square container you set the height to 25% too and you are done. In a container with flexible height, this is what works:

.circle {
    height: auto;
    padding-top: 25%;
    width: 25%;
    border-radius: 50%;
}

Percentages in a CSS padding resolve against the width of the container. Give the element a padding-top equal to its width and it becomes exactly as tall as it is wide. Add border-radius: 50% and it scales with its parent forever.

You can reach the same result with padding-left plus display: inline-block, or display: block; width: auto; float: left;. I prefer setting the width, because the alternatives force me into inline-block or a float, and floats mean clearing them again and finding something that survives IE7.

Trivial today. In 2012, coming off two years of exporting rounded corners as images from a PSD, it felt like getting something back.

In short

Narrowed from four content management systems to one, signed a contributor agreement with the one I was leaving, and started writing here.