Issue 5734 - Add utility classes to website-defaults

static/scss/_utilities.scss

Index: static/scss/_utilities.scss
===================================================================
--- a/static/scss/_utilities.scss
+++ b/static/scss/_utilities.scss
@@ -47,31 +47,57 @@
  ******************************************************************************/
 
 .phone-width { width: $phone-width; }
 .phablet-width { width: $phablet-width; }
 .tablet-width { width: $tablet-width; }
 .desktop-width { width: $desktop-width; }
 .large-desktop-width { width: $large-desktop-width; }
 
+/* Text alignment

[ire, 2017/10/30 16:19:56]

I don't know if we need/want all of this. The utility class I had in hc was just
text-center. But I figure they could be useful

+ ******************************************************************************/
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-start { text-align: left; }
+[dir="rtl"] .text-start { text-align: right; }
+.text-end { text-align: right; }
+[dir="rtl"] .text-end { text-align: left; }
+
 /* Clearfix
  ******************************************************************************/
 
 .clearfix:after,
 .clearfix:before
 {
   display: table;
   content: " ";
 }
 
 .clearfix:after
 {
   clear: both;
 }
 
+/* Screen reader only
+ ******************************************************************************/
+
+.sr-only
+{
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
 /* Backgrounds
  ******************************************************************************/
 
 .bg-primary
 {
   color: $primary-light;
   background-color: $primary-dark;
 }