From feb51a3eebd6e88027303e55018d36fbc1818a08 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Fri, 31 Jan 2020 20:57:22 +0100 Subject: [PATCH 1/7] Move the grid plugin's configuration to a theme property --- src/index.js | 24 ++++++++++--------- src/plugins/grid.js | 57 ++++++++++++++++++++++++--------------------- 2 files changed, 43 insertions(+), 38 deletions(-) diff --git a/src/index.js b/src/index.js index e25b093..f90d8ab 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,18 @@ module.exports = { */ debugOutline: false, + /** + * Grid + */ + gridPlugin: { + gutterWidth: { + default: 1, + s: 2, + l: 3, + xxl: 4, + }, + }, + /** * Breakpoints */ @@ -167,17 +179,7 @@ module.exports = { }, plugins: [ require('./plugins/debug-outline')(), - require('./plugins/grid')({ - gridGutters: { - default: '1', - xs: '1', - s: '2', - m: '2', - l: '3', - xl: '3', - xxl: '4', - }, - }), + require('./plugins/grid')(), /** * Tailwind CSS typograpy plugin. * @see https://github.com/benface/tailwindcss-typography diff --git a/src/plugins/grid.js b/src/plugins/grid.js index eb0ac5b..8afe30e 100644 --- a/src/plugins/grid.js +++ b/src/plugins/grid.js @@ -10,18 +10,21 @@ const max = require('lodash.max'); * - How to create tailwind plugins * @see https://tailwindcss.com/docs/plugins/ * - * @param {array} columnCount Number of columns to have in the grid, default is 12 - * @param {object} gridGutters Per breakpoint grid gutter size value - * @param {string} gridGutterUnit Unit to use for the grid gutter size, default is rem * @param {array} variants */ -module.exports = function gridPlugin({ - columnCount = range(1, 12), - gridGutters, - gridGutterUnit = 'rem', -}) { - return ({ addComponents, theme }) => { +module.exports = function gridPluginFactory() { + return function gridPlugin({ addComponents, theme }) { const screens = theme('screens', {}); + const columns = range(1, theme('gridPlugin.columns', 12)); + const gutterUnit = theme('gridPlugin.gutterUnit', 'rem'); + let gutterWidth = theme('gridPlugin.gutterWidth', 1); + + // Transform `gutterWidth` into an object if define as a string or number + if (typeof gutterWidth === 'string' || typeof gutterWidth === 'number') { + gutterWidth = { + default: gutterWidth, + }; + } addComponents([ { @@ -29,23 +32,23 @@ module.exports = function gridPlugin({ * Add padding's to .grid */ '.grid': { - paddingRight: gridGutters.default * 0.5 + gridGutterUnit, - paddingLeft: gridGutters.default * 0.5 + gridGutterUnit, + paddingRight: gutterWidth.default * 0.5 + gutterUnit, + paddingLeft: gutterWidth.default * 0.5 + gutterUnit, }, /** * Add margin's to .grid-row */ '.grid-row': { - marginRight: gridGutters.default * -0.5 + gridGutterUnit, - marginLeft: gridGutters.default * -0.5 + gridGutterUnit, + marginRight: gutterWidth.default * -0.5 + gutterUnit, + marginLeft: gutterWidth.default * -0.5 + gutterUnit, }, /** * Add padding's to .grid-col-{number} */ '[class*="grid-col-"]': { - paddingRight: gridGutters.default * 0.5 + gridGutterUnit, - paddingLeft: gridGutters.default * 0.5 + gridGutterUnit, + paddingRight: gutterWidth.default * 0.5 + gutterUnit, + paddingLeft: gutterWidth.default * 0.5 + gutterUnit, }, /** * Responsive classes @@ -179,9 +182,9 @@ module.exports = function gridPlugin({ * Column pull * grid-pull-{number} */ - ...range(1, max(columnCount) + 2).map(count => ({ + ...range(1, max(columns) + 2).map(count => ({ [`.grid-pull-${count}`]: { - marginLeft: `${(count * -100) / (max(columnCount) + 1)}%`, + marginLeft: `${(count * -100) / (max(columns) + 1)}%`, }, })), @@ -189,9 +192,9 @@ module.exports = function gridPlugin({ * Column push * grid-push-{number} */ - ...range(1, max(columnCount) + 2).map(count => ({ + ...range(1, max(columns) + 2).map(count => ({ [`.grid-push-${count}`]: { - marginLeft: `${(count * 100) / (max(columnCount) + 1)}%`, + marginLeft: `${(count * 100) / (max(columns) + 1)}%`, }, })), @@ -199,11 +202,11 @@ module.exports = function gridPlugin({ * Column size * grid-col-{number} */ - ...range(1, max(columnCount) + 2).map(count => ({ + ...range(1, max(columns) + 2).map(count => ({ [`.grid-col-${count}`]: { float: 'left', display: 'block', - width: `${(count * 100) / (max(columnCount) + 1)}%`, + width: `${(count * 100) / (max(columns) + 1)}%`, }, })), ], @@ -217,23 +220,23 @@ module.exports = function gridPlugin({ * Add padding's to .grid */ '.grid': { - paddingRight: gridGutters[breakpoint] * 0.5 + gridGutterUnit, - paddingLeft: gridGutters[breakpoint] * 0.5 + gridGutterUnit, + paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit, + paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit, }, /** * Add margin's to .grid-row */ '.grid-row': { - marginRight: gridGutters[breakpoint] * -0.5 + gridGutterUnit, - marginLeft: gridGutters[breakpoint] * -0.5 + gridGutterUnit, + marginRight: gutterWidth[breakpoint] * -0.5 + gutterUnit, + marginLeft: gutterWidth[breakpoint] * -0.5 + gutterUnit, }, /** * Add padding's to .grid-col-{number} */ [`[class*="grid-col-"]`]: { - paddingRight: gridGutters[breakpoint] * 0.5 + gridGutterUnit, - paddingLeft: gridGutters[breakpoint] * 0.5 + gridGutterUnit, + paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit, + paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit, }, }, })), From 1f88361afd2cbaef60ab668921bfd57d562db867 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Fri, 31 Jan 2020 21:33:34 +0100 Subject: [PATCH 2/7] Filter out the non-defined breakpoint gutterWidth Fix a bug where `NaNrem` values where outputted because there were no breakpoint property in the gutterWidth definition. --- src/plugins/grid.js | 52 +++++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/src/plugins/grid.js b/src/plugins/grid.js index 8afe30e..7230868 100644 --- a/src/plugins/grid.js +++ b/src/plugins/grid.js @@ -211,35 +211,37 @@ module.exports = function gridPluginFactory() { })), ], }, - ...Object.keys(screens).map(breakpoint => ({ - /** - * Declare the @media query rule - */ - [`@screen ${breakpoint}`]: { - /** - * Add padding's to .grid - */ - '.grid': { - paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit, - paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit, - }, + ...Object.keys(screens) + .filter(breakpoint => breakpoint in gutterWidth) + .map(breakpoint => ({ /** - * Add margin's to .grid-row + * Declare the @media query rule */ - '.grid-row': { - marginRight: gutterWidth[breakpoint] * -0.5 + gutterUnit, - marginLeft: gutterWidth[breakpoint] * -0.5 + gutterUnit, - }, + [`@screen ${breakpoint}`]: { + /** + * Add padding's to .grid + */ + '.grid': { + paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit, + paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit, + }, + /** + * Add margin's to .grid-row + */ + '.grid-row': { + marginRight: gutterWidth[breakpoint] * -0.5 + gutterUnit, + marginLeft: gutterWidth[breakpoint] * -0.5 + gutterUnit, + }, - /** - * Add padding's to .grid-col-{number} - */ - [`[class*="grid-col-"]`]: { - paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit, - paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit, + /** + * Add padding's to .grid-col-{number} + */ + [`[class*="grid-col-"]`]: { + paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit, + paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit, + }, }, - }, - })), + })), ]); }; }; From 2f8c775045eebdcb38ae7a2c0140a68a014977bb Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Fri, 31 Jan 2020 21:34:14 +0100 Subject: [PATCH 3/7] Update the grid plugin's documentation --- docs/plugins/grid.md | 101 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 99 insertions(+), 2 deletions(-) diff --git a/docs/plugins/grid.md b/docs/plugins/grid.md index fd030ab..d30d118 100644 --- a/docs/plugins/grid.md +++ b/docs/plugins/grid.md @@ -1,14 +1,111 @@ --- sidebar: auto +prev: ./debug-outline.html +next: ./typography.html --- # Grid -@todo introduction +The grid plugin creates component classes to easily work with a 12 columns layout. + +## Configuration + +The plugin can be configured with the `theme.gridPlugin` property: + +```js{3-7} +module.exports = { + theme: { + gridPlugin: { + columns: 12, + gutterWidth: 1, + gutterUnit: 'rem', + }, + }, +}; +``` + +### `columns` + +- Type: `Number` +- Default: `12` + +The total number of columns. + +### `gutterWidth` + +- Type: `[ Number, String, Object ]` +- Default: `1` + +The width of the grid's gutters provided as a **unitless number**. You can configure different widths per breakpoint by providing an object with the following schema: + +```js +{ + default: , + ...: ` | @todo | `responsive` | +| `.grid-push-` | @todo | `responsive` | +| `.grid-col-` | @todo | `responsive` | +| `.grid-col-center` | @todo | `responsive` | +| `.grid-col-clear` | @todo | `responsive` | +| `.grid-col-left` | @todo | `responsive` | +| `.grid-col-no-clear` | @todo | `responsive` | +| `.grid-col-right` | @todo | `responsive` | + ## Examples From 4b3af9c7b0ecf8f0483a0725356d4a7555176411 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Fri, 31 Jan 2020 21:34:45 +0100 Subject: [PATCH 4/7] Fix a warning in the documentation's `Preview` component --- docs/.vuepress/components/Preview.vue | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/.vuepress/components/Preview.vue b/docs/.vuepress/components/Preview.vue index 5866473..27db31e 100644 --- a/docs/.vuepress/components/Preview.vue +++ b/docs/.vuepress/components/Preview.vue @@ -5,7 +5,7 @@