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

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

bulma/elements/titles.sass

@@ -3,6 +3,10 @@
   font-weight: 300
   &:not(:last-child)
     margin-bottom: 20px
+  a
+    &:hover
+      border-bottom: 1px solid
+      // text-decoration: underline
 
 .title
   color: $text-strong

bulma/layout/hero.sass

@@ -42,6 +42,9 @@
       border: none
     ul
       border-bottom: none
+    &.is-boxed
+      a
+        padding: 8px 15px
   &.is-alt
     background: $background
     color: $text-light

bulma/layout/layout.sass

@@ -1,6 +1,6 @@
 @charset "utf-8"
 
-@import header
-@import hero
-@import section
-@import footer
+@import "header"
+@import "hero"
+@import "section"
+@import "footer"

bulma/layout/section.sass

@@ -1,10 +1,9 @@
 .section
   background: white
-  padding: 40px 20px
+  padding: 40px 0
   & + .section
     border-top: 1px solid rgba($border, 0.5)
   +desktop
-    padding: 40px 0
     &.is-medium
       padding: 120px 0
     &.is-large

bulma/utilities/mixins.sass

@@ -64,6 +64,7 @@
 
 $tablet: 769px
 $desktop: 980px
+$widescreen: 1180px
 
 =from($device)
   @media screen and (min-width: $device)
@@ -88,3 +89,7 @@ $desktop: 980px
 =desktop
   @media screen and (min-width: $desktop)
     @content
+
+=widescreen
+  @media screen and (min-width: $widescreen)
+    @content

bulma/utilities/utilities.sass

@@ -1,6 +1,6 @@
 @charset "utf-8"
 
-@import reset
-@import functions
-@import mixins
-@import animations
+@import "reset"
+@import "functions"
+@import "mixins"
+@import "animations"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "homepage": "http://bulma.io",
   "author": "jgthms <bbxdesign@gmail.com>",
   "description": "Modern CSS framework based on Flexbox",
@@ -21,11 +21,14 @@
     "url": "https://github.com/jgthms/bulma/issues"
   },
   "devDependencies": {
+    "autoprefixer": "^6.3.3",
     "captain-git-hook": "~1.0.5",
-    "node-sass": "~3.4.2"
+    "node-sass": "^3.4.2"
   },
   "scripts": {
-    "build": "npm run clean && npm run build-sass && npm run build-sass-min",
+    "autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css",
+    "autoprefix-min": "postcss --use autoprefixer --output css/bulma.min.css css/bulma.min.css",
+    "build": "npm run clean && npm run build-sass && npm run build-sass-min && npm run autoprefix && npm run autoprefix-min",
     "build-sass": "node-sass --output-style expanded --source-map true --output css/ bulma.sass --outFile css/bulma.css",
     "build-sass-min": "node-sass --output-style compressed --source-map true --output css/ bulma.sass css/bulma.min.css",
     "clean": "rm -rf css",