styled-system - npm Package Compare versions

Comparing version 1.0.0-0 to 1.0.0-1

dist/space.js

@@ -25,3 +25,3 @@ 'use strict';
   var bp = breaks(props);
-  var sc = idx(['theme', 'scale'], props) || scale;
+  var sc = idx(['theme', 'space'], props) || scale;
 
@@ -28,0 +28,0 @@ return keys.map(function (key) {

package.json

 {
   "name": "styled-system",
-  "version": "1.0.0-0",
+  "version": "1.0.0-1",
   "description": "Design system utilities for styled-components",
@@ -8,3 +8,5 @@ "main": "dist/index.js",
     "prepublish": "babel src -d dist",
-    "start": "relab docs/Example.js -o -s docs/base.css",
+    "start": "webpack-dev-server",
+    "build": "NODE_ENV=production webpack",
+    "dev": "relab docs/Example.js -o -s docs/base.css",
     "test": "ava"
@@ -19,11 +21,16 @@ },
     "babel-core": "^6.25.0",
+    "babel-loader": "^7.0.0",
     "babel-preset-env": "^1.5.2",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.24.1",
+    "grid-styled": "^2.0.0-1",
     "react": "^15.6.0",
     "react-dom": "^15.6.0",
+    "react-live": "^1.6.1",
     "react-test-renderer": "^15.5.4",
     "relab": "^1.0.0-12",
-    "styled-components": "^2.0.1"
+    "styled-components": "^2.0.1",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
   }
 }

README.md

@@ -65,5 +65,9 @@ # styled-system
 
+```js
+import { fontSize } from 'styled-system'
+```
+
 The fontSize utility parses a component's `fontSize` prop and converts it into a CSS font-size declaration.
-Numbers from 0-8 are converted to values on the fontSizes scale.
-Numbers greater than x are converted to raw pixel values.
+Numbers from 0-8 are converted to values on the [font size scale](#font-size-scale).
+Numbers greater than 8 are converted to raw pixel values.
 String values are passed as raw CSS values.
@@ -74,18 +78,56 @@ And array values are converted into [responsive values](#responsive-styles).
 
+```js
+import { fontSize } from 'styled-system'
+```
+
 The space utility converts shorthand margin and padding props to margin and padding CSS declarations.
+Numbers from 0-4 are converted to values on the [spacing scale](#spacing-scale).
+Negative values can be used for negative margins.
+Numbers greater than 4 are converted to raw pixel values.
+String values are converted passed as raw CSS values.
+And array values are converted into [responsive values](#responsive-styles).
 
-<!--
-- scale
-- Negative margins
-- pixel values
-- Strings
-- Arrays
--->
+Margin and padding props follow a shorthand syntax for specifying direction.
 
+- `m`:  margin
+- `mt`: margin-top
+- `mr`: margin-right
+- `mb`: margin-bottom
+- `ml`: margin-left
+- `mx`: margin-left and margin-right
+- `my`: margin-top and margin-bottom
+- `p`:  padding
+- `pt`: padding-top
+- `pr`: padding-right
+- `pb`: padding-bottom
+- `pl`: padding-left
+- `px`: padding-left and padding-right
+- `py`: padding-top and padding-bottom
+
+
 ## Responsive Styles
 
-T/K
+All props accept arrays as values for mobile-first responsive styles.
 
+```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 font size
+<Box fontSize={[ 1, 2, 3, 4 ]} />
+
+// responsive margin
+<Box m={[ 1, 2, 3, 4 ]} />
+
+// responsive padding
+<Box p={[ 1, 2, 3, 4 ]} />
+```
+
+
 ## Higher Order Component
 
+styled-system includes a higher order component to add style props to any component.
+
 ```jsx
@@ -97,3 +139,3 @@ import { hoc } from 'styled-system'
 ```jsx
-<Box p={2} />
+<Box w={[ 1, 1/2 ]} p={2} />
 ```
@@ -103,4 +145,12 @@
 
+styled-system uses a mobile-first responsive approach,
+where any value set works from that breakpoint and wider.
+The default set of breakpoints aims to cover a wide range of devices from mobile to desktop.
+Breakpoints can be customized using styled-components' [ThemeProvider](#configuration).
+
 ```js
-[ '40em', '52em', '64em' ]
+[ 40, 52, 64 ]
+// @media screen and (min-width: 40em)
+// @media screen and (min-width: 52em)
+// @media screen and (min-width: 64em)
 ```
@@ -110,2 +160,7 @@
 
+Using a typographic scale helps create visual rhythm and reduces the
+number of decisions needed when designing UI.
+Styled system uses a modular scale that covers most of a UI's needs,
+but it can be customized with styled-components' [ThemeProvider](#configuration).
+
 ```js
@@ -117,2 +172,6 @@ [ 12, 14, 16, 20, 24, 32, 48, 64, 72 ]
 
+Using a scale for spacing helps ensure elements line up, even when nested inside one another.
+styled-system uses a spacing scale based on an 8px, powers-of-two grid for margin and padding
+by default and can be customized with styled-components' [ThemeProvider](#configuration).
+
 ```js
@@ -159,16 +218,1 @@ [ 0, 8, 16, 32, 64 ]
 MIT License
-
-<!--
-
-- [x] travis
-- [x] install
-- [x] usage
-- [x] width
-- [x] font-size
-- [ ] space
-- [ ] hoc
-- [ ] Box
-- [ ] config
-- [ ] related
-
--->

src/space.js

@@ -18,3 +18,3 @@ const {
   const bp = breaks(props)
-  const sc = idx([ 'theme', 'scale' ], props) || scale
+  const sc = idx([ 'theme', 'space' ], props) || scale
 
@@ -21,0 +21,0 @@ return keys.map(key => {

test.js

@@ -181,2 +181,13 @@ import test from 'ava'
 
+test('space can be configured with a theme', t => {
+  const a = space({ theme, m: 1 })
+  const b = space({ theme, m: 2 })
+  const c = space({ theme, m: 3 })
+  const d = space({ theme, m: 4 })
+  t.is(a, 'margin: 6px;')
+  t.is(b, 'margin: 12px;')
+  t.is(c, 'margin: 18px;')
+  t.is(d, 'margin: 24px;')
+})
+
 test('width returns percentage widths', t => {
@@ -245,1 +256,23 @@ const a = width({ width: 1/2 })
 })
+
+test('fontSize can be configured with a theme', t => {
+  const a = fontSize({ theme, f: 0 })
+  const b = fontSize({ theme, f: 1 })
+  const c = fontSize({ theme, f: 2 })
+  const d = fontSize({ theme, f: 3 })
+  const e = fontSize({ theme, f: 4 })
+  const f = fontSize({ theme, f: 5 })
+  t.is(a, 'font-size: 12px;')
+  t.is(b, 'font-size: 16px;')
+  t.is(c, 'font-size: 18px;')
+  t.is(d, 'font-size: 24px;')
+  t.is(e, 'font-size: 36px;')
+  t.is(f, 'font-size: 72px;')
+})
+
+test('breakpoints can be configured with a theme', t => {
+  const a = space({ theme, m: [ 1, 2, 3, 4 ] })
+  t.regex(a, /min\-width:\s32em/)
+  t.regex(a, /min\-width:\s48em/)
+  t.regex(a, /min\-width:\s64em/)
+})

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

22766

increased by17.37%

Lines of code

606

increased by6.13%

Number of lines in readme file

212

increased by26.19%

Worsened metrics

Dev dependency count

16

increased by45.45%

Number of package files

23

decreased by-4.17%

No dependency changes