grid-styled - npm Package Compare versions

Comparing version 2.0.0-2 to 2.0.0-3

dist/Box.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  box-sizing:border-box;\n  ', '\n  ', '\n'], ['\n  box-sizing:border-box;\n  ', '\n  ', '\n']);
-
 var _react = require('react');
@@ -24,4 +22,2 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -39,4 +35,4 @@
 
-var Box = hoc(_styledComponents2.default.div(_templateObject, _styledSystem.width, _styledSystem.space));
+var Box = hoc(_styledComponents2.default.div([], { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space));
 
 exports.default = Box;

dist/Flex.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  display: flex;\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
-
 var _react = require('react');
@@ -24,4 +22,2 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var align = function align(props) {
@@ -43,4 +39,4 @@ return props.align ? 'align-items:' + props.align + ';' : null;
 
-var Flex = (0, _styledComponents2.default)(_Box2.default)(_templateObject, align, justify, order, wrap, column);
+var Flex = (0, _styledComponents2.default)(_Box2.default)([], { display: 'flex' }, align, justify, order, wrap, column);
 
 exports.default = Flex;

dist/Grid.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  vertical-align: ', ';\n'], ['\n  display: inline-block;\n  vertical-align: ', ';\n']);
-
 var _styledComponents = require('styled-components');
@@ -20,10 +18,10 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var align = function align(props) {
-  return props.align || 'top';
+  return { verticalAlign: props.align || 'top' };
 };
 
-var Grid = (0, _styledComponents2.default)(_Box2.default)(_templateObject, align);
+var Grid = (0, _styledComponents2.default)(_Box2.default)([], {
+  display: 'inline-block'
+}, align);
 
 exports.default = Grid;

package.json

 {
   "name": "grid-styled",
-  "version": "2.0.0-2",
+  "version": "2.0.0-3",
   "description": "Responsive React grid system built with styled-components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -122,7 +122,8 @@
 Sets width, where numbers `0-1` are percentage values, larger numbers are pixel values, and strings are raw CSS values with units.
-Pass an array to set different widths at different breakpoints.
+Pass an array to set different widths at different breakpoints for
+[responsive styles](#responsive-styles).
 
 #### Margin and Padding Props
 
-Both margin and padding props accept numbers or strings.
+Both margin and padding props accept numbers, strings, and arrays as values.
 Using a number from `0-4` will reference a step on the spacing scale.
@@ -133,2 +134,5 @@ Larger numbers are converted to pixel values.
 
+Use array values to set different margin or padding values per breakpoint for
+[responsive styles](#responsive-styles).
+
 Margin and padding props follow a shorthand syntax for specifying direction.
@@ -170,2 +174,22 @@
 
+## Responsive Styles
+
+Width, margin, and padding props accept arrays as values for mobile-first responsive styles,
+where the first value is for all breakpoints, then each value after is for a min-width
+media query from that breakpoint and up.
+The Box component uses [styled-system](https://github.com/jxnblk/styled-system) for these props.
+
+```jsx
+// 100% below the smallest breakpoint,
+// 50% from the next breakpoint and up,
+// and 25% from the next breakpoint and up
+<Box w={[ 1, 1/2, 1/4 ]} />
+
+// responsive margin
+<Box m={[ 1, 2, 3, 4 ]} />
+
+// responsive padding
+<Box p={[ 1, 2, 3, 4 ]} />
+```
+
 ## Theming
@@ -207,5 +231,10 @@
 
-The default scale is based on powers of two: `[ 0, 8, 16, 32, 64 ]`
+The default scale is based on an 8px/powers-of-two grid: `[ 0, 8, 16, 32, 64 ]`,
+which helps keep spacing consistent and elements aligned even when nesting components.
 
+### Related
 
+- [styled-system](https://github.com/jxnblk/styled-system)
+- [styled-components](https://github.com/styled-components/styled-components)
+
 MIT License

src/Box.js

@@ -8,8 +8,8 @@ import React from 'react'
 
-const Box = hoc(styled.div`
-  box-sizing:border-box;
-  ${width}
-  ${space}
-`)
+const Box = hoc(styled.div([],
+  { boxSizing: 'border-box' },
+  width,
+  space
+))
 
 export default Box

src/Flex.js

@@ -11,11 +11,11 @@ import React from 'react'
 
-const Flex = styled(Box)`
-  display: flex;
-  ${align}
-  ${justify}
-  ${order}
-  ${wrap}
-  ${column}
-`
+const Flex = styled(Box)([],
+  { display: 'flex' },
+  align,
+  justify,
+  order,
+  wrap,
+  column
+)
 
 export default Flex

src/Grid.js

 import styled from 'styled-components'
 import Box from './Box'
 
-const align = props => props.align || 'top'
+const align = props => ({ verticalAlign: props.align || 'top' })
 
-const Grid = styled(Box)`
-  display: inline-block;
-  vertical-align: ${align};
-`
+const Grid = styled(Box)([], {
+  display: 'inline-block'
+}, align)
 
 export default Grid

No alert changes

Improved metrics

Total package byte prevSize

19637

increased by6.34%

Lines of code

392

increased by20.25%

Number of lines in readme file

237

increased by13.94%

No dependency changes