Grid Content Layout

SUU utilizes a grid system of 12 columns. The columns are responsive, meaning they will attempt to fit the width of the screen and stack vertically as the screen width approaches mobile sizes.

Your content should always be configured to use all 12 columns.

<div class='row-fluid'>
  <div class='span3'>
    <p>Content</p>
  </div>
  <div class='span9'>
    <p>Content</p>
  </div>
</div>

Flex Row

The .flex-row class can be applied instead of .row-fluid in select cases. .flex-row still depends on the 12 column system, but can dynamically start a new row. This is best used for repetitive content of the same desired height and width.

<div class="flex-row">
  <div class='flex4'>
    <div class="well centerit">4</div>
  </div>
  <div class='flex4 flex12-sm'>
    <div class="well centerit">4, 12 small</div>
  </div>
  <div class='flex4'>
    <div class="well centerit">4</div>
  </div>
  <div class='flex4 flex6-sm'>
    <div class="well centerit">4, 6 small</div>
  </div>
  <div class='flex4 flex6-sm'>
    <div class="well centerit">4, 6 small</div>
  </div>
</div>

You can choose a different column width for mobile displays. In the example above, .flex4 will provide a default width of 4 columns on desktop and tablet screen widths. .flex6-sm will change the width to 6 columns on small, or mobile, screens.