600 West

Grid 

<div id="" class=" dg">
    <div id="" class=" bg--aqua-1100 c--neutral-0  mw1000 w-100p mx-auto">
        <p id="" class="">
            I am in a Grid
        </p>

    </div>

</div>
 
<div id="{{id}}" class="{{class}} {{modifier}}">
    {{> @children}}
</div>
 
{
  "id": null,
  "class": null,
  "modifier": "dg",
  "children": [
    {
      "component": "div",
      "context": {
        "modifier": "bg--aqua-1100 c--neutral-0  mw1000 w-100p mx-auto",
        "children": [
          {
            "component": "p",
            "context": {
              "text": "I am in a Grid"
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    @import "./GridBase";
.row {
    &._left {
        justify-content: flex-start;
    }
    &._right {
        justify-content: flex-end;
    }
    &._spread {
        justify-content: space-between;
    }
    &._bordered {
        padding-top: Space(500);
        border-top: 1px solid get-color(neutral, 600);
    }
    &._bottomitems {
        align-items: flex-end;
    }
    &._wrap {
        flex-wrap: wrap;
    }
}
._nogutter {
    padding: 0;
}
._shrink {
    padding-right: $grid-gutter / 2;
    padding-left: $grid-gutter / 2;
    flex: 0 1 auto;
}
._grow {
    padding-right: $grid-gutter / 2;
    padding-left: $grid-gutter / 2;
    flex: 1 0 auto;
}
@media #{$mobile-media} {
    ._reverse {
        z-index: 1;
        order: 2;
    }
    ._reverse + * {
        z-index: 0;
        margin-top: 0;
        margin-bottom: Space(500);
        order: 1;
    }
}
@media #{$desktop-media} {
    ._pad-bottom {
        padding-bottom: Space(700);
    }
    .Row--overlapLeft {
        > .col:first-child {
            @include ZIndex("Card");
            position: relative;
            margin-right: -(Space(700));
            align-self: flex-start;
        }
        > .col:last-child {
            padding: Space(600) Space(400) Space(600) Space(800);
            margin-top: Space(700);
            align-self: flex-end;
            border: 2px solid get-color(neutral, 300);
        }
    }
    .Row--overlapRight {
        > .col:first-child {
            padding: Space(600) Space(800) Space(600) Space(600);
            margin-top: Space(700);
            align-self: flex-end;
            border: 2px solid get-color(neutral, 300);
        }
        > .col:last-child {
            @include ZIndex("Card");
            position: relative;
            margin-left: -(Space(700));
            align-self: flex-start;
        }
    }
}
@media screen and (min-width: 900px) {
    ._pad-right {
        padding-right: 9.375%;
    }
    ._pad-left {
        padding-left: 9.375%;
    }
}
  • URL: /components/raw/grid/Grid.scss
  • Filesystem Path: components/molecules/Grid/Grid.scss
  • Size: 2 KB
  • Content: 
    .row {
    @include grid-row;
    &._centeritems {
        align-items: center;
    }
}
@for $i from 1 through $grid-columns {
    ._span-#{$i} {
        @include grid-col($i);
    }
}
.col {
    > .row {
        @include grid-row-nested;
    }
}
@media #{$mobile-media} {
    .col + .col {
        margin-top: Space(500);
    }
}
  • URL: /components/raw/grid/GridBase.scss
  • Filesystem Path: components/molecules/Grid/GridBase.scss
  • Size: 331 Bytes

Grid

Grid is a component that is simply a div that contains the display: grid utility and allows for children.

Best Practices