From defb438ac7a681d7b0bf75c1a97ca7ec0b231f38 Mon Sep 17 00:00:00 2001 From: Dave Stockley Date: Sat, 12 Jan 2019 17:24:27 +0000 Subject: [PATCH 1/4] added option to use grid row/column gaps, if name ends with either -y or -x gridRowGap or gridColumnGap is used instead of gridGap --- index.js | 111 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 61 insertions(+), 50 deletions(-) diff --git a/index.js b/index.js index 37f9e1d..d90fc30 100644 --- a/index.js +++ b/index.js @@ -1,54 +1,65 @@ const _ = require('lodash') -module.exports = function ({ - grids = _.range(1, 12), - gaps = {}, - autoMinWidths = {}, - variants = ['responsive'] +module.exports = function({ + grids = _.range(1, 12), + gaps = {}, + autoMinWidths = {}, + variants = ['responsive'] }) { - return function ({ e, addUtilities }) { - addUtilities([ - { '.grid': { display: 'grid' } }, - { '.grid-dense': { gridAutoFlow: 'dense' } }, - ..._.map(gaps, (size, name) => ({ - [`.${e(`grid-gap-${name}`)}`]: { gridGap: size }, - })), - ...grids.map(columns => ({ - [`.grid-columns-${columns}`]: { - gridTemplateColumns: `repeat(${columns}, 1fr)`, - } - })), - ..._.map(autoMinWidths, (size, name) => ({ - [`.${e(`grid-automin-${name}`)}`]: { - gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))` - }, - })), - ..._.range(1, _.max(grids) + 1).map(span => ({ - [`.col-span-${span}`]: { - gridColumnStart: `span ${span}`, - } - })), - ..._.range(1, _.max(grids) + 2).map(line => ({ - [`.col-start-${line}`]: { - gridColumnStart: `${line}`, - }, - [`.col-end-${line}`]: { - gridColumnEnd: `${line}`, - }, - })), - ..._.range(1, _.max(grids) + 1).map(span => ({ - [`.row-span-${span}`]: { - gridRowStart: `span ${span}`, - } - })), - ..._.range(1, _.max(grids) + 2).map(line => ({ - [`.row-start-${line}`]: { - gridRowStart: `${line}`, - }, - [`.row-end-${line}`]: { - gridRowEnd: `${line}`, - }, - })), - ], variants) - } + return function({ e, addUtilities }) { + addUtilities( + [ + { '.grid': { display: 'grid' } }, + { '.grid-dense': { gridAutoFlow: 'dense' } }, + ..._.map(gaps, (size, name) => { + const gridGap = name.endsWith('-y') + ? 'gridRowGap' + : name.endsWith('-x') + ? 'gridColumnGap' + : 'gridGap' + + return { + [`.${e(`grid-gap-${name}`)}`]: { [gridGap]: size } + } + }), + ...grids.map(columns => ({ + [`.grid-columns-${columns}`]: { + gridTemplateColumns: `repeat(${columns}, 1fr)` + } + })), + ..._.map(autoMinWidths, (size, name) => ({ + [`.${e(`grid-automin-${name}`)}`]: { + gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))` + } + })), + ..._.range(1, _.max(grids) + 1).map(span => ({ + [`.col-span-${span}`]: { + gridColumnStart: `span ${span}` + } + })), + ..._.range(1, _.max(grids) + 2).map(line => ({ + [`.col-start-${line}`]: { + gridColumnStart: `${line}` + }, + [`.col-end-${line}`]: { + gridColumnEnd: `${line}` + } + })), + ..._.range(1, _.max(grids) + 1).map(span => ({ + [`.row-span-${span}`]: { + gridRowStart: `span ${span}` + } + })), + ..._.range(1, _.max(grids) + 2).map(line => ({ + [`.row-start-${line}`]: { + gridRowStart: `${line}` + }, + [`.row-end-${line}`]: { + gridRowEnd: `${line}` + } + })) + ], + variants + ) + } } From 486a932c5ba4c1f4f0edd719bbe24163253f890d Mon Sep 17 00:00:00 2001 From: Dave Stockley Date: Sat, 12 Jan 2019 17:26:27 +0000 Subject: [PATCH 2/4] updated docs --- README.md | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index f781a5e..34fd705 100644 --- a/README.md +++ b/README.md @@ -9,25 +9,27 @@ ```js module.exports = { - // ... - - plugins: [ - // ... - require('tailwindcss-grid')({ - grids: [2, 3, 5, 6, 8, 10, 12], - gaps: { - 0: '0', - 4: '1rem', - 8: '2rem' - }, - autoMinWidths: { - '16': '4rem', - '24': '6rem', - '300px': '300px' - }, - variants: ['responsive'], - }), - ], + // ... + + plugins: [ + // ... + require('tailwindcss-grid')({ + grids: [2, 3, 5, 6, 8, 10, 12], + gaps: { + 0: '0', + 4: '1rem', + 8: '2rem', + '4-x': '1rem', + '4-y': '1rem' + }, + autoMinWidths: { + '16': '4rem', + '24': '6rem', + '300px': '300px' + }, + variants: ['responsive'] + }) + ] } ``` @@ -40,7 +42,7 @@ The plugin generates the following sets of classes: - `.grid` for setting `display: grid` on an element - `.grid-columns-{size}` for specifying the number of columns in the grid - `.col-span-{columns}` for specifying how many columns a cell should span -- `.grid-gap-{size}` for specifying the size of the gap between columns/rows +- `.grid-gap-{size}` for specifying the size of the gap between columns/rows, if the name ends with -x or -y grid-[column/row]-gap will be used - `.grid-automin-{size}` for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr) - `.col-start-{line}` and `.col-end-{line}` for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps) - `.row-span-{columns}` for specifying how many rows a cell should span From 8549b3082c287972f6b00d385fbf39bd2c807f2d Mon Sep 17 00:00:00 2001 From: Dave Stockley Date: Sat, 12 Jan 2019 17:26:54 +0000 Subject: [PATCH 3/4] update docs - styling --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 34fd705..0f8b5e8 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ The plugin generates the following sets of classes: - `.grid` for setting `display: grid` on an element - `.grid-columns-{size}` for specifying the number of columns in the grid - `.col-span-{columns}` for specifying how many columns a cell should span -- `.grid-gap-{size}` for specifying the size of the gap between columns/rows, if the name ends with -x or -y grid-[column/row]-gap will be used +- `.grid-gap-{size}` for specifying the size of the gap between columns/rows, if the name ends with -x or -y `grid-[column/row]-gap` will be used - `.grid-automin-{size}` for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr) - `.col-start-{line}` and `.col-end-{line}` for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps) - `.row-span-{columns}` for specifying how many rows a cell should span From 8d3a9ca1ac218892146d55b9ec0c78b5dcf7cd13 Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Mon, 14 Jan 2019 10:36:04 +0000 Subject: [PATCH 4/4] Fix indentation --- index.js | 128 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 69 insertions(+), 59 deletions(-) diff --git a/index.js b/index.js index d90fc30..8ff52b7 100644 --- a/index.js +++ b/index.js @@ -1,65 +1,75 @@ const _ = require('lodash') module.exports = function({ - grids = _.range(1, 12), - gaps = {}, - autoMinWidths = {}, - variants = ['responsive'] + grids = _.range(1, 12), + gaps = {}, + autoMinWidths = {}, + variants = ['responsive'], }) { - return function({ e, addUtilities }) { - addUtilities( - [ - { '.grid': { display: 'grid' } }, - { '.grid-dense': { gridAutoFlow: 'dense' } }, - ..._.map(gaps, (size, name) => { - const gridGap = name.endsWith('-y') - ? 'gridRowGap' - : name.endsWith('-x') - ? 'gridColumnGap' - : 'gridGap' + return function({ e, addUtilities }) { + addUtilities( + [ + { + '.grid': { + display: 'grid', + }, + }, + { + '.grid-dense': { + gridAutoFlow: 'dense', + }, + }, + ..._.map(gaps, (size, name) => { + const gridGap = name.endsWith('-y') + ? 'gridRowGap' + : name.endsWith('-x') + ? 'gridColumnGap' + : 'gridGap' - return { - [`.${e(`grid-gap-${name}`)}`]: { [gridGap]: size } - } - }), - ...grids.map(columns => ({ - [`.grid-columns-${columns}`]: { - gridTemplateColumns: `repeat(${columns}, 1fr)` - } - })), - ..._.map(autoMinWidths, (size, name) => ({ - [`.${e(`grid-automin-${name}`)}`]: { - gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))` - } - })), - ..._.range(1, _.max(grids) + 1).map(span => ({ - [`.col-span-${span}`]: { - gridColumnStart: `span ${span}` - } - })), - ..._.range(1, _.max(grids) + 2).map(line => ({ - [`.col-start-${line}`]: { - gridColumnStart: `${line}` - }, - [`.col-end-${line}`]: { - gridColumnEnd: `${line}` - } - })), - ..._.range(1, _.max(grids) + 1).map(span => ({ - [`.row-span-${span}`]: { - gridRowStart: `span ${span}` - } - })), - ..._.range(1, _.max(grids) + 2).map(line => ({ - [`.row-start-${line}`]: { - gridRowStart: `${line}` - }, - [`.row-end-${line}`]: { - gridRowEnd: `${line}` - } - })) - ], - variants - ) - } + return { + [`.${e(`grid-gap-${name}`)}`]: { + [gridGap]: size, + }, + } + }), + ...grids.map(columns => ({ + [`.grid-columns-${columns}`]: { + gridTemplateColumns: `repeat(${columns}, 1fr)`, + }, + })), + ..._.map(autoMinWidths, (size, name) => ({ + [`.${e(`grid-automin-${name}`)}`]: { + gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`, + }, + })), + ..._.range(1, _.max(grids) + 1).map(span => ({ + [`.col-span-${span}`]: { + gridColumnStart: `span ${span}`, + }, + })), + ..._.range(1, _.max(grids) + 2).map(line => ({ + [`.col-start-${line}`]: { + gridColumnStart: `${line}`, + }, + [`.col-end-${line}`]: { + gridColumnEnd: `${line}`, + }, + })), + ..._.range(1, _.max(grids) + 1).map(span => ({ + [`.row-span-${span}`]: { + gridRowStart: `span ${span}`, + }, + })), + ..._.range(1, _.max(grids) + 2).map(line => ({ + [`.row-start-${line}`]: { + gridRowStart: `${line}`, + }, + [`.row-end-${line}`]: { + gridRowEnd: `${line}`, + }, + })), + ], + variants, + ) + } }