Definition
Define the break points where the content responds according to the device width, allowing the design system to show the best possible layout to the user.
We are using the same breakpoints that Google Material Design.
List of breakpoints
xxs 1
xs 480
sm 600
sml 840
md 960
lg 1280
xl 1440
xxl 1600
xxxl 1920
breakpoints image representation
/* -------------------------------------------------------------------------
* BREAKPOINTS
*
* Viewport breakpoints
* Values should be expressed in PX.
* The values here are for sample proposes, consider add your owns
*
* Extracted from [Google Material Design]
* (https://www.google.com/design/spec/layout/adaptive-ui.html)
*
*/
// Main breakpoints
$f-breakpoint--xxs: 1px !default;
$f-breakpoint--xs: 480px !default;
$f-breakpoint--sm: 600px !default;
$f-breakpoint--sml: 840px !default;
$f-breakpoint--md: 960px !default;
$f-breakpoint--lg: 1280px !default;
$f-breakpoint--xl: 1440px !default;
$f-breakpoint--xxl: 1600px !default;
$f-breakpoint--xxxl: 1920px !default;
// Breakpoints map
$f-breakpoints: (
"xxs": $f-breakpoint--xxs,
"xs": $f-breakpoint--xs,
"sm": $f-breakpoint--sm,
"sml": $f-breakpoint--sml,
"md": $f-breakpoint--md,
"lg": $f-breakpoint--lg,
"xl": $f-breakpoint--xl,
"xxl": $f-breakpoint--xxl,
"xxxl": $f-breakpoint--xxxl,
) !default;
$f-breakpoints-inverted: (
"xxxl": $f-breakpoint--xxxl,
"xxl": $f-breakpoint--xxl,
"xl": $f-breakpoint--xl,
"lg": $f-breakpoint--lg,
"md": $f-breakpoint--md,
"sml": $f-breakpoint--sml,
"sm": $f-breakpoint--sm,
"xs": $f-breakpoint--xs,
"xxs": $f-breakpoint--xxs,
) !default;
////////////////////////////////////////////////////////////////////////////////
// W A R N I N G //
// DO NOT MODIFY ANYTHING BEYOND THIS POINT //
////////////////////////////////////////////////////////////////////////////////
/* SAFE CHECKING
* Check that the chosen breakpoints are pixels.
*/
@each $_name, $_size in $f-breakpoints {
@if (type-of($_size) != number) {
@error "`$f-breakpoints: #{$_name}` needs to be a number.";
}
@if (unit($_size) != "px") {
@error "`$f-breakpoints: #{$_name}` needs to be a pixel value.";
}
}