styled-css-grid - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/styled-css-grid.esm.js

@@ -11,3 +11,3 @@ import styled from 'styled-components';
 
-var _templateObject = taggedTemplateLiteral(["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n\n  ", ";\n"]);
+var _templateObject = taggedTemplateLiteral(["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n"]);
 
@@ -23,8 +23,15 @@ var Cell = styled.section(_templateObject, function (_ref) {
 }, function (_ref3) {
-  var _ref3$center = _ref3.center,
-      center = _ref3$center === undefined ? false : _ref3$center;
+  var left = _ref3.left;
+  return left && "grid-column-start: " + left;
+}, function (_ref4) {
+  var top = _ref4.top;
+  return top && "grid-row-start: " + top;
+}, function (_ref5) {
+  var _ref5$center = _ref5.center,
+      center = _ref5$center === undefined ? false : _ref5$center;
   return center && "text-align: center;";
-}, function (_ref4) {
-  var _ref4$middle = _ref4.middle,
-      middle = _ref4$middle === undefined ? false : _ref4$middle;
+}, /* prettier-ignore */
+function (_ref6) {
+  var _ref6$middle = _ref6.middle,
+      middle = _ref6$middle === undefined ? false : _ref6$middle;
   return middle && "\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  ";
@@ -41,16 +48,22 @@ });
 
-var Grid = styled.div(_templateObject$1, function (_ref2) {
-  var _ref2$flow = _ref2.flow,
-      flow = _ref2$flow === undefined ? "row dense" : _ref2$flow;
-  return flow;
-}, minmax, minmax, function (_ref3) {
-  var _ref3$columns = _ref3.columns,
-      columns = _ref3$columns === undefined ? 12 : _ref3$columns;
+var columnRepeat = function columnRepeat(_ref2) {
+  var _ref2$columns = _ref2.columns,
+      columns = _ref2$columns === undefined ? 12 : _ref2$columns;
   return "repeat(" + columns + ", 1fr)";
-}, function (_ref4) {
-  var _ref4$gap = _ref4.gap,
-      gap = _ref4$gap === undefined ? "8px" : _ref4$gap;
+};
+
+var gap = function gap(_ref3) {
+  var _ref3$gap = _ref3.gap,
+      gap = _ref3$gap === undefined ? "8px" : _ref3$gap;
   return gap + " " + gap;
-});
+};
 
+var flow = function flow(_ref4) {
+  var _ref4$flow = _ref4.flow,
+      flow = _ref4$flow === undefined ? "row" : _ref4$flow;
+  return flow;
+};
+
+var Grid = styled.div(_templateObject$1, flow, minmax, minmax, columnRepeat, gap);
+
 export { Cell, Grid };

dist/styled-css-grid.umd.js

@@ -17,3 +17,3 @@ (function (global, factory) {
 
-var _templateObject = taggedTemplateLiteral(["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n\n  ", ";\n"]);
+var _templateObject = taggedTemplateLiteral(["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n"]);
 
@@ -29,8 +29,15 @@ var Cell = styled.section(_templateObject, function (_ref) {
 }, function (_ref3) {
-  var _ref3$center = _ref3.center,
-      center = _ref3$center === undefined ? false : _ref3$center;
+  var left = _ref3.left;
+  return left && "grid-column-start: " + left;
+}, function (_ref4) {
+  var top = _ref4.top;
+  return top && "grid-row-start: " + top;
+}, function (_ref5) {
+  var _ref5$center = _ref5.center,
+      center = _ref5$center === undefined ? false : _ref5$center;
   return center && "text-align: center;";
-}, function (_ref4) {
-  var _ref4$middle = _ref4.middle,
-      middle = _ref4$middle === undefined ? false : _ref4$middle;
+}, /* prettier-ignore */
+function (_ref6) {
+  var _ref6$middle = _ref6.middle,
+      middle = _ref6$middle === undefined ? false : _ref6$middle;
   return middle && "\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  ";
@@ -47,16 +54,22 @@ });
 
-var Grid = styled.div(_templateObject$1, function (_ref2) {
-  var _ref2$flow = _ref2.flow,
-      flow = _ref2$flow === undefined ? "row dense" : _ref2$flow;
-  return flow;
-}, minmax, minmax, function (_ref3) {
-  var _ref3$columns = _ref3.columns,
-      columns = _ref3$columns === undefined ? 12 : _ref3$columns;
+var columnRepeat = function columnRepeat(_ref2) {
+  var _ref2$columns = _ref2.columns,
+      columns = _ref2$columns === undefined ? 12 : _ref2$columns;
   return "repeat(" + columns + ", 1fr)";
-}, function (_ref4) {
-  var _ref4$gap = _ref4.gap,
-      gap = _ref4$gap === undefined ? "8px" : _ref4$gap;
+};
+
+var gap = function gap(_ref3) {
+  var _ref3$gap = _ref3.gap,
+      gap = _ref3$gap === undefined ? "8px" : _ref3$gap;
   return gap + " " + gap;
-});
+};
 
+var flow = function flow(_ref4) {
+  var _ref4$flow = _ref4.flow,
+      flow = _ref4$flow === undefined ? "row" : _ref4$flow;
+  return flow;
+};
+
+var Grid = styled.div(_templateObject$1, flow, minmax, minmax, columnRepeat, gap);
+
 exports.Cell = Cell;
@@ -63,0 +76,0 @@ exports.Grid = Grid;

package.json

 {
   "name": "styled-css-grid",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A tiny CSS grid layout for React, built with styled-components",
+  "homepage": "https://styled-css-grid.js.org",
   "main": "dist/syled-css-grid.umd.js",
@@ -24,2 +25,3 @@ "module": "dist/syled-css-grid.esm.js",
     "build": "node scripts/build",
+    "watch:site": "rollup -c scripts/rollup.website.config.js -w",
     "start": "http-server website",
@@ -39,2 +41,3 @@ "semantic-release": "semantic-release pre && npm publish && semantic-release post"
     "babelify": "^7.3.0",
+    "common-tags": "^1.4.0",
     "eslint": "^4.3.0",
@@ -48,3 +51,6 @@ "eslint-config-prettier": "^2.3.0",
     "jest-styled-components": "^4.2.2",
+    "lodash-es": "^4.17.4",
+    "normalize.css": "^7.0.0",
     "prettier": "^1.5.3",
+    "prismjs": "^1.6.0",
     "react": "next",
@@ -56,9 +62,12 @@ "react-dom": "next",
     "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-css-only": "^0.2.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-uglify": "^2.0.1",
+    "rollup-watch": "^4.3.1",
+    "semantic-release": "^6.3.6",
     "shelljs": "^0.7.8",
     "styled-components": "^2.1.1",
-    "semantic-release": "^6.3.6"
+    "uglify-es": "^3.0.26"
   }
 }

README.md

@@ -49,2 +49,4 @@ # `styled-css-grid`
 * `height`: Cell height in units, default is `1`.
+* `left`: The [grid-column-start] CSS property. Not provided by default.
+* `top`: The [grid-row-start] CSS property. Not provided by default.
 * `middle`: Vertically align the contents of the cell. Default is `false`.
@@ -62,7 +64,9 @@ * `center`: Horizontally align the text contents of the cell. Default is `false`.
 * `minRowHeight`: Minimum height of each row. Default is `"20px"`.
-* `flow`: The [grid-auto-flow] CSS property. Default is `"row dense"`.
+* `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
 
 [website]: https://styled-css-grid.js.org/
-[CSS grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[CSS grid]: https://mdn.io/CSS_Grid_Layout
 [styled-components]: https://github.com/styled-components/styled-components
 [grid-auto-flow]: https://mdn.io/grid-auto-flow
+[grid-row-start]: https://mdn.io/grid-row-start
+[grid-column-start]: https://mdn.io/grid-column-start

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11601

increased by11.34%

Lines of code

124

increased by19.23%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

71

increased by5.97%

Worsened metrics

Dev dependency count

32

increased by28%

No dependency changes