🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
griditize - npm Package Compare versions
Comparing version 1.0.0 to 2.0.0
| { | ||
| "name": "griditize", | ||
| "version": "1.0.0", | ||
| "description": "A small set of semantic React components that build grids", | ||
| "homepage": "https://github.com/devanb/griditize", | ||
| "homepage": "https://github.com/DevanB/griditize", | ||
| "main": "dist/index.js", | ||
@@ -13,6 +12,6 @@ "author": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/devanb/griditize.git" | ||
| "url": "https://github.com/DevanB/griditize.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/devanb/griditize/issues" | ||
| "url": "https://github.com/DevanB/griditize/issues" | ||
| }, | ||
@@ -22,8 +21,17 @@ "keywords": [ | ||
| "flexbox", | ||
| "react" | ||
| "react", | ||
| "sematic" | ||
| ], | ||
| "files": [ | ||
| "dist", | ||
| "README.md", | ||
| "LICENSE" | ||
| ], | ||
| "scripts": { | ||
| "build": "rm -rf ./dist && ./node_modules/.bin/babel --plugins 'transform-es2015-modules-umd' src --ignore tests --out-dir ./dist", | ||
| "commit": "git-cz", | ||
| "prebuild": "rimraf dist", | ||
| "build": "babel --plugins 'transform-es2015-modules-umd' --out-dir dist --ignore tests src", | ||
| "lint": "eslint ./src", | ||
| "lintfix": "eslint ./src --fix" | ||
| "lintfix": "eslint ./src --fix", | ||
| "semantic-release": "semantic-release pre && npm publish && semantic-release post" | ||
| }, | ||
@@ -37,12 +45,9 @@ "license": "MIT", | ||
| "devDependencies": { | ||
| "babel-cli": "^6.7.7", | ||
| "babel-core": "^6.7.7", | ||
| "babel-loader": "^6.2.4", | ||
| "babel-plugin-transform-es2015-modules-umd": "^6.6.5", | ||
| "babel-polyfill": "^6.7.4", | ||
| "babel-preset-es2015": "^6.6.0", | ||
| "babel-preset-react": "^6.5.0", | ||
| "babel-preset-stage-2": "^6.5.0", | ||
| "webpack": "^1.13.0", | ||
| "babel-cli": "6.7.7", | ||
| "babel-eslint": "^6.0.4", | ||
| "babel-plugin-transform-es2015-modules-umd": "6.6.5", | ||
| "babel-preset-es2015": "6.6.0", | ||
| "babel-preset-react": "6.5.0", | ||
| "babel-preset-stage-2": "6.5.0", | ||
| "babel-register": "6.7.2", | ||
| "eslint": "^2.9.0", | ||
@@ -54,9 +59,19 @@ "eslint-config-airbnb": "^8.0.0", | ||
| "eslint-plugin-react": "^5.0.1", | ||
| "babel-eslint": "^6.0.4", | ||
| "chai": "^3.5.0", | ||
| "enzyme": "^2.2.0", | ||
| "mocha": "^2.4.5", | ||
| "react": "^15.0.2" | ||
| } | ||
| } | ||
| "rimraf": "2.5.2", | ||
| "semantic-release": "4.3.5", | ||
| "webpack": "1.13.0" | ||
| }, | ||
| "babel": { | ||
| "presets": [ | ||
| "es2015", | ||
| "stage-2", | ||
| "react" | ||
| ] | ||
| }, | ||
| "config": { | ||
| "commitizen": { | ||
| "path": "node_modules/cz-conventional-changelog" | ||
| } | ||
| }, | ||
| "version": "2.0.0" | ||
| } |
183
README.md
@@ -8,3 +8,3 @@ # Griditize | ||
| 3. `Row` | ||
| 4. `Col` | ||
| 4. `Column` | ||
| 5. Usage | ||
@@ -15,20 +15,191 @@ 6. Contributing | ||
| ### Overview | ||
| Griditize is a set of React components used to build semantic grids. At the heart, Griditize wraps [Flexbox grid](http://www.flexboxgrid.com), and exposes all of its API through props on the three components. Below you will find documentation on the three components and each prop you can pass in that component, as well as explanation of what prop does. Below are the four breakpoints that Flexbox grid uses: | ||
| xsmall < 48rem | ||
| small >= 48rem | ||
| medium >= 64rem | ||
| large >= 75rem | ||
| ### `Grid` | ||
| `Grid` is the outermost component, used to note where the grid container begins and ends. `Grid` accepts two options: | ||
| `Grid` is the outermost component, used to denote where the grid container begins and ends. `Grid` accepts two props: | ||
| - `fluid`: used to denote whether the container is a standard 960px wide container or a fluid container. A fluid container expands to the full width of the viewport with minimal padding on either side for aesthetics. | ||
| - `tagName`: HTML element that grid compiles into. Defaults to `div`. | ||
| - `fluid`: (bool) Used to denote whether the container has a left and right auto margin or is a fluid container. A fluid container expands to the full width of the viewport with minimal padding (2rem) on either side for aesthetics. | ||
| - `tagName`: (string) HTML element that grid compiles into. Defaults to `div`. | ||
| ### `Row` | ||
| `Row` is an organizaitonal component, used to denote the vertical flow of columns in the grid. `Row` accepts several props: | ||
| ### `Col` | ||
| - `reverse`: (bool) Reverses the direction of the elements in the row. | ||
| - `start`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Changes the horizontal alignment of elements to the start of the row at the viewport specified. | ||
| - `center`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Changes the horizontal alignment of elements to the center of the row at the viewport specified. | ||
| - `end`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Changes the horizontal alignment of elements to the end of the row at the viewport specified. | ||
| - `top`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Changes the vertical alignment of elements to the top of the row at the viewport specified. | ||
| - `middle`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Changes the vertical alignment of elements to the middle of the row at the viewport specified. | ||
| - `bottom`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Changes the vertical alignment of elements to the bottom of the row at the viewport specified. | ||
| - `around`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Distributes the contents of the row to have equal spacing around each column at the viewport specified. | ||
| - `between`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Distributes the contents of the row to have equal space between each column at the viewport specified. | ||
| - `first`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Reorders to be the first element at the viewport specified. | ||
| - `last`: (`oneOf(['xsmall', 'small', 'medium', 'large'])`) Reorders to be the first element at the viewport specified. | ||
| - `tagName`: (string) HTML element that row compiles into. Defaults to `div`. | ||
| ### `Column` | ||
| `Column` is the component used to denote how wide you want a column to be in a row, how offset that column should be in that row, and the direction in which the content flows in the column. `Column` accepts several props: | ||
| - `xsmall`: (`oneOf([number, bool])`) The number of columns wide at the xsmall viewport, or a boolean to tell the column to auto size it's width at the xsmall viewport. | ||
| - `small`: (`oneOf([number, bool])`) The number of columns wide at the small viewport, or a boolean to tell the column to auto size it's width at the small viewport. | ||
| - `medium`: (`oneOf([number, bool])`) The number of columns wide at the medium viewport, or a boolean to tell the column to auto size it's width at the medium viewport. | ||
| - `large`: (`oneOf([number, bool])`) The number of columns wide at the large viewport, or a boolean to tell the column to auto size it's width at the large viewport. | ||
| - `xsmallOffset`: (number) The number of columns to offset on a xsmall viewport. | ||
| - `smallOffset`: (number) The number of columns to offset on a small viewport. | ||
| - `mediumOffset`: (number) The number of columns to offset on a medium viewport. | ||
| - `largeOffset`: (number) The number of columns to offset on a large viewport. | ||
| - `reverse`: (bool) Reverses the direction of the elements in the column. | ||
| - `tagName`: (string) HTML element that col compiles into. Defaults to `div`. | ||
| ### Usage | ||
| #### Standard Grid | ||
| ``` | ||
| <Grid> | ||
| <Row> | ||
| <Column xsmall={12} small={8} medium={6} large={4}> | ||
| <span>Content</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| #### Offset Column | ||
| ``` | ||
| <Grid> | ||
| <Row> | ||
| <Column xsmall={9} xsmallOffset={3}> | ||
| <span>offset</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| #### Auto Width Column | ||
| ``` | ||
| <Grid> | ||
| <Row> | ||
| <Column xsmall small> | ||
| <span>Auto sized at xsmall and small viewports</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| #### Nested Grids | ||
| ``` | ||
| <Grid> | ||
| <Row> | ||
| <Column xsmall> | ||
| <span>Auto sized</span> | ||
| <Row> | ||
| <Column xsmall> | ||
| <span>Auto sized and nested</span> | ||
| </Column> | ||
| </Row> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| #### Alignment | ||
| ``` | ||
| <Grid> | ||
| <Row start="large" center="xsmall" end="small"> | ||
| <Column xsmall={6}> | ||
| <span>Starts at large, center at xsmall, ends at small viewport</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| ``` | ||
| <Grid> | ||
| <Row middle="xsmall"> | ||
| <Column xsmall={6}> | ||
| <span>Centered in middle of row on xsmall viewports</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| #### Distribution | ||
| ``` | ||
| <Grid> | ||
| <Row around="xsmall"> | ||
| <Column xsmall={2}> | ||
| <span>Equal</span> | ||
| </Column> | ||
| <Column xsmall={2}> | ||
| <span>Padding</span> | ||
| </Column> | ||
| <Column xsmall={2}> | ||
| <span>Around</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| ``` | ||
| <Grid> | ||
| <Row between="xsmall"> | ||
| <Column xsmall={2}> | ||
| <span>Equal</span> | ||
| </Column> | ||
| <Column xsmall={2}> | ||
| <span>Padding</span> | ||
| </Column> | ||
| <Column xsmall={2}> | ||
| <span>Between</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| #### Reversing | ||
| ``` | ||
| <Grid> | ||
| <Row reverse> | ||
| <Column xsmall={4}> | ||
| <span>1</span> | ||
| </Column> | ||
| <Column xsmall={4}> | ||
| <span>2</span> | ||
| </Column> | ||
| <Column xsmall={4}> | ||
| <span>3</span> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ``` | ||
| ### Contributing | ||
| ### License | ||
| The MIT License (MIT) | ||
@@ -35,0 +206,0 @@ Copyright (c) 2016 Devan Beitel. <devanb.us> |
New alerts
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
10135
24.51%- Dev dependency count
16
-20%- Number of lines in readme file
224
322.64%Worsened metrics
- Number of package files
3
-62.5%- Lines of code
0
-100%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes