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 implementation
  • Mobile (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 styles
  • Tablet (invision) -> Maps to md i.e. 480px and above breakpoint in code
  • Desktop LG (invision) -> Maps to lg i.e. 769px and above breakpoint in code
  • ? -> Since there is no xl breakpoint in the invison, the style from Desktop LG would be used for xl
  • Desktop XXL (invision) - > Maps to xxl i.e. 1330px and above breakpoint in code

2. responsive design implementation

Define Class

$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)