Add docs folder

docs/bulma-docs.sass

@@ -0,0 +1,273 @@
+@charset "utf-8"
+
+@import "../bulma.sass"
+
+// Override
+
+.button
+  +tablet
+    small
+      color: $text
+      left: 0
+      margin-top: 10px
+      position: absolute
+      top: 100%
+      width: 100%
+
+body.page-grid .column > .notification
+  padding-left: 0
+  padding-right: 0
+  text-align: center
+
++tablet
+  .header-item .button + .button
+    margin-left: 10px
+
+// Additional
+
+$carbon-space: 15px
+
+#carbon
+  max-width: 340px
+  min-height: 100px + ($carbon-space * 2)
+  min-width: 300px
+  padding: $carbon-space
+  +tablet
+    margin-left: auto
+    margin-right: auto
+    width: 340px
+
+#carbonads
+  text-align: left
+  a:hover
+    text-decoration: underline
+  span
+    display: block
+  .carbon-img
+    float: left
+    height: 100px
+    width: 130px
+    img
+      display: block
+  .carbon-text
+    display: block
+    color: $text-strong
+    margin-bottom: 5px
+    margin-left: 130px + $carbon-space
+  .carbon-poweredby
+    font-size: $size-small
+    margin-left: $carbon-space
+
+$github: #333333
+$twitter: #55acee
+
+#github
+  color: $github
+  border-color: $github
+  &:hover
+    background: $github
+    border-color: $github
+    color: $white
+
+#twitter
+  color: $twitter
+  border-color: $twitter
+  &:hover
+    background: $twitter
+    border-color: $twitter
+    color: $white
+
+#b
+  border-radius: 20px
+  box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+  display: inline-block
+  height: 240px
+  margin-bottom: 40px
+  vertical-align: top
+  width: 240px
+  +mobile
+    border-radius: 10px
+    height: 120px
+    width: 120px
+
+#npm
+  background: none
+  margin: -10px 0 20px
+  code
+    border-radius: $radius
+    color: $link
+    display: inline-block
+    font-size: 16px
+    padding: 16px 32px
+
+#grid
+  .notification
+    padding-left: 0
+    padding-right: 0
+
+#message
+  display: none
+
+#tweet
+  background: $white
+  border-radius: $radius-large
+  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+  padding: 20px
+
+#mc_embed_signup
+  .control
+    margin-bottom: 0
+  .notification
+    margin-top: 10px
+
+#social
+  align-items: center
+  display: flex
+  height: 20px
+  margin-bottom: 1em
+  justify-content: center
+  a
+    display: inline-block
+    font-size: 11px
+    height: 20px
+    line-height: 20px
+  iframe:last-child
+    margin-left: 10px
+
+#images
+  tr
+    td:nth-child(2)
+      width: 320px
+
+.color
+  display: inline-block
+  float: left
+  height: 18px
+  margin-right: 5px
+  width: 18px
+
+.example,
+.structure
+  border: 1px solid $warning
+  border-top-right-radius: $radius
+  color: $warning-invert
+  padding: 15px 20px
+  position: relative
+  &:not(:first-child)
+    margin-top: 30px
+  &:not(:last-child)
+    margin-bottom: 20px
+  &:before
+    background: $warning
+    border-radius: $radius $radius 0 0
+    bottom: 100%
+    content: "Example"
+    display: inline-block
+    font-size: 7px
+    font-weight: bold
+    left: -1px
+    letter-spacing: 1px
+    padding: 3px 5px
+    position: absolute
+    text-transform: uppercase
+    vertical-align: top
+  +tablet
+    &.is-fullwidth
+      border-left: none
+      border-right: none
+      padding: 0
+
+.example
+  & + .highlight
+    border: 1px solid $warning
+    border-radius: 0 0 $radius $radius
+    border-top: none
+    margin-top: -20px
+    pre
+      max-height: 600px
+    &:not(:last-child)
+      margin-bottom: 40px
+
+$structure: $danger
+$structure-invert: $danger-invert
+
+.structure
+  border-color: $structure
+  border-radius: $radius
+  padding: 20px
+  &:before
+    background: $structure
+    color: $structure-invert
+    content: "Structure"
+
+.structure-item
+  position: relative
+  &:before
+    +overlay
+    background: rgba($black, 0.7)
+    background: $background
+    border: 1px solid $border
+    content: ""
+    display: block
+    z-index: 1
+  &:after
+    +overlay
+    align-items: center
+    content: attr(title)
+    display: flex
+    font-family: $family-monospace
+    font-size: 11px
+    justify-content: center
+    padding: 3px 5px
+    z-index: 2
+  &.is-structure-container
+    padding: 20px 10px 10px
+    &:after
+      align-items: flex-start
+      justify-content: flex-start
+      padding: 5px 10px
+
+.highlight
+  position: relative
+  .copy,
+  .expand
+    @extend .unselectable
+    background: $white
+    border: solid $border
+    border-width: 0 0 1px 1px
+    color: $text-light
+    outline: none
+    position: absolute
+    right: 0
+    top: 0
+    &:hover
+      border-color: $code
+      color: $code
+  .expand
+    border-right-width: 1px
+    right: 50px
+
++tablet
+  .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
+    margin-left: 20px
+    margin-right: 20px
+    & + .highlight
+      margin-left: 20px
+      margin-right: 20px
+
+.section.is-fullwidth
+  padding: 0 !important
+  .example
+    border-left: none
+    border-radius: 0
+    border-right: none
+    padding: 0
+    & + .highlight
+      border-left: none
+      border-radius: 0
+      border-right: none
+
+#newsletter
+  .input
+    border-color: $white
+    box-shadow: none