Permalink
Browse files

Added support for css3 columns and updated readme

  • Loading branch information...
1 parent fd17cdf commit 540f05e511b32e0ea981792f015cd4c1424abaa4 Phil LaPier committed Nov 4, 2011
Showing with 86 additions and 0 deletions.
  1. +67 −0 app/assets/stylesheets/css3/_columns.scss
  2. +19 −0 readme.md
@@ -0,0 +1,67 @@
+@mixin columns($arg: auto) {
+// <column-count> || <column-width>
+ -webkit-columns: $arg;
+ -moz-columns: $arg;
+ columns: $arg;
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+ -webkit-column-count: $int;
+ -moz-column-count: $int;
+ column-count: $int;
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+ -webkit-column-gap: $length;
+ -moz-column-gap: $length;
+ column-gap: $length;
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+ -webkit-columns-fill: $arg;
+ -moz-columns-fill: $arg;
+ columns-fill: $arg;
+}
+
+@mixin column-rule($arg) {
+// <border-width> || <border-style> || <color>
+ -webkit-column-rule: $arg;
+ -moz-column-rule: $arg;
+ column-rule: $arg;
+}
+
+@mixin column-rule-color($color) {
+ -webkit-column-rule-color: $color;
+ -moz-column-rule-color: $color;
+ column-rule-color: $color;
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+ -webkit-column-rule-style: $style;
+ -moz-column-rule-style: $style;
+ column-rule-style: $style;
+}
+
+@mixin column-rule-width ($width: none) {
+ -webkit-column-rule-width: $width;
+ -moz-column-rule-width: $width;
+ column-rule-width: $width;
+}
+
+@mixin column-span($arg: none) {
+// none || all
+ -webkit-column-span: $arg;
+ -moz-column-span: $arg;
+ column-span: $arg;
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+ -webkit-column-width: $length;
+ -moz-column-width: $length;
+ column-width: $length;
+}
View
@@ -161,6 +161,13 @@ Box-sizing will change the box-model of the element it is applied to.
@include box-sizing(border-box);
+### Columns
+
+All current CSS3 column properties are supported. See the list at the bottom of the page for more info.
+
+ @include columns(12 8em);
+ @include column-rule(1px solid green);
+
### Flex Box
@@ -407,6 +414,18 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
@ box-shadow(*args)
@ box-sizing(*args)
+ columns
+ @columns(*args)
+ @column-count(*args)
+ @column-fill(*args)
+ @column-gap(*args)
+ @column-rule(*args)
+ @column-rule-color(*args)
+ @column-rule-style(*args)
+ @column-rule-width(*args)
+ @column-span(*args)
+ @column-width(*args)
+
flex-box
@ box(*args)
@ box-align(*args)

0 comments on commit 540f05e

Please sign in to comment.