🔨 reorganise and group helper classes

Author: mrmartineau

assets/src/scss/_helper-classes.scss

@@ -2,44 +2,40 @@
  * Helper classes
  * =================================
  * Non-semantic helper classes
+ * - Clearfix
+ * - State helpers
+ * - Layout helpers
+ * - Margin helpers
+ * - Typography helpers
+ * - Misc helpers
  */
 
 /**
  * Clearfix
  * http://www.cssmojo.com/latest_new_clearfix_so_far/
- * See mixins/_utility.scss for a mixin version of this
+ * @kickoff/utils also includes a mixin version of this
  */
 .clearfix::after {
 	content: "";
 	display: table;
 	clear: both;
 }
 
-
-// For background image replacement
-.ir {
-	background-color: transparent;
-	background-repeat: no-repeat;
-	border: 0;
-	direction: ltr;
-	display: block;
-	overflow: hidden;
-	text-align: left;
-	text-indent: -999em;
-
-	br {
-		display: none;
-	}
-}
-
+/**
+ * State helpers
+ */
 
 // Hide from both screenreaders and browsers: h5bp.com/u
 .is-hidden {
 	display: none !important;
 	visibility: hidden !important;
 }
 
-.is-shown { display: block; }
+.is-shown { display: block !important; }
+.is-visible { visibility: visible !important; }
+
+// Hide visually and from screenreaders, but maintain layout
+.is-invisible { visibility: hidden !important; }
 
 // Hide only visually, but have it available for screenreaders: h5bp.com/v
 .is-visuallyHidden {
@@ -64,30 +60,70 @@
 	}
 }
 
-// Hide visually and from screenreaders, but maintain layout
-.is-invisible { visibility: hidden; }
-
-.l-floatLeft {
-	float: left;
-}
-
-.l-floatRight {
-	float: right;
-}
+/**
+ * Layout helpers
+ */
+.l-floatLeft { float: left; }
+.l-floatRight { float: right; }
 
 .l-clear {
 	clear: both;
 	float: none;
 }
 
+/**
+ * Margin helpers
+ */
 .l-mb0 { margin-bottom: 0 !important; }
+.l-mb1 { margin-bottom: $baseline !important; }
+.l-mb2 { margin-bottom: ko-multiply($baseline, 2) !important; }
+.l-mb3 { margin-bottom: ko-multiply($baseline, 3) !important; }
+
 .l-mt0 { margin-top: 0 !important; }
+.l-mb1 { margin-top: $baseline !important; }
+.l-mb2 { margin-top: ko-multiply($baseline, 2) !important; }
+.l-mb3 { margin-top: ko-multiply($baseline, 3) !important; }
 
+/**
+ * Typography helpers
+ */
+.text-centre,
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-uppercase { text-transform: uppercase; }
+.text-lowercase { text-transform: lowercase; }
+
+// https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
+.text-hyphenate {
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	hyphens: auto;
+}
 
+/**
+ * Misc helpers
+ */
 * {
 	-webkit-tap-highlight-color: transparent !important;
 }
 
+// For background image replacement
+.ir {
+	background-color: transparent;
+	background-repeat: no-repeat;
+	border: 0;
+	direction: ltr;
+	display: block;
+	overflow: hidden;
+	text-align: left;
+	text-indent: -999em;
+
+	br {
+		display: none;
+	}
+}
+
 /* A hack for HTML5 contenteditable attribute on mobile */
 textarea[contenteditable] {
 	-webkit-appearance: none;