Add narrow columns, Push 0.0.21

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Bulma Changelog
 
+## 0.0.21
+
+### Added
+
+* `.column.is-narrow` to make a column `flex: none`
+
 ## 0.0.20
 
 ### Added

README.md

@@ -19,7 +19,7 @@ npm install bulma
 
 ### CDN
 
-[https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.20/css/bulma.min.css](https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.20/css/bulma.min.css)
+[https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.21/css/bulma.min.css](https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.21/css/bulma.min.css)
 
 Feel free to raise an issue or submit a pull request.
 

bower.json

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

bulma/components/grid.sass

@@ -1,6 +1,8 @@
 .column
   flex: 1
   padding: 10px
+  .columns.is-mobile > &.is-narrow
+    flex: none
   .columns.is-mobile > &.is-full
     flex: none
     width: 100%
@@ -36,6 +38,8 @@
     .columns.is-mobile > &.is-offset-#{$i}
       margin-left: ($i / 12) * 100%
   +mobile
+    &.is-narrow-mobile
+      flex: none
     &.is-full-mobile
       flex: none
       width: 100%
@@ -71,6 +75,9 @@
       &.is-offset-#{$i}-mobile
         margin-left: ($i / 12) * 100%
   +tablet
+    &.is-narrow,
+    &.is-narrow-tablet
+      flex: none
     &.is-full,
     &.is-full-tablet
       flex: none
@@ -119,6 +126,8 @@
       &.is-offset-#{$i}-tablet
         margin-left: ($i / 12) * 100%
   +desktop
+    &.is-narrow-desktop
+      flex: none
     &.is-full-desktop
       flex: none
       width: 100%

css/bulma.css

@@ -2652,6 +2652,13 @@ table th {
   padding: 10px;
 }
 
+.columns.is-mobile > .column.is-narrow {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+      -ms-flex: none;
+          flex: none;
+}
+
 .columns.is-mobile > .column.is-full {
   -webkit-box-flex: 0;
   -webkit-flex: none;
@@ -2865,6 +2872,12 @@ table th {
 }
 
 @media screen and (max-width: 768px) {
+  .column.is-narrow-mobile {
+    -webkit-box-flex: 0;
+    -webkit-flex: none;
+        -ms-flex: none;
+            flex: none;
+  }
   .column.is-full-mobile {
     -webkit-box-flex: 0;
     -webkit-flex: none;
@@ -3045,6 +3058,12 @@ table th {
 }
 
 @media screen and (min-width: 769px) {
+  .column.is-narrow, .column.is-narrow-tablet {
+    -webkit-box-flex: 0;
+    -webkit-flex: none;
+        -ms-flex: none;
+            flex: none;
+  }
   .column.is-full, .column.is-full-tablet {
     -webkit-box-flex: 0;
     -webkit-flex: none;
@@ -3225,6 +3244,12 @@ table th {
 }
 
 @media screen and (min-width: 980px) {
+  .column.is-narrow-desktop {
+    -webkit-box-flex: 0;
+    -webkit-flex: none;
+        -ms-flex: none;
+            flex: none;
+  }
   .column.is-full-desktop {
     -webkit-box-flex: 0;
     -webkit-flex: none;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "homepage": "http://bulma.io",
   "author": "jgthms <bbxdesign@gmail.com>",
   "description": "Modern CSS framework based on Flexbox",