grid system - Githubissues

The grid system of the site currently uses rows and columns to create a grid:

<div class="GridRow">
    <div class="GridCol"> col 1 </div>
    <div class="GridCol"> col 2 </div>
</div>

(classnames are approximated).

One problem with this system is that it uses "unsemantic" classnames such as .Gcol or .w-f1o2. You could use the grid classnames directly in the HTML, but this is "bad" practice, as the presentation data is now contained in the HTML, not the CSS. If the design were to change in the future, all the HTML Elements' class attribute values would need to change.

Fortunately this problem can be alleviated by using Less/Sass to extend the classnames in the Less/Sass source. For example, the "semantic" classname .PictureDescription could extend the grid classname .w-f1o3 so that it has a width of 33.3%. However there are two disadvantages to this: first, you must use a CSS preprocessor, and cannot do this in internal stylesheets (the <style> tag); second, your CSS will grow proportionally as your site grows. Every new Element you write that needs to have a width of 33.3% must extend the .w-f1o3 class, which means your CSS file will bloat. As mentioned above, you can reduce CSS bloat by using the .w-f1o3 class in HTML, but now your HTML is bloated, and oh yeah, it contains styling information.

Another problem is that HTML becomes "div soup:" it contains many "unsemantic" tags that are just there to serve as style hooks. In the example above, the div.GridRow is just there to contain each div.GridCol; it serves no other purpose.

Both of these problems can be eliminated with the CSS3 Flexbox (Flexible Box Layout) or Grid Layout modules.

Note: While Flexbox is not technically the "correct" tool to achieve this, it is relatively simple and well-supported. On the other hand, Grid is (in my opinion) much more complicated and, according to CSS Tricks, "not well supported, and in-flux in browserland."

Flexbox Resources:

Grid Resources:

chharvey / chharvey.github.io

grid system #20