react-grid-system - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

build/grid/Col/style.js

@@ -43,2 +43,4 @@ 'use strict';
     position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
     paddingLeft: theGutterWidth / 2 + 'px',
@@ -50,6 +52,4 @@ paddingRight: theGutterWidth / 2 + 'px',
   if (debug) {
-    styles.paddingTop = '10px';
-    styles.paddingBottom = '10px';
-    styles.border = '1px solid rgba(86,86,86,.2)';
-    styles.background = 'rgba(86,86,86,.15)';
+    styles.outline = '1px solid silver';
+    styles.background = 'rgba(0,0,0,.05)';
   }
@@ -56,0 +56,0 @@

build/grid/Row/style.js

@@ -34,4 +34,3 @@ 'use strict';
   if (debug) {
-    styles.marginBottom = '15px';
-    styles.background = '#f5f5f5';
+    styles.background = 'rgba(128,128,128,.05)';
   }
@@ -38,0 +37,0 @@

package.json

 {
   "name": "react-grid-system",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

src/grid/Col/style.js

@@ -26,2 +26,4 @@ import { defaultGutterWidth, normalizeColumnWidth, screenClasses } from '../../utils';
     position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
     paddingLeft: `${theGutterWidth / 2}px`,
@@ -34,6 +36,4 @@ paddingRight: `${theGutterWidth / 2}px`,
   if (debug) {
-    styles.paddingTop = '10px';
-    styles.paddingBottom = '10px';
-    styles.border = '1px solid rgba(86,86,86,.2)';
-    styles.background = 'rgba(86,86,86,.15)';
+    styles.outline = '1px solid silver';
+    styles.background = 'rgba(0,0,0,.05)';
   }
@@ -40,0 +40,0 @@

src/grid/Readme.md

@@ -10,3 +10,3 @@ A no CSS Bootstrap-like responsive grid system for React.
 ```
-<Container fluid>
+<Container fluid style={{ lineHeight: '32px' }}>
   <Row debug>
@@ -16,2 +16,3 @@ <Col debug>1 of 2</Col>
   </Row>
+  <br />
   <Row debug>
@@ -28,3 +29,3 @@ <Col debug>1 of 3</Col>
 ```
-<Container fluid>
+<Container fluid style={{ lineHeight: '32px' }}>
   <Row debug>
@@ -44,2 +45,3 @@ <Col md={1} debug>md=1</Col>
   </Row>
+  <br />
   <Row debug>
@@ -49,2 +51,3 @@ <Col md={8} debug>md=8</Col>
   </Row>
+  <br />
   <Row debug>
@@ -55,2 +58,3 @@ <Col md={4} debug>md=4</Col>
   </Row>
+  <br />
   <Row debug>
@@ -66,3 +70,3 @@ <Col md={6} debug>md=6</Col>
 ```
-<Container fluid>
+<Container fluid style={{ lineHeight: '32px' }}>
   <Row debug>
@@ -72,2 +76,3 @@ <Col xs={12} md={8} debug>xs=12 md=8</Col>
   </Row>
+  <br />
   <Row debug>
@@ -78,2 +83,3 @@ <Col xs={6} md={4} debug>xs=6 md=4</Col>
   </Row>
+  <br />
   <Row debug>
@@ -89,3 +95,3 @@ <Col xs={6} debug>xs=6</Col>
 ```
-<Container fluid>
+<Container fluid style={{ lineHeight: '32px' }}>
   <Row debug>
@@ -102,4 +108,4 @@ <Col xs={9} debug>xs=9</Col>
 ```
-<Container fluid>
-  <Row align="start" style={{ height: '100px' }} debug>
+<Container fluid style={{ lineHeight: '32px' }}>
+  <Row align="start" style={{ height: '75px' }} debug>
     <Col debug>1 of 3</Col>
@@ -109,3 +115,4 @@ <Col debug>2 of 3</Col>
   </Row>
-  <Row align="center" style={{ height: '100px' }} debug>
+  <br />
+  <Row align="center" style={{ height: '75px' }} debug>
     <Col debug>1 of 3</Col>
@@ -115,3 +122,4 @@ <Col debug>2 of 3</Col>
   </Row>
-  <Row align="end" style={{ height: '100px' }} debug>
+  <br />
+  <Row align="end" style={{ height: '75px' }} debug>
     <Col debug>1 of 3</Col>
@@ -124,13 +132,18 @@ <Col debug>2 of 3</Col>
 
-### Example: Row growing
+### Example: Offsetting columns
+
 ```
-<Container fluid style={{ height: '300px' }}>
+<Container fluid style={{ lineHeight: '32px' }}>
   <Row debug>
-    <Col debug>Row 1 of 3</Col>
+    <Col md={4} debug>md=4</Col>
+    <Col md={4} offset={{ md: 4 }} debug>md=4 offset-md=4</Col>
   </Row>
-  <Row grow debug>
-    <Col debug>Row 2 of 3</Col>
+  <br />
+  <Row debug>
+    <Col md={3} offset={{ md: 3 }} debug>md=3 offset-md=3</Col>
+    <Col md={3} offset={{ md: 3 }} debug>md=3 offset-md=3</Col>
   </Row>
+  <br />
   <Row debug>
-    <Col debug>Row 3 of 3</Col>
+    <Col md={6} offset={{ md: 3 }} debug>md=6 offset-md=3</Col>
   </Row>
@@ -140,17 +153,18 @@ </Container>
 
-### Example: Responsive column resets
+### Example: Nesting columns
 
 ```
-<Container fluid>
+<Container fluid style={{ lineHeight: '32px' }}>
   <Row debug>
-    <Col xs={6} sm={3} debug>
-      xs=6 sm=3<br />
-      Resize your viewport or check it out on your phone for an example.
+    <Col sm={9} debug>
+      Level 1: sm=9
+      <Row>
+        <Col xs={8} sm={6} debug>
+          Level 2: xs=8 sm=6
+        </Col>
+        <Col xs={4} sm={6} debug>
+          Level 2: xs=4 sm=6
+        </Col>
+      </Row>
     </Col>
-    <Col xs={6} sm={3} debug>xs=6 sm=3</Col>
-
-    <ClearFix xs />
-
-    <Col xs={6} sm={3} debug>xs=6 sm=3</Col>
-    <Col xs={6} sm={3} debug>xs=6 sm=3</Col>
   </Row>
@@ -160,45 +174,32 @@ </Container>
 
-### Example: Offsetting columns
+### Example: Column ordering
 
 ```
-<Container fluid>
+<Container fluid style={{ lineHeight: '32px' }}>
   <Row debug>
-    <Col md={4} debug>md=4</Col>
-    <Col md={4} offset={{ md: 4 }} debug>md=4 offset-md=4</Col>
+    <Col md={9} push={{ md: 3 }} debug>md=9 push-md=3</Col>
+    <Col md={3} pull={{ md: 9 }} debug>md=3 pull-md=9</Col>
   </Row>
+</Container>
+```
+
+### Example: Row growing
+```
+<Container fluid style={{ height: '300px', lineHeight: '32px' }}>
   <Row debug>
-    <Col md={3} offset={{ md: 3 }} debug>md=3 offset-md=3</Col>
-    <Col md={3} offset={{ md: 3 }} debug>md=3 offset-md=3</Col>
+    <Col debug>
+      Normal row
+    </Col>
   </Row>
+  <Row grow debug>
+    <Col debug>
+      Grown row
+    </Col>
+  </Row>
   <Row debug>
-    <Col md={6} offset={{ md: 3 }} debug>md=6 offset-md=3</Col>
+    <Col debug>
+      Normal row
+    </Col>
   </Row>
 </Container>
 ```
-
-### Example: Nesting columns
-
-```
-<Row debug>
-  <Col sm={9} debug>
-    Level 1: sm=9
-    <Row>
-      <Col xs={8} sm={6} debug>
-        Level 2: xs=8 sm=6
-      </Col>
-      <Col xs={4} sm={6} debug>
-        Level 2: xs=4 sm=6
-      </Col>
-    </Row>
-  </Col>
-</Row>
-```
-
-### Example: Column ordering
-
-```
-<Row debug>
-  <Col md={9} push={{ md: 3 }} debug>md=9 push-md=3</Col>
-  <Col md={3} pull={{ md: 9 }} debug>md=3 pull-md=9</Col>
-</Row>
-```

src/grid/Row/style.js

@@ -21,4 +21,3 @@ import { defaultGutterWidth } from '../../utils';
   if (debug) {
-    styles.marginBottom = '15px';
-    styles.background = '#f5f5f5';
+    styles.background = 'rgba(128,128,128,.05)';
   }
@@ -25,0 +24,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

78122

decreased by-0.01%

Lines of code

1741

decreased by-0.11%

No dependency changes