Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* You can call mixins with or without the gls- namespace (e.g. @include gls-adaptive();).
The Adaptive Sass mixin helps you set a max-width value on your container elements, based on the breakpoint values defined in the _map-for-breakpoints.scss file. It also takes a $gutter value, which sets how close the edges of the browser screen can get to the edges of the selected element.
Tip: The Adaptive mixin works best with percentage values.
What is Adaptive Design?
Adaptive design is a graphical user interface design approach that responds differently to various device screen sizes. It typically uses several fixed layout sizes, and when it detects the device size, it selects the best layout for that specific screen size.
The Adaptive Sass mixin gives you the fastest and most consistent way to apply adaptive design.
Arguments
| Name | Type | Description |
|---|---|---|
$gutter | number (with unit) | Accepts one value and applies it to all the breakpoints. The default value is 30px. A length, a percentage, a negative length, var() or a maths function. 0 is written as 0px, because the gutter is subtracted inside calc(). |
Apply this mixin to the container element of your layout, then narrow or widen your browser window to test it!
Examples
Simply call the mixin without passing any arguments. The default $gutter value is 30px.
.main-container{
@include adaptive;
}.main-container {
margin: 0 auto;
}
@media (min-width: 576px) {
.main-container {
max-width: calc(576px - 30px * 2);
}
}
@media (min-width: 768px) {
.main-container {
max-width: calc(768px - 30px * 2);
}
}
@media (min-width: 992px) {
.main-container {
max-width: calc(992px - 30px * 2);
}
}
@media (min-width: 1200px) {
.main-container {
max-width: calc(1200px - 30px * 2);
}
}Try passing a value with an em unit. You can use any length unit here, so px, em, rem, and percentages all work.
.main-container{
@include adaptive(2em);
}.main-container {
margin: 0 auto;
}
@media (min-width: 576px) {
.main-container {
max-width: calc(576px - 2em * 2);
}
}
@media (min-width: 768px) {
.main-container {
max-width: calc(768px - 2em * 2);
}
}
@media (min-width: 992px) {
.main-container {
max-width: calc(992px - 2em * 2);
}
}
@media (min-width: 1200px) {
.main-container {
max-width: calc(1200px - 2em * 2);
}
}What it refuses
A gutter the browser drops stops the build. It is subtracted inside calc() at every breakpoint, and measured in Chrome 152 a word, a CSS-wide keyword, a unitless number and a unit that is not a length each drop the max-width, leaving the container at full width. Until 2.3.1 these compiled. adaptive(0) used to be one of them, calc(576px - 0 * 2), and is now written with 0px.
.main-container {
@include adaptive(auto);
}Error: `auto` is not a valid $gutter for `adaptive`: it is not a length. A browser drops the max-width at every breakpoint.