Grid System

Understanding the Grid

PEGASUS is built upon a responsive, mobile-first grid system that appropriately scales up or "stacks" as the device or viewport size changes.

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

The PEGASUS grid is built on 12 columns:

By grouping some of these individual columns together, you can begin to create interesting page layouts like so:

Using the Grid

The PEGASUS grid is based upon Bootstrap's (version 3) grid system. When it comes to building out columns in HTML, there is a specific way they should be formatted.

Here are the CSS classes you will need to know and use:

• .container - class applied to the <div> (or element) that will contain individual rows; max-width for this is 1200px
• .container-fluid - serves similar purpose as above, but does not have a max-width; it will stretch the full-width of its containing element
• .row - class applied to the <div> (or element) that will contain the individual columns
• Column classes. Note that the * symbol below represents the part of the column class where xl, lg, md, sm or xs is to be used. But this is talked about in the Responsive Grid section. Do not worry for now.:
  • .col-*-1 - <div> with a 1-column width (1/12th of its containing row)
  • .col-*-2 - <div> with a 2-column width (1/6th of its containing row)
  • .col-*-3 - <div> with a 3-column width (1/4th of its containing row)
  • .col-*-4 - <div> with a 4-column width (1/3rd of its containing row)
  • .col-*-5 - <div> with a 5-column width
  • .col-*-6 - <div> with a 6-column width (1/2 of its containing row)
  • .col-*-7 - <div> with a 7-column width
  • .col-*-8 - <div> with a 8-column width (2/3 of its containing row)
  • .col-*-9 - <div> with a 9-column width (3/4 of its containing row)
  • .col-*-10 - <div> with a 10-column width
  • .col-*-11 - <div> with a 11-column width
  • .col-*-12 - <div> with a 12-column width (100% of its containing row)

This is the standard format when coding grid columns:

<div class="row"> <!-- This is the ROW; All columns must exist directly inside a ROW. -->
    <div class="col-md-6">[CONTENT]</div> <!-- Content should exist inside of columns. -->
    <div class="col-md-6">[CONTENT]</div>
</div>

Here are some examples:

<div class="row">
    <div class="col-md-6">
        [COLUMN CONTENT]
    </div>
    <div class="col-md-6">
        [COLUMN CONTENT]
    </div>
</div>  

<div class="row">
    <div class="col-md-8">
        [COLUMN CONTENT]
    </div>
    <div class="col-md-4">
        [COLUMN CONTENT]
    </div>
</div>  

<div class="row">
    <div class="col-md-3">
        [COLUMN CONTENT]
    </div>
    <div class="col-md-9">
        [COLUMN CONTENT]
    </div>
</div>  

Responsive Grid

One of the most flexible features of Bootstrap's (version 3) grid system is that you can control the number of columns a <div> spans at various browser widths. These varying browser widths are known as breakpoints.

Breakpoints:

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices.

Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.