Skip to content

Commit 81900c5

Browse files
jacobsfletchjacobsfletch
committed
builds static demo
- deprecates minify-css-string - exports production Webpack config as array - writes demo config into production Webpack - drills files array in package.json - adds --host 0.0.0.0 to htmlDevServer config - revises ./src/README.md
1 parent f339b4c commit 81900c5

10 files changed

+125
-58
lines changed

‎README.md

+49-50
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44

55
# React CSS Grid
66

7-
A grid for React projects, based on [CSS Grid Layout](https://www.w3.org/TR/css-grid-1/).
7+
Highlights
88

99
## Quick Start
1010

1111
### Installation
1212

1313
```bash
14+
$ npm i @trbl/react-css-grid
15+
$ # or
1416
$ yarn add @trbl/react-css-grid
1517
```
1618

@@ -20,65 +22,62 @@ $ yarn add @trbl/react-css-grid
2022
import React from 'react';
2123
import { GridProvider, Grid, Cell } from '@trbl/react-css-grid';
2224

23-
const App = () => {
24-
return (
25-
<GridProvider
26-
hCount={12}
27-
hGap="columnWidth"
28-
vGap="10px"
29-
breakpoints={{
30-
xs: 350,
31-
s: 576,
32-
m: 768,
33-
l: 992,
34-
xl: 1200,
35-
}}
36-
>
37-
<Grid>
38-
<Cell hSpan={6}>
39-
...
40-
</Cell>
41-
<Cell
42-
hSpan={10}
43-
hStart={2}
44-
hSpanL={12}
45-
hStartL={1}
46-
hSpanS={6}
47-
>
48-
<Grid>
49-
<Cell
50-
hSpan={5}
51-
hSpanL={6}
52-
>
53-
...
54-
</Cell>
55-
<Cell
56-
hSpan={5}
57-
hSpanL={6}
58-
>
59-
...
60-
</Cell>
61-
</Grid>
62-
</Cell>
63-
</Grid>
64-
</GridProvider>
65-
)
66-
}
25+
const App = () => (
26+
<GridProvider
27+
hCount={12}
28+
hGap="columnWidth"
29+
vGap="10px"
30+
breakpoints={{
31+
xs: 350,
32+
s: 576,
33+
m: 768,
34+
l: 992,
35+
xl: 1200,
36+
}}
37+
>
38+
<Grid>
39+
<Cell hSpan={6}>
40+
...
41+
</Cell>
42+
<Cell
43+
hSpan={10}
44+
hStart={2}
45+
hSpanL={12}
46+
hStartL={1}
47+
hSpanS={6}
48+
>
49+
<Grid>
50+
<Cell
51+
hSpan={5}
52+
hSpanL={6}
53+
>
54+
...
55+
</Cell>
56+
<Cell
57+
hSpan={5}
58+
hSpanL={6}
59+
>
60+
...
61+
</Cell>
62+
</Grid>
63+
</Cell>
64+
</Grid>
65+
</GridProvider>
66+
)
6767
```
6868

69-
## Demo
69+
For working examples, see the [demo app](./demo/App.demo.js).
7070

71-
To demo locally, clone the repo and
71+
## Demo
7272

7373
```bash
74+
$ git clone [email protected]:trouble/react-css-grid.git
7475
$ yarn
7576
$ yarn dev
7677
$ open http://localhost:3000
7778
```
7879

79-
## Documentation
80-
81-
All available props can be found via the references below:
80+
## API
8281

8382
- [Cell](./src/Cell/README.md)
8483
- [Grid](./src/Grid/README.md)

‎dist/build.bundle.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/build.bundle.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/demo.bundle.js

+31
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/demo.bundle.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<title>React CSS Grid</title>
4+
</head>
5+
<body>
6+
<noscript>Enable JavaScript</noscript>
7+
<div id="root"></div>
8+
<script type="text/javascript" src="demo.bundle.js"></script></body>
9+
</html>

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"scripts": {
1818
"build": "yarn lint && yarn test && webpack --config webpack.production.config.js",
1919
"dev": "webpack-dev-server --hot --inline --config webpack.development.config.js",
20+
"netlify": "yarn lint && yarn test && webpack --config webpack.netlify.config.js",
2021
"lint": "eslint .",
2122
"test": "jest"
2223
},
@@ -26,7 +27,6 @@
2627
},
2728
"dependencies": {
2829
"@trbl/react-html-element": "^1.0.3",
29-
"minify-css-string": "^1.0.0",
3030
"prop-types": "^15.7.2"
3131
},
3232
"devDependencies": {
@@ -67,6 +67,7 @@
6767
}
6868
},
6969
"files": [
70-
"dist"
70+
"dist/build.bundle.js",
71+
"dist/build.bundle.js.map"
7172
]
7273
}

‎src/GlobalStyles/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import minifyCssString from 'minify-css-string';
43
import generateGridStyles from './generateGridStyles';
54
import generateCellStyles from './generateCellStyles';
65

@@ -20,7 +19,7 @@ const GlobalStyles = (props) => {
2019
const styles = gridStyles.concat(cellStyles);
2120

2221
return (
23-
<style dangerouslySetInnerHTML={{ __html: minifyCSS ? minifyCssString(styles) : styles }} />
22+
<style dangerouslySetInnerHTML={{ __html: minifyCSS ? styles.replace(/\n/g, '').replace(/\s\s+/g, ' ') : styles }} />
2423
);
2524
};
2625

‎webpack.development.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,6 @@ module.exports = {
3636
],
3737
devServer: {
3838
port: 3000,
39+
host: '0.0.0.0',
3940
},
4041
};

‎webpack.production.config.js

+28-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const path = require('path');
2+
const HtmlWebPackPlugin = require('html-webpack-plugin');
23

3-
module.exports = {
4+
module.exports = [{
45
devtool: 'source-map',
56
mode: 'production',
67
entry: './src/index.js',
@@ -19,6 +20,31 @@ module.exports = {
1920
],
2021
},
2122
externals: {
23+
'@trbl/react-html-element': '@trbl/react-html-element',
24+
'prop-types': 'prop-types',
2225
react: 'react',
26+
'react-dom': 'react-dom',
2327
},
24-
};
28+
}, {
29+
devtool: 'source-map',
30+
mode: 'production',
31+
entry: './demo/index.js',
32+
output: {
33+
filename: 'demo.bundle.js',
34+
path: path.resolve(__dirname, 'dist'),
35+
},
36+
module: {
37+
rules: [
38+
{
39+
test: /\.(js|jsx)$/,
40+
exclude: /node_modules/,
41+
loaders: ['babel-loader'],
42+
},
43+
],
44+
},
45+
plugins: [
46+
new HtmlWebPackPlugin({
47+
template: 'demo/index.html',
48+
}),
49+
],
50+
}];

0 commit comments

Comments
 (0)