Restructure elements and components

CHANGELOG.md

@@ -5,6 +5,18 @@
 ### BREAKING
 
 * `bulma` folder renamed to `sass` to avoid the redundant `bulma/bulma` path
+* `variables.sass` moved to `/utilities`
+* almost everything is singular now
+* **elements** only have one class
+* **components** have at least one sub-class
+* `.content` moved to elements
+* `.table` moved to elements
+* `.message` moved to components
+* `.table-icon`, `.table-link`, `.table-narrow` are now called `.is-icon`, `.is-link`, `.is-narrow`
+
+### Added
+
+* all variables are now `!default` so you can set your custom variables before importing Bulma
 
 ## 0.0.22
 

sass/base/base.sass

@@ -1,6 +1,5 @@
 @charset "utf-8"
 
 @import "generic"
-@import "content"
-@import "highlight"
 @import "helpers"
+@import "highlight"

sass/components/components.sass

@@ -1,15 +1,15 @@
 @charset "utf-8"
 
-@import "grid"
-@import "navbar"
 @import "card"
-@import "table"
-@import "tabs"
+@import "grid"
 @import "media"
 @import "menu"
+@import "message"
+@import "modal"
+@import "navbar"
 @import "pagination"
 @import "panel"
-@import "modal"
+@import "tabs"
 
 .box
   @extend .block

sass/elements/elements.sass

@@ -1,12 +1,14 @@
 @charset "utf-8"
 
 @import "controls"
-@import "buttons"
-@import "titles"
-@import "images"
-@import "messages"
-@import "notifications"
+
+@import "button"
+@import "content"
+@import "image"
+@import "notification"
 @import "progress"
+@import "table"
+@import "title"
 
 .delete
   +unselectable

sass/components/table.sass → sass/elements/table.sass

@@ -10,18 +10,18 @@
     padding: 8px 10px
     vertical-align: top
     // Modifiers
-    &.table-icon
+    &.is-icon
       padding: 5px
       text-align: center
       white-space: nowrap
       width: 1%
       .fa
         +fa(21px, 24px)
-      &.table-link
+      &.is-link
         padding: 0
         & > a
           padding: 5px
-    &.table-link
+    &.is-link
       padding: 0
       & > a
         display: block
@@ -29,7 +29,7 @@
         &:hover
           background: $link
           color: $link-invert
-    &.table-narrow
+    &.is-narrow
       white-space: nowrap
       width: 1%
   th
@@ -70,13 +70,13 @@
     th
       padding: 5px 10px
       // Modifiers
-      &.table-icon
+      &.is-icon
         padding: 2px
-        &.table-link
+        &.is-link
           padding: 0
           & > a
             padding: 2px
-      &.table-link
+      &.is-link
         padding: 0
         & > a
           padding: 5px 10px