3 Design

3.1 Improved organisation of style sheet

Genesis 1.9 included an arrangement of styles that was different to 1.8, but developers found the ordering trickier to work with when using the Sample theme as a starting point. Genesis 2.0 changed the arrangement again to use a more logical grouping, and reports from the beta period suggested that developers found this easier to work with.

Comparison of Style Sheet Table of Contents for Genesis Framework 1.9 and 2.0

While the old style sheet started to group by CSS properties, the new one groups by elements before moving on to a more modular organisation.

The removal of the numbers was intentional, since it avoids to constantly having to fix the numbers in the table of contents and in subheadings within the main part of the file, whenever a new item is added or sections are re-ordered.

The grouping of plugins was also intentional, so that if you don’t use any of those plugins, the whole section can be easily deleted.

3.2 Improved reset styles by switching to normalize.css

Previous versions of Genesis had used a reset that had originated Eric Meyer’s Reset CSS. Genesis 2.0 has changed that and now starts off with the latest version (2.1.2) of Normalize.css as that brings the common browsers into line with each other, rather than reseting to the lowest common denominator and then having to build the typical styles back up again.

The Normalize.css project is used as part of the HTML5 Boilerplate and Bootstrap projects, both very popular front-end frameworks, which means that Normalize.css has had plenty of developers looking at it and working with it, so it is well tested. The browsers that Normalize.css 2.1.2 supports are IE 8+, Firefox 4+, Safari 5+, Opera, and Chrome.

3.3 Improved selectors by removing all* use of ID selectors in style.css

The main reasons that ID selectors shouldn’t be used is that the specificity of an ID selector is 100, compared to 10 for a class and 1 for a type selector, so coming up with a more specific selector later in a style sheet can be tricky, without then descending into specificity wars.

Genesis Framework 1.9.2 had 107 ID selectors being used, but this has been cut down to zero for Genesis 2.0. This achievement means that Genesis 2.0 requires WordPress 3.6, since previous to 3.6, the #respond element didn’t have a class, and this commit fixed that.

* = Not Quite All OK, it’s not quite zero ID selectors. One did creep back in during development, and that was for hiding of the stats image in the Plugins -> Jetpack section. Since this is optional, and only for a plugin, I’m opting to ignore this one.

3.4 Improved development speed, by switching to 62.5% (10px) default font-size

The benefit of setting the font-size as 62.5% of the browser default (16px) means that the base font size is equivalent to 10px. Working out what the font-size of other elements should be (using the rem unit) then becomes considerably easier, since it’s a factor of 10 e.g. 20px = 2rem, 24px = 2.4rem.

The downside is that the base font-size is 10px, meaning that font-sizes are needed for all other elements instead of relying on browser defaults. Using the rem unit also means having to provide pixel unit fallback for IE8 and below.

3.5 Improved Google Web Fonts usage by switching to a protocol-less URL

For sites hosted with SSL (https), trying to pull in an asset from a non-secure (http) URL may cause warnings in some browsers. Switching to a protocol-less URL (so that the URL starts with //) means that it uses the protocol (http or https) that the parent page is using. Should a site move over to SSL at some point in the future, it’s one less thing to have to remember to fix.

3.6 Added iframe to CSS to cover responsive video

Some videos are displayed in an iframe, so to prevent them from breaking the layout, the iframe is given a maximum width of 100%, just like object, image, embed and video elements.

3.7 Added new clearfix method for block elements

Genesis now implements the Micro Clearfix Hack to handle the clearing of floats, for container classes, and a generic .clearfix class.

The WordPress.com theme development guidelines requires this instead of the overflow method that previous versions of Genesis had used.

The discussion around these being added is interesting. The commit when these were added shows 13 overflow: hidden statements being removed, in favour of 24 block-level (flow in HTML5 terminology) elements and a class, constituting 75 selectors. It is generally agreed that having a key selector (the last part of a selector) as a type selector (element) is bad, for two reasons:

1. It makes the styling too broad, meaning other uses of that element may inherit unwanted styles which then have to be undone.
2. It has a performance impact as browsers parse selectors from right to left.

This was supported by code from TwentyThirteen that was shared that also used the micro clearfix hack, but only targeted the classes of elements that should be cleared. It was pointed out that the Genesis demo content didn’t contain some of the elements being targeted in the Genesis float clearing styles, such as audio, address or output elements.

There was also some discussion about whether this code was seen as a part of a reset or normalizing of browser defaults or neither. The fact that Normalize.css doesn’t contain similar code suggests it’s not part of standardising browser default behaviour. The way floats and clearing are written in the specification, and implemented by browsers, and have existed for years without being changed, suggested that this code isn’t a reset either. This mass clearfix seemed to be an attempt to change how the float model works within Genesis and Genesis child themes compared the rest of the web. The counter-argument was that this was indeed the case, but that it was changing it to a simpler concept that newer developers should be able to understand easier.

During the Release Candidate 1 stage, the scope of selectors was drastically narrowed from all of the elements to just the classes for the container elements and the .clearfix class. This brings it more in line with TwentyThirteen, stops the global float clearing styles on type selectors, and avoids issues like exploding the appearance of Gists (a CSS ruleset had been added during the development, but this was not needed now) or trying to float images next to block-level elements which then push the following container below the image.

3.8 Added rtl.css file

A design of a website can seem illogical when the content is added in a language that uses a right-to-left (RTL) script such as Arabic, Hebrew, or Urdu (languages don’t have a direction - scripts do).

WordPress supports this by enqueueing an rtl.css file if it detects that the locale is typically displayed in an RTL script. The purpose of this style sheet is to reverse the horizontal styles on elements, such as margin, padding, borders, floats etc.

The rtl.css file that comes with Genesis 2.0 and the Sample theme provides theme authors a good starting point for their own themes.

Testing RTL Style Sheets To test how the rtl.css affects the contents, use the RTL Tester plugin which adds a button to the admin bar that toggles the RTL flag for the site between left-to-right and right-to-left.

3.9 Added updated screenshot

To cater for higher resolution displays, the screenshot file was doubled in size, so it could be displayed at the usual 300 × 225px size with double the normal resolution.

The screenshot file now contains twice as many pixels for retina displays

3.10 Removed RSS and Twitter images

Genesis 2.0 and the Sample theme no longer use an RSS or Twitter image for the Primary Navigation Extras, so these were removed. This was generally a design decision to reduce the number of images used, but it also may encourage developers to consider using a single sprite of all small images for better performance. Equally, since most sites usually have more social connections than just RSS or Twitter, only being able to choose one to display in the primary menu seems odd, since the others would have to be elsewhere on the page.

During development, the Twitter image changed to the official one, when the Twitter branding guidelines were updated, before later being removed altogether.

3.11 Removed device-specific subheadings

Responsive style sheets should cater for content-based breakpoints, not device-specific. Even if they aren’t, with the creation of new devices happening regularly, only apparently catering for specific ones (iPad, iPhone) by leaving comments to that effect seemed to be a little short-sighted. Genesis 2.0 removes those comments, so developers using the Sample theme as their starting point don’t feel as compelled to stick with the breakpoints.

3.12 Removed support for five-column layout

The grid CSS is now derived from Bootstrap (aka Twitter Bootstrap), and the grid there is based on factors of 12. One, two, three, four and six columns all fit nicely into the grid, but five doesn’t so Bootstrap doesn’t include it, and therefore neither does Genesis 2.0.