For the site-layout built in theme-settings, layout classes are automatically created by Aether's grid system. Each set of layout classes are created within a media query except for the default (desktop in this case).

Here is what we want to achieve for these examples:

Breakdown example

Device Width Col 1 Col 2 Col 3 Visual Example
Desktop (default) 3 6 3 desktop-3-6-3
Tablet Landscape 3 6 3 tablet_landscape-3-6-3
Tablet (portrait) 4 4 4 tablet-4-4-4
Handheld Landscape 6 6 12 Handheld_Lanscape-6-6-12
Handheld (portrait) 12 12 12 handheld-12-12-12

CSS classes in markup

This is what the markup looks like for a standard 3 column layout on a 12 column grid with no source ordering tricks:

  <div class="g-all-row">
    <div class="g-d-3 g-tl-3 g-t-4 g-hl-6 g-h-12">Column1</div>
    <div class="g-d-6 g-tl-6 g-t-4 g-hl-6 g-h-12">Column2</div>
    <div class="g-d-3 g-tl-3 g-t-4 g-hl-12 g-h-12">Column3</div>
  </div>

Extend-layout mixin

This is an example of extend-layout in this grid system, if you wanted to create your own grids manually using the existing pre-generated css, here is how you would hook into them using @extends in SCSS. This is an example of the same 3 column layout:

Note: The only place that layout-extends can be written are within the _extend-layout.scss file in YOURTHEME/sass/layout/_extend-layout.scss.

Markup for example
<div class="column-wrapper">
  <div class="column1">content...</div>
  <div class="column2">content...</div>
  <div class="column3">content...</div>
</div>
scss for markup

Add a space separated list of media types and associated column widths. An optional function parameter for offset, right, push or pull can be added after each layout statement preceded by a space d 6 right. This mixin is shorthand for writing @extend .g-<media>-<function>#;

.column-wrapper {
 @extend .grid-all-row;
  .column1 {
    @include extend-layout(d 6, tl 6, t 4, hl 6, h 12);
  }
  .column2 {
    @include extend-layout(d 3, tl 3, t 4, hl 6, h 12);
  }
  .column3 {
    @include extend-layout(d 3, tl 3, t 4, hl 12, h 12);
  }
}
AttachmentSize
d-3-6-3.png5.03 KB
tl-3-6-3.png5.03 KB
t-4-4-4.png4.58 KB
hl-6-6-12.png5.46 KB
h-12-12-12.png5.33 KB