Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 forks source link

Allow grid-row to behave like a full width column #15

Closed wheresrhys closed 10 years ago

wheresrhys commented 10 years ago

At present quite a common pattern seen in using the grid is

<div class="ft-grid-row">
   <div class="ft-grid-col-d12">
   </div>
</div>

Which, over the course of a page, will potentially add a lot of bytes

Would be nice to do something like this instead

<div class="ft-grid-row-col">
</div>

Within reason this pattern could also be a little bit responsive (the example below will probably work without any additional changes)

<div class="ft-grid-row-col-shide">
</div>
triblondon commented 10 years ago

Don't think hiding on small screen is a pattern I want to encourage, but otherwise this seems reasonable.

wheresrhys commented 10 years ago

Have now implemented.

But it turns out it already worked by putting both classes ft-grid-row ft-grid-col-d12 on one element, which has less impact on the bytes saved in the html, but also means the css doesn't increase in size and the sass is a little simpler to maintain.

So I'm going to revert the change out and just update the docs to explain the classes can be doubled up on one element.