Examples to document Layouts and Grids

[designerbrent]

ADDED: A new example pattern that shows both grids and layouts and all their current options. This replaces their individual layout and grid pattern pages.

@tpitre Do you see a problem removing the individual example patterns?

[tpitre]

Looks like some off indenting or an unclosed tag here.

[designerbrent]

Oops. Forgot to indent everything out. Should be corrected now.

[tpitre]

Using the .pad classes to create spacing is totally fine, but we have this list of helper spacing classes to help create uniform spacing without having to add classes to each element. To use it, just wrap a section of direct child elements that you want to have equal distance apart.

<div class="spacing">
  <div></div> <!-- no effect (doesn't create space for the immediate descendant) -->
  <div></div> <!-- spaced -->
  <div>
    <div></div> <!-- no effect -->
  </div> <!-- spaced -->
  <div></div> <!-- spaced -->
<div>

[tpitre]

@designerbrent This looks great! Yes, removing those individual patterns is ok. They were only being utilized within the style guide and not actually included into any templates.

[designerbrent]

@tpitre This really opened my eyes to what is available. I'll be digging into more of these code files as we go.