Updated helpers.scss

assets/sass/utils/_helpers.scss

@@ -1,27 +1,77 @@
-.alignleft {
+/**
+ * Clearing and floating
+ */
+
+.float-left {
     float: left;
-}
-
-img.alignleft {
+    img & {
         margin-right: $base-spacing-unit;
+    }
 }
 
-.alignright {
+
+.float-right {
     float: right;
-}
-
-img.alignright {
+    img & {
         margin-left : $base-spacing-unit;
+    }
 }
 
-.aligncenter {
+
+.float-center {
     display: block;
     margin: {
         left: auto;
         right: auto;
     }
+    img & {
+        margin-bottom: $base-spacing-unit;
+    }
 }
 
-img.aligncenter {
-  margin-bottom: $base-spacing-unit;
+.clearfix {
+    @extend clearfix;
+}
+
+
+
+/**
+ * Text aligments
+ */
+
+.align-left { 
+    text-align: left; 
+}
+
+.align-right { 
+    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,26 +374,57 @@ table {
   .hidden-xs {
     display: none !important; } }
 
-.alignleft {
+/**
+ * Clearing and floating
+ */
+.float-left {
   float: left; }
-
-img.alignleft {
+  img .float-left {
     margin-right: 24px; }
 
-.alignright {
+.float-right {
   float: right; }
-
-img.alignright {
+  img .float-right {
     margin-left: 24px; }
 
-.aligncenter {
+.float-center {
   display: block;
   margin-left: auto;
   margin-right: auto; }
-
-img.aligncenter {
+  img .float-center {
     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;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;