Adds media mixins

Author: birdofpreyru

docs/scss-mixins.md

@@ -34,3 +34,46 @@ To use, import the main mixins file into your SCSS, e.g.:
   - **`$url`** Path to the font file, including the filename (without
   file extension).
 
+### Media Mixins
+These mixins help to create conditional SCSS, responsive to the viewport size.
+
+We consider five viewport sizes: extra-small (XS), small (SM), medium (MD),
+large (LG), and extra-large (XL). It is assumed that mobile devices have SM
+screen size; tablets have MD screens, and desktops have LG or XL screen size.
+The actual break-points between these sizes are defined by four variables with
+the following default values:
+- **`$screen-xs`** — 320px;
+- **`$screen-sm`** — 768px;
+- **`$screen-md`** — 1024px;
+- **`$screen-lg`** — 1280px.
+
+Each of these variables set the maximal pixel size of the corresponding
+viewport; i.e. XS viewport may have any width under `$screen-xs` (inclusive);
+MD viewport may have a width from `$screen-sm` (exclusive) up to `$screen-md`
+(inclusive); XL viewport may have any width above `$screen-lg` (exclusive).
+
+Based on these variables, we provide two sets of media mixins:
+- **`@mixin xs`**, **`@mixin sm`**, **`@mixin md`**, **`@mixin lg`**,
+  **`@mixin xl`** — allow to apply styling to a single specified
+  size of the viewport;
+- **`@mixin xs-to-sm`**, **`@mixin xs-to-md`**, **`@mixin xs-to-lg`**,
+  **`@mixin sm-to-md`**, **`@mixin sm-to-lg`**, **`@mixin sm-to-xl`**,
+  **`@mixin md-to-lg`**, **`@mixin md-to-xl`**, **`@mixin lg-to-xl`** —
+ allow to apply styling for a range of viewport sizes, from the first mentioned
+ in the mixin name to the last one, both inclusive.
+
+The both kinds of these mixins you can use the same way:
+```scss
+// style.scss
+
+.someClass {
+  // General style
+  background: green;
+
+  // The element will become red on the smallest screens (XS to SM), which means
+  // any screen smaller than MD.
+  @include xs-to-sm {
+    background: red;
+  }
+}
+```

src/styles/_mixins/_fonts.scss renamed to src/styles/_mixins/fonts.scss

@@ -0,0 +1,105 @@
+/**
+ * Mixins for different layout sizes: xs, sm, md, lg.
+ * Breaking points are defined in _variables.scss
+ * The range mixins A-to-B all means "for the sizes from A to B, both
+ * inclusive", in particular it means that mixin A-to-lg is equivalent to
+ * all sizes from A (inclusive) and larger.
+ *
+ * NOTE: For convenience, these mixins are sorted not alphabetically, but,
+ * first, by increase of the first size; second, by increase of the second size.
+ */
+
+/* Break points. */
+
+$screen-xs: 320px !default;
+$screen-sm: 768px !default;
+$screen-md: 1024px !default;
+$screen-lg: 1280px !default;
+
+/* XS */
+
+@mixin xs {
+  @media (max-width: #{$screen-xs}) {
+    @content;
+  }
+}
+
+@mixin xs-to-sm {
+  @media (max-width: #{$screen-sm}) {
+    @content;
+  }
+}
+
+@mixin xs-to-md {
+  @media (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+
+@mixin xs-to-lg {
+  @media (max-width: #{$screen-lg}) {
+    @content;
+  }
+}
+
+/* XS */
+
+@mixin sm {
+  @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-sm}) {
+    @content;
+  }
+}
+
+@mixin sm-to-md {
+  @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+
+@mixin sm-to-xl {
+  @media (min-width: #{$screen-xs + 1px}) {
+    @content;
+  }
+}
+
+/* MD */
+
+@mixin md {
+  @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+
+@mixin md-to-lg {
+  @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-lg}) {
+    @content;
+  }
+}
+
+@mixin md-to-xl {
+  @media (min-width: #{$screen-sm + 1px}) {
+    @content;
+  }
+}
+
+/* LG */
+
+@mixin lg {
+  @media (min-width: #{$screen-md + 1px}) and (max-width: #{$screen-lg}) {
+    @content;
+  }
+}
+
+@mixin lg-to-xl {
+  @media (min-width: #{$screen-md + 1px}) {
+    @content;
+  }
+}
+
+/* XL */
+
+@mixin xl {
+  @media (min-width: #{$screen-lg + 1px}) {
+    @content;
+  }
+}

src/styles/_mixins/media.scss

@@ -1,2 +1,3 @@
 /* Collection of standard mixins, being used all around. */
 @import "_mixins/fonts";
+@import "_mixins/media";