Due to the grid layout, Genesis drops support of the fifths class family (one-fifth, two-fifths, three-fifths, and four-fifths). This is logical since the grid that Genesis adopts is from Twitter Bootstrap, and they didn't include it. Since the Bootstrap grid was based on 12 columns, fifths does not naturally "fit" within the grid. 1, 2, 3, 4 and 6 are equally divisible into 12.
In discussing whether to include it in core or not, it came down to this:
Reasons to include:
- Legacy: In light of having it in previous style sheets I believe it should be included.
- One Style Sheet: Twitter Boostrap has the fifths via media queries with the non-fluid rows in the base CSS. Since we are not doing a base.css with a responsive.css, I believe it should be included.
- Accurate Calculations: I have done the calculations that fit within the Bootstrap model to the 15 decimal places (cut off if zeros).
Reasons not to include:
- Does Not Fit into 12-Column Grid: 12 is not divisible by 5 thus should not be included.
- Responsive Twitter Bootstrap: The responsive style sheet of Twitter Bootstrap does not include it.
So, for those who like me have used it and need it in their style sheet, here is the Columns Classes section for you:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Column Classes | |
| Link: Link: http://wpsmith.net/2013/wp/genesis-2-0-drops-fifths-from-column-classes/ | |
| Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css | |
| --------------------------------------------- */ | |
| .five-sixths, | |
| .four-sixths, | |
| .four-fifths, | |
| .one-fifth, | |
| .one-fourth, | |
| .one-half, | |
| .one-sixth, | |
| .one-third, | |
| .three-fourths, | |
| .three-fifths, | |
| .three-sixths, | |
| .two-fourths, | |
| .two-fifths, | |
| .two-sixths, | |
| .two-thirds { | |
| float: left; | |
| margin-left: 2.564102564102564%; | |
| } | |
| .one-half, | |
| .three-sixths, | |
| .two-fourths { | |
| width: 48.717948717948715%; | |
| } | |
| .one-third, | |
| .two-sixths { | |
| width: 31.623931623931625%; | |
| } | |
| .four-sixths, | |
| .two-thirds { | |
| width: 65.81196581196582%; | |
| } | |
| .one-fourth { | |
| width: 23.076923076923077%; | |
| } | |
| .three-fourths { | |
| width: 74.35897435897436%; | |
| } | |
| .one-fifth { | |
| width: 17.9487179487179488%; | |
| } | |
| .two-fifths { | |
| width: 38.4615384615384616%; | |
| } | |
| .three-fifths { | |
| width: 58.9743589743589744%; | |
| } | |
| .four-fifths { | |
| width: 79.4871794871794872%; | |
| } | |
| .one-sixth { | |
| width: 14.52991452991453%; | |
| } | |
| .five-sixths { | |
| width: 82.90598290598291%; | |
| } | |
| .first { | |
| clear: both; | |
| margin-left: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .five-sixths,.four-sixths,.four-fifths,.one-fifth,.one-fourth,.one-half,.one-sixth,.one-third,.three-fourths,.three-fifths,.three-sixths,.two-fourths,.two-fifths,.two-sixths,.two-thirds {float: left;margin-left: 2.564102564102564%;}.one-half,.three-sixths,.two-fourths {width: 48.717948717948715%;}.one-third,.two-sixths {width: 31.623931623931625%}.four-sixths,.two-thirds {width: 65.81196581196582%}.one-fourth {width: 23.076923076923077%}.three-fourths {width: 74.35897435897436%}.one-fifth {width: 17.9487179487179488%}.two-fifths {width: 38.4615384615384616%}.three-fifths {width: 58.9743589743589744%}.four-fifths {width: 79.4871794871794872%}.one-sixth {width: 14.52991452991453%}.five-sixths {width: 82.90598290598291%}.first {clear: both;margin-left: 0} |
Genesis 2.0 is something that I’ve been waiting for. Since I got the update, I’m loving it. The clean, clutter-free, simple, minimalistic design with responsive framework. Amazing!
Thank you for the column classes! I needed it for a custom site 🙂
Thank you for this…sometimes you just gotta have 5 columns!