Responsive Design Solution
Responsive Design Solution for Current Design System
$grid-breakpoints: (
md: 480px,
lg: 769px,
xl: 960px,
xxl: 1330px
);
Mobile Small (invision)
-> Maps to nothing, we don’t have a small breakpoint implementation yet so this design would be ignored in implementationMobile (invision)
-> Maps to default design. Since we are mobile first this would be the default implementation without any media query, this would be overridden with upper level media query stylesTablet (invision)
-> Maps tomd
i.e.480px and above
breakpoint in codeDesktop LG (invision)
-> Maps tolg
i.e.769px and above
breakpoint in code-
? -> Since there is no
xl
breakpoint in the invison, the style fromDesktop LG
would be used forxl
Desktop XXL (invision)
- > Maps toxxl i.e. 1330px and above
breakpoint in code
2. responsive design implementation
$font-sizes: (
small: 13px,
small-plus: 14px,
...
);
$line-heights: (
small: 24px,
small-plus: 14px,
...
);
@mixin text-variant($size) {
font-size: #{map_get($font-sizes, $size)};
line-height: #{map_get($line-heights, $size)}
}
// then append this to the class where you need font-size/line-height
@include text-variant(small)