styled-css-grid - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/styled-css-grid.esm.js

@@ -11,3 +11,3 @@ import styled from 'styled-components';
 
-var _templateObject = taggedTemplateLiteral(["\n  justify-self: stretch;\n  height: 100%;\n  flex-flow: column wrap;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n"], ["\n  justify-self: stretch;\n  height: 100%;\n  flex-flow: column wrap;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\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  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"]);
 
@@ -22,5 +22,13 @@ var Cell = styled.section(_templateObject, function (_ref) {
   return "span " + height;
+}, function (_ref3) {
+  var _ref3$center = _ref3.center,
+      center = _ref3$center === undefined ? false : _ref3$center;
+  return center && "text-align: center;";
+}, function (_ref4) {
+  var _ref4$middle = _ref4.middle,
+      middle = _ref4$middle === undefined ? false : _ref4$middle;
+  return middle && "\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  ";
 });
 
-var _templateObject$1 = taggedTemplateLiteral(["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: row dense;\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"], ["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: row dense;\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"]);
+var _templateObject$1 = taggedTemplateLiteral(["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: ", ";\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"], ["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: ", ";\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"]);
 
@@ -33,9 +41,13 @@ var minmax = function minmax(_ref) {
 
-var Grid = styled.div(_templateObject$1, minmax, minmax, function (_ref2) {
-  var _ref2$columns = _ref2.columns,
-      columns = _ref2$columns === undefined ? 12 : _ref2$columns;
+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;
   return "repeat(" + columns + ", 1fr)";
-}, function (_ref3) {
-  var _ref3$gap = _ref3.gap,
-      gap = _ref3$gap === undefined ? "8px" : _ref3$gap;
+}, function (_ref4) {
+  var _ref4$gap = _ref4.gap,
+      gap = _ref4$gap === undefined ? "8px" : _ref4$gap;
   return gap + " " + gap;
@@ -42,0 +54,0 @@ });

dist/styled-css-grid.umd.js

@@ -17,3 +17,3 @@ (function (global, factory) {
 
-var _templateObject = taggedTemplateLiteral(["\n  justify-self: stretch;\n  height: 100%;\n  flex-flow: column wrap;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\n"], ["\n  justify-self: stretch;\n  height: 100%;\n  flex-flow: column wrap;\n  align-content: space-around;\n  grid-column-end: ", ";\n  grid-row-end: ", ";\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  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"]);
 
@@ -28,5 +28,13 @@ var Cell = styled.section(_templateObject, function (_ref) {
   return "span " + height;
+}, function (_ref3) {
+  var _ref3$center = _ref3.center,
+      center = _ref3$center === undefined ? false : _ref3$center;
+  return center && "text-align: center;";
+}, function (_ref4) {
+  var _ref4$middle = _ref4.middle,
+      middle = _ref4$middle === undefined ? false : _ref4$middle;
+  return middle && "\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  ";
 });
 
-var _templateObject$1 = taggedTemplateLiteral(["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: row dense;\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"], ["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: row dense;\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"]);
+var _templateObject$1 = taggedTemplateLiteral(["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: ", ";\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"], ["\n  min-height: 100%;\n  display: grid;\n  grid-auto-flow: ", ";\n  grid-auto-rows: ", ";\n  grid-template-rows: ", ";\n  grid-template-columns: ", ";\n  grid-gap: ", ";\n"]);
 
@@ -39,9 +47,13 @@ var minmax = function minmax(_ref) {
 
-var Grid = styled.div(_templateObject$1, minmax, minmax, function (_ref2) {
-  var _ref2$columns = _ref2.columns,
-      columns = _ref2$columns === undefined ? 12 : _ref2$columns;
+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;
   return "repeat(" + columns + ", 1fr)";
-}, function (_ref3) {
-  var _ref3$gap = _ref3.gap,
-      gap = _ref3$gap === undefined ? "8px" : _ref3$gap;
+}, function (_ref4) {
+  var _ref4$gap = _ref4.gap,
+      gap = _ref4$gap === undefined ? "8px" : _ref4$gap;
   return gap + " " + gap;
@@ -48,0 +60,0 @@ });

package.json

 {
   "name": "styled-css-grid",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A tiny CSS grid layout for React, built with styled-components",
@@ -5,0 +5,0 @@ "main": "dist/syled-css-grid.umd.js",

README.md

@@ -8,6 +8,7 @@ # `styled-css-grid`
 [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)
+[![JS.ORG](https://img.shields.io/badge/js.org-dns-ffb400.svg?style=flat-square)](http://js.org)
 
 > A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.
 
-## demo
+## examples
 
@@ -49,2 +50,4 @@ See the **[website]**.
 * `height`: Cell height in units, default is `1`.
+* `middle`: Vertically align the contents of the cell. Default is `false`.
+* `center`: Horizontally align the text contents of the cell. Default is `false`.
 
@@ -60,5 +63,7 @@ ### `Grid`
 * `minRowHeight`: Minimum height of each row. Default is `"20px"`.
+* `flow`: The [grid-auto-flow] CSS property. Default is `"row dense"`.
 
-[website]: https://styled-css-grid.netlify.com/
+[website]: https://styled-css-grid.js.org/
 [CSS grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 [styled-components]: https://github.com/styled-components/styled-components
+[grid-auto-flow]: https://mdn.io/grid-auto-flow

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

10419

increased by16.96%

Lines of code

104

increased by30%

Number of lines in readme file

67

increased by8.06%

No dependency changes