grid.scss

Same logic as the bootstrap grid system but browser first. Meaning, you first develop on your browser, then look at smaller screen and adapt the design.

Includes

@include sm, md, lg, xl , xxl { };
@include smUp, mdUp, ... {};
@include smOnly, mdOnly, ... {};
@include sm-md, sm-lg, ... {}

Example

p {
  font-size: 2em;

  @include xl {
    font-size: 1.5em;
  }

  @include sm {
    font-size: 1em;
  }

}

Size

 $sm: 576px !default;
  $md: 768px !default;
  $lg: 992px !default;
  $xl: 1200px !default;
  $xxl: 1500px !default;

  @mixin sm {
    @media (max-width: #{$md - 1px}) {
      @content;
    }
  }

  @mixin smUp {
    @media (min-width: #{$sm - 1px}) {
      @content;
    }
  }

  @mixin smOnly {
    @media (min-width: #{$sm}) and (max-width: #{$md - 1px}) {
      @content;
    }
  }

  @mixin sm-md {
    @media (min-width: #{$sm}) and (max-width: #{$lg - 1px}) {
      @content;
    }
  }