Grid Layout

[andresgalante]

I think that we still have an open question about how to replace bootstrap grid system and I’d like to answer that before the meetup.

[andresgalante]

Since Matt will create a grid maker mixin, I'll describe the grid system to document the class names

The grid is initiated with the class pf-l-grid and it can have the modifier pf-has-gutters to add or remove gutters:

<div class="pf-l-grid pf-has-gutters">

Each item of the grid is called pf-l-grid__item and it accepts different modifiers depending of the amount of columns and rows we want that item to be in any given breakpoint. It'll also get a modifier to determine in which place the column or row should start with the classes:

• pf-is-col-2
• pf-is-row-2
• pf-start-at-col-3

We have 4 breakpoints, sm, md, lg and xl and we can append that to any of the modfiers, for example pf-is-col-2-sm or pf-is-row-2-md`

Putting everything together we get something like:

<div class="pf-l-grid pf-has-gutters">
  
  <div class="pf-l-grid__item pf-is-col-2-sm pf-is-row-2-sm pf-start-at-col-3-sm">Grid item</div>
  
  <div class="pf-l-grid__item pf-is-col-11">11 col grid item</div>
</div>

there is an example of this here https://codepen.io/andresgalante/pen/dmYRvW?editors=1100

[andresgalante]

@mattnolting Thanks for helping with this one.

The goal is to take #63, make it work on IE11 and make a solid implementation of responsive classes.

[dgutride]

Work completed in #193 - closing