Academy of Natural Sciences

Grid 

<div class="o-container u-align-center">
    <div class="o-row frctl-grid-demo">
        <div class="o-col o-col-sm-12 o-col-sm-md-4 u-align-center">
            <div class="frctl-grid-item">1</div>
        </div>
        <div class="o-col-6 o-col-sm-6 o-col-sm-md-4 u-align-center">
            <div class="frctl-grid-item">2</div>
        </div>
        <div class="o-col-6 o-col-sm-6 o-col-sm-md-4 u-align-center">
            <div class="frctl-grid-item">3</div>
        </div>
    </div>

    <div class="o-row frctl-grid-demo">
        <div class="o-col o-col-sm-2 u-align-center">
            <div class="frctl-grid-item">1</div>
        </div>
        <div class="o-col o-col-sm-8 u-align-center">
            <div class="frctl-grid-item">2</div>
        </div>
        <div class="o-col o-col-sm-2 u-align-center">
            <div class="frctl-grid-item">3</div>
        </div>
    </div>

    <div class="o-row frctl-grid-demo">
        <div class="o-col o-col-sm-3 u-align-center">
            <div class="frctl-grid-item">1</div>
        </div>
        <div class="o-col o-col-sm-9 u-align-center">
            <div class="frctl-grid-item">2</div>
        </div>
    </div>

    <h2>Reverse Row</h2>
    <div class="o-row o-row--reverse frctl-grid-demo">
        <div class="o-col o-col-sm-12 o-col-sm-md-4 u-align-center">
            <div class="frctl-grid-item">1</div>
        </div>
        <div class="o-col o-col-sm-6 o-col-sm-md-4 u-align-center">
            <div class="frctl-grid-item">2</div>
        </div>
        <div class="o-col o-col-sm-6 o-col-sm-md-4 u-align-center">
            <div class="frctl-grid-item">3</div>
        </div>
    </div>
</div>
 
<div class="o-container u-align-center">
  <div class="o-row frctl-grid-demo">
    <div class="o-col o-col-sm-12 o-col-sm-md-4 u-align-center">
      <div class="frctl-grid-item">1</div>
    </div>
    <div class="o-col-6 o-col-sm-6 o-col-sm-md-4 u-align-center">
      <div class="frctl-grid-item">2</div>
    </div>
    <div class="o-col-6 o-col-sm-6 o-col-sm-md-4 u-align-center">
      <div class="frctl-grid-item">3</div>
    </div>
  </div>

  <div class="o-row frctl-grid-demo">
    <div class="o-col o-col-sm-2 u-align-center">
      <div class="frctl-grid-item">1</div>
    </div>
    <div class="o-col o-col-sm-8 u-align-center">
      <div class="frctl-grid-item">2</div>
    </div>
    <div class="o-col o-col-sm-2 u-align-center">
      <div class="frctl-grid-item">3</div>
    </div>
  </div>

  <div class="o-row frctl-grid-demo">
    <div class="o-col o-col-sm-3 u-align-center">
      <div class="frctl-grid-item">1</div>
    </div>
    <div class="o-col o-col-sm-9 u-align-center">
      <div class="frctl-grid-item">2</div>
    </div>
  </div>

  <h2>Reverse Row</h2>
  <div class="o-row o-row--reverse frctl-grid-demo">
    <div class="o-col o-col-sm-12 o-col-sm-md-4 u-align-center">
      <div class="frctl-grid-item">1</div>
    </div>
    <div class="o-col o-col-sm-6 o-col-sm-md-4 u-align-center">
      <div class="frctl-grid-item">2</div>
    </div>
    <div class="o-col o-col-sm-6 o-col-sm-md-4 u-align-center">
      <div class="frctl-grid-item">3</div>
    </div>
  </div>
</div>
 
{
  "pageColorTheme": "teal"
}
  • Content: 
    // ----
// Modified version of Flexbox Grid Sass by Huge Inc.
//
// https://github.com/hugeinc/flexboxgrid-sass
// ----

$grid-output-classes: true !default;

@if $grid-output-classes == true {
  // Base Containers
  .o-container {
    @include flexContainer(100%, true);
  }

  // Base Row
  .o-row {
    @include flexRow;
  }

  // Base Column
  .o-col {
    @include flexColFull();
  }

  // Column classes
  @for $i from 1 through $grid-columns {
    .o-col-#{$i} {
      @include flexColCommon;
      @include flexCol($i);
    }

    .o-col--offset-#{$i} {
      @include flexColOffset($i);
    }
  }

  @each $breakpoint in $flexgridBreakpoints {
    $name: nth($breakpoint, 1);
    $size: nth($breakpoint, 2);

    @media only screen and (min-width: $size) {

      .o-row-#{$name} {
        @include flexRow;
      }

      @for $i from 1 through $grid-columns {
        .o-col-#{$name}-#{$i} {
          // @include flexColCommon;
          @include flexCol($i);
        }

        .o-col-#{$name}--offset-#{$i} {
          @include flexColOffset($i);
        }
      }

      .o-col-#{$name} {
        @include flexColAuto();
      }
    }
  }
}
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: patterns\04-objects\grid\grid.scss
  • Size: 1.2 KB

General Usage

  • To contain grid items in a fluid container, wrap them in an element with class name .o-container-fluid
  • To contain grid items in a varying fixed-width container, wrap them in an element with class name .o-container
  • Grid elements should be wrapped in a .o-row element.
  • Columns (o.col- classes) should be prepended with the breakpoint var when they should take effect. Base columns should start with o-col, which will set the width to 100%

Breakpoints

  • Breakpoints are controlled via the $breakpoints var in src/assets/scss/01-Settings/_vars.grid.scss. Additional breakpoints can be added if needed.
  • Available breakpoints (for the .o-col- class)
    • sm
    • sm-md
    • md
    • lg
    • xl

Breakpoint usage

Modifiers are available to all o-col and o-row classes, with all breakpoints. Example usage:

  • o-col o-col-sm-10 o-col-md-6
  • o-col o-col--top o-col-lg-6 o-col-lg--center

Modifiers

o-row modifiers:

  • --reverse
  • --start
  • --center
  • --end
  • --top
  • --middle
  • --bottom
  • --around
  • --between

Modifier usage

Modifiers are available to all o-col classes, with all breakpoints. Example usage:

  • row row-md--reverse
  • row row--top row-sm--center row-md--start

Flexbox Grid

This project uses a modified version of the Flexbox Grid Sass. Files can be located in src/assets/scss/05-Objects/_obj.grid.scss