Breakpoints

Breakpoints are defined screen width which can be used to react on the screen size of the user device.

Mobile first!

All scss definitions in evalink cause are implemented in the mobile first approach. It is highly recommend to follow this approach, to make websites better accessible for mobile devices.

Default Breakpoints

evalink cause exports the following default breakpoints to use in the design:

node_modules/@evalink/cause/_base.scss

$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;
  }
}