Merge branch 'master' of github.com:jgthms/bulma

Author: mna

README.md

@@ -8,7 +8,9 @@ Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org
 
 Bulma is in early but active development! Try it out now:
 
-```npm install bulma```
+```
+npm install bulma
+```
 
 Feel free to raise an issue or submit a pull request. In the meantime, check the [documentation](http://bulma.io/documentation/overview/).
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "homepage": "http://bulma.io",
   "authors": [
     "jgthms <bbxdesign@gmail.com>"

bulma/base/base.sass

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

bulma/base/generic.sass

@@ -91,9 +91,14 @@ table
     color: $text-strong
 
 .container
-  margin: 0 auto
-  max-width: 960px
+  margin: 0 20px
   position: relative
+  +desktop
+    margin: 0 auto
+    max-width: 960px
+    &.is-fluid
+      margin: 0 20px
+      max-width: none
 
 .fa
   font-size: 21px

bulma/components/components.sass

@@ -1,12 +1,12 @@
 @charset "utf-8"
 
-@import grid
-@import navbar
-@import card
-@import table
-@import tabs
-@import media
-@import menu
+@import "grid"
+@import "navbar"
+@import "card"
+@import "table"
+@import "tabs"
+@import "media"
+@import "menu"
 
 .block:not(:last-child)
   margin-bottom: 20px

bulma/components/grid.sass

@@ -10,10 +10,18 @@
   .columns.is-mobile > &.is-quarter
     flex: none
     width: 25%
+  .columns.is-mobile > &.is-offset-half
+    margin-left: 50%
+  .columns.is-mobile > &.is-offset-third
+    margin-left: 33.3333%
+  .columns.is-mobile > &.is-offset-quarter
+    margin-left: 25%
   @for $i from 1 through 11
-    .columns.is-mobile > &.is-#{$i}-mobile
+    .columns.is-mobile > &.is-#{$i}
       flex: none
       width: ($i / 12) * 100%
+    .columns.is-mobile > &.is-offset-#{$i}
+      margin-left: ($i / 12) * 100%
   +mobile
     &.is-half-mobile
       flex: none
@@ -24,10 +32,18 @@
     &.is-quarter-mobile
       flex: none
       width: 25%
+    &.is-offset-half-mobile
+      margin-left: 50%
+    &.is-offset-third-mobile
+      margin-left: 33.3333%
+    &.is-offset-quarter-mobile
+      margin-left: 25%
     @for $i from 1 through 11
       &.is-#{$i}-mobile
         flex: none
         width: ($i / 12) * 100%
+      &.is-offset-#{$i}-mobile
+        margin-left: ($i / 12) * 100%
   +tablet
     &.is-half,
     &.is-half-tablet
@@ -41,11 +57,23 @@
     &.is-quarter-tablet
       flex: none
       width: 25%
+    &.is-offset-half,
+    &.is-offset-half-tablet
+      margin-left: 50%
+    &.is-offset-third,
+    &.is-offset-third-tablet
+      margin-left: 33.3333%
+    &.is-offset-quarter,
+    &.is-offset-quarter-tablet
+      margin-left: 25%
     @for $i from 1 through 11
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
         width: ($i / 12) * 100%
+      &.is-offset-#{$i},
+      &.is-offset-#{$i}-tablet
+        margin-left: ($i / 12) * 100%
   +desktop
     &.is-half-desktop
       flex: none
@@ -56,10 +84,18 @@
     &.is-quarter-desktop
       flex: none
       width: 25%
+    &.is-offset-half-desktop
+      margin-left: 50%
+    &.is-offset-third-desktop
+      margin-left: 33.3333%
+    &.is-offset-quarter-desktop
+      margin-left: 25%
     @for $i from 1 through 11
       &.is-#{$i}-desktop
         flex: none
         width: ($i / 12) * 100%
+      &.is-offset-#{$i}-desktop
+        margin-left: ($i / 12) * 100%
 
 .columns
   margin-left: -10px
@@ -71,15 +107,11 @@
     margin-bottom: 10px
   &.is-mobile
     display: flex
-  +tablet
-    &:not(.is-desktop)
-      display: flex
-  +desktop
-    &.is-desktop
-      display: flex
   &.is-gapless
+    margin-left: 0
+    margin-right: 0
     &:not(:last-child)
-      margin: 0 0 20px
+      margin-bottom: 20px
     & > .column
       margin: 0
       padding: 0
@@ -97,3 +129,9 @@
         width: 33.3333%
         & + .column
           margin-left: 0
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    &.is-desktop
+      display: flex

bulma/components/table.sass

@@ -9,6 +9,9 @@
     border-width: 0 0 1px
     padding: 8px 10px
     vertical-align: top
+    &.table-narrow
+      white-space: nowrap
+      width: 1%
     &.table-link
       padding: 0
       & > a

bulma/config/variables.sass

@@ -4,7 +4,6 @@ $grey-darker: #222324
 $grey-dark: #69707a
 $grey: #aeb1b5
 $grey-light: #d3d6db
-$grey-lighter: #ebeff5
 $grey-lighter: #f5f7fa
 
 $blue: #42afe3

bulma/elements/elements.sass

@@ -1,10 +1,11 @@
 @charset "utf-8"
 
-@import controls
-@import buttons
-@import titles
-@import messages
-@import notifications
+@import "controls"
+@import "buttons"
+@import "titles"
+@import "images"
+@import "messages"
+@import "notifications"
 
 .delete
   +unselectable

bulma/elements/images.sass

@@ -0,0 +1,32 @@
+$dimensions: 16 24 32 48 64 96 128
+
+.image
+  display: block
+  position: relative
+  img
+    display: block
+  &.is-square,
+  &.is-1by1,
+  &.is-4by3,
+  &.is-3by2,
+  &.is-16by9,
+  &.is-2by1
+    img
+      +overlay
+      height: 100%
+      width: 100%
+  &.is-square,
+  &.is-1by1
+    padding-top: 100%
+  &.is-4by3
+    padding-top: 75%
+  &.is-3by2
+    padding-top: 66.6666%
+  &.is-16by9
+    padding-top: 56.25%
+  &.is-2by1
+    padding-top: 50%
+  @each $dimension in $dimensions
+    &.is-#{$dimension}x#{$dimension}
+      height: $dimension * 1px
+      width: $dimension * 1px