diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 49f236b..f6dd00c 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -8,10 +8,6 @@
 
 $crispy__button__padding: toEm(10px 25px) !default;
 
-$crispy__button__up__margin: toEm(20px) !default;
-$crispy__button__up__padding: toEm(8px 13px) !default;
-$crispy__button__up__z-index: zIndex('modal') !default;
-
 @mixin crispy__button() {
     .button {
         position: relative;
@@ -26,22 +22,6 @@ $crispy__button__up__z-index: zIndex('modal') !default;
             width: 100%;
         }
 
-        // button for scroll up and down
-        &--up, &--down {
-            position:fixed;
-            z-index: $crispy__button__up__z-index;
-            margin: $crispy__button__up__margin;
-            padding: $crispy__button__up__padding;
-        }
-
-        &--down {
-            top: 0;
-        }
-
-        &--up {
-            bottom: 0;
-        }
-
         &:hover {
             cursor: pointer;
             text-decoration: none;
diff --git a/src/scss/helpers/_float.scss b/src/scss/helpers/_float.scss
index 0524402..73ef2cc 100644
--- a/src/scss/helpers/_float.scss
+++ b/src/scss/helpers/_float.scss
@@ -10,24 +10,24 @@
  */
 
 @mixin crispy__float() {
-    .float-left {
+    .is-float-left {
         float: left;
     }
 
-    .float-right {
+    .is-float-right {
         float: right;
     }
 
-    .float-none {
+    .has-float-none {
         float: none;
     }
 
-    .center {
+    .is-centered {
         margin-left: auto;
         margin-right: auto;
     }
 
-    .clearfix {
+    .is-clearfixed {
         @include crispy__clearfix();
     }
 }
diff --git a/src/scss/helpers/_modifizer.scss b/src/scss/helpers/_modifizer.scss
new file mode 100644
index 0000000..fc8905a
--- /dev/null
+++ b/src/scss/helpers/_modifizer.scss
@@ -0,0 +1,34 @@
+/**
+ * helper: visibility
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy__modifiers() {
+
+    .is-absolute {
+        position: absolute !important;
+    }
+
+    .is-fixed {
+        position: fixed !important;
+    }
+
+    .is-relative {
+        position: relative !important;
+    }
+
+    .is-hidden {
+        display: none !important;
+    }
+
+    .is-visible {
+        display: block !important;
+
+        &--inline {
+            display: inline;
+        }
+    }
+}
diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss
index aa13573..8d1f4ff 100644
--- a/src/scss/helpers/_spacing.scss
+++ b/src/scss/helpers/_spacing.scss
@@ -8,36 +8,36 @@
 
 @mixin crispy__spacing() {
     @for $i from 0 through $crispy__spacing__steps {
-        .margin-top-#{($i + 1)}x {
-            margin-top: ($crispy__spacing * $i);
+        .has-margin-top-#{($i + 1)}x {
+            margin-top: ($crispy__spacing * $i) !important;
         }
 
-        .margin-left-#{($i + 1)}x {
-            margin-left: ($crispy__spacing * $i);
+        .has-margin-left-#{($i + 1)}x {
+            margin-left: ($crispy__spacing * $i) !important;
         }
 
-        .margin-bottom-#{($i + 1)}x {
-            margin-bottom: ($crispy__spacing * $i);
+        .has-margin-bottom-#{($i + 1)}x {
+            margin-bottom: ($crispy__spacing * $i) !important;
         }
 
-        .margin-right-#{($i + 1)}x {
-            margin-right: ($crispy__spacing * ($i));
+        .has-margin-right-#{($i + 1)}x {
+            margin-right: ($crispy__spacing * ($i)) !important;
         }
 
-        .padding-top-#{($i + 1)}x {
-            padding-top: ($crispy__spacing * $i);
+        .has-padding-top-#{($i + 1)}x {
+            padding-top: ($crispy__spacing * $i) !important;
         }
 
-        .padding-left-#{($i + 1)}x {
-            padding-left: ($crispy__spacing * $i);
+        .has-padding-left-#{($i + 1)}x {
+            padding-left: ($crispy__spacing * $i) !important;
         }
 
-        .padding-bottom-#{($i + 1)}x {
-            padding-bottom: ($crispy__spacing * $i);
+        .has-padding-bottom-#{($i + 1)}x {
+            padding-bottom: ($crispy__spacing * $i) !important;
         }
 
-        .padding-right-#{($i + 1)}x {
-            padding-right: ($crispy__spacing * $i);
+        .has-padding-right-#{($i + 1)}x {
+            padding-right: ($crispy__spacing * $i) !important;
         }
     }
 }
diff --git a/src/scss/helpers/_text.scss b/src/scss/helpers/_text.scss
deleted file mode 100644
index f3c25d5..0000000
--- a/src/scss/helpers/_text.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * helper: text
- *
- * align, font-sizes, color, background-color
- *
- *
- * @author Björn Hase
- *
- */
-
-$crispy__text-colors: $crispy__colors !default;
-$crispy__text-font-sizes: $crispy__font-sizes !default;
-
-@mixin crispy__text() {
-    .text-left {
-        text-align: left;
-    }
-
-    .text-right {
-        text-align: right;
-    }
-
-    .text-center {
-        text-align: center;
-    }
-
-    .text-justify {
-        text-align: justify;
-    }
-
-    .text-italic {
-        font-style: italic;
-    }
-
-    .text-normal {
-        font-style: normal;
-    }
-
-    .text-bold {
-        font-weight: bold;
-    }
-
-    .text-uppercase {
-        text-transform: uppercase;
-    }
-
-    .text-lowercase {
-        text-transform: lowercase;
-    }
-
-    .text-small {
-        font-size: 80%;
-    }
-
-    .text-crossed {
-    	text-decoration: line-through;
-    }
-
-    @each $name, $font-size in $crispy__font-sizes {
-        .text-#{$name} {
-            @include crispy__font-size($font-size);
-        }
-    }
-
-    @each $name, $color in $crispy__text-colors {
-		.text-#{$name} {
-			color: $color;
-		}
-	}
-
-    @each $name, $color in $crispy__text-colors {
-        .background-#{$name} {
-            background-color: $color;
-        }
-    }
-}
diff --git a/src/scss/helpers/_typography.scss b/src/scss/helpers/_typography.scss
new file mode 100644
index 0000000..fcb6d8a
--- /dev/null
+++ b/src/scss/helpers/_typography.scss
@@ -0,0 +1,89 @@
+/**
+ * helper: typography
+ *
+ * align, font-sizes, color, background-color
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__typography-colors: $crispy__colors !default;
+$crispy__typography-font-sizes: $crispy__font-sizes !default;
+
+@mixin crispy__typography() {
+    .has-text-left {
+        text-align: left !important;
+    }
+
+    .has-text-right {
+        text-align: right !important;
+    }
+
+    .has-text-center {
+        text-align: center !important;
+    }
+
+    .has-text-justify {
+        text-align: justify !important;
+    }
+
+    .has-text-italic {
+        font-style: italic !important;
+    }
+
+    .has-text-uppercase {
+        text-transform: uppercase !important;
+    }
+
+    .has-text-lowercase {
+        text-transform: lowercase !important;
+    }
+
+    .has-text-crossed {
+    	text-decoration: line-through !important;
+    }
+
+    .is-capitalized {
+        text-transform: capitalize !important;
+    }
+
+    // text weight
+    .is-text-weight-light {
+        font-weight: light !important;
+    }
+
+    .is-text-weight-normal {
+        font-weight: normal !important;
+    }
+
+    .is-text-weight-bold {
+        font-weight: bold !important;
+    }
+
+    .has-text-weight-medium {
+
+    }
+
+    .has-text-weight-semibold {
+
+    }
+
+    @each $name, $font-size in $crispy__typography-font-sizes {
+        .has-font-size-#{$name} {
+            font-size: $font-size !important;
+        }
+    }
+
+    @each $name, $color in $crispy__typography-colors {
+		.has-text-#{$name} {
+			color: $color !important;
+		}
+	}
+
+    @each $name, $color in $crispy__typography-colors {
+        .has-background-#{$name} {
+            background-color: $color !important;
+        }
+    }
+}
diff --git a/src/scss/helpers/_visibility.scss b/src/scss/helpers/_visibility.scss
deleted file mode 100644
index 97f8183..0000000
--- a/src/scss/helpers/_visibility.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * helper: visibility
- *
- *
- * @author Björn Hase
- *
- */
-
-@mixin crispy__visibility() {
-    .hide {
-        display: none;
-    }
-
-    .show {
-        display: block;
-
-        &--inline {
-            display: inline;
-        }
-    }
-}
diff --git a/src/scss/helpers/_width.scss b/src/scss/helpers/_width.scss
index 467647d..89a265c 100644
--- a/src/scss/helpers/_width.scss
+++ b/src/scss/helpers/_width.scss
@@ -7,19 +7,19 @@
  */
 
 @mixin crispy__width() {
-    .width-25 {
+    .has-width-25 {
         width: 25%;
     }
 
-    .width-50 {
+    .has-width-50 {
         width: 50%;
     }
 
-    .width-75 {
+    .has-width-75 {
         width: 75%;
     }
 
-    .width-100 {
+    .has-width-100 {
         width: 100%;
     }
 }