styled-css-grid - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/styled-css-grid.esm.js

@@ -1,1 +0,1 @@
-import styled from"styled-components";var Cell=styled.section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";"],function(n){var t=n.width;return"span "+(void 0===t?1:t)},function(n){var t=n.height;return"span "+(void 0===t?1:t)},function(n){var t=n.left;return t&&"grid-column-start: "+t},function(n){var t=n.top;return t&&"grid-row-start: "+t},function(n){var t=n.center;return void 0!==t&&t&&"text-align: center;"},function(n){var t=n.middle;return void 0!==t&&t&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),minmax=function(n){var t=n.minRowHeight;return"minmax("+(void 0===t?"20px":t)+", auto)"},columnRepeat=function(n){var t=n.columns;return"repeat("+(void 0===t?12:t)+", 1fr)"},gap=function(n){var t=n.gap,i=void 0===t?"8px":t;return i+" "+i},flow=function(n){var t=n.flow,i=void 0===t?"row":t;return i},Grid=styled.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";grid-template-rows:",";grid-template-columns:",";grid-gap:",";"],flow,minmax,minmax,columnRepeat,gap);export{Cell,Grid};
+import styled from"styled-components";var Cell=styled.section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";"],function(n){var r=n.width;return"span "+(void 0===r?1:r)},function(n){var r=n.height;return"span "+(void 0===r?1:r)},function(n){var r=n.left;return r&&"grid-column-start: "+r},function(n){var r=n.top;return r&&"grid-row-start: "+r},function(n){var r=n.center;return void 0!==r&&r&&"text-align: center;"},function(n){var r=n.middle;return void 0!==r&&r&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),autoRows=function(n){var r=n.minRowHeight;return"minmax("+(void 0===r?"20px":r)+", auto)"},columns=function(n){var r=n.columns,t=void 0===r?12:r;return"number"==typeof t?"repeat("+t+", 1fr)":t},gap=function(n){var r=n.gap,t=void 0===r?"8px":r;return t+" "+t},flow=function(n){var r=n.flow,t=void 0===r?"row":r;return t},Grid=styled.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";",";grid-template-columns:",";grid-gap:",";"],flow,autoRows,function(n){var r=n.rows;return r&&"grid-template-rows: "+r},columns,gap);export{Cell,Grid};

dist/styled-css-grid.umd.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components")):"function"==typeof define&&define.amd?define(["exports","styled-components"],n):n(e.StyledCssGrid={},e.styled)}(this,function(e,n){"use strict";var t=(n=n&&n.hasOwnProperty("default")?n.default:n).section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";"],function(e){var n=e.width;return"span "+(void 0===n?1:n)},function(e){var n=e.height;return"span "+(void 0===n?1:n)},function(e){var n=e.left;return n&&"grid-column-start: "+n},function(e){var n=e.top;return n&&"grid-row-start: "+n},function(e){var n=e.center;return void 0!==n&&n&&"text-align: center;"},function(e){var n=e.middle;return void 0!==n&&n&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),i=function(e){var n=e.minRowHeight;return"minmax("+(void 0===n?"20px":n)+", auto)"},r=n.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";grid-template-rows:",";grid-template-columns:",";grid-gap:",";"],function(e){var n=e.flow,t=void 0===n?"row":n;return t},i,i,function(e){var n=e.columns;return"repeat("+(void 0===n?12:n)+", 1fr)"},function(e){var n=e.gap,t=void 0===n?"8px":n;return t+" "+t});e.Cell=t,e.Grid=r,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components")):"function"==typeof define&&define.amd?define(["exports","styled-components"],n):n(e.StyledCssGrid={},e.styled)}(this,function(e,n){"use strict";var t=(n=n&&n.hasOwnProperty("default")?n.default:n).section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";"],function(e){var n=e.width;return"span "+(void 0===n?1:n)},function(e){var n=e.height;return"span "+(void 0===n?1:n)},function(e){var n=e.left;return n&&"grid-column-start: "+n},function(e){var n=e.top;return n&&"grid-row-start: "+n},function(e){var n=e.center;return void 0!==n&&n&&"text-align: center;"},function(e){var n=e.middle;return void 0!==n&&n&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),r=n.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";",";grid-template-columns:",";grid-gap:",";"],function(e){var n=e.flow,t=void 0===n?"row":n;return t},function(e){var n=e.minRowHeight;return"minmax("+(void 0===n?"20px":n)+", auto)"},function(e){var n=e.rows;return n&&"grid-template-rows: "+n},function(e){var n=e.columns,t=void 0===n?12:n;return"number"==typeof t?"repeat("+t+", 1fr)":t},function(e){var n=e.gap,t=void 0===n?"8px":n;return t+" "+t});e.Cell=t,e.Grid=r,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "styled-css-grid",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A tiny CSS grid layout for React, built with styled-components",
@@ -5,0 +5,0 @@ "homepage": "https://styled-css-grid.js.org",

README.md

@@ -60,6 +60,8 @@ # `styled-css-grid 🍱`
 
-* `columns`: Number of columns to draw, default is `12`.
+* `columns`: The [grid-template-columns] CSS property. When a number is passed
+  it is a shorthand to specify the number of columns. Default is `12`.
 * `gap`: Gap between cells. Default is `"8px"`.
 * `minRowHeight`: Minimum height of each row. Default is `"20px"`.
 * `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
+* `rows`: The [grid-template-rows] CSS property. Not provided by default.
 
@@ -72,1 +74,3 @@ [website]: https://styled-css-grid.js.org/
 [grid-column-start]: https://mdn.io/grid-column-start
+[grid-template-columns]: https://mdn.io/grid-template-columns
+[grid-template-rows]: https://mdn.io/grid-template-rows

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8600

increased by3.94%

Number of lines in readme file

75

increased by5.63%

No dependency changes