react-grid-system - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

package.json

 {
   "name": "react-grid-system",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "A pure JS bootstrap-like grid system for React.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

README.md

 # react-grid-system
-A pure JS bootstrap-like grid system for React.
+A pure JS bootstrap-like responsive grid system for React.
 
@@ -9,14 +9,38 @@ [![npm version](https://badge.fury.io/js/react-grid-system.svg)](https://badge.fury.io/js/react-grid-system)
 ```
-npm i react-grid-system --save
+npm install react-grid-system --save
 ```
 
-## Usage
+## Responsive grid components
 
-Examples and documentation on how to use `react-grid-system` can be found at the GitHub pages:
-https://zoover.github.io/react-grid-system/
+Three components are provided for creating responsive grids: `Container`, `Row`, and `Col`.
 
+An example on how to use these:
+
+```javascript
+<Container>
+  <Row>
+    <Col xs={12} md={8}>xs=12 md=8</Col>
+    <Col xs={6} md={4}>xs=6 md=4</Col>
+  </Row>
+</Container>
+```
+
+## Responsive utilities
+
+Three components are provided for creating responsive grids: `Visible` and `Hidden`.
+
+An example on how to use these:
+
+```javascript
+<Visible xs sm><div>Visible on extra small and small</div></Visible>
+<Visible md lg><div>Visible on medium and large</div></Visible>
+```
+
+## Documentation
+
+Live examples and documentation can be found at the GitHub pages: https://zoover.github.io/react-grid-system/
+
 ## Server-side rendering
 
-In case you're also using React components in server-side rendering, every component in this library has two context types properties which can be used for this:
-`phone` and `tablet`. Both are booleans. The server can use the user-agent to determine whether the client is on a phone or tablet, and set the child context accordingly. The components can then use this context to render properly.
+In case you're also using React components in server-side rendering, every component in this library has two context types properties which can be used for this: `phone` and `tablet`. Both are booleans. The server can use the user-agent to determine whether the client is on a phone or tablet, and set the child context accordingly. The components will then use this context to render properly.
 
@@ -23,0 +47,0 @@ For more information on using the user-agent to determine the device, see for example https://github.com/hgoebl/mobile-detect.js.

src/grid/Readme.md

@@ -0,1 +1,11 @@
+Github: [https://github.com/zoover/react-grid-system](https://github.com/zoover/react-grid-system)
+
+### Usage
+
+`
+npm install react-grid-system --save
+`
+
+### Grid aspects
+
 See how aspects of the grid system work across multiple devices with a handy table.
@@ -2,0 +12,0 @@

styleguide.config.js

@@ -7,3 +7,3 @@ const path = require('path');
     {
-      name: 'Grid',
+      name: 'Responsive grid',
       components: './src/grid/**/index.js',
@@ -10,0 +10,0 @@ content: './src/grid/Readme.md',

No alert changes

Improved metrics

Total package byte prevSize

39579

increased by1.99%

Number of lines in readme file

49

increased by96%

No dependency changes