From 3ddfe1fdef7f0b0d0b4399d4856fc37acbd26608 Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Sat, 17 Nov 2018 08:57:18 +0000 Subject: [PATCH 01/16] Update README.md --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 450710e..097c601 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,6 @@ # CSS Grid Tailwind Plugin -Isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) - -[View demo](https://tailwindcss.github.io/plugin-examples/#css-grid) · [View source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js) - -In `plugins/css-grid/index.js` you'll find an example of a plugin that adds new utilities for using [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). - -![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png) - -It exposes four configuration options: +## Configuration options: - `grids`, for specifying all of the grid sizes you'd like to generate - `gaps`, for specifying the gap sizes you'd like to generate @@ -53,4 +45,12 @@ The plugin generates the following sets of classes: - `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps) - `.grid-dense` applies `grid-auto-flow: dense` -It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid. \ No newline at end of file +It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid. + +--- + +This was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm + +[View demo](https://tailwindcss.github.io/plugin-examples/#css-grid) · [View source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js) + +![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png) From d8c880f2e2090c1fe9694f883fa0cf2c861a7fdd Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Sat, 17 Nov 2018 08:58:41 +0000 Subject: [PATCH 02/16] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 097c601..42e71bf 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,10 @@ ## Configuration options: -- `grids`, for specifying all of the grid sizes you'd like to generate -- `gaps`, for specifying the gap sizes you'd like to generate +- `grids` for specifying all of the grid sizes you'd like to generate +- `gaps` for specifying the gap sizes you'd like to generate - `autoMinWidths` for specifying min width to columns using auto-fit and minmax -- `variants`, for specifying which variants to generate +- `variants` for specifying which variants to generate ```js module.exports = { @@ -49,8 +49,8 @@ It's not really practical to expose all of the power of CSS Grid through utiliti --- -This was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm +This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. Credit and thanks to @adamwathan -[View demo](https://tailwindcss.github.io/plugin-examples/#css-grid) · [View source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js) +[View original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) ![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png) From 1105771496ce883be9aa01200e5e8db82955899e Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Sat, 17 Nov 2018 08:59:38 +0000 Subject: [PATCH 03/16] Update README.md --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 42e71bf..6844e5b 100644 --- a/README.md +++ b/README.md @@ -35,13 +35,13 @@ With zero configuration, it will generate grids from 1 to 12 columns in size, no 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 wide a cell should be -- `.grid-gap-{size}`, for specifying the size of the gap between columns/rows -- `.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 points explicitly (useful for reordering cells or leaving gaps) -- `.row-span-{columns}`, for specifying how tall a cell should be +- `.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 wide a cell should be +- `.grid-gap-{size}` for specifying the size of the gap between columns/rows +- `.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 points explicitly (useful for reordering cells or leaving gaps) +- `.row-span-{columns}` for specifying how tall a cell should be - `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps) - `.grid-dense` applies `grid-auto-flow: dense` @@ -49,7 +49,7 @@ It's not really practical to expose all of the power of CSS Grid through utiliti --- -This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. Credit and thanks to @adamwathan +This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. Credit and thanks to [https://github.com/adamwathan](@adamwathan) [View original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) From 018a4062de4be9ab45f3b226640bd723ac4459fb Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Sat, 17 Nov 2018 09:00:20 +0000 Subject: [PATCH 04/16] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 6844e5b..53c1b59 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,8 @@ module.exports = { With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility. +## Classes + The plugin generates the following sets of classes: - `.grid` for setting `display: grid` on an element @@ -49,6 +51,8 @@ It's not really practical to expose all of the power of CSS Grid through utiliti --- +### Credit + This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. Credit and thanks to [https://github.com/adamwathan](@adamwathan) [View original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) From d3880def6c4af61a570c0c818caf6ec5bb7ab93c Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Sat, 17 Nov 2018 09:00:54 +0000 Subject: [PATCH 05/16] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 53c1b59..446a353 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CSS Grid Tailwind Plugin -## Configuration options: +## Configuration options - `grids` for specifying all of the grid sizes you'd like to generate - `gaps` for specifying the gap sizes you'd like to generate @@ -33,7 +33,7 @@ module.exports = { With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility. -## Classes +## Generated classes The plugin generates the following sets of classes: From 426cc41946f7e10036d94e7f134f0d508cd55500 Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Sat, 17 Nov 2018 09:04:27 +0000 Subject: [PATCH 06/16] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 446a353..79241bf 100644 --- a/README.md +++ b/README.md @@ -39,12 +39,12 @@ 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 wide a cell should be +- `.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-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 points explicitly (useful for reordering cells or leaving gaps) -- `.row-span-{columns}` for specifying how tall a cell should be -- `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps) +- `.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 +- `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps) - `.grid-dense` applies `grid-auto-flow: dense` It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid. From a81ba565c37aa4a62bab05785b0f8119b921f59c Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Sat, 17 Nov 2018 09:04:51 +0000 Subject: [PATCH 07/16] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 79241bf..f781a5e 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ module.exports = { gaps: { 0: '0', 4: '1rem', - 8: '2rem', + 8: '2rem' }, autoMinWidths: { '16': '4rem', From defb438ac7a681d7b0bf75c1a97ca7ec0b231f38 Mon Sep 17 00:00:00 2001 From: Dave Stockley Date: Sat, 12 Jan 2019 17:24:27 +0000 Subject: [PATCH 08/16] 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 09/16] 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 10/16] 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 11/16] 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, + ) + } } From 99e1651742cdce70cb686a3cf63707a281704208 Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Mon, 14 Jan 2019 10:38:29 +0000 Subject: [PATCH 12/16] Reindent --- README.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 0f8b5e8..b5157e3 100644 --- a/README.md +++ b/README.md @@ -9,27 +9,27 @@ ```js module.exports = { - // ... - - 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'] - }) - ] + // ... + + 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'], + }), + ], } ``` From 6ebbfe6f00701a89de8664fd372d41123e2a09bc Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Mon, 14 Jan 2019 10:40:18 +0000 Subject: [PATCH 13/16] rev v --- index.js | 22 ++++++++++++---------- package.json | 4 ++-- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/index.js b/index.js index 8ff52b7..8aa6cd6 100644 --- a/index.js +++ b/index.js @@ -1,15 +1,17 @@ const _ = require('lodash') -module.exports = function({ +module.exports = function ({ grids = _.range(1, 12), gaps = {}, autoMinWidths = {}, variants = ['responsive'], }) { - return function({ e, addUtilities }) { + return function ({ + e, + addUtilities + }) { addUtilities( - [ - { + [{ '.grid': { display: 'grid', }, @@ -20,11 +22,11 @@ module.exports = function({ }, }, ..._.map(gaps, (size, name) => { - const gridGap = name.endsWith('-y') - ? 'gridRowGap' - : name.endsWith('-x') - ? 'gridColumnGap' - : 'gridGap' + const gridGap = name.endsWith('-y') ? + 'gridRowGap' : + name.endsWith('-x') ? + 'gridColumnGap' : + 'gridGap' return { [`.${e(`grid-gap-${name}`)}`]: { @@ -72,4 +74,4 @@ module.exports = function({ variants, ) } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 3b95d26..ff922b0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss-grid", - "version": "1.1.0", + "version": "1.2.0", "description": "CSS grid plugin for tailwindcss framework", "main": "index.js", "scripts": { @@ -25,4 +25,4 @@ "devDependencies": { "lodash": "^4.17.5" } -} +} \ No newline at end of file From 402f2edd0bdfe978accba28bc61d027279ba906c Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Tue, 12 Feb 2019 10:13:52 +0000 Subject: [PATCH 14/16] Fix credit link, remove image for now --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b5157e3..ed5d573 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,6 @@ It's not really practical to expose all of the power of CSS Grid through utiliti ### Credit -This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. Credit and thanks to [https://github.com/adamwathan](@adamwathan) +This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. -[View original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) - -![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png) +Credit and thanks to [@adamwathan](/adamwathan) - [view original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) \ No newline at end of file From 14cf8a0fca81951948af0db513218d88c7c5fbc4 Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Tue, 12 Feb 2019 10:14:36 +0000 Subject: [PATCH 15/16] Fix lodash range default. Closes #5 --- index.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 8aa6cd6..7d4e953 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ const _ = require('lodash') module.exports = function ({ - grids = _.range(1, 12), + grids = _.range(1, 13), gaps = {}, autoMinWidths = {}, variants = ['responsive'], diff --git a/package.json b/package.json index ff922b0..768d0d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss-grid", - "version": "1.2.0", + "version": "1.2.1", "description": "CSS grid plugin for tailwindcss framework", "main": "index.js", "scripts": { From 2a4108973f74918c9077b1f7a3b587e2f846fae1 Mon Sep 17 00:00:00 2001 From: Chris Rowe Date: Tue, 12 Feb 2019 10:16:21 +0000 Subject: [PATCH 16/16] Fix credit link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ed5d573..e6973e5 100644 --- a/README.md +++ b/README.md @@ -57,4 +57,4 @@ It's not really practical to expose all of the power of CSS Grid through utiliti This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. -Credit and thanks to [@adamwathan](/adamwathan) - [view original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) \ No newline at end of file +Credit and thanks to [@adamwathan](https://github.com/adamwathan) - [view original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) \ No newline at end of file