Breakpoints
Breakpoints are defined screen width which can be used to react on the screen size of the user device.
Mobile first!
Default Breakpoints
evalink cause exports the following default breakpoints to use in the design:
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-xxl: 1536px;
How to use
Import the base
file into your scss
file and add the breakpoints to the media queries.
@import 'node_modules/@evalink/cause/_base.scss';
/*
* Valid for all screen sizes from 0px to 639px
*/
h1 {
font-size: 2.5rem;
line-height: 3rem;
}
/*
* Valid for all screen sizes between 640px and 767px
*/
@media (min-width: $breakpoint-sm) {
h1 {
font-size: 3rem;
line-height: 3.5rem;
}
}
/*
* Valid for all screen sizes bigger than 768px
*/
@media (min-width: $breakpoint-md) {
h1 {
font-size: 4rem;
line-height: 4.5rem;
}
}
Last updated
Was this helpful?