Alerts added

sass/components/alerts.scss

@@ -1,3 +1,53 @@
 /* ----------------------------- */
 /* ==Alerts                      */
 /* ----------------------------- */
+/* use .alert-- classes for variants */
+
+.alert {
+  padding: $small-value $small-value;
+  margin-top: 0.75em;
+  margin-bottom: 0;
+  color: $color-base;
+  border-radius: $border-radius;
+  background-color: $color-muted;
+
+  & a {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
+.alert {
+  @each $name, $background-color, $color, $border in $variants-list {
+    &--#{$name} {
+      @extend .alert;
+      background-color: $background-color;
+      color: $color;
+      box-shadow: $border;
+    }
+  }
+}
+
+// badge state variants
+.badge {
+  &--small {
+    font-size: $base-font-size - 0.4rem;
+  }
+
+  &--big {
+    font-size: $base-font-size + 0.4rem;
+  }
+
+  &--block {
+    width: 100% !important;
+    display: block;
+  }
+  &.disabled,
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  &:empty {
+    display: none;
+  }
+}

sass/components/badges.scss

@@ -43,4 +43,7 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+  &:empty {
+    display: none;
+  }
 }

sass/components/forms.scss

@@ -1,7 +1,6 @@
 /* ----------------------------- */
 /* ==Forms                       */
 /* ----------------------------- */
-
 /* thanks to HTML5boilerplate,
 * github.com/nathansmith/formalize and www.sitepen.com
 */