Updated helpers.scss

assets/sass/utils/_a11y.scss

@@ -1,7 +1,7 @@
 .sr-only {
-  font-size: 0;
+    font-size: 0;
-  height: 0;
+    height: 0;
-  overflow: hidden;
+    overflow: hidden;
-  position: absolute;
+    position: absolute;
-  width: 0;
+    width: 0;
 }

assets/sass/utils/_helpers.scss

@@ -1,27 +1,77 @@
-.alignleft {
+/**
-  float: left;
+ * Clearing and floating
+ */
+
+.float-left {
+    float: left;
+    img & {
+        margin-right: $base-spacing-unit;
+    }
 }
 
-img.alignleft {
+
-  margin-right: $base-spacing-unit;
+.float-right {
+    float: right;
+    img & {
+        margin-left : $base-spacing-unit;
+    }
 }
 
-.alignright {
+
-  float: right;
+.float-center {
+    display: block;
+    margin: {
+        left: auto;
+        right: auto;
+    }
+    img & {
+        margin-bottom: $base-spacing-unit;
+    }
 }
 
-img.alignright {
+.clearfix {
-  margin-left : $base-spacing-unit;
+    @extend clearfix;
 }
 
-.aligncenter {
+
-  display: block;
+
-  margin: {
+/**
-    left: auto;
+ * Text aligments
-    right: auto;
+ */
-  }
+
+.align-left { 
+    text-align: left; 
 }
 
-img.aligncenter {
+.align-right { 
-  margin-bottom: $base-spacing-unit;
+    text-align: right; 
+}
+
+.align-center { 
+    text-align: right; 
+}
+
+
+/**
+ * Elements visibility
+ */
+
+.visible-mobile {
+    display: none !important;
+    @include resp-max($breakpoint-sm) {
+        display: block !important;
+    }
+}
+
+.visible-tablet {
+    display: none !important;
+    @include resp-max($breakpoint-md) {
+        display: block !important;
+    }
+}
+
+.visible-desktop {  
+    @include resp-max($breakpoint-md) {
+        display: none !important;
+    }
 }

styles.css

@@ -374,25 +374,56 @@ table {
   .hidden-xs {
     display: none !important; } }
 
-.alignleft {
+/**
+ * Clearing and floating
+ */
+.float-left {
   float: left; }
+  img .float-left {
+    margin-right: 24px; }
 
-img.alignleft {
+.float-right {
-  margin-right: 24px; }
-
-.alignright {
   float: right; }
+  img .float-right {
+    margin-left: 24px; }
 
-img.alignright {
+.float-center {
-  margin-left: 24px; }
-
-.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto; }
+  img .float-center {
+    margin-bottom: 24px; }
 
-img.aligncenter {
+/**
-  margin-bottom: 24px; }
+ * Text aligments
+ */
+.align-left {
+  text-align: left; }
+
+.align-right {
+  text-align: right; }
+
+.align-center {
+  text-align: right; }
+
+/**
+ * Elements visibility
+ */
+.visible-mobile {
+  display: none !important; }
+  @media screen and (max-width: 767px) {
+    .visible-mobile {
+      display: block !important; } }
+
+.visible-tablet {
+  display: none !important; }
+  @media screen and (max-width: 992px) {
+    .visible-tablet {
+      display: block !important; } }
+
+@media screen and (max-width: 992px) {
+  .visible-desktop {
+    display: none !important; } }
 
 body {
   color: #444;