Skip to content

Commit de1c6f3

Browse files
jacobsfletchjacobsfletch
committed
updates README.md and housekeeps demo
1 parent a0041b1 commit de1c6f3

File tree

8 files changed

+127
-85
lines changed

8 files changed

+127
-85
lines changed

‎README.md

+61-28
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,67 @@
1-
# React CSS Grid
2-
3-
## Source Code
4-
5-
### Abstract
6-
7-
This project leverages React's Context API as well as the newly instituted CSS Grid Layout specification in a way that allows for an elegantly abstracted horizontal column system, complete with nested-column support.
8-
9-
### Component Composition
10-
11-
```javascript
12-
<GridProvider numberOfColumns={14} gutterSize={'10px' || 'columnWidth'}>
13-
<Row>
14-
<Column span={4}>
15-
<Row>
16-
<Column span={2} />
17-
<Column span={2} />
18-
</Row>
19-
</Column>
20-
<Column span={10} />
21-
</Row>
1+
# React CSS Grid ![Beta](https://img.shields.io/badge/release-alpha-ff4553)
2+
3+
## Abstract
4+
5+
This project leverages React's Context API with the CSS Grid Layout specification in a way that allows for a pleasingly simple-to-use horizontal grid system, complete with breakpoints and nested-grid support.
6+
7+
## Component Composition
8+
9+
```jsx
10+
<GridProvider
11+
hGap="columnWidth"
12+
vGap="10px"
13+
breakpoints={{
14+
xs: 350,
15+
s: 576,
16+
m: 768,
17+
l: 992,
18+
xl: 1200,
19+
}}
20+
classPrefix="demo"
21+
scopeCSSTo="#grid-demo"
22+
>
23+
<div id="grid-demo">
24+
<Grid>
25+
<Cell
26+
hStart={2}
27+
hSpan={4}
28+
hStartL={1}
29+
hSpanS={6}
30+
>
31+
<Grid>
32+
<Cell
33+
hSpan={2}
34+
hSpanS={3}
35+
>
36+
...
37+
</Cell>
38+
<Cell
39+
hSpan={2}
40+
hSpanS={3}
41+
>
42+
...
43+
</Cell>
44+
</Grid>
45+
</Cell>
46+
<Cell
47+
hSpan={8}
48+
hSpanL={9}
49+
hSpanS={8}
50+
>
51+
...
52+
</Cell>
53+
</Grid>
54+
</div>
2255
</GridProvider>
2356
```
2457

25-
### Component Documentation
58+
## Component Documentation
2659

2760
The source components in their raw form are found in the `src` directory. These are all batch exported from the top-level `index.js` so that they can be easily accessed via import.
2861

29-
[Grid Row](/src/Row/README.md)
30-
[Grid Column](/src/Column/README.md)
31-
[Grid Provider](/src/GridProvider/README.md)
62+
- [Grid ](/src/Grid/README.md)
63+
- [Cell](/src/Cell/README.md)
64+
- [Grid Provider](/src/GridProvider/README.md)
3265

3366
## Environment
3467

@@ -40,10 +73,10 @@ The entrypoint for the production bundle is `/dist/build.bundle.js`, as defined
4073

4174
Generating this production bundle is defined in `webpack.production.config.js`, one of two custom webpack configurations defined at the top of this repo. It simply processes all of the `.js` files within the `src` directory through the `babel-loader` transpiler and into the `dist` directory.
4275

43-
- tldr: `npm run build`.
76+
- tldr: `npm run build`
4477

4578
### Development
4679

47-
The other webpack configuration is `webpack.development.config.js` which does a few things differently -- compilation happens from the `demo` directory as opposed to the `src` directory. It then will spin up `webpack-dev-server`, which serves a compiled and transpiled build _in memory_, with hot-reloading enabled.
80+
The other webpack configuration is `webpack.development.config.js` which does a few things differently -- compilation happens from the `demo` directory as opposed to the `src` directory directly. It then will spin up `webpack-dev-server`, which serves a compiled and transpiled build _in memory_, with hot-reloading enabled.
4881

49-
- tldr: `npm run dev`.
82+
- tldr: `npm run dev`

‎demo/App.demo.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Fragment } from 'react';
2+
import GridDemo1 from './Grid1.demo';
3+
import GridDemo2 from './Grid2.demo';
4+
import GridDemo3 from './Grid3.demo';
5+
6+
const App = () => {
7+
return (
8+
<Fragment>
9+
<div style={{ border: '1px solid', padding: '10px', marginBottom: '10px' }}>
10+
<GridDemo3 />
11+
</div>
12+
<div style={{ border: '1px solid', padding: '10px', marginBottom: '10px' }}>
13+
<GridDemo1 />
14+
</div>
15+
<div style={{ border: '1px solid', padding: '10px' }}>
16+
<GridDemo2 />
17+
</div>
18+
</Fragment>
19+
);
20+
};
21+
22+
export default App;

‎demo/App.js

-16
This file was deleted.

‎demo/GridExample1.js renamed to ‎demo/Grid1.demo.js

+14-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import React from 'react';
22
import { Grid, Cell, GridProvider } from '../src';
33

4-
const GridExample1 = () => {
4+
const GridDemo1 = () => {
55
return (
6-
<div
7-
id="grid-example-1"
8-
style={{ border: '1px solid', padding: '10px', marginBottom: '10px' }}
9-
>
10-
<p><b>14 column grid example</b></p>
6+
<div id="grid-demo-1">
7+
<p><b>14 column grid demo</b></p>
118
<p>To demonstrate a straightforward grid with nesting</p>
129
<hr />
1310
<p>props:</p>
1411
<code>
15-
<p>s: 576</p>
16-
<p>m: 768</p>
17-
<p>l: 992</p>
18-
<p>xl: 1200</p>
12+
<p>hCount: 14</p>
1913
<p>hGap: 10px</p>
2014
<p>vGap: 10px</p>
21-
<p>scopeCSSTo: &ldquo;#grid-14-col-example&rdquo;</p>
15+
<p>breakpoints:</p>
16+
<ul>
17+
<li>s: 576</li>
18+
<li>m: 768</li>
19+
<li>l: 992</li>
20+
<li>xl: 1200</li>
21+
</ul>
22+
<p>scopeCSSTo: &ldquo;#grid-14-col-demo&rdquo;</p>
2223
</code>
2324
<GridProvider
2425
hCount={14}
@@ -31,7 +32,7 @@ const GridExample1 = () => {
3132
l: 992,
3233
xl: 1200,
3334
}}
34-
scopeCSSTo="#grid-example-1"
35+
scopeCSSTo="#grid-demo-1"
3536
>
3637
<div style={{ marginBottom: '10px', border: '1px solid' }}>
3738
<Grid className="custom-grid-class">
@@ -106,4 +107,4 @@ const GridExample1 = () => {
106107
);
107108
};
108109

109-
export default GridExample1;
110+
export default GridDemo1;

‎demo/GridExample2.js renamed to ‎demo/Grid2.demo.js

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import React from 'react';
22
import { Grid, Cell, GridProvider } from '../src';
33

4-
const GridExample1 = () => {
4+
const GridDemo2 = () => {
55
return (
6-
<div
7-
id="grid-example-2"
8-
style={{ border: '1px solid', padding: '10px', marginBottom: '10px' }}
9-
>
6+
<div id="grid-demo-2">
107
<p><b>12 column grid with gutter equal to the column width:</b></p>
118
<p>To demonstrate a nested grid that behaves differently across screen sizes</p>
129
<hr />
1310
<p>props:</p>
1411
<code>
15-
<p>s: 576</p>
16-
<p>m: 768</p>
17-
<p>l: 992</p>
18-
<p>xl: 1200</p>
12+
<p>hCount: 12</p>
1913
<p>hGap: columnWidth</p>
2014
<p>vGap: 10px</p>
21-
<p>scopeCSSTo: &ldquo;#grid-12-col-example&rdquo;</p>
15+
<p>breakpoints:</p>
16+
<ul>
17+
<li>s: 576</li>
18+
<li>m: 768</li>
19+
<li>l: 992</li>
20+
<li>xl: 1200</li>
21+
</ul>
22+
<p>scopeCSSTo: &ldquo;#grid-12-col-demo&rdquo;</p>
2223
</code>
2324
<GridProvider
2425
hCount={12}
@@ -32,7 +33,7 @@ const GridExample1 = () => {
3233
xl: 1200,
3334
}}
3435
minifyCSS={false}
35-
scopeCSSTo="#grid-example-2"
36+
scopeCSSTo="#grid-demo-2"
3637
>
3738
<div style={{ border: '1px solid', marginBottom: '10px' }}>
3839
<Grid>
@@ -133,4 +134,4 @@ const GridExample1 = () => {
133134
);
134135
};
135136

136-
export default GridExample1;
137+
export default GridDemo2;

‎demo/GridExample3.js renamed to ‎demo/Grid3.demo.js

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import React from 'react';
22
import { Grid, Cell, GridProvider } from '../src';
33

4-
const GridExample3 = () => {
4+
const GridDemo3 = () => {
55
return (
6-
<div
7-
id="grid-example-3"
8-
style={{ border: '1px solid', padding: '10px', marginBottom: '10px' }}
9-
>
6+
<div id="grid-demo-3">
107
<p><b>14 column grid grid with custom class name</b></p>
118
<p>Abstract: Lorem ipsum</p>
129
<hr />
1310
<p>props:</p>
1411
<code>
15-
<p>s: 576</p>
16-
<p>m: 768</p>
17-
<p>l: 992</p>
18-
<p>xl: 1200</p>
12+
<p>hCount: 14</p>
1913
<p>hGap: 10px</p>
2014
<p>vGap: 10px</p>
21-
<p>scopeCSSTo: &ldquo;#grid-12-col-example&rdquo;</p>
15+
<p>breakpoints:</p>
16+
<ul>
17+
<li>s: 576</li>
18+
<li>m: 768</li>
19+
<li>l: 992</li>
20+
<li>xl: 1200</li>
21+
</ul>
22+
<p>scopeCSSTo: &ldquo;#grid-12-col-demo&rdquo;</p>
2223
<p>classPrefix: &ldquo;custom&rdquo;</p>
2324
</code>
2425
<GridProvider
@@ -33,7 +34,7 @@ const GridExample3 = () => {
3334
xl: 1200,
3435
}}
3536
minifyCSS={false}
36-
scopeCSSTo="#grid-example-3"
37+
scopeCSSTo="#grid-demo-3"
3738
classPrefix="custom"
3839
>
3940
<div style={{ border: '1px solid' }}>
@@ -144,4 +145,4 @@ const GridExample3 = () => {
144145
);
145146
};
146147

147-
export default GridExample3;
148+
export default GridDemo3;

‎demo/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
22
import { render } from 'react-dom';
3-
import App from './app.js';
3+
import App from './App.demo';
44

5-
render(<App />, document.getElementById('root'));
5+
render(<App />, document.getElementById('root'));

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"prop-types": "^15.7.2",
1515
"react": "^16.10.1",
1616
"styled-components": "^4.4.0",
17-
"minify-css-string": "^1.0.0"
17+
"minify-css-string": "^1.0.0",
18+
"react-dom": "npm:@hot-loader/react-dom"
1819
},
1920
"devDependencies": {
2021
"@babel/core": "^7.6.2",
@@ -28,7 +29,6 @@
2829
"eslint-plugin-import": "^2.17.2",
2930
"eslint-plugin-jsx-a11y": "^6.2.1",
3031
"eslint-plugin-react": "^7.12.4",
31-
"react-dom": "npm:@hot-loader/react-dom",
3232
"react-hot-loader": "^4.12.14",
3333
"webpack": "^4.41.0",
3434
"webpack-cli": "^3.3.9",

0 commit comments

Comments
 (0)