SuperGiGi

Simple grid

Start by adding an element with a class that includes the mixin for the row, this will create a horizontal block to contain vertical columns. Then add elements with classes which include the column mixin within that row. Specify the widths of each column inside the mixin starting from the smallest device, as SuperGiGi is mobile first larger devices will inherit those styles, customise them if necessary.

grid-row() - grid-column()

1

2

<div class="RoastedRibs">
  <div class="RoastedRibs__element RoastedRibs__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="RoastedRibs__element RoastedRibs__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
</div>

.RoastedRibs{
  @include grid-row();
  // Equivalent to grid-row($nested: true)

  &__element {
    &--first {
      @include grid-column((xxsmall: 12, medium: 4, large: 6));
    }

    &--second {
      @include grid-column((xxsmall: 12, medium: 8, large: 6));
    }
  }
}

Nested row

You can nest the grids and remove unnecessary padding between them, set the property nested to true and it will set negative margin to the row to reset the padding of a parent row container.

grid-row()

1

2

<div class="FriedChips">
  <div class="FriedChips__element FriedChips__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="FriedChips__element FriedChips__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
</div>

.FriedChips {
  @include grid-row($nested: true);

  &__element {
    &--first {
      @include grid-column(6);
    }

    &--second{
      @include grid-column(6);
    }
  }
}

Column auto

It will set the property width to auto, which allows the browser to take the remaining space for the column.

grid-column()

1

2

3

<div class="Tomatoes">
  <div class="Tomatoes__element Tomatoes__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="Tomatoes__element Tomatoes__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
  <div class="Tomatoes__element Tomatoes__element--third">
    <div class="Box">
      <p>3</p>
    </div>
  </div>

.Tomatoes {
  @include grid-row(false);

  &__element {
    &--first {
      @include grid-column(auto);
    }

    &--second {
      @include grid-column(auto);
    }

    &--third {
      @include grid-column((xxsmall: 6, medium: auto, large: 3));
    }
  }
}

Change the grid base

You can define the amount of columns a row will have by setting a fraction of the space for each column, this gives you the width as a percentage value.

grid-column()

1

2

<div class="Steak">
  <div class="Steak__element Steak__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="Steak__element Steak__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
</div>

.Steak {
  @include grid-row(false);

  &__element {
    &--first {
      @include grid-column($width: 2 of 5);
    }

    &--second {
      @include grid-column($width: 3 of 5);
    }
  }
}

Offset

With the offset you can move a column up to a column number following the direction of the grid. The space occupied by the column will be the width number added with the offset number.

grid-column()

1

2

3

<div class="Ribs">
  <div class="Ribs__element Ribs__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="Ribs__element Ribs__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
  <div class="Ribs__element Ribs__element--third">
    <div class="Box">
      <p>3</p>
    </div>
  </div>
</div>

.Ribs {
  @include grid-row(false);

  &__element {
    &--first {
      @include grid-column(
        $width: 4,
        $offset: (
          xxsmall: 6, large: 1
        )
      );
    }

    &--second {
      @include grid-column(
        $width: 4,
        $offset: 2
      );
    }

    &--third {
      @include grid-column(
        $width: 4,
        $offset: (
          xxsmall: 8,
          large: 4
        )
      );
    }
  }
}

Push & Pull

Direction and amount of columns to move. The element will move equal to the width specified for each device.

grid-column()

1

2

3

<div class="Pepperoni">
  <div class="Pepperoni__element Pepperoni__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="Pepperoni__element Pepperoni__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
  <div class="Pepperoni__element Pepperoni__element--third">
    <div class="Box">
      <p>3</p>
    </div>
  </div>
</div>

.Pepperoni{
  @include grid-row(false);

  &__element {
    &--first {
      @include grid-column(
        $width: 4,
        $push: (xxsmall:8, large: 4)
      );
    }

    &--second {
      @include grid-column(
        $width: 4,
        $push: 4,
        $pull: (large: 4)
      );
    }

    &--third {
      @include grid-column(
        $width: 4,
        $pull: (xxsmall: 8, large: 0)
      );
    }
  }
}

Order

You can shift columns around between our device breakpoints by setting the order property of the columns.

grid-column()

1

2

3

4

<div class="Sausages">
  <div class="Sausages__element Sausages__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="Sausages__element Sausages__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
  <div class="Sausages__element Sausages__element--third">
    <div class="Box">
      <p>3</p>
    </div>
  </div>
  <div class="Sausages__element Sausages__element--fourth">
    <div class="Box">
      <p>4</p>
    </div>
  </div>
</div>

.Sausages{
  @include grid-row(false);

  &__element {
    &--first {
      @include grid-column(
        $width: auto,
        $order: (medium: 4, large: 3)
      );
    }

    &--second {
      @include grid-column(
        $width: auto,
        $order: (xxsmall: 3, large: 4)
      );
    }

    &--third {
      @include grid-column(
        $width: auto,
        $order: (xxsmall: 2, large: 1)
      );
    }

    &--fourth {
      @include grid-column(
        $width: auto,
        $order: (xxsmall: 4, medium: 1, large: 2)
      );
    }
  }
}

Collapse

Collapse the gutters on a column by removing the padding.

grid-column()

1

2

3

4

<div class="Eggplant">
  <div class="Eggplant__element Eggplant__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="Eggplant__element Eggplant__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
  <div class="Eggplant__element Eggplant__element--third">
    <div class="Box">
      <p>3</p>
    </div>
  </div>
  <div class="Eggplant__element Eggplant__element--fourth">
    <div class="Box">
      <p>4</p>
    </div>
  </div>
</div>

.Eggplant{
  @include grid-row(false);

  &__element {
    &--first {
      @include grid-column($width: 3, $collapse: true);
    }

    &--second {
      @include grid-column($width: 3, $collapse: true);
    }

    &--third {
      @include grid-column($width: 3, $collapse: false);
    }

    &--fourth {
      @include grid-column($width: 3, $collapse: false);
    }
  }
}

Global

By setting this to false it will remove the basic properties that define the column behavior.

grid-column()

1

2

3

4

<div class="Bacon">
  <div class="Bacon__element Bacon__element--first">
    <span class="Bacon_box">1</span>
  </div>
  <div class="Bacon__element Bacon__element--second">
    <span class="Bacon_box">2</span>
  </div>
  <div class="Bacon__element Bacon__element--third">
    <span class="Bacon_box">3</span>
  </div>
  <div class="Bacon__element Bacon__element--fourth">
    <span class="Bacon_box">4</span>
  </div>
</div>

.Bacon {
  @extend %Line;
  @include grid-row(false);

  &__element {
    &--first {
      @include grid-column($width: 3, $global: false);
      display: inline-block;
    }

    &--second {
      @include grid-column($width: 3);
    }

    &--third {
      @include grid-column($width: 3);
    }

    &--fourth {
      @include grid-column($width: 3);
    }
  }

  &__box {
    @extend .Box;
  }
}

The Grid

Simple grid

Nested row

Column auto

Change the grid base

Offset

Push & Pull

Order

Collapse

Global