Simple Sass media query system and multi-stop grid system

README.md

Simple Sass media query system and multi-stop grid system

Pen: https://codepen.io/henry/pen/JBXMgB

1. Include (@import, or just paste in) the variables-- Sass files, and then the functions-- Sass files.
2. Use them!

• Media queries: in Sass, @include media(<one of the keys in $queries>) {…}
• Grid:
  • Markup (Pug, in this demo)

    .grid
      .grid-cell
      .grid-cell
      .grid-cell
      // ...

  • Styles (Sass)

    @include grid(<desktop column count>[, <tablet column count> [, <mobile column count>]])

example--grid.scss

.basic {
  @include grid(3) // 3-up
}

.desktop-and-tablet {
  @include grid(5,3) // 5-up on desktop, 3-up on tablet
}

.desktop-tablet-mobile {
  @include grid(4,3,2) // 4-up on desktop, 3-up on tablet, 2-up on mobile
}

example--markup.html

<!-- mixin target can be the grid -->
<div class="grid basic">
  <div class="grid-cell">…</div>
  <div class="grid-cell">…</div>
  …
</div>

<!--or a child of the grid -->
<div class="grid">
  <div class="desktop-and-tablet">
    <div class="grid-cell">…</div>
    <div class="grid-cell">…</div>
    …
  </div>
</div>

<!-- or a parent of the grid -->
<div class="desktop-tablet-mobile">
  <div class="grid">
    <div class="grid-cell">…</div>
    <div class="grid-cell">…</div>
    …
  </div>
</div>

example--media-query.scss

@include media(tablet-down) {
  // …
}

media-query-system-and-multistop-grid-system.scss

$desktop-to-tablet: 1024px;
$tablet-to-mobile: 768px;

$queries: (
  desktop:     '(min-width: #{$desktop-to-tablet})',
  tablet:      '(min-width: #{$tablet-to-mobile}) and (max-width: #{$desktop-to-tablet})',
  mobile:      '(max-width: #{$tablet-to-mobile})',

  tablet-up:   '(min-width: #{$tablet-to-mobile})',
  tablet-down: '(max-width: #{$desktop-to-tablet})'
);

@mixin media($query) {
  @media #{map-get($queries, $query)} {
    @content
  }
}

@mixin grid-columns($columns: 1, $query: false) {
  @if $query {
    .grid-cell {
      @include media($query) {
        width: calc(100% / #{$columns});
      }
    }
  } @else {
    .grid-cell {
       width: calc(100% / #{$columns});
    }
  }
}

@mixin grid($desktop: 0, $tablet: $desktop, $mobile: $tablet) {
  @if $desktop != 0 {
    @include grid-columns($desktop)
  }

  @if $tablet != $desktop {
    @include grid-columns($tablet, tablet-down)
  }

  @if $mobile != $tablet {
    @include grid-columns($mobile, mobile)
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}