Fix #1078 (#1111)

* Rearrange responsive typography definition. Fixes #1078

* Renamed mixin (compliant with the styleguide)

sass/base/helpers.sass

@@ -21,29 +21,32 @@
 
 // Typography
 
-@each $size in $sizes
+=typography-size($target:'')
-  $i: index($sizes, $size)
+  @each $size in $sizes
-  .is-size-#{$i}
+    $i: index($sizes, $size)
-    font-size: $size !important
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
-  +mobile
-    .is-size-#{$i}-mobile
-      font-size: $size !important
-  +tablet
-    .is-size-#{$i}-tablet
-      font-size: $size !important
-  +touch
-    .is-size-#{$i}-touch
-      font-size: $size !important
-  +desktop
-    .is-size-#{$i}-desktop
-      font-size: $size !important
-  +widescreen
-    .is-size-#{$i}-widescreen
-      font-size: $size !important
-  +fullhd
-    .is-size-#{$i}-fullhd
       font-size: $size !important
 
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
 $alignments: ('centered': 'center', 'left': 'left', 'right': 'right')
 
 @each $alignment, $text-align in $alignments