Add placeholders

sass/base/base.sass

@@ -1,5 +1,4 @@
 @charset "utf-8"
 
 @import "generic"
-@import "classes"
 @import "helpers"

sass/base/classes.sass

@@ -1,22 +0,0 @@
-@import "../utilities/mixins.sass"
-
-.block
-  &:not(:last-child)
-    margin-bottom: 20px
-
-.container
-  position: relative
-  +desktop
-    margin: 0 auto
-    max-width: 960px
-    // Modifiers
-    &.is-fluid
-      margin: 0 20px
-      max-width: none
-  +widescreen
-    max-width: 1200px
-
-.fa
-  font-size: 21px
-  text-align: center
-  vertical-align: top

sass/base/helpers.sass

@@ -1,4 +1,4 @@
-@import "../elements/other.sass"
+@import "./placeholders.sass"
 @import "../utilities/mixins.sass"
 
 // Display
@@ -107,4 +107,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   padding: 0 !important
 
 .is-unselectable
-  @extend .unselectable
+  @extend %unselectable

sass/base/placeholders.sass

@@ -0,0 +1,107 @@
+@import "../utilities/animations.sass"
+@import "../utilities/variables.sass"
+
+%block
+  &:not(:last-child)
+    margin-bottom: 20px
+
+%delete
+  @extend %unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background-color: rgba($black, 0.2)
+  border: none
+  border-radius: 290486px
+  cursor: pointer
+  display: inline-block
+  height: 24px
+  position: relative
+  vertical-align: top
+  width: 24px
+  &:before,
+  &:after
+    background-color: $white
+    content: ""
+    display: block
+    height: 2px
+    left: 50%
+    margin-left: -25%
+    margin-top: -1px
+    position: absolute
+    top: 50%
+    width: 50%
+  &:before
+    transform: rotate(45deg)
+  &:after
+    transform: rotate(-45deg)
+  &:hover
+    background-color: rgba($black, 0.5)
+  // Sizes
+  &.is-small
+    height: 16px
+    width: 16px
+  &.is-medium
+    height: 32px
+    width: 32px
+  &.is-large
+    height: 40px
+    width: 40px
+
+%hamburger
+  cursor: pointer
+  display: block
+  height: $nav-height
+  position: relative
+  width: $nav-height
+  span
+    background-color: $text
+    display: block
+    height: 1px
+    left: 50%
+    margin-left: -7px
+    position: absolute
+    top: 50%
+    transition: none $speed $easing
+    transition-property: background, left, opacity, transform
+    width: 15px
+    &:nth-child(1)
+      margin-top: -6px
+    &:nth-child(2)
+      margin-top: -1px
+    &:nth-child(3)
+      margin-top: 4px
+  &:hover
+    background-color: $background
+  // Modifers
+  &.is-active
+    span
+      background-color: $link
+      &:nth-child(1)
+        margin-left: -5px
+        transform: rotate(45deg)
+        transform-origin: left top
+      &:nth-child(2)
+        opacity: 0
+      &:nth-child(3)
+        margin-left: -5px
+        transform: rotate(-45deg)
+        transform-origin: left bottom
+
+%loader
+  animation: spin-around 500ms infinite linear
+  border: 2px solid $border
+  border-radius: 290486px
+  border-right-color: transparent
+  border-top-color: transparent
+  content: ""
+  display: block
+  height: 16px
+  position: relative
+  width: 16px
+
+%unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none