Responsive
Gralig uses 5 breakpoint variables and 2 mixins for mobile compatibility.
@import 'gralig/scss/abstracts/_variables.scss';
@import 'gralig/scss/abstracts/_mixins.scss';
Breakpoints
| Variable | Type | Value |
|---|---|---|
| $breakpoint-xl | size | 120em (1920px) |
| $breakpoint-l | size | 75em (1200px) |
| $breakpoint-m | size | 62.5em (1000px) |
| $breakpoint-s | size | 50em (800px) |
| $breakpoint-xs | size | 37.5em (600px) |
Mixins
// you can use them in .scss like
@include min-width($breakpoint-s) {
}
// or
@include max-width($breakpoint-m) {
}