spread
Calculate precise values based on minimum and maximum value for a property and distribute the calculated values across breakpoints.
| Parameter | Type | Description |
|---|---|---|
property | string | A valid CSS property name |
args... | number or $axis or $unit | number - The minimum and maximum values or as many values as the number of breakpoints$axis (only when grid is fluid) - either x or y which determines whether to use width or height of the breakpoint to calculate the spread values$unit - force to use given unit - px, em, rem for fixed grid and vw, vh, vmin, vmax for fluid grid |
Behaviour
- Fixed Layout
- Fluid Layout
Spread the values across $breakpoints map since $grid-fluid is set to false.
assets/styles/config/layout/breakpoints.scss
$initial-breakpoint-name: 'xs';
$breakpoints: (
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px,
'xxl': 1640px,
);
$fluid-breakpoints: (
'xs': (360px, 709px),
'sm': (1024px, 768px),
'xl': (1920px, 1080px),
);
Spread the values across $fluid-breakpoints map since $grid-fluid is set to true.
assets/styles/config/layout/breakpoints.scss
$initial-breakpoint-name: 'xs';
$breakpoints: (
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px,
'xxl': 1640px,
);
$fluid-breakpoints: (
'xs': (360px, 709px),
'sm': (1024px, 768px),
'xl': (1920px, 1080px),
);
Example: Spread across all breakpoints, based on minimum and maximum value
In case you provided only two arguments, the spread mixin will treat them as minimum and maximum value, and will automatically calculate the values for other breakpoints respecting the ratios calculated from the minimum and maximum value and the breakpoints which they have been used on.
- Fixed Layout
- Fluid Layout
Components/ExampleComponent/_style.scss
.m-example-component {
// tell Loonar that
// - the font size should initially be 10px
// - the font size should be exactly 60px at 1640px viewport width
// - it should calculate the value for 576px, 768px, 992px, 1200px
@include spread(font-size, 10px, 60px);
}
dist/frontend.css
.m-example-component {
font-size: 10px;
}
@media only screen and (min-width: 576px) {
.m-example-component {
font-size: 28px;
}
}
@media only screen and (min-width: 768px) {
.m-example-component {
font-size: 33px;
}
}
@media only screen and (min-width: 992px) {
.m-example-component {
font-size: 40px;
}
}
@media only screen and (min-width: 1200px) {
.m-example-component {
font-size: 47px;
}
}
@media only screen and (min-width: 1640px) {
.m-example-component {
font-size: 60px;
}
}
Components/ExampleComponent/_style.scss
.m-example-component {
// tell Loonar that
// - the font size should be exactly 10px at 360px viewport width and the returned value should be initial / default
// - the font size should be exactly 60px at 1920px viewport width and the returned value should be applied at 576px viewport width
// - it should calculate the value for 1024px viewport width
@include spread(font-size, 10px, 60px);
}
dist/frontend.css
.m-example-component {
font-size: 2.7777777778vw; /* this value will be 10px at 360px vw */
}
@media only screen and (min-width: 576px) {
.m-example-component {
font-size: 3.02734375vw; /* this value will be 31px at 1024px vw */
}
}
@media only screen and (min-width: 1200px) {
.m-example-component {
font-size: 3.125vw; /* this value will be 60px at 1920px vw */
}
}
Example: Spread across all breakpoints, providing all values
- Fixed Layout
- Fluid Layout
Components/ExampleComponent/_style.scss
.m-example-component {
// tell Loonar to create media queries for each value
@include spread(font-size, 10px, 15px, 20px, 30px, 44px, 60px);
}
dist/frontend.css
.m-example-component {
font-size: 10px;
}
@media only screen and (min-width: 576px) {
.m-example-component {
font-size: 15px;
}
}
@media only screen and (min-width: 768px) {
.m-example-component {
font-size: 20px;
}
}
@media only screen and (min-width: 992px) {
.m-example-component {
font-size: 30px;
}
}
@media only screen and (min-width: 1200px) {
.m-example-component {
font-size: 44px;
}
}
@media only screen and (min-width: 1640px) {
.m-example-component {
font-size: 60px;
}
}
Components/ExampleComponent/_style.scss
.m-example-component {
// tell Loonar that
// - to convert `px` to `vw`
// - to create media queries for each value
@include spread(font-size, 10px, 40px, 60px);
}
dist/frontend.css
.m-example-component {
font-size: 2.7777777778vw; /* this value will be 10px at 360px vw */
}
@media only screen and (min-width: 576px) {
.m-example-component {
font-size: 3.02734375vw; /* this value will be 40px at 1024px vw */
}
}
@media only screen and (min-width: 1200px) {
.m-example-component {
font-size: 3.125vw; /* this value will be 60px at 1920px vw */
}
}
Example: Determine axis
assets/styles/config/layout/breakpoints.scss
$initial-breakpoint-name: 'xs';
$breakpoints: (
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px,
'xxl': 1640px,
);
$fluid-breakpoints: (
// x - width (default)
// y - height
'xs': (360px, 709px), // x - 360px; y - 709px
'sm': (1024px, 768px), // x - 1024px; y - 768px
'xl': (1920px, 1080px), // x - 1920px; y - 1080px
);
Components/ExampleComponent/_style.scss
.m-example-component {
@include spread(font-size, 10px, 60px, y);
}
dist/frontend.css
.m-example-component {
font-size: 2.7777777778vh; /* this value will be 10px at 709px vh */
}
@media only screen and (min-width: 576px) {
.m-example-component {
font-size: 3.02734375vh; /* this value will be 40px at 768px vh */
}
}
@media only screen and (min-width: 1200px) {
.m-example-component {
font-size: 3.125vh; /* this value will be 60px at 1080px vh */
}
}
Example: Overwrite unit
assets/styles/config/layout/breakpoints.scss
$initial-breakpoint-name: 'xs';
$breakpoints: (
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px,
'xxl': 1640px,
);
$fluid-breakpoints: (
'xs': (360px, 709px),
'sm': (1024px, 768px),
'xl': (1920px, 1080px),
);
Components/ExampleComponent/_style.scss
.m-example-component {
@include spread(font-size, 10px, 60px, vmax);
}