Skip to content

Add CSS Columns Specification [WIP] #541

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,116 changes: 1,968 additions & 148 deletions __tests__/fixtures/tailwind-output.css

Large diffs are not rendered by default.

93 changes: 93 additions & 0 deletions defaultConfig.stub.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},


/*
|-----------------------------------------------------------------------------
Expand Down Expand Up @@ -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'],
Expand Down
10 changes: 10 additions & 0 deletions src/generators/columnCount.js
Original file line number Diff line number Diff line change
@@ -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}`,
})
})
}
15 changes: 15 additions & 0 deletions src/generators/columnFill.js
Original file line number Diff line number Diff line change
@@ -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',
},
})
}
10 changes: 10 additions & 0 deletions src/generators/columnRuleColors.js
Original file line number Diff line number Diff line change
@@ -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,
})
})
}
18 changes: 18 additions & 0 deletions src/generators/columnRuleStyle.js
Original file line number Diff line number Diff line change
@@ -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',
},
})
}
10 changes: 10 additions & 0 deletions src/generators/columnRuleWidths.js
Original file line number Diff line number Diff line change
@@ -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,
})
})
}
12 changes: 12 additions & 0 deletions src/generators/columnSpan.js
Original file line number Diff line number Diff line change
@@ -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',
},
})
}
10 changes: 10 additions & 0 deletions src/generators/columnWidth.js
Original file line number Diff line number Diff line change
@@ -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}`,
})
})
}
14 changes: 14 additions & 0 deletions src/utilityModules.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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 },
Expand Down