Add CSS Columns Specification [WIP]

defaultConfig.stub.js

@@ -839,6 +839,92 @@ module.exports = {
     'current': 'currentColor',
   },
 
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Column Count
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your column count values
+  |
+  | Class name: .col-{count}
+  |
+  */
+
+  columnCount  : {
+    '0': 'initial',
+    '2': '2',
+    '3': '3',
+    '4': '4',
+  },
+
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Column Widths
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your column width utility sizes. These can be
+  | percentage based, pixels, rems, or any other units. By default
+  | we provide a sensible percentage based fraction scale.  You
+  | can, of course, modify these values as needed.
+  |
+  |
+  | It's also worth mentioning that Tailwind automatically escapes
+  | invalid CSS class name characters, which allows you to have
+  | awesome classes like .column-w-2/3.
+  |
+  | Class name: .col-w-{size}
+  |
+  */
+
+  columnWidth: {
+    'auto': 'auto',
+    '1/2': '50%',
+    '1/3': '33.33333%',
+    '1/4': '25%',
+    '1/5': '20%',
+    '1/6': '16.66667%',
+  },
+
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Column Rule Colors
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your column rule colors. By default these use
+  | the color palette we defined above, however you're welcome to set
+  | these independently if that makes sense for your project.
+  |
+  | Class name: .col-{color}
+  |
+  */
+
+  columnRuleColors: colors,
+
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Column Rule Width
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your column rule widths. Take note that column
+  | rule widths require a special "default" value set as well. This is the
+  | width that will be used when you do not specify a column rule width.
+  |
+  | Class name: .col-rule{-width?}
+  |
+  */
+
+  columnRuleWidths: {
+    default: '1px',
+    '0': '0',
+    '2': '2px',
+    '4': '4px',
+    '8': '8px',
+  },
+
 
   /*
   |-----------------------------------------------------------------------------
@@ -871,6 +957,13 @@ module.exports = {
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
     borderWidths: ['responsive'],
+    columnCount: ['responsive'],
+    columnFill: ['responsive'],
+    columnWidth: ['responsive'],
+    columnRuleColors: ['responsive'],
+    columnRuleStyle: ['responsive'],
+    columnRuleWidths: ['responsive'],
+    columnSpan: ['responsive'],
     cursor: ['responsive'],
     display: ['responsive'],
     flexbox: ['responsive'],

src/generators/columnCount.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ columnCount }) {
+  return _.map(columnCount, (value, modifier) => {
+    return defineClass(`col-${modifier}`, {
+      'column-count': `${value}`,
+    })
+  })
+}

src/generators/columnFill.js

@@ -0,0 +1,15 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'col-auto': {
+      'column-fill': 'auto',
+    },
+    'col-balance': {
+      'column-fill': 'balance',
+    },
+    'col-balance-all': {
+      'column-fill': 'balance-all',
+    },
+  })
+}

src/generators/columnRuleColors.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ columnRuleColors }) {
+  return _.map(columnRuleColors, (color, className) => {
+    return defineClass(`col-${className}`, {
+      'column-rule-color': color,
+    })
+  })
+}

src/generators/columnRuleStyle.js

@@ -0,0 +1,18 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'col-solid': {
+      'column-rule-style': 'solid',
+    },
+    'col-dashed': {
+      'column-rule-style': 'dashed',
+    },
+    'col-dotted': {
+      'column-rule-style': 'dotted',
+    },
+    'col-none': {
+      'column-rule-style': 'none',
+    },
+  })
+}

src/generators/columnRuleWidths.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ columnRuleWidths }) {
+  return _.map(columnRuleWidths, (width, modifier) => {
+    return defineClass(modifier === 'default' ? 'col-rule' : `col-rule-${modifier}`, {
+      'column-rule-width': width,
+    })
+  })
+}

src/generators/columnSpan.js

@@ -0,0 +1,12 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'col-span-all': {
+      'column-span': 'all',
+    },
+    'col-span-none': {
+      'column-span': 'none',
+    },
+  })
+}

src/generators/columnWidth.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ widths }) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`col-w-${modifer}`, {
+      'column-width': `${size}`,
+    })
+  })
+}

src/utilityModules.js

@@ -10,6 +10,13 @@ import borderColors from './generators/borderColors'
 import borderRadius from './generators/borderRadius'
 import borderStyle from './generators/borderStyle'
 import borderWidths from './generators/borderWidths'
+import columnCount from './generators/columnCount'
+import columnFill from './generators/columnFill'
+import columnRuleColors from './generators/columnRuleColors'
+import columnRuleStyle from './generators/columnRuleStyle'
+import columnRuleWidths from './generators/columnRuleWidths'
+import columnSpan from './generators/columnSpan'
+import columnWidth from './generators/columnWidth'
 import cursor from './generators/cursor'
 import display from './generators/display'
 import flexbox from './generators/flexbox'
@@ -60,6 +67,13 @@ export default [
   { name: 'borderRadius', generator: borderRadius },
   { name: 'borderStyle', generator: borderStyle },
   { name: 'borderWidths', generator: borderWidths },
+  { name: 'columnCount', generator: columnCount },
+  { name: 'columnFill', generator: columnFill },
+  { name: 'columnRuleColors', generator: columnRuleColors },
+  { name: 'columnRuleStyle', generator: columnRuleStyle },
+  { name: 'columnRuleWidths', generator: columnRuleWidths },
+  { name: 'columnSpan', generator: columnSpan },
+  { name: 'columnWidth', generator: columnWidth },
   { name: 'cursor', generator: cursor },
   { name: 'display', generator: display },
   { name: 'flexbox', generator: flexbox },