Component

Our grid system is implemented as a fork of Material Design's CSS grid. There are two concepts in the grid system, the page container and the grid elements.

iconsPage Container Element

This element will typically be used to wrap the entirety of your content. It will define the maximum width of your page as well as it's margins against the edge of the viewport.

For example your body element structure may look something like:

<body>
  <nav>
    <ul class="ray-page-container">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>

  <main class="ray-page-container">
    <h1>Global Access</h1>
    <p>...</p>

    <div class="ray-grid">
      <div class="ray-grid__cell">
        An image or something
      </div>
      <div class="ray-grid__cell">
        An image or something
      </div>
    </div>
  </main>
</body>

iconsGrid Elements

Live Example

Try resizing your browser!

cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
I'm a cell that will always span full width
I'm a cell with a push modifier

Debug Overlay

You can enable a visual grid overlay by adding a ray-page-container--debug class name to the ray-page-container div, or any full-width container (ie, html or body). Grid overlay is aware of phone/tablet/desktop breakpoints and will adjust accordingly.

Note: These classes are not available in the compiled css output, but are available in the non-minified version as well as the scss/ray-debug.scss file.

Better Together

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Breakpoints

Breakpointthresholdmax. width# of colsguttermargin

iconsRules

  • ray-grid__cells must always be a direct child of a ray-grid
  • Never mix classes, i.e. ray-page-container and ray-grid should never be applied to the same element
  • Never modify the following attributes on any of the grid elements: display, padding, margin, width
<!-- good -->
<div class="ray-grid">
  <div class="ray-grid__cell">
    some content
  </div>
</div>

<!-- bad, mixing classes -->
<div class="ray-grid ray-grid__cell">
  some content
</div>

<!-- bad, cell is not a direct child of ray-grid -->
<div class="ray-grid">
  <div class="my-wrapper">
    <div class="ray-grid__cell">
      some content
    </div>
  </div>
</div>

iconsStructure

<!-- This element is typically used once per page -->
<div class="ray-page-container">
  <div class="ray-grid">
    <div class="ray-grid__cell">
      I'm a cell, spanning the default 4 columns
    </div>
    <div class="ray-grid__cell--span-4">
      I'm another cell that is 4 columns
    </div>
    <div class="ray-grid__cell--span-1 ray-grid__cell--push-2">
      I'm a cell that is pushed 2 columns from the left
    </div>
    <div class="ray-grid__cell--span-full">
      I'm another cell that will always span full width
    </div>
  </div>
</div>
NameDescription
.ray-page-containerTypically used once on a page, defines maximum width and padding charactersitics for the page
.ray-page-container--align-<POSITION>Optional, align the grid to the left or right side of the container
POSITION: left, right
.ray-page-container--justify-<POSITION>Optional, align the cells of the grid (default: left, does not affect nested grids
POSITION: left, center, right
.ray-gridMandatory, for wrapping grid cells
.ray-grid__cellMandatory, for the layout grid cell (default width: 4 columns)
.ray-grid__cell--align-<POSITION>Optional, align the cell to the top, middle, or center of the containing grid
POSITION: top, middle, bottom
.ray-grid__cell--span-<NUMBER_OF_COLUMNS>-<TYPE_OF_DEVICE>Optional, specifies the number of columns the cell spans on a type of device
NUMBER_OF_COLUMS: 1 through 12
TYPE_OF_DEVICE: desktop, tablet, phone
.ray-grid__cell--push-<NUMBER_OF_COLUMNS>-<TYPE_OF_DEVICE>Optional, specifies the number of columns the cell is "pushed" on a type of device
NUMBER_OF_COLUMS: 1 through 12
TYPE_OF_DEVICE: desktop, tablet, phone
.ray-grid__cell--span-fullOptional, specify that the cell should span the full width of the grid