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 | |
Tablet Landscape | 3 | 6 | 3 | |
Tablet (portrait) | 4 | 4 | 4 | |
Handheld Landscape | 6 | 6 | 12 | |
Handheld (portrait) | 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);
}
}
Attachment | Size |
---|---|
d-3-6-3.png | 5.03 KB |
tl-3-6-3.png | 5.03 KB |
t-4-4-4.png | 4.58 KB |
hl-6-6-12.png | 5.46 KB |
h-12-12-12.png | 5.33 KB |