Igi's 3rd party sass hacker kit

_grid.sass

.container
  position: relative
  +desktop
    margin: 0 auto
    max-width: $desktop - 40px
    width: $desktop - 40px
    // Modifiers
    &.is-fluid
      margin: 0 20px
      max-width: none
      width: auto
  +widescreen
    max-width: $widescreen - 40px
    width: $widescreen - 40px
  +fullhd
    max-width: $fullhd - 40px
    width: $fullhd - 40px

.section
  padding: 3rem 1.5rem
  // Responsiveness
  +desktop
    // Sizes
    &.is-medium
      padding: 9rem 1.5rem
    &.is-large
      padding: 18rem 1.5rem

.column
  display: block
  flex-basis: 0
  flex-grow: 1
  flex-shrink: 1
  padding: 0.75rem
  .columns.is-mobile > &.is-narrow
    flex: none
  .columns.is-mobile > &.is-full
    flex: none
    width: 100%
  .columns.is-mobile > &.is-three-quarters
    flex: none
    width: 75%
  .columns.is-mobile > &.is-two-thirds
    flex: none
    width: 66.6666%
  .columns.is-mobile > &.is-half
    flex: none
    width: 50%
  .columns.is-mobile > &.is-one-third
    flex: none
    width: 33.3333%
  .columns.is-mobile > &.is-one-quarter
    flex: none
    width: 25%
  .columns.is-mobile > &.is-offset-three-quarters
    margin-left: 75%
  .columns.is-mobile > &.is-offset-two-thirds
    margin-left: 66.6666%
  .columns.is-mobile > &.is-offset-half
    margin-left: 50%
  .columns.is-mobile > &.is-offset-one-third
    margin-left: 33.3333%
  .columns.is-mobile > &.is-offset-one-quarter
    margin-left: 25%
  @for $i from 1 through 12
    .columns.is-mobile > &.is-#{$i}
      flex: none
      width: ($i / 12) * 100%
    .columns.is-mobile > &.is-offset-#{$i}
      margin-left: ($i / 12) * 100%
  +mobile
    &.is-narrow-mobile
      flex: none
    &.is-full-mobile
      flex: none
      width: 100%
    &.is-three-quarters-mobile
      flex: none
      width: 75%
    &.is-two-thirds-mobile
      flex: none
      width: 66.6666%
    &.is-half-mobile
      flex: none
      width: 50%
    &.is-one-third-mobile
      flex: none
      width: 33.3333%
    &.is-one-quarter-mobile
      flex: none
      width: 25%
    &.is-offset-three-quarters-mobile
      margin-left: 75%
    &.is-offset-two-thirds-mobile
      margin-left: 66.6666%
    &.is-offset-half-mobile
      margin-left: 50%
    &.is-offset-one-third-mobile
      margin-left: 33.3333%
    &.is-offset-one-quarter-mobile
      margin-left: 25%
    @for $i from 1 through 12
      &.is-#{$i}-mobile
        flex: none
        width: ($i / 12) * 100%
      &.is-offset-#{$i}-mobile
        margin-left: ($i / 12) * 100%
  +tablet
    &.is-narrow,
    &.is-narrow-tablet
      flex: none
    &.is-full,
    &.is-full-tablet
      flex: none
      width: 100%
    &.is-three-quarters,
    &.is-three-quarters-tablet
      flex: none
      width: 75%
    &.is-two-thirds,
    &.is-two-thirds-tablet
      flex: none
      width: 66.6666%
    &.is-half,
    &.is-half-tablet
      flex: none
      width: 50%
    &.is-one-third,
    &.is-one-third-tablet
      flex: none
      width: 33.3333%
    &.is-one-quarter,
    &.is-one-quarter-tablet
      flex: none
      width: 25%
    &.is-offset-three-quarters,
    &.is-offset-three-quarters-tablet
      margin-left: 75%
    &.is-offset-two-thirds,
    &.is-offset-two-thirds-tablet
      margin-left: 66.6666%
    &.is-offset-half,
    &.is-offset-half-tablet
      margin-left: 50%
    &.is-offset-one-third,
    &.is-offset-one-third-tablet
      margin-left: 33.3333%
    &.is-offset-one-quarter,
    &.is-offset-one-quarter-tablet
      margin-left: 25%
    @for $i from 1 through 12
      &.is-#{$i},
      &.is-#{$i}-tablet
        flex: none
        width: ($i / 12) * 100%
      &.is-offset-#{$i},
      &.is-offset-#{$i}-tablet
        margin-left: ($i / 12) * 100%
  +desktop
    &.is-narrow-desktop
      flex: none
    &.is-full-desktop
      flex: none
      width: 100%
    &.is-three-quarters-desktop
      flex: none
      width: 75%
    &.is-two-thirds-desktop
      flex: none
      width: 66.6666%
    &.is-half-desktop
      flex: none
      width: 50%
    &.is-one-third-desktop
      flex: none
      width: 33.3333%
    &.is-one-quarter-desktop
      flex: none
      width: 25%
    &.is-offset-three-quarters-desktop
      margin-left: 75%
    &.is-offset-two-thirds-desktop
      margin-left: 66.6666%
    &.is-offset-half-desktop
      margin-left: 50%
    &.is-offset-one-third-desktop
      margin-left: 33.3333%
    &.is-offset-one-quarter-desktop
      margin-left: 25%
    @for $i from 1 through 12
      &.is-#{$i}-desktop
        flex: none
        width: ($i / 12) * 100%
      &.is-offset-#{$i}-desktop
        margin-left: ($i / 12) * 100%
  +widescreen
    &.is-narrow-widescreen
      flex: none
    &.is-full-widescreen
      flex: none
      width: 100%
    &.is-three-quarters-widescreen
      flex: none
      width: 75%
    &.is-two-thirds-widescreen
      flex: none
      width: 66.6666%
    &.is-half-widescreen
      flex: none
      width: 50%
    &.is-one-third-widescreen
      flex: none
      width: 33.3333%
    &.is-one-quarter-widescreen
      flex: none
      width: 25%
    &.is-offset-three-quarters-widescreen
      margin-left: 75%
    &.is-offset-two-thirds-widescreen
      margin-left: 66.6666%
    &.is-offset-half-widescreen
      margin-left: 50%
    &.is-offset-one-third-widescreen
      margin-left: 33.3333%
    &.is-offset-one-quarter-widescreen
      margin-left: 25%
    @for $i from 1 through 12
      &.is-#{$i}-widescreen
        flex: none
        width: ($i / 12) * 100%
      &.is-offset-#{$i}-widescreen
        margin-left: ($i / 12) * 100%

.columns
  margin-left: -0.75rem
  margin-right: -0.75rem
  margin-top: -0.75rem
  &:last-child
    margin-bottom: -0.75rem
  &:not(:last-child)
    margin-bottom: 0.75rem
  // Modifiers
  &.is-centered
    justify-content: center
  &.is-gapless
    margin-left: 0
    margin-right: 0
    margin-top: 0
    &:last-child
      margin-bottom: 0
    &:not(:last-child)
      margin-bottom: 1.5rem
    & > .column
      margin: 0
      padding: 0
  &.is-grid
    // Responsiveness
    +tablet
      flex-wrap: wrap
      & > .column
        max-width: 33.3333%
        padding: 0.75rem
        width: 33.3333%
        & + .column
          margin-left: 0
  &.is-mobile
    display: flex
  &.is-multiline
    flex-wrap: wrap
  &.is-vcentered
    align-items: center
  // Responsiveness
  +tablet
    &:not(.is-desktop)
      display: flex
  +desktop
    // Modifiers
    &.is-desktop
      display: flex

app.sass

// Typography
$family-heading: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-body: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif

// Font sizes
$size-base: 14px
$size-1: 3rem
$size-2: 2.5rem
$size-3: 2rem
$size-4: 1.5rem
$size-5: 1.25rem
$size-6: 1rem
$size-7: 0.75rem

// Font weights
$fw-light: 300
$fw-normal: 400
$fw-semibold: 500
$fw-bold: 700

// Break points
$tablet: 769px
$desktop: 1000px
$widescreen: 1192px
$fullhd: 1384px

// Colours
$c-black: #000
$c-white: #fff
$c-grey-7: #7b7b7b
$c-grey-8: #8a8a8a
$c-grey-9: #9b9b9b

// Useful mixins
=transition
  transition: .2s all ease
  @content

// Responsiveness
=from($device)
  @media screen and (min-width: $device)
    @content
=until($device)
  @media screen and (max-width: $device - 1px)
    @content
=mobile
  @media screen and (max-width: $tablet - 1px)
    @content
=tablet
  @media screen and (min-width: $tablet), print
    @content
=tablet-only
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content
=touch
  @media screen and (max-width: $desktop - 1px)
    @content
=desktop
  @media screen and (min-width: $desktop)
    @content
=desktop-only
  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
    @content
=widescreen
  @media screen and (min-width: $widescreen)
    @content
=widescreen-only
  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
    @content
=fullhd
  @media screen and (min-width: $fullhd)
    @content

// Flex grid
@import 'grid'