├── .gitignore
├── README.md
├── app
    ├── components
    │   ├── box
    │   │   ├── index.jsx
    │   │   └── style.scss
    │   └── home
    │   │   ├── index.jsx
    │   │   └── style.scss
    └── index.jsx
├── package.json
├── server.js
├── webpack.config.js
└── www
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | build
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-flexbox-grid-example
2 | 
3 | ###Getting Started
4 | 1. Clone this repository
5 | 2. Run `npm install && npm start`
6 | 3. Visit `0.0.0.0:8080` in your browser
7 | 


--------------------------------------------------------------------------------
/app/components/box/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react';
 2 | import {Col} from 'react-flexbox-grid/lib';
 3 | import box from './style';
 4 | 
 5 | const Box = (props) => {
 6 |   return (
 7 |     <Col {...props}>
 8 |         <div className = {box[props.type || 'box']}>
 9 |           {props.children}
10 |         </div>
11 |     </Col>
12 |   );
13 | };
14 | 
15 | Box.propTypes = {
16 |   type: PropTypes.oneOf(['row', 'container', 'nested', 'large']).isRequired,
17 |   children: PropTypes.node
18 | };
19 | 
20 | export default Box;
21 | 


--------------------------------------------------------------------------------
/app/components/box/style.scss:
--------------------------------------------------------------------------------
 1 | .box {
 2 |   position: relative;
 3 |   box-sizing: border-box;
 4 |   min-height: 1rem;
 5 |   margin-bottom: 0;
 6 |   background: #007FFF;
 7 |   border: 1px solid #FFF;
 8 |   border-radius: 2px;
 9 |   overflow: hidden;
10 |   text-align: center;
11 |   color: #fff;
12 | }
13 | 
14 | .row {
15 |   composes: box;
16 |   margin-bottom: 1rem;
17 | }
18 | 
19 | .container {
20 |   composes: box;
21 |   box-sizing: border-box;
22 |   padding: .5em;
23 | }
24 | 
25 | .nested {
26 |   composes: box;
27 |   background: #036;
28 |   border-color: #007FFF;
29 | }
30 | 
31 | .large {
32 |   composes: box;
33 |   height: 8rem;
34 | }
35 | 
36 | @media only screen and (min-width: 48rem) {
37 | 
38 |   .box {
39 |     padding: 1rem;
40 |   }
41 | 
42 |   .row {
43 |     padding: 1rem;
44 |   }
45 |   .container {
46 |     padding: 1rem;
47 |   }
48 |   .nested {
49 |     padding: 1rem;
50 |   }
51 |   .large {
52 |     padding: 1rem;
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/app/components/home/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Grid, Row} from 'react-flexbox-grid/lib';
 3 | 
 4 | import Box from '../box';
 5 | 
 6 | const Home = () => (
 7 |   <Grid fluid>
 8 |     <Row>
 9 |       <Box type="row" xs={12} sm={3} md={2} lg={1} />
10 |       <Box type="row" xs={6} sm={6} md={8} lg={10} />
11 |       <Box type="row" xs={6} sm={3} md={2} lg={1} />
12 |     </Row>
13 |     <Row>
14 |       <Box type="row" xs={12} sm={3} md={2} lg={1} />
15 |       <Box type="row" xs={12} sm={9} md={10} lg={11} />
16 |     </Row>
17 |     <Row>
18 |       <Box type="row" xs={10} sm={6} md={8} lg={10} />
19 |       <Box type="row" xs={2} sm={6} md={4} lg={2} />
20 |     </Row>
21 |   </Grid>
22 | );
23 | 
24 | export default Home;
25 | 


--------------------------------------------------------------------------------
/app/components/home/style.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roylee0704/react-flexbox-grid-example/b7809913627e32add3af9d3da35fbf40144c5456/app/components/home/style.scss


--------------------------------------------------------------------------------
/app/index.jsx:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import Home from './components/home';
5 | 
6 | ReactDOM.render(<Home />, document.getElementById('app'));
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-flexbox-grid-example",
 3 |   "version": "1.0.0",
 4 |   "description": "Example using react-flexbox-grid",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/roylee0704/react-flexbox-grid-example.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "react-component",
16 |     "flexboxgrid",
17 |     "flexbox",
18 |     "components"
19 |   ],
20 |   "devDependencies": {
21 |     "autoprefixer": "^6.0.3",
22 |     "babel-core": "^6.1.4",
23 |     "babel-eslint": "^4.1.5",
24 |     "babel-loader": "^6.0.1",
25 |     "babel-polyfill": "^6.3.14",
26 |     "babel-plugin-react-transform": "^1.1.1",
27 |     "babel-preset-es2015": "^6.1.4",
28 |     "babel-preset-react": "^6.1.4",
29 |     "classnames": "^2.2.1",
30 |     "cross-env": "^1.0.1",
31 |     "css-loader": "^0.21.0",
32 |     "express": "^4.13.3",
33 |     "extract-text-webpack-plugin": "^0.9.0",
34 |     "flexboxgrid": "^6.3.0",
35 |     "node-sass": "^3.4.1",
36 |     "postcss-loader": "^0.7.0",
37 |     "react": "^15.5.0",
38 |     "react-dom": "^15.5.4",
39 |     "react-flexbox-grid": "^1.0.2",
40 |     "react-transform-catch-errors": "^1.0.0",
41 |     "react-transform-hmr": "^1.0.1",
42 |     "sass-loader": "^3.0.0",
43 |     "style-loader": "^0.13.0",
44 |     "toolbox-loader": "0.0.3",
45 |     "webpack": "^1.12.0",
46 |     "webpack-dev-middleware": "^1.2.0",
47 |     "webpack-hot-middleware": "^2.4.1"
48 |   },
49 |   "author": "roylee0704 <roylee0704@gmail.com> (https://twitter.com/roylee0704)",
50 |   "license": "MIT",
51 |   "bugs": {
52 |     "url": "https://github.com/roylee0704/react-flexbox-grid-example/issues"
53 |   },
54 |   "homepage": "https://github.com/roylee0704/react-flexbox-grid-example#readme"
55 | }


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const express = require('express');
 3 | const webpack = require('webpack');
 4 | const config = require('./webpack.config');
 5 | 
 6 | const app = express();
 7 | const compiler = webpack(config);
 8 | 
 9 | app.use(require('webpack-dev-middleware')(compiler, {
10 |   publicPath: config.output.publicPath,
11 |   stats: {
12 |     colors: true
13 |   }
14 | }));
15 | 
16 | app.use(require('webpack-hot-middleware')(compiler));
17 | 
18 | app.get('*', (req, res) => {
19 |   res.sendFile(path.join(__dirname, './www/index.html'));
20 | });
21 | 
22 | app.listen(8080, '0.0.0.0', (err) => {
23 |   if (err) {
24 |     console.log(err);
25 |     return;
26 |   }
27 | 
28 |   console.log('Listening at http://0.0.0.0:8080');
29 | });
30 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const autoprefixer = require('autoprefixer');
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | module.exports = {
 7 |   context: __dirname,                                   // input path
 8 |   devtool: 'inline-source-map',
 9 |   entry: [                                              // webpack will start consuming from these file(s)
10 |     'webpack-hot-middleware/client',
11 |     './app/index.jsx'
12 |   ],
13 |   output: {
14 |     path: path.join(__dirname, 'build'),                // output path
15 |     filename: 'example.js',                             // compiled js (single file only)
16 |     publicPath: '/'
17 |   },
18 |   resolve: {
19 |     extensions: ['', '.jsx', '.scss', '.js', '.json'],  // along the way, subsequent file(s) to be consumed by webpack
20 |     modulesDirectories: [
21 |       'node_modules',
22 |       path.resolve(__dirname, './node_modules')
23 |     ]
24 |   },
25 |   module: {
26 |     loaders: [
27 |       {
28 |         test: /(\.js|\.jsx)$/,
29 |         exclude: /(node_modules)/,
30 |         loader: 'babel',
31 |         query: {
32 |            presets:['es2015','react']
33 |         }
34 |       }, {
35 |         test: /(\.scss|\.css)$/,
36 |         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
37 |       }
38 |     ]
39 |   },
40 |   postcss: [autoprefixer],
41 |   plugins: [
42 |     new ExtractTextPlugin('example.css', { allChunks: true }),  // compiled css (single file only)
43 |     new webpack.HotModuleReplacementPlugin(),
44 |     new webpack.NoErrorsPlugin(),
45 |     new webpack.DefinePlugin({
46 |       'process.env.NODE_ENV': JSON.stringify('development')
47 |     })
48 |   ]
49 | };
50 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>React Flexbox Grid Example</title>
 6 |     <meta name="description" content="A set of complementary tools to ReactJS.">
 7 |     <meta name="author" content="roylee0704">
 8 |     <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
 9 |     <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
10 |     <meta name="apple-mobile-web-app-title" content="Material Console">
11 |     <meta name="apple-mobile-web-app-capable" content="yes">
12 |     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13 |     <meta name="format-detection" content="telephone=no">
14 |     <meta name="HandheldFriendly" content="True">
15 |     <meta http-equiv="cleartype" content="on">
16 |     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
17 |     <link rel="stylesheet" href="example.css"><!--get from build/example.css-->
18 |   </head>
19 | 
20 |   <body>
21 |     <div id="app"></div>
22 |     <script src="example.js"></script><!--get from build/example.js-->
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------