From 76dec17a7bd9e71ffc696adfeb754afe0b39bc93 Mon Sep 17 00:00:00 2001 From: Viktor Tsarevskiy Date: Fri, 22 Apr 2016 23:08:37 +0300 Subject: [PATCH 1/5] add support to change maxWidth and gutter on the fly --- index.js | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index b868655..9e5214b 100644 --- a/index.js +++ b/index.js @@ -17,13 +17,25 @@ module.exports = postcss.plugin('postcss-grid', function (opts) { var container = cols * columnWidth + (cols -1) * opts.gutter; return ((width / container) * 100).toFixed(5) * 1; }; + var gridWidthExtended = function (span, cols, maxWidth, gutter) { + var colWidth = (maxWidth - ((cols -1 ) * gutter)) / cols; + var width = span * colWidth + (span -1 ) * gutter; + var container = cols * colWidth + (cols -1) * gutter; + return ((width / container) * 100).toFixed(5) * 1; + }; var gutterWidth = function (cols) { var width = cols * columnWidth + (cols - 1) * opts.gutter; return ((opts.gutter / width) * 100).toFixed(5) * 1; }; + var gutterWidthExtended = function (cols, maxWidth, gutter) { + var columnWidth = (maxWidth - ((cols -1 ) * gutter)) / cols; + var width = cols * columnWidth + (cols - 1) * gutter; + return ((gutter / width) * 100).toFixed(5) * 1; + }; var value = /\s*(\d+)\s*\/\s*(\d+)\s*/; + var extended = /\s*(\d+)\s*\/\s*(\d+)\s*\/\s*(\d+)\s*\/\s*(\d+)\s*/; var isLast = /\s*!last\s*$/; return function (css) { @@ -51,6 +63,19 @@ module.exports = postcss.plugin('postcss-grid', function (opts) { if (decl.prop === 'grid-column') { var match; + if (match = extended.exec(decl.value)) { + var span = match[1]; + var columns = match[2]; + var maxWidth = match[3]; + var gutter = match[4]; + decl.parent.append({prop: 'float', value: 'left'}).source = decl.source; + decl.parent.append({prop: 'width', value: gridWidthExtended(span, columns, maxWidth, gutter) + '%'}).source = decl.source; + if (!(decl.value.match(isLast))) { + if (opts.legacy) decl.parent.append({prop: 'display', value: 'inline'}).source = decl.source; + decl.parent.append({prop: 'margin-right', value: gutterWidthExtended(columns, maxWidth, gutter) + '%'}).source = decl.source; + } + return decl.remove(); + } if (match = value.exec(decl.value)) { var span = match[1]; var columns = match[2]; @@ -70,7 +95,18 @@ module.exports = postcss.plugin('postcss-grid', function (opts) { } if (decl.prop === 'grid-push' || decl.prop === 'grid-pull') { var match; - + if (match = extended.exec(decl.value)) { + var span = match[1]; + var columns = match[2]; + var maxWidth = match[3]; + var gutter = match[4]; + var width = span * gridWidthExtended(1, columns, maxWidth, gutter) + span * gutterWidthExtended(columns, maxWidth, gutter); + decl.parent.append({ + prop: decl.prop === 'grid-push' ? 'margin-left' : 'margin-right', + value: width + '%' + }).source = decl.source; + return decl.remove(); + } if (match = value.exec(decl.value)) { var span = match[1]; var columns = match[2]; From 9084cb659b68c4eb5911e81aec981e80b804f4b9 Mon Sep 17 00:00:00 2001 From: Viktor Tsarevskiy Date: Fri, 22 Apr 2016 23:13:46 +0300 Subject: [PATCH 2/5] update README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index dd1c43e..160805c 100644 --- a/README.md +++ b/README.md @@ -123,3 +123,8 @@ Turns into: margin-left: 2.08333%; } ``` +### Changes maxWidth and gutter + +You can drop to `grid-column`, `grid-push`, `grid-pull` next format of data `1/16/1170/30`. +Where first two params are the same as described before, but second two params is maxWidth of container and gutter. +It is needed if your mockup has different grid in different responsive layers. \ No newline at end of file From a85fe38dcc083e9ceadc915cd8c448ca4bc83481 Mon Sep 17 00:00:00 2001 From: Viktor Tsarevskiy Date: Fri, 22 Apr 2016 23:17:00 +0300 Subject: [PATCH 3/5] update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 160805c..b00ceb7 100644 --- a/README.md +++ b/README.md @@ -125,6 +125,6 @@ Turns into: ``` ### Changes maxWidth and gutter -You can drop to `grid-column`, `grid-push`, `grid-pull` next format of data `1/16/1170/30`. +You can pass to `grid-column`, `grid-push`, `grid-pull` next format of data `1/16/1170/30`. Where first two params are the same as described before, but second two params is maxWidth of container and gutter. It is needed if your mockup has different grid in different responsive layers. \ No newline at end of file From c61a94818c274b05e828e230a8a753c0af1b9644 Mon Sep 17 00:00:00 2001 From: Viktor Tsarevskiy Date: Fri, 22 Apr 2016 23:17:23 +0300 Subject: [PATCH 4/5] update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b00ceb7..af8ef0e 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,7 @@ Turns into: margin-left: 2.08333%; } ``` -### Changes maxWidth and gutter +### Change maxWidth and gutter on the fly You can pass to `grid-column`, `grid-push`, `grid-pull` next format of data `1/16/1170/30`. Where first two params are the same as described before, but second two params is maxWidth of container and gutter. From b7e22176df59bc4535de14a775eadaf87694733d Mon Sep 17 00:00:00 2001 From: Viktor Tsarevskiy Date: Fri, 22 Apr 2016 23:18:39 +0300 Subject: [PATCH 5/5] small updates --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 9e5214b..ceeaf12 100644 --- a/index.js +++ b/index.js @@ -29,8 +29,8 @@ module.exports = postcss.plugin('postcss-grid', function (opts) { return ((opts.gutter / width) * 100).toFixed(5) * 1; }; var gutterWidthExtended = function (cols, maxWidth, gutter) { - var columnWidth = (maxWidth - ((cols -1 ) * gutter)) / cols; - var width = cols * columnWidth + (cols - 1) * gutter; + var colWidth = (maxWidth - ((cols -1 ) * gutter)) / cols; + var width = cols * colWidth + (cols - 1) * gutter; return ((gutter / width) * 100).toFixed(5) * 1; };