CSS audit :D

src/assets/stylesheets/application.sass

@@ -0,0 +1,25 @@
+@import 'vendor/normalize'
+
+@import 'base/variables'
+@import 'base/breakpoints'
+@import 'base/mixins'
+@import 'base/grid'
+
+//When working on a Rails project you can use wildcard for importing. JS requires explicit paths.
+//@import 'shared/*'
+@import 'shared/base'
+@import 'shared/buttons'
+@import 'shared/fonts'
+@import 'shared/forms'
+@import 'shared/hacks'
+@import 'shared/utilities'
+
+//@import 'components/*'
+@import 'components/hero-image'
+@import 'components/simple-nav'
+@import 'components/post'
+@import 'components/footer'
+@import 'components/subnav'
+@import 'components/blogpost'
+@import 'components/gallery'
+@import 'components/filters'

src/assets/stylesheets/base/_breakpoints.scss

@@ -0,0 +1,123 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}

src/assets/stylesheets/base/_grid.sass

@@ -0,0 +1,122 @@
+%column
+  min-height: 1px
+  padding:
+    left: ($grid-gutter-width / 2)
+    right: ($grid-gutter-width / 2)
+  position: relative
+  width: 100%
+
+=container
+  margin:
+    left: auto
+    right: auto
+  max-width: $container
+  padding:
+    left: $grid-gutter-width
+    right: $grid-gutter-width
+  width: 100%
+
+=container-fluid($gutter: $grid-gutter-width)
+  margin:
+    left: auto
+    right: auto
+  padding:
+    left: $grid-gutter-width
+    right: $grid-gutter-width
+  width: 100%
+
+=row($gutter: $grid-gutter-width)
+  display: flex
+  flex-wrap: wrap
+
+  @if $gutter != 0
+    margin:
+      left: ceil(-$gutter / 2)
+      right: floor(-$gutter / 2)
+  @else
+    > *
+      padding:
+        left: 0
+        right: 0
+
+//----- columns --------------------------------------------------------------------------------------------------------
+=col
+  flex-basis: 0
+  flex-grow: 1
+  max-width: 100%
+
+=col-auto
+  flex: 0 0 auto
+  max-width: none
+  width: auto
+
+//----- extra small columns --------------------------------------------------------------------------------------------
+=column($columns, $gutter: $grid-gutter-width)
+  @extend %column
+  flex: 0 0 percentage($columns / $grid-columns)
+  max-width: percentage($columns / $grid-columns)
+
+=offset($columns)
+  margin-left: percentage($columns / $grid-columns)
+
+=order($columns)
+  order: $columns
+
+//----- small columns --------------------------------------------------------------------------------------------------
+=column-sm($columns, $gutter: $grid-gutter-width)
+  @extend %column
+  +media-breakpoint-up(sm)
+    width: percentage($columns / $grid-columns)
+
+=offset-sm($columns)
+  +media-breakpoint-up(sm)
+    margin-left: percentage($columns / $grid-columns)
+
+=order-sm($columns)
+  +media-breakpoint-up(sm)
+    order: $columns
+
+//----- medium columns -------------------------------------------------------------------------------------------------
+=column-md($columns, $gutter: $grid-gutter-width)
+  @extend %column
+  +media-breakpoint-up(md)
+    flex: 0 0 percentage($columns / $grid-columns)
+    max-width: percentage($columns / $grid-columns)
+
+=offset-md($columns)
+  +media-breakpoint-up(md)
+    margin-left: percentage($columns / $grid-columns)
+
+=order-md($columns)
+  +media-breakpoint-up(md)
+    order: $columns
+
+//----- large columns --------------------------------------------------------------------------------------------------
+=column-lg($columns, $gutter: $grid-gutter-width)
+  @extend %column
+  +media-breakpoint-up(lg)
+    flex: 0 0 percentage($columns / $grid-columns)
+    max-width: percentage($columns / $grid-columns)
+
+=offset-lg($columns)
+  +media-breakpoint-up(lg)
+    margin-left: percentage($columns / $grid-columns)
+
+=order-lg($columns)
+  +media-breakpoint-up(lg)
+    order: $columns
+
+//----- extra large columns --------------------------------------------------------------------------------------------
+=column-xl($columns, $gutter: $grid-gutter-width)
+  @extend %column
+  +media-breakpoint-up(xl)
+    flex: 0 0 percentage($columns / $grid-columns)
+    max-width: percentage($columns / $grid-columns)
+
+=offset-xl($columns)
+  +media-breakpoint-up(xl)
+    margin-left: percentage($columns / $grid-columns)
+
+=order-xl($columns)
+  +media-breakpoint-up(xl)
+    order: $columns

src/assets/stylesheets/base/_mixins.sass

@@ -0,0 +1,49 @@
+=box-shadow($color)
+  box-shadow: 0 5px 15px rgba($color, .2)
+
+// DEPRECATED - you should not use floats for columns anymore
+=clearfix
+  &:after
+    clear: both
+    content: ''
+    display: table
+
+=ellipsis
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+// UNOFF - watch the browser support for this one here https://caniuse.com/#search=line-clamp
+=ellipsis-multiline($lines: 3)
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical
+  -webkit-line-clamp: $lines
+  display: -webkit-box
+  overflow: hidden
+
+// experimental hover device detection, if you use this IE will not get any hovers
+=hover
+  @media (hover: hover) and (pointer: fine)
+    &:hover
+      @content
+
+=list-unstyled
+  list-style: none
+  padding-left: 0
+
+=pseudoelement
+  bottom: 0
+  content: ''
+  left: 0
+  position: absolute
+  right: 0
+  top: 0
+
+=transition($property...)
+  transition-property: $property
+  transition-duration: $transition-duration
+  transition-timing-function: $transition-function
+
+=media-touch-devices
+  @media (any-pointer: coarse)
+    @content