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

bower.json

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

bulma.sass

@@ -1,9 +1,9 @@
 @charset "utf-8"
 
-@import bulma/utilities/utilities
+@import "bulma/utilities/utilities"
-@import bulma/config/variables
+@import "bulma/config/variables"
-@import bulma/config/generated-variables
+@import "bulma/config/generated-variables"
-@import bulma/base/base
+@import "bulma/base/base"
-@import bulma/elements/elements
+@import "bulma/elements/elements"
-@import bulma/components/components
+@import "bulma/components/components"
-@import bulma/layout/layout
+@import "bulma/layout/layout"

bulma/base/content.sass

@@ -1,4 +1,12 @@
 .content
+  &.is-medium
+    font-size: $size-5
+    code
+      font-size: $size-6
+  &.is-large
+    font-size: $size-4
+    code
+      font-size: $size-5
   &:not(:last-child)
     margin-bottom: 20px
   h1,

bulma/base/helpers.sass

@@ -1,3 +1,5 @@
+// Alignment
+
 .is-centered
   text-align: center
 
@@ -7,17 +9,59 @@
 .is-right
   text-align: right
 
+// Display
+
 .is-block
   display: block
 
-.is-disabled
-  pointer-events: none
-
 .is-inline
   display: inline
 
+.is-flex
+  display: flex
+
+// Pull
+
+.is-clearfix
+  +clearfix
+
+.is-pulled-left
+  float: left
+
+.is-pulled-right
+  float: right
+
+// Size
+
+.is-fullwidth
+  width: 100%
+
+// Visibility
+
+.is-hidden-mobile
+  +mobile
+    display: none !important
+
+.is-hidden-tablet
+  +tablet
+    display: none !important
+
+.is-hidden-touch
+  +touch
+    display: none !important
+
+.is-hidden-desktop
+  +desktop
+    display: none !important
+
+// Other
+
+.is-disabled
+  pointer-events: none
+
 .is-marginless
   margin: 0 !important
 
 .is-unselectable
   +unselectable
+

bulma/components/grid.sass

@@ -1,39 +1,90 @@
 .column
+  flex: 1
+  padding: 10px
+  .columns.is-mobile > &.is-half
+    flex: none
+    width: 50%
+  .columns.is-mobile > &.is-third
+    flex: none
+    width: 33.3333%
+  .columns.is-mobile > &.is-quarter
+    flex: none
+    width: 25%
+  @for $i from 1 through 11
+    .columns.is-mobile > &.is-#{$i}-mobile
+      flex: none
+      width: ($i / 12) * 100%
   +mobile
-    & + .column
+    &.is-half-mobile
-      margin-top: $column-gap
-  +tablet
-    flex: 1
-    & + .column
-      margin-left: $column-gap
-    &.is-double
-      flex: 2
-    &.is-triple
-      flex: 3
-    &.is-quadruple
-      flex: 4
-    &.is-half
       flex: none
       width: 50%
-    &.is-third
+    &.is-third-mobile
       flex: none
       width: 33.3333%
-    &.is-quarter
+    &.is-quarter-mobile
       flex: none
       width: 25%
     @for $i from 1 through 11
-      &.is-#{$i}
+      &.is-#{$i}-mobile
+        flex: none
+        width: ($i / 12) * 100%
+  +tablet
+    &.is-half,
+    &.is-half-tablet
+      flex: none
+      width: 50%
+    &.is-third,
+    &.is-third-tablet
+      flex: none
+      width: 33.3333%
+    &.is-quarter,
+    &.is-quarter-tablet
+      flex: none
+      width: 25%
+    @for $i from 1 through 11
+      &.is-#{$i},
+      &.is-#{$i}-tablet
+        flex: none
+        width: ($i / 12) * 100%
+  +desktop
+    &.is-half-desktop
+      flex: none
+      width: 50%
+    &.is-third-desktop
+      flex: none
+      width: 33.3333%
+    &.is-quarter-desktop
+      flex: none
+      width: 25%
+    @for $i from 1 through 11
+      &.is-#{$i}-desktop
         flex: none
         width: ($i / 12) * 100%
 
 .columns
+  margin-left: -10px
+  margin-right: -10px
+  margin-top: -10px
+  &:last-child
+    margin-bottom: -10px
   &:not(:last-child)
-    margin-bottom: $column-gap
+    margin-bottom: 10px
-  +tablet
+  &.is-mobile
     display: flex
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    &.is-desktop
+      display: flex
   &.is-gapless
-    & > .column + .column
+    &:not(:last-child)
+      margin: 0 0 20px
+    & > .column
       margin: 0
+      padding: 0
+  &.is-multiline
+    flex-wrap: wrap
   &.is-vcentered
     align-items: center
   &.is-grid

bulma/config/generated-variables.sass

@@ -31,7 +31,7 @@ $text-strong: $grey-darker
 
 // Code
 
-$code: $info
+$code: $red
 $code-background: $background
 
 $pre: $text

bulma/elements/titles.sass

@@ -34,6 +34,8 @@
 .subtitle
   font-size: $size-medium
   line-height: 1.125
+  & + .title
+    margin-top: -20px
   strong
     color: $text-strong
     font-weight: 400

css/bulma.css

@@ -220,7 +220,7 @@ a:hover {
 
 code {
   background: #f5f7fa;
-  color: #42afe3;
+  color: #ed6c63;
   font-size: 12px;
   font-weight: normal;
   padding: 1px 2px 2px;
@@ -300,6 +300,22 @@ table th {
   vertical-align: top;
 }
 
+.content.is-medium {
+  font-size: 18px;
+}
+
+.content.is-medium code {
+  font-size: 14px;
+}
+
+.content.is-large {
+  font-size: 24px;
+}
+
+.content.is-large code {
+  font-size: 18px;
+}
+
 .content:not(:last-child) {
   margin-bottom: 20px;
 }
@@ -624,14 +640,60 @@ table th {
   display: block;
 }
 
-.is-disabled {
-  pointer-events: none;
-}
-
 .is-inline {
   display: inline;
 }
 
+.is-flex {
+  display: flex;
+}
+
+.is-clearfix:after {
+  clear: both;
+  content: " ";
+  display: table;
+}
+
+.is-pulled-left {
+  float: left;
+}
+
+.is-pulled-right {
+  float: right;
+}
+
+.is-fullwidth {
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .is-hidden-mobile {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .is-hidden-tablet {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 979px) {
+  .is-hidden-touch {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 980px) {
+  .is-hidden-desktop {
+    display: none !important;
+  }
+}
+
+.is-disabled {
+  pointer-events: none;
+}
+
 .is-marginless {
   margin: 0 !important;
 }
@@ -1611,6 +1673,10 @@ table th {
   line-height: 1.125;
 }
 
+.subtitle + .title {
+  margin-top: -20px;
+}
+
 .subtitle strong {
   color: #222324;
   font-weight: 400;
@@ -2166,98 +2232,299 @@ table th {
   color: white;
 }
 
-@media screen and (max-width: 768px) {
+.column {
-  .column + .column {
+  flex: 1;
-    margin-top: 20px;
+  padding: 10px;
-  }
 }
 
-@media screen and (min-width: 769px) {
+.columns.is-mobile > .column.is-half {
-  .column {
+  flex: none;
-    flex: 1;
+  width: 50%;
-  }
+}
-  .column + .column {
+
-    margin-left: 20px;
+.columns.is-mobile > .column.is-third {
-  }
+  flex: none;
-  .column.is-double {
+  width: 33.3333%;
-    flex: 2;
+}
-  }
+
-  .column.is-triple {
+.columns.is-mobile > .column.is-quarter {
-    flex: 3;
+  flex: none;
-  }
+  width: 25%;
-  .column.is-quadruple {
+}
-    flex: 4;
+
-  }
+.columns.is-mobile > .column.is-1-mobile {
-  .column.is-half {
+  flex: none;
+  width: 8.33333%;
+}
+
+.columns.is-mobile > .column.is-2-mobile {
+  flex: none;
+  width: 16.66667%;
+}
+
+.columns.is-mobile > .column.is-3-mobile {
+  flex: none;
+  width: 25%;
+}
+
+.columns.is-mobile > .column.is-4-mobile {
+  flex: none;
+  width: 33.33333%;
+}
+
+.columns.is-mobile > .column.is-5-mobile {
+  flex: none;
+  width: 41.66667%;
+}
+
+.columns.is-mobile > .column.is-6-mobile {
+  flex: none;
+  width: 50%;
+}
+
+.columns.is-mobile > .column.is-7-mobile {
+  flex: none;
+  width: 58.33333%;
+}
+
+.columns.is-mobile > .column.is-8-mobile {
+  flex: none;
+  width: 66.66667%;
+}
+
+.columns.is-mobile > .column.is-9-mobile {
+  flex: none;
+  width: 75%;
+}
+
+.columns.is-mobile > .column.is-10-mobile {
+  flex: none;
+  width: 83.33333%;
+}
+
+.columns.is-mobile > .column.is-11-mobile {
+  flex: none;
+  width: 91.66667%;
+}
+
+@media screen and (max-width: 768px) {
+  .column.is-half-mobile {
     flex: none;
     width: 50%;
   }
-  .column.is-third {
+  .column.is-third-mobile {
     flex: none;
     width: 33.3333%;
   }
-  .column.is-quarter {
+  .column.is-quarter-mobile {
     flex: none;
     width: 25%;
   }
-  .column.is-1 {
+  .column.is-1-mobile {
     flex: none;
     width: 8.33333%;
   }
-  .column.is-2 {
+  .column.is-2-mobile {
     flex: none;
     width: 16.66667%;
   }
-  .column.is-3 {
+  .column.is-3-mobile {
     flex: none;
     width: 25%;
   }
-  .column.is-4 {
+  .column.is-4-mobile {
     flex: none;
     width: 33.33333%;
   }
-  .column.is-5 {
+  .column.is-5-mobile {
     flex: none;
     width: 41.66667%;
   }
-  .column.is-6 {
+  .column.is-6-mobile {
     flex: none;
     width: 50%;
   }
-  .column.is-7 {
+  .column.is-7-mobile {
     flex: none;
     width: 58.33333%;
   }
-  .column.is-8 {
+  .column.is-8-mobile {
     flex: none;
     width: 66.66667%;
   }
-  .column.is-9 {
+  .column.is-9-mobile {
     flex: none;
     width: 75%;
   }
-  .column.is-10 {
+  .column.is-10-mobile {
     flex: none;
     width: 83.33333%;
   }
-  .column.is-11 {
+  .column.is-11-mobile {
     flex: none;
     width: 91.66667%;
   }
 }
 
+@media screen and (min-width: 769px) {
+  .column.is-half, .column.is-half-tablet {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-third, .column.is-third-tablet {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-quarter, .column.is-quarter-tablet {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-1, .column.is-1-tablet {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-2, .column.is-2-tablet {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-3, .column.is-3-tablet {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-4, .column.is-4-tablet {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-5, .column.is-5-tablet {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-6, .column.is-6-tablet {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-7, .column.is-7-tablet {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-8, .column.is-8-tablet {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-9, .column.is-9-tablet {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-10, .column.is-10-tablet {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-11, .column.is-11-tablet {
+    flex: none;
+    width: 91.66667%;
+  }
+}
+
+@media screen and (min-width: 980px) {
+  .column.is-half-desktop {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-third-desktop {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-quarter-desktop {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-1-desktop {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-2-desktop {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-3-desktop {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-4-desktop {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-5-desktop {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-6-desktop {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-7-desktop {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-8-desktop {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-9-desktop {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-10-desktop {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-11-desktop {
+    flex: none;
+    width: 91.66667%;
+  }
+}
+
+.columns {
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-top: -10px;
+}
+
+.columns:last-child {
+  margin-bottom: -10px;
+}
+
 .columns:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
+}
+
+.columns.is-mobile {
+  display: flex;
 }
 
 @media screen and (min-width: 769px) {
-  .columns {
+  .columns:not(.is-desktop) {
     display: flex;
   }
 }
 
-.columns.is-gapless > .column + .column {
+@media screen and (min-width: 980px) {
+  .columns.is-desktop {
+    display: flex;
+  }
+}
+
+.columns.is-gapless:not(:last-child) {
+  margin: 0 0 20px;
+}
+
+.columns.is-gapless > .column {
   margin: 0;
+  padding: 0;
+}
+
+.columns.is-multiline {
+  flex-wrap: wrap;
 }
 
 .columns.is-vcentered {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "homepage": "http://bulma.io",
   "author": "jgthms <bbxdesign@gmail.com>",
   "description": "Modern CSS framework based on Flexbox",
@@ -21,8 +21,8 @@
     "url": "https://github.com/jgthms/bulma/issues"
   },
   "devDependencies": {
-    "node-sass": "~3.4.2",
+    "captain-git-hook": "~1.0.5",
-    "captain-git-hook": "~1.0.5"
+    "node-sass": "~3.4.2"
   },
   "scripts": {
     "build": "npm run clean && npm run build-sass && npm run build-sass-min",