github.com/trendmicro-frontend/react-grid-system

+7

babel.config.js

		module.exports = {
		extends: '@trendmicro/babel-config',
		presets: [
		'@babel/preset-env',
		'@babel/preset-react'
		]
		};

docs/build/0.c80788dc.js

Sorry, the diff of this file is too big to display

docs/build/bundle.01dbaed3.js

Sorry, the diff of this file is too big to display

+74

docs/main.css

		/**
		* Container
		*/
		.flexbox-container---3Fao- {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		}
		.floats-container---ucGke {
		zoom: 1;
		position: relative;
		margin-right: auto;
		margin-left: auto;
		}
		.floats-container---ucGke:before,
		.floats-container---ucGke:after {
		content: "";
		display: table;
		}
		.floats-container---ucGke:after {
		clear: both;
		}
		/**
		* Row
		*/
		.floats-row---3L-46 {
		zoom: 1;
		}
		.floats-row---3L-46:before,
		.floats-row---3L-46:after {
		content: "";
		display: table;
		}
		.floats-row---3L-46:after {
		clear: both;
		}
		.flexbox-row---38uB8 {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: box;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		}
		/**
		* Col
		*/
		.floats-col---LUxzY {
		zoom: 1;
		float: left;
		position: relative;
		width: 100%;
		min-height: 1px;
		}
		.floats-col---LUxzY:before,
		.floats-col---LUxzY:after {
		content: "";
		display: table;
		}
		.floats-col---LUxzY:after {
		clear: both;
		}
		.flexbox-col---lXegW {
		position: relative;
		width: 100%;
		min-height: 1px;
		}

+18

src/context.js

 import React from 'react';
 import {
     DEFAULT_BREAKPOINTS,
     DEFAULT_CONTAINER_WIDTHS,
     DEFAULT_COLUMNS,
     DEFAULT_GUTTER_WIDTH,
     DEFAULT_LAYOUT,
 } from './constants';
 export const ConfigurationContext = React.createContext({
     breakpoints: DEFAULT_BREAKPOINTS,
     containerWidths: DEFAULT_CONTAINER_WIDTHS,
     columns: DEFAULT_COLUMNS,
     gutterWidth: DEFAULT_GUTTER_WIDTH,
     layout: DEFAULT_LAYOUT,
 });
 export const ScreenClassContext = React.createContext(null);

+42

src/Resolver.jsx

		import PropTypes from 'prop-types';
		import React, { Component } from 'react';
		import Provider from './Provider';
		import { ConfigurationContext, ScreenClassContext } from './context';

		class Resolver extends Component {
		static propTypes = {
		children: PropTypes.func.isRequired,
		};

		render() {
		const { children } = this.props;

		return (
		<ConfigurationContext.Consumer>
		{config => (
		<ScreenClassContext.Consumer>
		{screenClass => {
		if (!screenClass) {
		return (
		<Provider>
		<ConfigurationContext.Consumer>
		{config => (
		<ScreenClassContext.Consumer>
		{screenClass => children({ config, screenClass })}
		</ScreenClassContext.Consumer>
		)}
		</ConfigurationContext.Consumer>
		</Provider>
		);
		}

		return children({ config, screenClass });
		}}
		</ScreenClassContext.Consumer>
		)}
		</ConfigurationContext.Consumer>
		);
		}
		}

		export default Resolver;

+25

src/ScreenClass.jsx

		import PropTypes from 'prop-types';
		import React from 'react';
		import Resolver from './Resolver';

		const ScreenClass = ({ render, children }) => (
		<Resolver>
		{({ screenClass }) => {
		if (typeof children === 'function') {
		return children(screenClass);
		}

		if (typeof render === 'function') {
		return render(screenClass);
		}

		return children;
		}}
		</Resolver>
		);

		ScreenClass.propTypes = {
		render: PropTypes.func
		};

		export default ScreenClass;

+141

styleguide.config.js

		const path = require('path');
		const stylusLoader = require('stylus-loader');
		const MiniCssExtractPlugin = require('mini-css-extract-plugin');
		const nib = require('nib');
		const webpack = require('webpack');
		const pkg = require('./package.json');

		const webpackConfig = {
		mode: 'development',
		devtool: 'cheap-module-eval-source-map',
		devServer: {
		disableHostCheck: true,
		contentBase: path.resolve(__dirname, 'docs'),
		},
		entry: path.resolve(__dirname, 'src/index.js'),
		module: {
		rules: [
		{
		test: /\.jsx?$/,
		loader: 'eslint-loader',
		enforce: 'pre',
		exclude: /node_modules/
		},
		{
		test: /\.jsx?$/,
		loader: 'babel-loader',
		exclude: /node_modules/
		},
		{
		test: /\.styl$/,
		use: [
		MiniCssExtractPlugin.loader,
		{
		loader: 'css-loader',
		options: {
		modules: true,
		localIdentName: '[local]---[hash:base64:5]',
		camelCase: true,
		importLoaders: 1
		}
		},
		'stylus-loader'
		]
		},
		{
		test: /\.css$/,
		use: [
		'style-loader',
		'css-loader'
		]
		},
		{
		test: /\.(png\|jpg\|svg)$/,
		loader: 'url-loader'
		},
		{
		test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
		loader: 'url-loader',
		options: {
		limit: 10000,
		mimetype: 'application/font-woff'
		}
		},
		{
		test: /\.(ttf\|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
		loader: 'file-loader'
		}
		]
		},
		plugins: [
		new webpack.DefinePlugin({
		'process.env': {
		// This has effect on the react lib size
		NODE_ENV: JSON.stringify('production')
		}
		}),
		new stylusLoader.OptionsPlugin({
		default: {
		// nib - CSS3 extensions for Stylus
		use: [nib()],
		// no need to have a '@import "nib"' in the stylesheet
		import: ['~nib/lib/nib/index.styl']
		}
		}),
		new MiniCssExtractPlugin({
		filename: '[name].css'
		})
		],
		resolve: {
		extensions: ['.js', '.json', '.jsx']
		}
		};

		module.exports = {
		title: `React Grid System v${pkg.version}`,
		sections: [
		{
		name: 'Layout: Flexbox',
		content: path.resolve(__dirname, 'styleguide/flexbox/README.md')
		},
		{
		name: 'Layout: Floats',
		content: path.resolve(__dirname, 'styleguide/floats/README.md')
		},
		{
		name: 'Responsive Utilities',
		content: path.resolve(__dirname, 'styleguide/responsive-utilities/README.md')
		},
		{
		name: 'Components',
		components: [
		'Provider',
		'Container',
		'Row',
		'Col',
		'Hidden',
		'Visible',
		'ScreenClass',
		].map(c => path.resolve(__dirname, `src/${c}.jsx`))
		}
		],
		require: [
		'@babel/polyfill',
		path.resolve(__dirname, 'styleguide/setup.js'),
		path.resolve(__dirname, 'styleguide/styles.css')
		],
		ribbon: {
		url: pkg.homepage,
		text: 'Fork me on GitHub'
		},
		serverPort: 8080,
		exampleMode: 'expand',
		usageMode: 'expand',
		showSidebar: true,
		styleguideComponents: {
		StyleGuideRenderer: path.join(__dirname, 'styleguide/components/StyleGuideRenderer.jsx'),
		Wrapper: path.join(__dirname, 'styleguide/components/Wrapper.jsx'),
		},
		styleguideDir: 'docs/',
		webpackConfig: webpackConfig
		};

+19

styleguide/components/store.js

		import { createStore } from 'redux';

		const initialState = {
		gutterWidth: 24
		};

		const reducer = (state = initialState, action) => {
		if (action.type === 'SET_GUTTER_WIDTH') {
		const gutterWidth = action.payload;
		return { gutterWidth };
		}

		return state;
		};

		const store = createStore(reducer, initialState);

		export { initialState };
		export default store;

+127

styleguide/components/StyleGuideRenderer.jsx

		import PropTypes from 'prop-types';
		import React, { useEffect, useState } from 'react';
		import { Button, ButtonGroup } from 'react-bootstrap-buttons';
		import 'react-bootstrap-buttons/dist/react-bootstrap-buttons.css';
		import GitHubCorner from 'react-github-corner';
		import styled from 'styled-components';
		import { ScreenClass } from '../../src';
		import pkg from '../../package.json';
		import store, { initialState } from './store';

		const Root = styled.div`
		min-height: 100vh;
		background-color: #fff;
		padding-left: 240px;
		`;

		const Main = styled.main`
		padding: 16px 32px;
		margin: 0 auto;
		display: block;
		`;

		const Sidebar = styled.div`
		background-color: #f5f5f5;
		border: #e8e8e8 solid;
		border-width: 0 1px 0 0;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 240px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		`;

		const Space = styled.span`
		display: inline-block;
		width: ${props => props.width}px;
		`;

		const TextBlock = styled.div`
		padding: 16px;
		border-bottom: 1px #e8e8e8 solid;
		color: #333;
		margin: 0;
		font-size: 18px;
		font-weight: normal;
		`;

		const handleChangeGutterWidth = (gutterWidth) => () => {
		store.dispatch({ type: 'SET_GUTTER_WIDTH', payload: gutterWidth });
		};

		const StyleGuideRenderer = ({
		title,
		toc,
		children,
		}) => {
		const [gutterWidth, setGutterWidth] = useState(initialState.gutterWidth);

		useEffect(() => {
		const handleStateChange = () => {
		const { gutterWidth } = store.getState();
		setGutterWidth(gutterWidth);
		};

		const unsubscribe = store.subscribe(handleStateChange);

		return () => {
		unsubscribe(handleStateChange);
		};
		}, []); // Only run on mount and unmount

		return (
		<Root>
		<GitHubCorner href={pkg.homepage} />
		<Sidebar>
		<TextBlock>
		{title}
		</TextBlock>
		<TextBlock>
		<ScreenClass>
		{screenClass => `Screen class: ${screenClass}`}
		</ScreenClass>
		</TextBlock>
		<TextBlock>
		Gutter width
		<Space width={8} />
		<ButtonGroup btnSize="sm">
		<Button
		btnStyle={gutterWidth === 0 ? 'dark' : 'default'}
		onClick={handleChangeGutterWidth(0)}
		style={{ minWidth: 32 }}
		>
		0
		</Button>
		<Button
		btnStyle={gutterWidth === 24 ? 'dark' : 'default'}
		onClick={handleChangeGutterWidth(24)}
		style={{ minWidth: 32 }}
		>
		24
		</Button>
		<Button
		btnStyle={gutterWidth === 48 ? 'dark' : 'default'}
		onClick={handleChangeGutterWidth(48)}
		style={{ minWidth: 32 }}
		>
		48
		</Button>
		</ButtonGroup>
		</TextBlock>
		<div>{toc}</div>
		</Sidebar>
		<Main id="example">
		{children}
		</Main>
		</Root>
		);
		};

		StyleGuideRenderer.propTypes = {
		title: PropTypes.string,
		toc: PropTypes.node,
		};

		export default StyleGuideRenderer;

+19

styleguide/components/Text.jsx

		import styled, { css } from 'styled-components';

		const Text = styled.div`${({
		fontFamily = 'Arial, "Helvetica Neue", Helvetica, sans-serif',
		size = 'inherit',
		color = 'inherit',
		bold
		}) => css`
		display: inline-block;
		color: ${color};
		background-color: transparent;
		vertical-align: middle;
		font-family: ${fontFamily};
		font-size: ${Number(size) > 0 ? `${size}px` : size};
		font-weight: ${!!bold ? 'bold' : 'inherit'};
		line-height: 1;
		`}`;

		export default Text;

+34

styleguide/components/Wrapper.jsx

		import React, { useEffect, useState } from 'react';
		import { Provider as GridSystemProvider } from '../../src';
		import store, { initialState } from './store';

		const Wrapper = ({ children }) => {
		const [gutterWidth, setGutterWidth] = useState(initialState.gutterWidth);

		useEffect(() => {
		const handleStateChange = () => {
		const { gutterWidth } = store.getState();
		setGutterWidth(gutterWidth);
		};

		const unsubscribe = store.subscribe(handleStateChange);

		return () => {
		unsubscribe(handleStateChange);
		};
		}, []); // Only run on mount and unmount

		return (
		<GridSystemProvider
		breakpoints={[576, 768, 992, 1200, 1600]}
		containerWidths={[540, 720, 960, 1140, 1440]}
		columns={12}
		gutterWidth={gutterWidth}
		layout="flexbox"
		>
		{children}
		</GridSystemProvider>
		);
		};

		export default Wrapper;

+309

styleguide/flexbox/README.md

		### Equal width

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col>1 of 2</Col>
		<Col>2 of 2</Col>
		</Row>
		<Row>
		<Col>1 of 3</Col>
		<Col>2 of 3</Col>
		<Col>3 of 3</Col>
		</Row>
		</Container>
		```

		### Custom columns

		```jsx
		<Container fluid columns={20} layout="flexbox">
		<Row>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		</Row>
		</Container>
		```

		### Setting one column width

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col>1 of 3</Col>
		<Col width={6}>2 of 3 (wider)</Col>
		<Col>3 of 3</Col>
		</Row>
		<Row>
		<Col>1 of 3</Col>
		<Col width={5}>2 of 3 (wider)</Col>
		<Col>3 of 3</Col>
		</Row>
		</Container>
		```

		### Variable width content

		```jsx
		<Container fluid layout="flexbox">
		<Row style={{ justifyContent: 'center' }}>
		<Col xs lg={2}>1 of 3</Col>
		<Col width={12} md="auto">Variable width content</Col>
		<Col xs lg={2}>3 of 3</Col>
		</Row>
		<Row>
		<Col>1 of 3</Col>
		<Col width={12} md="auto">Variable width content</Col>
		<Col xs lg={2}>3 of 3</Col>
		</Row>
		</Container>
		```

		### Equal-width multi-row

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col>col</Col>
		<Col>col</Col>
		</Row>
		<Row>
		<Col>col</Col>
		<Col>col</Col>
		</Row>
		</Container>
		```

		### All breakpoints

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col>col</Col>
		<Col>col</Col>
		<Col>col</Col>
		<Col>col</Col>
		</Row>
		<Row>
		<Col width={8}>col-8</Col>
		<Col width={4}>col-4</Col>
		</Row>
		</Container>
		```

		### Stacked to horizontal

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col sm={8}>col-sm-8</Col>
		<Col sm={4}>col-sm-4</Col>
		</Row>
		<Row>
		<Col sm>col-sm</Col>
		<Col sm>col-sm</Col>
		<Col sm>col-sm</Col>
		</Row>
		</Container>
		```

		### Mix and match

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col xs md={8}>col-md-8</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		</Row>
		<Row>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		</Row>
		<Row>
		<Col width={6}>col-6</Col>
		<Col width={6}>col-6</Col>
		</Row>
		</Container>
		```

		### Vertical alignment

		```jsx
		<Container fluid layout="flexbox">
		<Row
		style={{
		alignItems: 'flex-start',
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		</Row>
		<Row
		style={{
		alignItems: 'center',
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		</Row>
		<Row
		style={{
		alignItems: 'flex-end',
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		</Row>
		<Row
		style={{
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col style={{ alignSelf: 'flex-start' }}>One of three columns</Col>
		<Col style={{ alignSelf: 'center' }}>One of three columns</Col>
		<Col style={{ alignSelf: 'flex-end' }}>One of three columns</Col>
		</Row>
		</Container>
		```

		### Horizontal alignment

		```jsx
		<Container fluid layout="flexbox">
		<Row style={{ justifyContent: 'flex-start' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'center' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'flex-end' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'space-around' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'space-between' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		</Container>
		```

		### No gutters

		```jsx
		<Container fluid layout="flexbox" gutterWidth={0}>
		<Row>
		<Col width={12} sm={6} md={8}>col-12 col-sm-6 col-md-8</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		</Row>
		</Container>
		```

		### Column wrapping

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col width={9}>col-9</Col>
		<Col width={4}>col-4</Col>
		<Col width={6}>col-6</Col>
		</Row>
		</Container>
		```

		### Column breaks

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		{/* Force next columns to break to new line */}
		<div style={{ width: '100%' }} />
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		</Row>
		</Container>
		```

		### Offsetting columns

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4} offset={{ md: 4 }}>col-md-4 col-offset-md-4</Col>
		</Row>
		<Row>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-offset-md-3</Col>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-offset-md-3</Col>
		</Row>
		<Row>
		<Col md={6} offset={{ md: 3 }}>col-md-6 col-offset-md-3</Col>
		</Row>
		<Row>
		<Col sm={5} md={6}>col-sm-5 col-md-6</Col>
		<Col sm={5} md={6} offset={{ sm: 2, md: 0 }}>col-sm-5 col-offset-sm-2 col-md-6 col-offset-md-0</Col>
		</Row>
		<Row>
		<Col sm={6} md={5} lg={6}>col-sm-6 col-md-5 col-lg-6</Col>
		<Col sm={6} md={5} lg={6} offset={{ md: 2, lg: 0 }}>col-sm-6 col-md-5 col-offset-md-2 col-lg-6 col-offset-lg-0</Col>
		</Row>
		</Container>
		```

		### Auto margin

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4} style={{ marginLeft: 'auto' }}>col-md-4 ml-auto</Col>
		</Row>
		<Row>
		<Col width="auto" style={{ marginRight: 'auto' }}>col-auto mr-auto</Col>
		<Col width="auto">col-auto</Col>
		</Row>
		</Container>
		```

		### Nesting

		```jsx
		<Container fluid layout="floats">
		<Row>
		<Col sm={9}>
		Level 1: col-sm-9
		<Row>
		<Col width={8} sm={6}>
		Level 2: col-8 col-sm-6
		</Col>
		<Col width={4} sm={6}>
		Level 2: col-8 col-sm-6
		</Col>
		</Row>
		</Col>
		</Row>
		</Container>
		```

+158

styleguide/floats/README.md

		### Custom columns

		```jsx
		<Container fluid columns={20} layout="floats">
		<Row>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		</Row>
		</Container>
		```

		### Stacked to horizontal

		```jsx
		<Container fluid layout="floats">
		<Row>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		</Row>
		<Row>
		<Col md={8}>col-md-8</Col>
		<Col md={4}>col-md-4</Col>
		</Row>
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4}>col-md-4</Col>
		<Col md={4}>col-md-4</Col>
		</Row>
		<Row>
		<Col md={6}>col-md-6</Col>
		<Col md={6}>col-md-6</Col>
		</Row>
		</Container>
		```

		### Mobile and desktop

		```jsx
		<Container fluid layout="floats">
		<Row>
		<div>
		Stack the columns on mobile by making one full-width and the other half-width
		</div>
		<Col xs={12} md={8}>col-xs-12 col-md-8</Col>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		</Row>
		<Row>
		<div>
		Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop
		</div>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		</Row>
		<Row>
		<div>
		Columns are always 50% wide, on mobile and desktop
		</div>
		<Col xs={6}>col-xs-6</Col>
		<Col xs={6}>col-xs-6</Col>
		</Row>
		</Container>
		```

		### Mobile, tablet, desktops

		```jsx
		<Container fluid layout="floats">
		<Row>
		<Col xs={12} sm={6} md={8}>col-xs-12 col-sm-6 col-md-8</Col>
		<Col xs={6} sm={6} md={4}>col-xs-6 col-sm-6 col-md-4</Col>
		</Row>
		<Row>
		<Col xs={6} sm={4} md={4}>col-xs-6 col-sm-4 col-md-4</Col>
		<Col xs={6} sm={4} md={4}>col-xs-6 col-sm-4 col-md-4</Col>
		<Col xs={6} sm={4} md={4}>col-xs-6 col-sm-4 col-md-4</Col>
		</Row>
		</Container>
		```

		### Responsive column resets

		```jsx
		<Container fluid layout="floats">
		<Row>
		<Col sm={5} md={6}>col-sm-5 col-md-6</Col>
		<Col sm={5} md={6} offset={{ sm: 2, md: 0 }}>col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0</Col>
		</Row>
		<Row>
		<Col sm={6} md={5} lg={6}>col-sm-6 col-md-5 col-lg-6</Col>
		<Col sm={6} md={5} lg={6} offset={{ md: 2, lg: 0 }}>col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0</Col>
		</Row>
		</Container>
		```

		### Offsetting columns

		```jsx
		<Container fluid layout="floats">
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4} offset={{ md: 4 }}>col-md-4 col-md-offset-4</Col>
		</Row>
		<Row>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-md-offset-3</Col>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-md-offset-3</Col>
		</Row>
		<Row>
		<Col md={6} offset={{ md: 3 }}>col-md-6 col-md-offset-3</Col>
		</Row>
		</Container>
		```

		### Nesting columns

		```jsx
		<Container fluid layout="floats">
		<Row>
		<Col md={9}>
		Level 1: col-md-9
		<Row>
		<Col md={6}>
		Level 2: col-md-6
		</Col>
		<Col md={6}>
		Level 2: col-md-6
		</Col>
		</Row>
		</Col>
		</Row>
		</Container>
		```

		### Column ordering

		```jsx
		<Container fluid layout="floats">
		<Row>
		<Col md={9} push={{ md: 3 }}>col-md-9 col-md-push-3</Col>
		<Col md={3} pull={{ md: 9 }}>col-md-3 col-md-pull-9</Col>
		</Row>
		</Container>
		```

+148

styleguide/responsive-utilities/README.md

		### Rendering content based on the screen class

		```jsx
		<Container fluid layout="flexbox">
		<ScreenClass>
		{screenClass => (
		<Row>
		<Col>
		<Text
		bold={screenClass === 'xs'}
		color={screenClass === 'xs' ? '#222' : '#888'}
		>
		Extra small
		</Text>
		</Col>
		<Col>
		<Text
		bold={screenClass === 'sm'}
		color={screenClass === 'sm' ? '#222' : '#888'}
		>
		Small
		</Text>
		</Col>
		<Col>
		<Text
		bold={screenClass === 'md'}
		color={screenClass === 'md' ? '#222' : '#888'}
		>
		Medium
		</Text>
		</Col>
		<Col>
		<Text
		bold={screenClass === 'lg'}
		color={screenClass === 'lg' ? '#222' : '#888'}
		>
		Large
		</Text>
		</Col>
		<Col>
		<Text
		bold={screenClass === 'xl'}
		color={screenClass === 'xl' ? '#222' : '#888'}
		>
		Extra large
		</Text>
		</Col>
		<Col>
		<Text
		bold={screenClass === 'xxl'}
		color={screenClass === 'xxl' ? '#222' : '#888'}
		>
		Extra extra large
		</Text>
		</Col>
		</Row>
		)}
		</ScreenClass>
		</Container>
		```

		### Showing or hiding content

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col>
		<Hidden xs>
		<Text color="gray">Extra small</Text>
		</Hidden>
		<Visible xs>
		<Text bold color="#222">Extra small</Text>
		</Visible>
		</Col>
		<Col>
		<Hidden sm>
		<Text color="gray">Small</Text>
		</Hidden>
		<Visible sm>
		<Text bold color="#222">Small</Text>
		</Visible>
		</Col>
		<Col>
		<Hidden md>
		<Text color="gray">Medium</Text>
		</Hidden>
		<Visible md>
		<Text bold color="#222">Medium</Text>
		</Visible>
		</Col>
		<Col>
		<Hidden lg>
		<Text color="gray">Large</Text>
		</Hidden>
		<Visible lg>
		<Text bold color="#222">Large</Text>
		</Visible>
		</Col>
		<Col>
		<Hidden xl>
		<Text color="gray">Extra large</Text>
		</Hidden>
		<Visible xl>
		<Text bold color="#222">Extra large</Text>
		</Visible>
		</Col>
		<Col>
		<Hidden xxl>
		<Text color="gray">Extra extra large</Text>
		</Hidden>
		<Visible xxl>
		<Text bold color="#222">Extra extra large</Text>
		</Visible>
		</Col>
		</Row>
		</Container>
		```

		```jsx
		<Container fluid layout="flexbox">
		<Row>
		<Col>
		<Hidden xs sm>
		<Text color="gray">Extra small and small</Text>
		</Hidden>
		<Visible xs sm>
		<Text bold color="#222">Extra small and small</Text>
		</Visible>
		</Col>
		<Col>
		<Hidden md lg>
		<Text color="gray">Medium and large</Text>
		</Hidden>
		<Visible md lg>
		<Text bold color="#222">Medium and large</Text>
		</Visible>
		</Col>
		<Col>
		<Hidden xl xxl>
		<Text color="gray">Extra large and extra extra large</Text>
		</Hidden>
		<Visible xl xxl>
		<Text bold color="#222">Extra large and extra extra large</Text>
		</Visible>
		</Col>
		</Row>
		</Container>
		```

+14

styleguide/setup.js

		import { Fragment } from 'react';
		import { Provider, Container, Row, Col, Hidden, Visible, ScreenClass } from '../src';
		import Text from './components/Text';

		global.Fragment = Fragment;
		global.Text = Text;

		global.Provider = Provider;
		global.Container = Container;
		global.Row = Row;
		global.Col = Col;
		global.Hidden = Hidden;
		global.Visible = Visible;
		global.ScreenClass = ScreenClass;

+16

styleguide/styles.css

		body {
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		}

		#example [class^="flexbox-row-"] > [class^="flexbox-col-"],
		#example [class^="floats-row-"] > [class^="floats-col-"] {
		background-color: rgba(86, 61, 124, .15);
		border: 1px solid rgba(86, 61, 124, .2);
		padding-top: .75rem;
		padding-bottom: .75rem;
		}

		#example [class^="flexbox-row-"] + [class^="flexbox-row-"],
		#example [class^="floats-row-"] + [class^="floats-row-"] {
		margin-top: 1rem;
		}

+2

-1

.travis.yml

		@@ -11,4 +11,5 @@ sudo: required
		node_js:
		- '6'
		- '8'
		- '6'
		- '10'

		@@ -15,0 +16,0 @@ before_install:

+7

-6

dist/react-grid-system.css

		@@ -1,5 +0,10 @@
		/! react-grid-system v0.2.0 \| (c) 2018 Trend Micro Inc. \| MIT \| https://github.com/trendmicro-frontend/react-grid-system /
		/! react-grid-system v1.0.0 \| (c) 2019 Trend Micro Inc. \| MIT \| https://github.com/trendmicro-frontend/react-grid-system /
		/**
		* Container
		*/
		.grid-system---flexbox-container---3Fao- {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		}
		.grid-system---floats-container---ucGke {
		@@ -19,7 +24,2 @@ zoom: 1;
		}
		.grid-system---flexbox-container---3Fao- {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		}
		/**
		@@ -77,2 +77,3 @@ * Row


		/# sourceMappingURL=react-grid-system.css.map/

+1

-1

dist/react-grid-system.css.map

		@@ -1,1 +0,1 @@
		{"version":3,"sources":[],"names":[],"mappings":"","file":"../dist/react-grid-system.css","sourceRoot":""}
		{"version":3,"sources":["webpack:///./src/index.styl"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"../dist/react-grid-system.css","sourcesContent":["/*\n Container\n /\n.grid-system---flexbox-container---3Fao- {\n position: relative;\n margin-left: auto;\n margin-right: auto;\n}\n.grid-system---floats-container---ucGke {\n zoom: 1;\n position: relative;\n margin-right: auto;\n margin-left: auto;\n}\n.grid-system---floats-container---ucGke:before,\n.grid-system---floats-container---ucGke:after {\n content: \"\";\n display: table;\n}\n.grid-system---floats-container---ucGke:after {\n clear: both;\n}\n/\n Row\n /\n.grid-system---floats-row---3L-46 {\n zoom: 1;\n}\n.grid-system---floats-row---3L-46:before,\n.grid-system---floats-row---3L-46:after {\n content: \"\";\n display: table;\n}\n.grid-system---floats-row---3L-46:after {\n clear: both;\n}\n.grid-system---flexbox-row---38uB8 {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-lines: multiple;\n -moz-box-lines: multiple;\n -o-box-lines: multiple;\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n/\n Col\n */\n.grid-system---floats-col---LUxzY {\n zoom: 1;\n float: left;\n position: relative;\n width: 100%;\n min-height: 1px;\n}\n.grid-system---floats-col---LUxzY:before,\n.grid-system---floats-col---LUxzY:after {\n content: \"\";\n display: table;\n}\n.grid-system---floats-col---LUxzY:after {\n clear: both;\n}\n.grid-system---flexbox-col---lXegW {\n position: relative;\n width: 100%;\n min-height: 1px;\n}\n"],"sourceRoot":""}

+1

-1

dist/react-grid-system.min.css

		@@ -1,1 +0,1 @@
		/! react-grid-system v0.2.0 \| (c) 2018 Trend Micro Inc. \| MIT \| https://github.com/trendmicro-frontend/react-grid-system /.grid-system---floats-container---ucGke{zoom:1;position:relative;margin-right:auto;margin-left:auto}.grid-system---floats-container---ucGke:after,.grid-system---floats-container---ucGke:before{content:"";display:table}.grid-system---floats-container---ucGke:after{clear:both}.grid-system---flexbox-container---3Fao-{position:relative;margin-left:auto;margin-right:auto}.grid-system---floats-row---3L-46{zoom:1}.grid-system---floats-row---3L-46:after,.grid-system---floats-row---3L-46:before{content:"";display:table}.grid-system---floats-row---3L-46:after{clear:both}.grid-system---flexbox-row---38uB8{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-o-box-lines:multiple;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid-system---floats-col---LUxzY{zoom:1;float:left;position:relative;width:100%;min-height:1px}.grid-system---floats-col---LUxzY:after,.grid-system---floats-col---LUxzY:before{content:"";display:table}.grid-system---floats-col---LUxzY:after{clear:both}.grid-system---flexbox-col---lXegW{position:relative;width:100%;min-height:1px}
		/! react-grid-system v1.0.0 \| (c) 2019 Trend Micro Inc. \| MIT \| https://github.com/trendmicro-frontend/react-grid-system /.grid-system---flexbox-container---3Fao-{position:relative;margin-left:auto;margin-right:auto}.grid-system---floats-container---ucGke{zoom:1;position:relative;margin-right:auto;margin-left:auto}.grid-system---floats-container---ucGke:after,.grid-system---floats-container---ucGke:before{content:"";display:table}.grid-system---floats-container---ucGke:after{clear:both}.grid-system---floats-row---3L-46{zoom:1}.grid-system---floats-row---3L-46:after,.grid-system---floats-row---3L-46:before{content:"";display:table}.grid-system---floats-row---3L-46:after{clear:both}.grid-system---flexbox-row---38uB8{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-o-box-lines:multiple;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid-system---floats-col---LUxzY{zoom:1;float:left;position:relative;width:100%;min-height:1px}.grid-system---floats-col---LUxzY:after,.grid-system---floats-col---LUxzY:before{content:"";display:table}.grid-system---floats-col---LUxzY:after{clear:both}.grid-system---flexbox-col---lXegW{position:relative;width:100%;min-height:1px}

+1

-18

docs/index.html

		@@ -1,18 +0,1 @@
		<!doctype html>
		<html>
		<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>React GridSystem</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link ref="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
		<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
		</head>
		<body>
		<div id="container"></div>
		<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
		<script type="text/javascript" src="bundle.js?046f4b8615493df21af1"></script></body>
		</html>
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>React Grid System v1.0.0</title><link href="main.css" rel="stylesheet"></head><body><div id="rsg-root"></div><script src="build/bundle.01dbaed3.js"></script></body></html>

+1

-1

LICENSE

		MIT License

		Copyright (c) 2017 Trend Micro Inc.
		Copyright (c) 2017-present Trend Micro Inc.

		@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

+55

-50

package.json

		{
		"name": "@trendmicro/react-grid-system",
		"version": "0.2.0",
		"version": "1.0.0",
		"description": "React Grid System component",
		@@ -11,12 +11,15 @@ "main": "lib/index.js",
		"scripts": {
		"prepublish": "npm run eslint && npm test && npm run clean && npm run build && npm run build-examples",
		"build": "webpack && npm run cleancss",
		"build-examples": "cd examples; webpack",
		"prepublish": "npm run lint && npm test && npm run clean && npm run build && npm run styleguide:build",
		"build": "webpack-cli && npm run cleancss",
		"clean": "rm -f {lib,dist}/*",
		"cleancss": "cleancss -o dist/react-grid-system.min.css dist/react-grid-system.css",
		"demo": "http-server -p 8000 docs/",
		"eslint": "eslint --ext .js --ext .jsx examples src test",
		"test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill",
		"coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill \| coveralls",
		"dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs"
		"lint": "npm run eslint && npm run stylint",
		"eslint": "eslint --ext .js --ext .jsx *.js src test",
		"stylint": "stylint src",
		"test": "tap test/*.js --node-arg=--require --node-arg=@babel/register --node-arg=--require --node-arg=@babel/polyfill",
		"coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=@babel/register --nyc-arg=--require --nyc-arg=@babel/polyfill \| coveralls",
		"dev": "npm run styleguide",
		"styleguide": "styleguidist server",
		"styleguide:build": "styleguidist build"
		},
		@@ -55,3 +58,3 @@ "repository": {
		"peerDependencies": {
		"react": "^0.14.0 \|\| >=15.0.0"
		"react": ">=16.3.0"
		},
		@@ -65,47 +68,49 @@ "dependencies": {
		"devDependencies": {
		"@trendmicro/react-anchor": "^0.5.6",
		"@trendmicro/react-buttons": "~1.3.0",
		"babel-cli": "~6.26.0",
		"babel-core": "~6.26.0",
		"babel-eslint": "~8.2.1",
		"babel-loader": "~7.1.2",
		"babel-plugin-transform-decorators-legacy": "~1.3.4",
		"babel-preset-env": "~1.6.1",
		"babel-preset-react": "~6.24.1",
		"babel-preset-stage-0": "~6.24.1",
		"clean-css": "~4.1.9",
		"clean-css-cli": "~4.1.10",
		"coveralls": "~3.0.0",
		"css-loader": "~0.28.7",
		"enzyme": "~3.3.0",
		"enzyme-adapter-react-16": "~1.1.1",
		"eslint": "~4.17.0",
		"eslint-config-trendmicro": "~1.3.0",
		"eslint-loader": "~1.9.0",
		"eslint-plugin-import": "~2.8.0",
		"eslint-plugin-jsx-a11y": "~6.0.3",
		"eslint-plugin-react": "~7.6.1",
		"extract-text-webpack-plugin": "~3.0.2",
		"file-loader": "~1.1.6",
		"find-imports": "~0.5.2",
		"html-webpack-plugin": "~2.30.1",
		"@babel/cli": "~7.2.3",
		"@babel/core": "~7.2.2",
		"@babel/polyfill": "~7.2.5",
		"@babel/preset-env": "~7.2.3",
		"@babel/preset-react": "~7.0.0",
		"@babel/register": "~7.0.0",
		"@trendmicro/babel-config": "~1.0.0-alpha",
		"babel-eslint": "~10.0.1",
		"babel-loader": "~8.0.5",
		"chained-function": "~0.5.0",
		"clean-css": "~4.2.1",
		"clean-css-cli": "~4.2.1",
		"coveralls": "~3.0.2",
		"css-loader": "~2.1.0",
		"enzyme": "~3.8.0",
		"enzyme-adapter-react-16": "~1.7.1",
		"eslint": "~5.12.0",
		"eslint-config-trendmicro": "~1.4.1",
		"eslint-loader": "~2.1.1",
		"eslint-plugin-import": "~2.14.0",
		"eslint-plugin-jsx-a11y": "~6.1.2",
		"eslint-plugin-react": "~7.12.3",
		"file-loader": "~3.0.1",
		"find-imports": "^1.1.0",
		"html-webpack-plugin": "~3.2.0",
		"http-server": "~0.11.1",
		"jsdom": "~11.6.2",
		"jsdom": "^13.1.0",
		"mini-css-extract-plugin": "~0.5.0",
		"nib": "~1.1.2",
		"raw-loader": "~0.5.1",
		"react": "~16.2.0",
		"react-dom": "~16.2.0",
		"react-jsx-parser": "~1.2.1",
		"react-markdown": "~3.1.5",
		"style-loader": "~0.20.1",
		"styled-components": "~3.1.6",
		"react": ">=16.8.0",
		"react-bootstrap-buttons": "~0.3.0",
		"react-dom": ">=16.8.0",
		"react-github-corner": "~2.3.0",
		"react-styleguidist": "~8.0.6",
		"redux": "~4.0.1",
		"resize-observer-polyfill": "~1.5.1",
		"style-loader": "~0.23.1",
		"styled-components": "~4.1.3",
		"stylint": "~1.5.9",
		"stylint-loader": "~1.0.0",
		"stylus-loader": "~3.0.1",
		"tap": "~11.1.0",
		"trendmicro-ui": "~0.5.0",
		"url-loader": "~0.6.2",
		"webpack": "~3.10.0",
		"webpack-dev-server": "~2.11.1"
		"stylus-loader": "~3.0.2",
		"tap": "~12.1.1",
		"url-loader": "~1.1.2",
		"webpack": "~4.28.4",
		"webpack-cli": "~3.2.1",
		"webpack-dev-server": "~3.1.14",
		"which": "~1.3.1"
		}
		}

+54

-25

README.md

		@@ -61,3 +61,3 @@ # react-grid-system [![build status](https://travis-ci.org/trendmicro-frontend/react-grid-system.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-grid-system) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-grid-system/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-grid-system?branch=master)
		```jsx
		<Container fluid gutterWidth={20}>
		<Container fluid gutterWidth={0}>
		<Row>
		@@ -85,9 +85,9 @@ <Col xs md={8}>col-md-8</Col>
		<Provider
		breakpoints={[576, 768, 992, 1200]}
		containerWidths={[540, 720, 960, 1140]}
		breakpoints={[576, 768, 992, 1200, 1600]}
		containerWidths={[540, 720, 960, 1140, 1440]}
		columns={12}
		gutterWidth={20}
		gutterWidth={0}
		layout="flexbox"
		>
		<Container>
		<Container fluid>
		<Row>
		@@ -99,3 +99,8 @@ <Col>col</Col>
		</Container>
		<Container>
		<Container
		fluid
		columns={24}
		gutterWidth={30}
		layout="floats"
		>
		<Row>
		@@ -109,5 +114,24 @@ <Col>col</Col>

		### Visible
		### Responsive Utilities

		Use responsive utilities for showing and hiding content based on current viewport.

		#### Hidden

		Make an element hidden when the viewport is at the given breakpoint.

		```jsx
		<Hidden xs sm>
		Hidden on extra small and small
		</Hidden>
		<Hidden md lg>
		Hidden on medium and large
		</Hidden>
		```

		#### Visible

		Make an element visible when the viewport is at the given breakpoint.

		```jsx
		<Visible xs>
		@@ -133,13 +157,18 @@ Visible on extra small

		### Hidden
		#### ScreenClass

		Render content based on the screen class.

		```jsx
		<Hidden xs sm>
		Hidden on extra small and small
		</Hidden>
		<Hidden md lg>
		Hidden on medium and large
		</Hidden>
		<ScreenClass>
		{screenClass => <div>{screenClass}</div>}
		</ScreenClass>
		```

		```jsx
		<ScreenClass
		render={screenClass => <div>{screenClass}</div> }
		/>
		```

		## API
		@@ -156,4 +185,4 @@
		columns \| Number \| 12 \| The number of columns.
		gutterWidth \| Number \| 30 \| The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
		layout \| One of:<br>'floats'<br>'flexbox' \| 'floats' \| The grid system layout.
		gutterWidth \| Number \| 0 \| The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
		layout \| One of:<br>'flexbox'<br>'floats' \| 'flexbox' \| The grid system layout.

		@@ -171,6 +200,5 @@ #### Container
		xxl \| Boolean \| false \| True makes container fluid only in `xxl`, not present means fluid everywhere.
		columns \| Number \| 12 \| The number of columns.
		gutterWidth \| Number \| 30 \| The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
		layout \| One of:<br>'floats'<br>'flexbox' \| 'floats' \| The grid system layout.
		onResize \| Function({ screenClass }) \| \| A callback fired when the resize event occurs.
		columns \| Number \| inherited \| The number of columns.
		gutterWidth \| Number \| inherited \| The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
		layout \| One of:<br>'flexbox'<br>'floats' \| inherited \| The grid system layout.

		@@ -181,5 +209,2 @@ #### Row
		:--- \| :--- \| :------ \| :----------
		columns \| Number \| 12 \| The number of columns.
		gutterWidth \| Number \| 30 \| The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
		layout \| One of:<br>'floats'<br>'flexbox' \| 'floats' \| The grid system layout.

		@@ -211,3 +236,2 @@ #### Col
		xxl \| Boolean \| false \| Visible on double extra large devices.
		onResize \| Function({ screenClass }) \| \| A callback fired when the resize event occurs.

		@@ -224,6 +248,11 @@ #### Hidden
		xxl \| Boolean \| false \| Hidden on double extra large devices.
		onResize \| Function({ screenClass }) \| \| A callback fired when the resize event occurs.

		#### ScreenClass

		Name \| Type \| Default \| Description
		:--- \| :--- \| :------ \| :----------
		render \| Function(screenClass) \| \| The render function that returns a React element.

		## License

		MIT

+39

-93

src/Col.jsx

		import cx from 'classnames';
		import PropTypes from 'prop-types';
		import React, { PureComponent } from 'react';
		import throttle from 'lodash.throttle';
		import { getScreenClass } from './utils';
		import React, { Component } from 'react';
		import {
		LAYOUT_FLEXBOX,
		LAYOUT_FLOATS,
		LAYOUTS,
		SCREEN_CLASSES,
		DEFAULT_COLUMNS,
		DEFAULT_GUTTER_WIDTH,
		DEFAULT_LAYOUT
		} from './constants';
		import Resolver from './Resolver';
		import styles from './index.styl';
		@@ -42,3 +37,3 @@

		const getWidth = (width, columns = DEFAULT_COLUMNS) => {
		const getWidth = (width, columns) => {
		if (width === 'auto') {
		@@ -56,3 +51,3 @@ return width;
		if (columns <= 0) {
		columns = DEFAULT_COLUMNS;
		columns = 1;
		}
		@@ -67,3 +62,3 @@

		class Col extends PureComponent {
		class Col extends Component {
		static propTypes = {
		@@ -155,34 +150,7 @@ // The width of the column for all screen classes.

		static contextTypes = {
		breakpoints: PropTypes.arrayOf(PropTypes.number),
		columns: PropTypes.number,
		gutterWidth: PropTypes.number,
		layout: PropTypes.oneOf(LAYOUTS)
		};

		get columns() {
		if (this.context.columns > 0) {
		return this.context.columns;
		}
		return DEFAULT_COLUMNS;
		}

		get gutterWidth() {
		if (this.context.gutterWidth >= 0) {
		return this.context.gutterWidth;
		}
		return DEFAULT_GUTTER_WIDTH;
		}

		get layout() {
		const layout = this.context.layout;
		return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT;
		}

		get floatsStyle() {
		const columns = this.columns;
		const gutterWidth = this.gutterWidth;
		getFloatsStyle = ({ columns, gutterWidth, screenClass }) => {
		const style = {
		boxSizing: 'border-box',
		paddingLeft: gutterWidth / 2,
		paddingRight: gutterWidth / 2
		paddingRight: gutterWidth / 2,
		};
		@@ -203,3 +171,2 @@
		const { offset, push, pull } = this.props;
		const { screenClass } = this.state;
		const screenClasses = SCREEN_CLASSES;
		@@ -218,11 +185,10 @@ screenClasses.forEach((size, index) => {
		return style;
		}
		};

		get flexboxStyle() {
		const columns = this.columns;
		const gutterWidth = this.gutterWidth;
		getFlexboxStyle = ({ columns, gutterWidth, screenClass }) => {
		const style = {
		boxSizing: 'border-box',
		paddingLeft: gutterWidth / 2,
		paddingRight: gutterWidth / 2,
		flexShrink: 0
		flexShrink: 0,
		};
		@@ -252,3 +218,2 @@
		const { offset, push, pull } = this.props;
		const { screenClass } = this.state;
		const screenClasses = SCREEN_CLASSES;
		@@ -285,38 +250,4 @@ screenClasses.forEach((size, index) => {
		return flexboxAutoprefixer(style);
		}

		get style() {
		const layout = this.layout;
		if (layout === LAYOUT_FLOATS) {
		return this.floatsStyle;
		}
		if (layout === LAYOUT_FLEXBOX) {
		return this.flexboxStyle;
		}
		return this.floatsStyle;
		}

		setScreenClass = () => {
		this.setState(state => ({
		screenClass: getScreenClass({ breakpoints: this.context.breakpoints })
		}));
		};

		componentWillMount() {
		this.setScreenClass();
		}

		componentDidMount() {
		this.eventListener = throttle(this.setScreenClass, Math.floor(1000 / 60)); // 60Hz
		window.addEventListener('resize', this.eventListener);
		}

		componentWillUnmount() {
		if (this.eventListener) {
		this.eventListener.cancel();
		window.removeEventListener('resize', this.eventListener);
		this.eventListener = null;
		}
		}

		render() {
		@@ -333,15 +264,30 @@ const {
		return (
		<div
		{...props}
		className={cx(className, {
		[styles.flexboxCol]: this.layout === LAYOUT_FLEXBOX,
		[styles.floatsCol]: this.layout === LAYOUT_FLOATS
		})}
		style={{
		...this.style,
		...style
		<Resolver>
		{({ config, screenClass }) => {
		const { columns, gutterWidth, layout } = config;
		let colStyle = {};
		if (layout === LAYOUT_FLEXBOX) {
		colStyle = this.getFlexboxStyle({ columns, gutterWidth, screenClass });
		}
		if (layout === LAYOUT_FLOATS) {
		colStyle = this.getFloatsStyle({ columns, gutterWidth, screenClass });
		}

		return (
		<div
		{...props}
		className={cx(className, {
		[styles.flexboxCol]: layout === LAYOUT_FLEXBOX,
		[styles.floatsCol]: layout === LAYOUT_FLOATS
		})}
		style={{
		...colStyle,
		...style
		}}
		>
		{children}
		</div>
		);
		}}
		>
		{children}
		</div>
		</Resolver>
		);
		@@ -348,0 +294,0 @@ }

+3

-31

src/constants.js

		@@ -1,29 +0,1 @@
		//
		// Aspects of the grid system
		//
		// Bootstrap v3
		// ------------------------------------------------------------------------------------------------
		// \| Extra small \| Small \| Medium \| Large
		// \| <768px \| ≥768px \| ≥992px \| ≥1200px
		// ------------------- \| ----------------------- \| ------------------------------------------------
		// Grid behavior \| Horizontal at all times \| Collapsed to start, horizontal above breakpoints
		// ------------------- \| ----------------------- \| ------------------------------------------------
		// Max container width \| None (auto) \| 750px \| 970px \| 1170px
		// ------------------- \| --------------------------------------------------------------------------
		// Gutter width \| 30px (15px on each side of a column)
		// ------------------------------------------------------------------------------------------------
		//
		// Bootstrap v4
		// ------------------------------------------------------------------------------------------------
		// \| Extra small \| Small \| Medium \| Large \| Extra large
		// \| <576px \| ≥576px \| ≥768px \| ≥992px \| ≥1200px
		// ------------------- \| ----------------------- \| ------------------------------------------------
		// Grid behavior \| Horizontal at all times \| Collapsed to start, horizontal above breakpoints
		// ------------------- \| ----------------------- \| ------------------------------------------------
		// Max container width \| None (auto) \| 540px \| 720px \| 960px \| 1140px
		// ------------------- \| --------------------------------------------------------------------------
		// Gutter width \| 30px (15px on each side of a column)
		// ------------------------------------------------------------------------------------------------
		//

		export const LAYOUT_FLEXBOX = 'flexbox';
		@@ -33,3 +5,3 @@ export const LAYOUT_FLOATS = 'floats';
		LAYOUT_FLEXBOX,
		LAYOUT_FLOATS
		LAYOUT_FLOATS,
		];
		@@ -49,5 +21,5 @@
		// The default horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
		export const DEFAULT_GUTTER_WIDTH = 30;
		export const DEFAULT_GUTTER_WIDTH = 0;

		// The default grid system layout.
		export const DEFAULT_LAYOUT = LAYOUT_FLOATS;
		export const DEFAULT_LAYOUT = LAYOUT_FLEXBOX;

+55

-99

src/Container.jsx

		@@ -5,4 +5,2 @@ import cx from 'classnames';
		import React, { PureComponent } from 'react';
		import throttle from 'lodash.throttle';
		import { getScreenClass } from './utils';
		import {
		@@ -15,4 +13,6 @@ LAYOUT_FLEXBOX,
		DEFAULT_GUTTER_WIDTH,
		DEFAULT_LAYOUT
		DEFAULT_LAYOUT,
		} from './constants';
		import Resolver from './Resolver';
		import { ConfigurationContext } from './context';
		import styles from './index.styl';
		@@ -57,5 +57,2 @@
		layout: PropTypes.oneOf(LAYOUTS),

		// A callback fired when the resize event occurs.
		onResize: PropTypes.func
		};
		@@ -73,49 +70,3 @@

		static contextTypes = {
		breakpoints: PropTypes.arrayOf(PropTypes.number),
		containerWidths: PropTypes.arrayOf(PropTypes.number),
		columns: PropTypes.number,
		gutterWidth: PropTypes.number,
		layout: PropTypes.oneOf(LAYOUTS)
		};

		static childContextTypes = {
		columns: PropTypes.number,
		gutterWidth: PropTypes.number,
		layout: PropTypes.oneOf(LAYOUTS)
		};

		getChildContext = () => ({
		columns: this.columns,
		gutterWidth: this.gutterWidth,
		layout: this.layout
		});

		get columns() {
		if (this.props.columns > 0) {
		return this.props.columns;
		}
		if (this.context.columns > 0) {
		return this.context.columns;
		}
		return DEFAULT_COLUMNS;
		}

		get gutterWidth() {
		if (this.props.gutterWidth >= 0) {
		return this.props.gutterWidth;
		}
		if (this.context.gutterWidth >= 0) {
		return this.context.gutterWidth;
		}
		return DEFAULT_GUTTER_WIDTH;
		}

		get layout() {
		const layout = this.props.layout \|\| this.context.layout;
		return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT;
		}

		get style() {
		const gutterWidth = this.gutterWidth;
		getStyle = ({ containerWidths, gutterWidth, screenClass }) => {
		const style = {
		@@ -131,6 +82,3 @@ paddingLeft: gutterWidth / 2,

		const { screenClass } = this.state;
		const containerWidths = (ensureArray(this.context.containerWidths).length > 0)
		? ensureArray(this.context.containerWidths)
		: DEFAULT_CONTAINER_WIDTHS;
		containerWidths = ensureArray(containerWidths);

		@@ -154,31 +102,4 @@ if (screenClass === 'sm' && (containerWidths[0] > 0) && (!sm && !xs)) {
		return style;
		}

		setScreenClass = () => {
		const screenClass = getScreenClass({ breakpoints: this.context.breakpoints });

		this.setState({ screenClass: screenClass }, () => {
		if (typeof this.props.onResize === 'function') {
		this.props.onResize({ screenClass: screenClass });
		}
		});
		};

		componentWillMount() {
		this.setScreenClass();
		}

		componentDidMount() {
		this.eventListener = throttle(this.setScreenClass, Math.floor(1000 / 60)); // 60Hz
		window.addEventListener('resize', this.eventListener);
		}

		componentWillUnmount() {
		if (this.eventListener) {
		this.eventListener.cancel();
		window.removeEventListener('resize', this.eventListener);
		this.eventListener = null;
		}
		}

		render() {
		@@ -188,5 +109,5 @@ const {
		xs, sm, md, lg, xl, xxl, // eslint-disable-line
		gutterWidth, // eslint-disable-line
		layout, // eslint-disable-line
		onResize, // eslint-disable-line
		columns: _columns, // eslint-disable-line
		gutterWidth: _gutterWidth, // eslint-disable-line
		layout: _layout, // eslint-disable-line
		className,
		@@ -199,15 +120,50 @@ style,
		return (
		<div
		{...props}
		className={cx(className, {
		[styles.flexboxContainer]: this.layout === LAYOUT_FLEXBOX,
		[styles.floatsContainer]: this.layout === LAYOUT_FLOATS
		})}
		style={{
		...this.style,
		...style
		<Resolver>
		{({ config, screenClass }) => {
		config = { ...config };
		const containerWidths = (() => {
		const containerWidths = ensureArray(config.containerWidths);
		return containerWidths.length > 0 ? containerWidths : DEFAULT_CONTAINER_WIDTHS;
		})();
		const columns = (() => {
		const { columns = config.columns } = this.props;
		return Number(columns) > 0 ? Number(columns) : DEFAULT_COLUMNS;
		})();
		const gutterWidth = (() => {
		const { gutterWidth = config.gutterWidth } = this.props;
		return Number(gutterWidth) >= 0 ? (Number(gutterWidth) \|\| 0) : DEFAULT_GUTTER_WIDTH;
		})();
		const layout = (() => {
		const { layout = config.layout } = this.props;
		return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT;
		})();
		const containerStyle = this.getStyle({ containerWidths, gutterWidth, screenClass });

		return (
		<ConfigurationContext.Provider
		value={{
		...config,
		containerWidths,
		columns,
		gutterWidth,
		layout,
		}}
		>
		<div
		{...props}
		className={cx(className, {
		[styles.flexboxContainer]: layout === LAYOUT_FLEXBOX,
		[styles.floatsContainer]: layout === LAYOUT_FLOATS,
		})}
		style={{
		...containerStyle,
		...style,
		}}
		>
		{children}
		</div>
		</ConfigurationContext.Provider>
		);
		}}
		>
		{children}
		</div>
		</Resolver>
		);
		@@ -214,0 +170,0 @@ }

+34

-72

src/Hidden.jsx

		import PropTypes from 'prop-types';
		import { PureComponent } from 'react';
		import throttle from 'lodash.throttle';
		import { getScreenClass } from './utils';
		import React from 'react';
		import Resolver from './Resolver';

		@@ -28,80 +27,43 @@ const hidden = (screenClass, { xs, sm, md, lg, xl, xxl }) => {

		class Hidden extends PureComponent {
		static propTypes = {
		// Hidden on extra small devices.
		xs: PropTypes.bool,
		const Hidden = ({ xs, sm, md, lg, xl, xxl, children }) => (
		<Resolver>
		{({ screenClass }) => {
		if (hidden(screenClass, { xs, sm, md, lg, xl, xxl })) {
		return null;
		}

		// Hidden on small devices.
		sm: PropTypes.bool,
		return children;
		}}
		</Resolver>
		);

		// Hidden on medium devices.
		md: PropTypes.bool,
		Hidden.propTypes = {
		// Hidden on extra small devices.
		xs: PropTypes.bool,

		// Hidden on large devices.
		lg: PropTypes.bool,
		// Hidden on small devices.
		sm: PropTypes.bool,

		// Hidden on extra large devices.
		xl: PropTypes.bool,
		// Hidden on medium devices.
		md: PropTypes.bool,

		// Hidden on double extra large devices.
		xxl: PropTypes.bool,
		// Hidden on large devices.
		lg: PropTypes.bool,

		// A callback fired when the resize event occurs.
		onResize: PropTypes.func
		};
		// Hidden on extra large devices.
		xl: PropTypes.bool,

		static defaultProps = {
		xs: false,
		sm: false,
		md: false,
		lg: false,
		xl: false,
		xxl: false
		};
		// Hidden on double extra large devices.
		xxl: PropTypes.bool,
		};

		static contextTypes = {
		breakpoints: PropTypes.arrayOf(PropTypes.number)
		};
		Hidden.defaultProps = {
		xs: false,
		sm: false,
		md: false,
		lg: false,
		xl: false,
		xxl: false,
		};

		setScreenClass = () => {
		const screenClass = getScreenClass({ breakpoints: this.context.breakpoints });

		this.setState({ screenClass: screenClass }, () => {
		if (typeof this.props.onResize === 'function') {
		this.props.onResize({ screenClass: screenClass });
		}
		});
		};

		componentWillMount() {
		this.setScreenClass();
		}

		componentDidMount() {
		this.eventListener = throttle(this.setScreenClass, Math.floor(1000 / 60)); // 60Hz
		window.addEventListener('resize', this.eventListener);
		}

		componentWillUnmount() {
		if (this.eventListener) {
		this.eventListener.cancel();
		window.removeEventListener('resize', this.eventListener);
		this.eventListener = null;
		}
		}

		render() {
		const {
		xs, sm, md, lg, xl, xxl, // eslint-disable-line
		onResize // eslint-disable-line
		} = this.props;

		if (hidden(this.state.screenClass, { xs, sm, md, lg, xl, xxl })) {
		return null;
		}

		return this.props.children;
		}
		}

		export default Hidden;

+2

-1

src/index.js

		@@ -5,3 +5,4 @@ export Provider from './Provider';
		export Col from './Col';
		export Hidden from './Hidden';
		export Visible from './Visible';
		export Hidden from './Hidden';
		export ScreenClass from './ScreenClass';

+5

-7

src/index.styl

		/**
		* Container
		*/
		.floats-container {
		clearfix();

		.flexbox-container {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		margin-left: auto;
		}

		.flexbox-container {
		.floats-container {
		clearfix();
		position: relative;
		margin-right: auto;
		margin-left: auto;
		margin-right: auto;
		}
		@@ -36,3 +35,2 @@
		float: left;

		position: relative;
		@@ -39,0 +37,0 @@ width: 100%;

+85

-21

src/Provider.jsx

		@@ -0,11 +1,18 @@
		import ensureArray from 'ensure-array';
		import throttle from 'lodash.throttle';
		import PropTypes from 'prop-types';
		import React from 'react';
		import React, { PureComponent } from 'react';
		import {
		LAYOUTS,
		SCREEN_CLASSES,
		DEFAULT_BREAKPOINTS,
		DEFAULT_CONTAINER_WIDTHS,
		DEFAULT_COLUMNS,
		DEFAULT_GUTTER_WIDTH
		DEFAULT_GUTTER_WIDTH,
		DEFAULT_LAYOUT,
		} from './constants';
		import { ConfigurationContext, ScreenClassContext } from './context';
		import { getScreenClass } from './utils';

		class Provider extends React.Component {
		class Provider extends PureComponent {
		static propTypes = {
		@@ -24,4 +31,7 @@ // The breakpoints (minimum width) of devices in screen class sm, md, lg, xl, and xxl.

		// The grid system layout. One of: 'floats', 'flexbox'
		layout: PropTypes.oneOf(['floats', 'flexbox'])
		// The grid system layout. One of: 'flexbox', 'floats'
		layout: PropTypes.oneOf(LAYOUTS),

		// A callback invoked when the resize event occurs.
		onResize: PropTypes.func,
		};
		@@ -34,23 +44,77 @@
		gutterWidth: DEFAULT_GUTTER_WIDTH,
		layout: 'floats'
		layout: DEFAULT_LAYOUT,
		onResize: () => {},
		};

		static childContextTypes = {
		breakpoints: PropTypes.arrayOf(PropTypes.number),
		containerWidths: PropTypes.arrayOf(PropTypes.number),
		columns: PropTypes.number,
		gutterWidth: PropTypes.number,
		layout: PropTypes.oneOf(['floats', 'flexbox'])
		constructor(props) {
		super(props);

		this.state = {
		screenClass: SCREEN_CLASSES[0]
		};
		}

		componentDidMount() {
		this.setScreenClass();

		this.eventListener = throttle(this.setScreenClass, Math.floor(1000 / 60)); // 60Hz
		window.addEventListener('resize', this.eventListener);
		}

		componentWillUnmount() {
		if (this.eventListener) {
		this.eventListener.cancel();
		window.removeEventListener('resize', this.eventListener);
		this.eventListener = null;
		}
		}

		setScreenClass = () => {
		const { breakpoints } = this.props;
		const screenClass = getScreenClass({ breakpoints });
		if (screenClass !== this.state.screenClass) {
		this.setState({ screenClass: screenClass });
		}
		};

		getChildContext = () => ({
		breakpoints: this.props.breakpoints,
		containerWidths: this.props.containerWidths,
		columns: this.props.columns,
		gutterWidth: this.props.gutterWidth,
		layout: this.props.layout
		});
		render() {
		const breakpoints = (() => {
		const breakpoints = ensureArray(this.props.breakpoints);
		return breakpoints.length > 0 ? breakpoints : DEFAULT_BREAKPOINTS;
		})();
		const containerWidths = (() => {
		const containerWidths = ensureArray(this.props.containerWidths);
		return containerWidths.length > 0 ? containerWidths : DEFAULT_CONTAINER_WIDTHS;
		})();
		const columns = (() => {
		const columns = Number(this.props.columns) \|\| 0;
		return columns > 0 ? columns : DEFAULT_COLUMNS;
		})();
		const gutterWidth = (() => {
		const gutterWidth = Number(this.props.gutterWidth) \|\| 0;
		return gutterWidth >= 0 ? gutterWidth : DEFAULT_GUTTER_WIDTH;
		})();
		const layout = (() => {
		const layout = this.props.layout;
		return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT;
		})();
		const { screenClass } = this.state;

		render() {
		return this.props.children;
		return (
		<ConfigurationContext.Provider
		value={{
		breakpoints,
		containerWidths,
		columns,
		gutterWidth,
		layout,
		}}
		>
		<ScreenClassContext.Provider value={screenClass}>
		<React.Fragment>
		{this.props.children}
		</React.Fragment>
		</ScreenClassContext.Provider>
		</ConfigurationContext.Provider>
		);
		}
		@@ -57,0 +121,0 @@ }

+24

-76

src/Row.jsx

		import cx from 'classnames';
		import PropTypes from 'prop-types';
		import React, { PureComponent } from 'react';
		@@ -7,66 +6,8 @@ import {
		LAYOUT_FLOATS,
		LAYOUTS,
		DEFAULT_COLUMNS,
		DEFAULT_GUTTER_WIDTH,
		DEFAULT_LAYOUT
		} from './constants';
		import Resolver from './Resolver';
		import styles from './index.styl';

		class Row extends PureComponent {
		static propTypes = {
		// The number of columns.
		columns: PropTypes.number,

		// The horizontal padding (called gutter) between two columns.
		gutterWidth: PropTypes.number,

		// The grid system layout.
		layout: PropTypes.oneOf(LAYOUTS)
		};

		static contextTypes = {
		columns: PropTypes.number,
		gutterWidth: PropTypes.number,
		layout: PropTypes.oneOf(LAYOUTS)
		};

		static childContextTypes = {
		columns: PropTypes.number,
		gutterWidth: PropTypes.number,
		layout: PropTypes.oneOf(LAYOUTS)
		};

		getChildContext = () => ({
		columns: this.columns,
		gutterWidth: this.gutterWidth,
		layout: this.layout
		});

		get columns() {
		if (this.props.columns > 0) {
		return this.props.columns;
		}
		if (this.context.columns > 0) {
		return this.context.columns;
		}
		return DEFAULT_COLUMNS;
		}

		get gutterWidth() {
		if (this.props.gutterWidth >= 0) {
		return this.props.gutterWidth;
		}
		if (this.context.gutterWidth >= 0) {
		return this.context.gutterWidth;
		}
		return DEFAULT_GUTTER_WIDTH;
		}

		get layout() {
		const layout = this.props.layout \|\| this.context.layout;
		return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT;
		}

		get style() {
		const gutterWidth = this.gutterWidth;
		getStyle = ({ gutterWidth }) => {
		const style = {
		@@ -78,8 +19,6 @@ marginLeft: -(gutterWidth / 2),
		return style;
		}
		};

		render() {
		const {
		gutterWidth, // eslint-disable-line
		layout, // eslint-disable-line
		className,
		@@ -92,15 +31,24 @@ style,
		return (
		<div
		{...props}
		className={cx(className, {
		[styles.flexboxRow]: this.layout === LAYOUT_FLEXBOX,
		[styles.floatsRow]: this.layout === LAYOUT_FLOATS
		})}
		style={{
		...this.style,
		...style
		<Resolver>
		{({ config, screenClass }) => {
		const { gutterWidth, layout } = config;
		const rowStyle = this.getStyle({ gutterWidth });

		return (
		<div
		{...props}
		className={cx(className, {
		[styles.flexboxRow]: layout === LAYOUT_FLEXBOX,
		[styles.floatsRow]: layout === LAYOUT_FLOATS,
		})}
		style={{
		...rowStyle,
		...style,
		}}
		>
		{children}
		</div>
		);
		}}
		>
		{children}
		</div>
		</Resolver>
		);
		@@ -107,0 +55,0 @@ }

+34

-72

src/Visible.jsx

		import PropTypes from 'prop-types';
		import { PureComponent } from 'react';
		import throttle from 'lodash.throttle';
		import { getScreenClass } from './utils';
		import React from 'react';
		import Resolver from './Resolver';

		@@ -28,80 +27,43 @@ const visible = (screenClass, { xs, sm, md, lg, xl, xxl }) => {

		class Visible extends PureComponent {
		static propTypes = {
		// Visible on extra small devices.
		xs: PropTypes.bool,
		const Visible = ({ xs, sm, md, lg, xl, xxl, children }) => (
		<Resolver>
		{({ screenClass }) => {
		if (visible(screenClass, { xs, sm, md, lg, xl, xxl })) {
		return children;
		}

		// Visible on small devices.
		sm: PropTypes.bool,
		return null;
		}}
		</Resolver>
		);

		// Visible on medimum devices.
		md: PropTypes.bool,
		Visible.propTypes = {
		// Visible on extra small devices.
		xs: PropTypes.bool,

		// Visible on large devices.
		lg: PropTypes.bool,
		// Visible on small devices.
		sm: PropTypes.bool,

		// Visible on extra large devices.
		xl: PropTypes.bool,
		// Visible on medimum devices.
		md: PropTypes.bool,

		// Visible on double extra large devices.
		xxl: PropTypes.bool,
		// Visible on large devices.
		lg: PropTypes.bool,

		// A callback fired when the resize event occurs.
		onResize: PropTypes.func
		};
		// Visible on extra large devices.
		xl: PropTypes.bool,

		static defaultProps = {
		xs: false,
		sm: false,
		md: false,
		lg: false,
		xl: false,
		xxl: false
		};
		// Visible on double extra large devices.
		xxl: PropTypes.bool,
		};

		static contextTypes = {
		breakpoints: PropTypes.arrayOf(PropTypes.number)
		};
		Visible.defaultProps = {
		xs: false,
		sm: false,
		md: false,
		lg: false,
		xl: false,
		xxl: false,
		};

		setScreenClass = () => {
		const screenClass = getScreenClass({ breakpoints: this.context.breakpoints });

		this.setState({ screenClass: screenClass }, () => {
		if (typeof this.props.onResize === 'function') {
		this.props.onResize({ screenClass: screenClass });
		}
		});
		};

		componentWillMount() {
		this.setScreenClass();
		}

		componentDidMount() {
		this.eventListener = throttle(this.setScreenClass, Math.floor(1000 / 60)); // 60Hz
		window.addEventListener('resize', this.eventListener);
		}

		componentWillUnmount() {
		if (this.eventListener) {
		this.eventListener.cancel();
		window.removeEventListener('resize', this.eventListener);
		this.eventListener = null;
		}
		}

		render() {
		const {
		xs, sm, md, lg, xl, xxl, // eslint-disable-line
		onResize // eslint-disable-line
		} = this.props;

		if (visible(this.state.screenClass, { xs, sm, md, lg, xl, xxl })) {
		return this.props.children;
		}

		return null;
		}
		}

		export default Visible;

+43

-18

webpack.config.js

		@@ -1,8 +0,10 @@
		const pkg = require('./package.json');
		const path = require('path');
		const webpack = require('webpack');
		const ExtractTextPlugin = require('extract-text-webpack-plugin');
		const findImports = require('find-imports');
		const stylusLoader = require('stylus-loader');
		const MiniCssExtractPlugin = require('mini-css-extract-plugin');
		const nib = require('nib');
		const webpack = require('webpack');
		const pkg = require('./package.json');
		const babelConfig = require('./babel.config');

		const publicname = pkg.name.replace(/^@\w+\//, ''); // Strip out "@trendmicro/" from package name
		@@ -18,4 +20,7 @@ const banner = [
		module.exports = {
		mode: 'development',
		devtool: 'source-map',
		entry: path.resolve(__dirname, 'src/index.js'),
		entry: {
		[publicname]: path.resolve(__dirname, 'src/index.js')
		},
		output: {
		@@ -32,3 +37,2 @@ path: path.join(__dirname, 'lib'),
		rules: [
		// http://survivejs.com/webpack_react/linting_in_webpack/
		{
		@@ -41,21 +45,29 @@ test: /\.jsx?$/,
		{
		test: /\.styl$/,
		loader: 'stylint-loader',
		enforce: 'pre'
		},
		{
		test: /\.jsx?$/,
		loader: 'babel-loader',
		exclude: /(node_modules\|bower_components)/
		exclude: /node_modules/,
		options: babelConfig
		},
		{
		test: /\.styl$/,
		use: ExtractTextPlugin.extract({
		fallback: 'style-loader',
		use: 'css-loader?camelCase&modules&importLoaders=1&localIdentName=' + localClassPrefix + '---[local]---[hash:base64:5]!stylus-loader'
		})
		use: [
		MiniCssExtractPlugin.loader,
		{
		loader: 'css-loader',
		options: {
		modules: true,
		localIdentName: `${localClassPrefix}---[local]---[hash:base64:5]`,
		camelCase: true,
		importLoaders: 1
		}
		},
		'stylus-loader'
		]
		},
		{
		test: /\.css$/,
		loader: 'style-loader!css-loader'
		use: [
		'style-loader',
		'css-loader'
		]
		},
		@@ -65,2 +77,14 @@ {
		loader: 'url-loader'
		},
		{
		test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
		loader: 'url-loader',
		options: {
		limit: 10000,
		mimetype: 'application/font-woff'
		}
		},
		{
		test: /\.(ttf\|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
		loader: 'file-loader'
		}
		@@ -76,3 +100,2 @@ ]
		}),
		new webpack.NoEmitOnErrorsPlugin(),
		new stylusLoader.OptionsPlugin({
		@@ -86,3 +109,5 @@ default: {
		}),
		new ExtractTextPlugin('../dist/' + publicname + '.css'),
		new MiniCssExtractPlugin({
		filename: '../dist/[name].css',
		}),
		new webpack.BannerPlugin(banner)
		@@ -89,0 +114,0 @@ ],

-6

.babelrc

		{
		"presets": ["env", "stage-0", "react"],
		"plugins": [
		"transform-decorators-legacy"
		]
		}

docs/0b39d1e64af23fe5437238402d08496a.svg

Sorry, the diff of this file is too big to display

docs/35071d00819547a959ef3450c129d77e.eot

Sorry, the diff of this file is not supported yet

-17

docs/37f4597594857b017901209aae0a60e1.svg

		<?xml version="1.0" encoding="utf-8"?>
		<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
		<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
		<svg version="1.1" id="iconWarningRed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
		<style type="text/css">
		<![CDATA[
		.st0{fill:#FFFFFF;}
		.st1{fill:#DB3D44;}
		]]>
		</style>
		<g>
		<circle class="st1" cx="8" cy="8" r="7"/>
		<rect x="7" y="4" class="st0" width="2" height="5"/>
		<rect x="7" y="10" class="st0" width="2" height="2"/>
		</g>
		</svg>

docs/3eff5a4e9fb92ca96cbf2fa77649b8c1.ttf

Sorry, the diff of this file is not supported yet

docs/81436770636b45508203b3022075ae73.ttf

Sorry, the diff of this file is not supported yet

docs/8a53d21a4d9aa1aac2bf15093bd748c4.woff

Sorry, the diff of this file is not supported yet

docs/af39e41be700d6148c61a6c1ffc84215.svg

Sorry, the diff of this file is too big to display

docs/bundle.js

Sorry, the diff of this file is too big to display

docs/bundle.js.map

Sorry, the diff of this file is too big to display

docs/d6c7e9d3e5adb7a5261c5ad9f7d3caaa.woff

Sorry, the diff of this file is not supported yet

docs/d9c6d360d27eac625da0405245ec9f0d.eot

Sorry, the diff of this file is not supported yet

examples/.stylintrc

Sorry, the diff of this file is not supported yet

-44

examples/CodeBlock.jsx

		import PropTypes from 'prop-types';
		import React from 'react';
		import Markdown from 'react-markdown';
		import Parser from 'react-jsx-parser';
		import styled from 'styled-components';
		import {
		Provider,
		Container,
		Row as _Row,
		Col as _Col,
		Visible,
		Hidden
		} from '../src';

		const Comment = (props) => null;

		const Row = styled(_Row)`
		margin-bottom: 1rem;
		`;

		const Col = styled(_Col)`
		padding-top: .75rem;
		padding-bottom: .75rem;
		background-color: rgba(86,61,124,.15);
		border: 1px solid rgba(86,61,124,.2);
		`;

		const Code = ({ code, ...props }) => (
		<div {...props}>
		<Parser
		components={{ Comment, Provider, Container, Row, Col, Visible, Hidden }}
		jsx={code}
		/>
		<div style={{ width: '100%' }}>
		<Markdown source={'```jsx\n' + code + '\n```'} />
		</div>
		</div>
		);

		Code.propTypes = {
		code: PropTypes.string
		};

		export default Code;

-12

examples/flexbox/all-breakpoints.md

		<Container layout="flexbox">
		<Row>
		<Col>col</Col>
		<Col>col</Col>
		<Col>col</Col>
		<Col>col</Col>
		</Row>
		<Row>
		<Col width={8}>col-8</Col>
		<Col width={4}>col-4</Col>
		</Row>
		</Container>

-10

examples/flexbox/auto-margin.md

		<Container layout="flexbox">
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4} style={{ marginLeft: 'auto' }}>col-md-4 ml-auto</Col>
		</Row>
		<Row>
		<Col width="auto" style={{ marginRight: 'auto' }}>col-auto mr-auto</Col>
		<Col width="auto">col-auto</Col>
		</Row>
		</Container>

-10

examples/flexbox/column-breaks.md

		<Container layout="flexbox">
		<Row>
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		{/* Force next columns to break to new line */}
		<div style={{ width: '100%' }} />
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		<Col width={6} sm={3}>col-6 col-sm-3</Col>
		</Row>
		</Container>

-7

examples/flexbox/column-wrapping.md

		<Container layout="flexbox">
		<Row>
		<Col width={9}>col-9</Col>
		<Col width={4}>col-4</Col>
		<Col width={6}>col-6</Col>
		</Row>
		</Container>

-11

examples/flexbox/custom-columns.md

		<Container layout="flexbox">
		<Row columns={20}>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		</Row>
		</Container>

-10

examples/flexbox/equal-width-multi-row.md

 <Container layout="flexbox">
     <Row>
         <Col>col</Col>
         <Col>col</Col>
     </Row>
     <Row>
         <Col>col</Col>
         <Col>col</Col>
     </Row>
 </Container>

-11

examples/flexbox/equal-width.md

 <Container layout="flexbox">
     <Row>
         <Col>1 of 2</Col>
         <Col>2 of 2</Col>
     </Row>
     <Row>
         <Col>1 of 3</Col>
         <Col>2 of 3</Col>
         <Col>3 of 3</Col>
     </Row>
 </Container>

-22

examples/flexbox/horizontal-alignment.md

		<Container layout="flexbox">
		<Row style={{ justifyContent: 'flex-start' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'center' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'flex-end' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'space-around' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		<Row style={{ justifyContent: 'space-between' }}>
		<Col width={4}>One of two columns</Col>
		<Col width={4}>One of two columns</Col>
		</Row>
		</Container>

-15

examples/flexbox/mix-match.md

		<Container layout="flexbox">
		<Row>
		<Col xs md={8}>col-md-8</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		</Row>
		<Row>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		</Row>
		<Row>
		<Col width={6}>col-6</Col>
		<Col width={6}>col-6</Col>
		</Row>
		</Container>

-15

examples/flexbox/nesting.md

		<Container layout="floats">
		<Row>
		<Col sm={9}>
		Level 1: col-sm-9
		<Row>
		<Col width={8} sm={6}>
		Level 2: col-8 col-sm-6
		</Col>
		<Col width={4} sm={6}>
		Level 2: col-8 col-sm-6
		</Col>
		</Row>
		</Col>
		</Row>
		</Container>

-6

examples/flexbox/no-gutters.md

		<Container layout="flexbox" gutterWidth={0}>
		<Row gutterWidth={0}>
		<Col width={12} sm={6} md={8}>col-12 col-sm-6 col-md-8</Col>
		<Col width={6} md={4}>col-6 col-md-4</Col>
		</Row>
		</Container>

-21

examples/flexbox/offsetting-columns.md

		<Container layout="flexbox">
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4} offset={{ md: 4 }}>col-md-4 col-offset-md-4</Col>
		</Row>
		<Row>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-offset-md-3</Col>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-offset-md-3</Col>
		</Row>
		<Row>
		<Col md={6} offset={{ md: 3 }}>col-md-6 col-offset-md-3</Col>
		</Row>
		<Row>
		<Col sm={5} md={6}>col-sm-5 col-md-6</Col>
		<Col sm={5} md={6} offset={{ sm: 2, md: 0 }}>col-sm-5 col-offset-sm-2 col-md-6 col-offset-md-0</Col>
		</Row>
		<Row>
		<Col sm={6} md={5} lg={6}>col-sm-6 col-md-5 col-lg-6</Col>
		<Col sm={6} md={5} lg={6} offset={{ md: 2, lg: 0 }}>col-sm-6 col-md-5 col-offset-md-2 col-lg-6 col-offset-lg-0</Col>
		</Row>
		</Container>

-12

examples/flexbox/setting-one-column-width.md

		<Container layout="flexbox">
		<Row>
		<Col>1 of 3</Col>
		<Col width={6}>2 of 3 (wider)</Col>
		<Col>3 of 3</Col>
		</Row>
		<Row>
		<Col>1 of 3</Col>
		<Col width={5}>2 of 3 (wider)</Col>
		<Col>3 of 3</Col>
		</Row>
		</Container>

-11

examples/flexbox/stacked-to-horizontal.md

		<Container layout="flexbox">
		<Row>
		<Col sm={8}>col-sm-8</Col>
		<Col sm={4}>col-sm-4</Col>
		</Row>
		<Row>
		<Col sm>col-sm</Col>
		<Col sm>col-sm</Col>
		<Col sm>col-sm</Col>
		</Row>
		</Container>

-12

examples/flexbox/variable-width-content.md

		<Container layout="flexbox">
		<Row style={{ justifyContent: 'center' }}>
		<Col xs lg={2}>1 of 3</Col>
		<Col width={12} md="auto">Variable width content</Col>
		<Col xs lg={2}>3 of 3</Col>
		</Row>
		<Row>
		<Col>1 of 3</Col>
		<Col width={12} md="auto">Variable width content</Col>
		<Col xs lg={2}>3 of 3</Col>
		</Row>
		</Container>

-45

examples/flexbox/vertical-alignment.md

		<Container layout="flexbox">
		<Row
		style={{
		alignItems: 'flex-start',
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		</Row>
		<Row
		style={{
		alignItems: 'center',
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		</Row>
		<Row
		style={{
		alignItems: 'flex-end',
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		<Col>One of three columns</Col>
		</Row>
		<Row
		style={{
		minHeight: '10rem',
		backgroundColor: 'rgba(255, 0, 0, .1)'
		}}
		>
		<Col style={{ alignSelf: 'flex-start' }}>One of three columns</Col>
		<Col style={{ alignSelf: 'center' }}>One of three columns</Col>
		<Col style={{ alignSelf: 'flex-end' }}>One of three columns</Col>
		</Row>
		</Container>

-6

examples/floats/column-ordering.md

		<Container layout="floats">
		<Row>
		<Col md={9} push={{ md: 3 }}>col-md-9 col-md-push-3</Col>
		<Col md={3} pull={{ md: 9 }}>col-md-3 col-md-pull-9</Col>
		</Row>
		</Container>

-11

examples/floats/custom-columns.md

		<Container layout="floats">
		<Row columns={20}>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		<Col sm={5} md={4} xl={2}>col</Col>
		</Row>
		</Container>

-18

examples/floats/mobile-desktop.md

		<Container layout="floats">
		<Comment>Stack the columns on mobile by making one full-width and the other half-width</Comment>
		<Row>
		<Col xs={12} md={8}>col-xs-12 col-md-8</Col>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		</Row>
		<Comment>Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop</Comment>
		<Row>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		<Col xs={6} md={4}>col-xs-6 col-md-4</Col>
		</Row>
		<Comment>Columns are always 50% wide, on mobile and desktop</Comment>
		<Row>
		<Col xs={6}>col-xs-6</Col>
		<Col xs={6}>col-xs-6</Col>
		</Row>
		</Container>

-11

examples/floats/mobile-tablet-desktops.md

		<Container layout="floats">
		<Row>
		<Col xs={12} sm={6} md={8}>col-xs-12 col-sm-6 col-md-8</Col>
		<Col xs={6} sm={6} md={4}>col-xs-6 col-sm-6 col-md-4</Col>
		</Row>
		<Row>
		<Col xs={6} sm={4} md={4}>col-xs-6 col-sm-4 col-md-4</Col>
		<Col xs={6} sm={4} md={4}>col-xs-6 col-sm-4 col-md-4</Col>
		<Col xs={6} sm={4} md={4}>col-xs-6 col-sm-4 col-md-4</Col>
		</Row>
		</Container>

-15

examples/floats/nesting-columns.md

		<Container layout="floats">
		<Row>
		<Col md={9}>
		Level 1: col-md-9
		<Row>
		<Col md={6}>
		Level 2: col-md-6
		</Col>
		<Col md={6}>
		Level 2: col-md-6
		</Col>
		</Row>
		</Col>
		</Row>
		</Container>

-13

examples/floats/offsetting-columns.md

		<Container layout="floats">
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4} offset={{ md: 4 }}>col-md-4 col-md-offset-4</Col>
		</Row>
		<Row>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-md-offset-3</Col>
		<Col md={3} offset={{ md: 3 }}>col-md-3 col-md-offset-3</Col>
		</Row>
		<Row>
		<Col md={6} offset={{ md: 3 }}>col-md-6 col-md-offset-3</Col>
		</Row>
		</Container>

-10

examples/floats/responsive-column-resets.md

		<Container layout="floats">
		<Row>
		<Col sm={5} md={6}>col-sm-5 col-md-6</Col>
		<Col sm={5} md={6} offset={{ sm: 2, md: 0 }}>col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0</Col>
		</Row>
		<Row>
		<Col sm={6} md={5} lg={6}>col-sm-6 col-md-5 col-lg-6</Col>
		<Col sm={6} md={5} lg={6} offset={{ md: 2, lg: 0 }}>col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0</Col>
		</Row>
		</Container>

-29

examples/floats/stacked-to-horizontal.md

		<Container layout="floats">
		<Row>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		<Col md={1}>col-md-1</Col>
		</Row>
		<Row>
		<Col md={8}>col-md-8</Col>
		<Col md={4}>col-md-4</Col>
		</Row>
		<Row>
		<Col md={4}>col-md-4</Col>
		<Col md={4}>col-md-4</Col>
		<Col md={4}>col-md-4</Col>
		</Row>
		<Row>
		<Col md={6}>col-md-6</Col>
		<Col md={6}>col-md-6</Col>
		</Row>
		</Container>

-12

examples/hidden.md

		<Container>
		<Hidden xs sm>
		<Row>
		<Col>Hidden on extra small and small</Col>
		</Row>
		</Hidden>
		<Hidden md lg>
		<Row>
		<Col>Hidden on medium and large</Col>
		</Row>
		</Hidden>
		</Container>

-18

examples/index.html

		<!doctype html>
		<html>
		<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>React GridSystem</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link ref="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
		<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
		</head>
		<body>
		<div id="container"></div>
		<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
		</body>
		</html>

-218

examples/index.jsx

		/* eslint react/no-children-prop: 0 */
		import 'trendmicro-ui/dist/css/trendmicro-ui.css';
		import '@trendmicro/react-buttons/dist/react-buttons.css';
		import React from 'react';
		import ReactDOM from 'react-dom';
		import styled from 'styled-components';
		import Navbar from './Navbar';
		import CodeBlock from './CodeBlock';
		import floatsCustomColumns from './floats/custom-columns.md';
		import floatsStackedToHorizontal from './floats/stacked-to-horizontal.md';
		import floatsMobileDesktop from './floats/mobile-desktop.md';
		import floatsMobileTabletDesktops from './floats/mobile-tablet-desktops.md';
		import floatsResponsiveColumnResets from './floats/responsive-column-resets.md';
		import floatsOffsettingColumns from './floats/offsetting-columns.md';
		import floatsNestingColumns from './floats/nesting-columns.md';
		import floatsColumnOrdering from './floats/column-ordering.md';
		import flexboxEqualWidth from './flexbox/equal-width.md';
		import flexboxCustomColumns from './flexbox/custom-columns.md';
		import flexboxSettingOneColumnWidth from './flexbox/setting-one-column-width.md';
		import flexboxVariableWidthContent from './flexbox/variable-width-content.md';
		import flexboxEqualWidthMultiRow from './flexbox/equal-width-multi-row.md';
		import flexboxAllBreakpoints from './flexbox/all-breakpoints.md';
		import flexboxStackedToHorizontal from './flexbox/stacked-to-horizontal.md';
		import flexboxMixMatch from './flexbox/mix-match.md';
		import flexboxVerticalAlignment from './flexbox/vertical-alignment.md';
		import flexboxHorizontalAlignment from './flexbox/horizontal-alignment.md';
		import flexboxNoGutters from './flexbox/no-gutters.md';
		import flexboxColumnWrapping from './flexbox/column-wrapping.md';
		import flexboxColumnBreaks from './flexbox/column-breaks.md';
		import flexboxOffsettingColumns from './flexbox/offsetting-columns.md';
		import flexboxAutoMargin from './flexbox/auto-margin.md';
		import flexboxNesting from './flexbox/nesting.md';
		import visible from './visible.md';
		import hidden from './hidden.md';
		import { Provider, Container, Row, Col } from '../src';

		const LayoutHeading = styled.h2`
		border-bottom: 1px solid #ccc;
		padding-bottom: 8px;
		margin-bottom: 8px;
		`;

		const Example = styled.div`
		margin-bottom: 16px;
		`;

		class App extends React.Component {
		state = {
		screenClass: ''
		};

		conainter = null;

		render() {
		const name = 'React Grid System';
		const url = 'https://github.com/trendmicro-frontend/react-grid-system';
		const { screenClass } = this.state;

		return (
		<div>
		<Navbar name={name} url={url} />
		<Provider>
		<Container
		fluid
		onResize={({ screenClass }) => {
		this.setState({ screenClass: screenClass });
		}}
		>
		<Row>
		<Col width={12} md={3} push={{ md: 9 }}>
		</Col>
		<Col width={12} md={9} pull={{ md: 3 }}>
		<LayoutHeading>Floats</LayoutHeading>
		<Example>
		<h3>Example: Custom columns</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsCustomColumns} />
		</Example>
		<Example>
		<h3>Example: Stacked to horizontal</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsStackedToHorizontal} />
		</Example>
		<Example>
		<h3>Example: Mobile and desktop</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsMobileDesktop} />
		</Example>
		<Example>
		<h3>Example: Mobile, tablet, desktops</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsMobileTabletDesktops} />
		</Example>
		<Example>
		<h3>Example: Responsive column resets</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsResponsiveColumnResets} />
		</Example>
		<Example>
		<h3>Example: Offsetting columns</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsOffsettingColumns} />
		</Example>
		<Example>
		<h3>Example: Nesting columns</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsNestingColumns} />
		</Example>
		<Example>
		<h3>Example: Column ordering</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={floatsColumnOrdering} />
		</Example>
		<LayoutHeading>Flexbox</LayoutHeading>
		<Example>
		<h3>Example: Equal width</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxEqualWidth} />
		</Example>
		<Example>
		<h3>Example: Custom columns</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxCustomColumns} />
		</Example>
		<Example>
		<h3>Example: Setting one column width</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxSettingOneColumnWidth} />
		</Example>
		<Example>
		<h3>Example: Variable width content</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxVariableWidthContent} />
		</Example>
		<Example>
		<h3>Example: Equal-width multi-row</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxEqualWidthMultiRow} />
		</Example>
		<Example>
		<h3>Example: All breakpoints</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxAllBreakpoints} />
		</Example>
		<Example>
		<h3>Example: Stacked to horizontal</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxStackedToHorizontal} />
		</Example>
		<Example>
		<h3>Example: Mix and match</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxMixMatch} />
		</Example>
		<Example>
		<h3>Example: Vertical alignment</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxVerticalAlignment} />
		</Example>
		<Example>
		<h3>Example: Horizontal alignment</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxHorizontalAlignment} />
		</Example>
		<Example>
		<h3>Example: No gutters</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxNoGutters} />
		</Example>
		<Example>
		<h3>Example: Column wrapping</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxColumnWrapping} />
		</Example>
		<Example>
		<h3>Example: Column breaks</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxColumnBreaks} />
		</Example>
		<Example>
		<h3>Example: Offsetting columns</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxOffsettingColumns} />
		</Example>
		<Example>
		<h3>Example: Auto margin</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxAutoMargin} />
		</Example>
		<Example>
		<h3>Example: Nesting</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={flexboxNesting} />
		</Example>
		<LayoutHeading>Responsive Utilities</LayoutHeading>
		<Example>
		<h3>Example: Visible</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={visible} />
		</Example>
		<Example>
		<h3>Example: Hidden</h3>
		<div>screenClass={screenClass}</div>
		<CodeBlock code={hidden} />
		</Example>
		</Col>
		</Row>
		</Container>
		</Provider>
		</div>
		);
		}
		}

		ReactDOM.render(
		<App />,
		document.getElementById('container')
		);

-1

examples/index.styl

-64

examples/Navbar.jsx

		import Anchor from '@trendmicro/react-anchor';
		import { Button } from '@trendmicro/react-buttons';
		import classNames from 'classnames';
		import PropTypes from 'prop-types';
		import React, { Component } from 'react';
		import styles from './Navbar.styl';

		export default class extends Component {
		static propTypes = {
		name: PropTypes.string,
		url: PropTypes.string
		};

		state = {
		collapseIn: false
		};

		render() {
		const { name, url } = this.props;

		return (
		<nav
		className={classNames(styles.navbar, styles.navbarDefault)}
		style={{ borderRadius: 0 }}
		>
		<div className={styles.containerFluid}>
		<div className={styles.navbarHeader}>
		<button
		type="button"
		className={classNames(styles.navbarToggle, styles.collapsed)}
		onClick={() => {
		this.setState({ collapseIn: !this.state.collapseIn });
		}}
		>
		<span className={styles.srOnly}>Toggle navigation</span>
		<span className={styles.iconBar} />
		<span className={styles.iconBar} />
		<span className={styles.iconBar} />
		</button>
		<Anchor className={styles.navbarBrand}>{name}</Anchor>
		</div>
		<div
		className={classNames(
		styles.collapse,
		styles.navbarCollapse,
		{ [styles.in]: this.state.collapseIn }
		)}
		>
		<Button
		className={classNames(styles.navbarBtn, styles.navbarRight)}
		btnStyle="flat"
		onClick={() => {
		window.location = url;
		}}
		>
		<i className="fa fa-github" />
		GitHub
		</Button>
		</div>
		</div>
		</nav>
		);
		}
		}

-464

examples/Navbar.styl

		.container-fluid {
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
		}
		.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
		}
		.collapse {
		display: none;
		&.in { display: block; }
		tr&.in { display: table-row; }
		tbody&.in { display: table-row-group; }
		}
		.nav:before,
		.nav:after,
		.navbar:before,
		.navbar:after,
		.navbar-header:before,
		.navbar-header:after,
		.navbar-collapse:before,
		.navbar-collapse:after {
		display: table;
		content: "";
		}
		.nav:after,
		.navbar:after,
		.navbar-header:after,
		.navbar-collapse:after {
		clear: both;
		}
		.nav {
		padding-left: 0;
		margin-bottom: 0;
		list-style: none;
		}
		.navbar {
		position: relative;
		min-height: 50px;
		border: 1px solid transparent;
		}
		@media (min-width: 768px) {
		.navbar {
		border-radius: 4px;
		}
		}
		@media (min-width: 768px) {
		.navbar-header {
		float: left;
		}
		}
		.navbar-collapse {
		padding-right: 15px;
		padding-left: 15px;
		overflow-x: visible;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid transparent;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
		}
		.navbar-collapse.in {
		overflow-y: auto;
		}
		@media (min-width: 768px) {
		.navbar-collapse {
		width: auto;
		border-top: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		}
		.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important;
		}
		.navbar-collapse.in {
		overflow-y: visible;
		}
		.navbar-fixed-top .navbar-collapse,
		.navbar-static-top .navbar-collapse,
		.navbar-fixed-bottom .navbar-collapse {
		padding-right: 0;
		padding-left: 0;
		}
		}
		.navbar-fixed-top .navbar-collapse,
		.navbar-fixed-bottom .navbar-collapse {
		max-height: 340px;
		}
		@media (max-device-width: 480px) and (orientation: landscape) {
		.navbar-fixed-top .navbar-collapse,
		.navbar-fixed-bottom .navbar-collapse {
		max-height: 200px;
		}
		}
		.container > .navbar-header,
		.container-fluid > .navbar-header,
		.container > .navbar-collapse,
		.container-fluid > .navbar-collapse {
		margin-right: -15px;
		margin-left: -15px;
		}
		@media (min-width: 768px) {
		.container > .navbar-header,
		.container-fluid > .navbar-header,
		.container > .navbar-collapse,
		.container-fluid > .navbar-collapse {
		margin-right: 0;
		margin-left: 0;
		}
		}
		.navbar-static-top {
		z-index: 1000;
		border-width: 0 0 1px;
		}
		@media (min-width: 768px) {
		.navbar-static-top {
		border-radius: 0;
		}
		}
		.navbar-fixed-top,
		.navbar-fixed-bottom {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 1030;
		}
		@media (min-width: 768px) {
		.navbar-fixed-top,
		.navbar-fixed-bottom {
		border-radius: 0;
		}
		}
		.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
		}
		.navbar-fixed-bottom {
		bottom: 0;
		margin-bottom: 0;
		border-width: 1px 0 0;
		}
		.navbar-brand {
		float: left;
		height: 50px;
		padding: 15px 15px;
		font-size: 18px;
		line-height: 20px;
		}
		.navbar-brand,
		.navbar-brand:hover,
		.navbar-brand:focus {
		text-decoration: none;
		}
		.navbar-brand > img {
		display: block;
		}
		@media (min-width: 768px) {
		.navbar > .container .navbar-brand,
		.navbar > .container-fluid .navbar-brand {
		margin-left: -15px;
		}
		}
		.navbar-toggle {
		position: relative;
		float: right;
		padding: 9px 10px;
		margin-top: 8px;
		margin-right: 15px;
		margin-bottom: 8px;
		background-color: transparent;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
		cursor: pointer;
		}
		.navbar-toggle:focus {
		outline: 0;
		}
		.navbar-toggle .icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
		}
		.navbar-toggle .icon-bar + .icon-bar {
		margin-top: 4px;
		}
		@media (min-width: 768px) {
		.navbar-toggle {
		display: none;
		}
		}
		.navbar-nav {
		margin: 7.5px -15px;
		}
		.navbar-nav > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: 20px;
		}
		@media (max-width: 767px) {
		.navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		}
		.navbar-nav .open .dropdown-menu > li > a,
		.navbar-nav .open .dropdown-menu .dropdown-header {
		padding: 5px 15px 5px 25px;
		}
		.navbar-nav .open .dropdown-menu > li > a {
		line-height: 20px;
		}
		.navbar-nav .open .dropdown-menu > li > a:hover,
		.navbar-nav .open .dropdown-menu > li > a:focus {
		background-image: none;
		}
		}
		@media (min-width: 768px) {
		.navbar-nav {
		float: left;
		margin: 0;
		}
		.navbar-nav > li {
		float: left;
		}
		.navbar-nav > li > a {
		padding-top: 15px;
		padding-bottom: 15px;
		}
		}
		.navbar-form {
		padding: 10px 15px;
		margin-top: 8px;
		margin-right: -15px;
		margin-bottom: 8px;
		margin-left: -15px;
		border-top: 1px solid transparent;
		border-bottom: 1px solid transparent;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
		}
		@media (min-width: 768px) {
		.navbar-form .form-group {
		display: inline-block;
		margin-bottom: 0;
		vertical-align: middle;
		}
		.navbar-form .form-control {
		display: inline-block;
		width: auto;
		vertical-align: middle;
		}
		.navbar-form .form-control-static {
		display: inline-block;
		}
		.navbar-form .input-group {
		display: inline-table;
		vertical-align: middle;
		}
		.navbar-form .input-group .input-group-addon,
		.navbar-form .input-group .input-group-btn,
		.navbar-form .input-group .form-control {
		width: auto;
		}
		.navbar-form .input-group > .form-control {
		width: 100%;
		}
		.navbar-form .control-label {
		margin-bottom: 0;
		vertical-align: middle;
		}
		.navbar-form .radio,
		.navbar-form .checkbox {
		display: inline-block;
		margin-top: 0;
		margin-bottom: 0;
		vertical-align: middle;
		}
		.navbar-form .radio label,
		.navbar-form .checkbox label {
		padding-left: 0;
		}
		.navbar-form .radio input[type="radio"],
		.navbar-form .checkbox input[type="checkbox"] {
		position: relative;
		margin-left: 0;
		}
		.navbar-form .has-feedback .form-control-feedback {
		top: 0;
		}
		}
		@media (max-width: 767px) {
		.navbar-form .form-group {
		margin-bottom: 5px;
		}
		.navbar-form .form-group:last-child {
		margin-bottom: 0;
		}
		}
		@media (min-width: 768px) {
		.navbar-form {
		width: auto;
		padding-top: 0;
		padding-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		}
		}
		.navbar-nav > li > .dropdown-menu {
		margin-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		}
		.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
		margin-bottom: 0;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
		}
		.navbar-btn {
		margin-top: 8px;
		margin-bottom: 8px;
		}
		.navbar-btn.btn-sm {
		margin-top: 10px;
		margin-bottom: 10px;
		}
		.navbar-btn.btn-xs {
		margin-top: 14px;
		margin-bottom: 14px;
		}
		.navbar-text {
		margin-top: 15px;
		margin-bottom: 15px;
		}
		@media (min-width: 768px) {
		.navbar-text {
		float: left;
		margin-right: 15px;
		margin-left: 15px;
		}
		}
		@media (min-width: 768px) {
		.navbar-left {
		float: left !important;
		}
		.navbar-right {
		float: right !important;
		margin-right: -15px;
		}
		.navbar-right ~ .navbar-right {
		margin-right: 0;
		}
		}
		.navbar-default {
		background-color: #f8f8f8;
		border-color: #e7e7e7;
		}
		.navbar-default .navbar-brand {
		color: #777;
		}
		.navbar-default .navbar-brand:hover,
		.navbar-default .navbar-brand:focus {
		color: #5e5e5e;
		background-color: transparent;
		}
		.navbar-default .navbar-text {
		color: #777;
		}
		.navbar-default .navbar-nav > li > a {
		color: #777;
		}
		.navbar-default .navbar-nav > li > a:hover,
		.navbar-default .navbar-nav > li > a:focus {
		color: #333;
		background-color: transparent;
		}
		.navbar-default .navbar-nav > .active > a,
		.navbar-default .navbar-nav > .active > a:hover,
		.navbar-default .navbar-nav > .active > a:focus {
		color: #555;
		background-color: #e7e7e7;
		}
		.navbar-default .navbar-nav > .disabled > a,
		.navbar-default .navbar-nav > .disabled > a:hover,
		.navbar-default .navbar-nav > .disabled > a:focus {
		color: #ccc;
		background-color: transparent;
		}
		.navbar-default .navbar-toggle {
		border-color: #ddd;
		}
		.navbar-default .navbar-toggle:hover,
		.navbar-default .navbar-toggle:focus {
		background-color: #ddd;
		}
		.navbar-default .navbar-toggle .icon-bar {
		background-color: #888;
		}
		.navbar-default .navbar-collapse,
		.navbar-default .navbar-form {
		border-color: #e7e7e7;
		}
		.navbar-default .navbar-nav > .open > a,
		.navbar-default .navbar-nav > .open > a:hover,
		.navbar-default .navbar-nav > .open > a:focus {
		color: #555;
		background-color: #e7e7e7;
		}
		@media (max-width: 767px) {
		.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		color: #777;
		}
		.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
		.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
		color: #333;
		background-color: transparent;
		}
		.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
		.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
		.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
		color: #555;
		background-color: #e7e7e7;
		}
		.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
		.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
		.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
		color: #ccc;
		background-color: transparent;
		}
		}
		.navbar-default .navbar-link {
		color: #777;
		}
		.navbar-default .navbar-link:hover {
		color: #333;
		}
		.navbar-default .btn-link {
		color: #777;
		}
		.navbar-default .btn-link:hover,
		.navbar-default .btn-link:focus {
		color: #333;
		}

-11

examples/Section.jsx

		import classNames from 'classnames';
		import React from 'react';
		import styles from './Section.styl';

		export default (props) => (
		<div className={classNames(props.className, styles.section)}>
		<div className={styles.sectionContent}>
		{props.children}
		</div>
		</div>
		);

-24

examples/Section.styl

		.section {
		background: #fff;
		border: 1px solid #d6d6d6;
		position: relative;
		z-index: 1;
		transition: height .3s ease;
		}
		.section:last-child {
		margin-bottom: 20px;
		}
		.section-content {
		padding: 0 16px 16px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		}
		@media screen and (max-width: 1023px) {
		.section-content {
		position: static;
		height: 100%;
		}
		}

-32

examples/visible.md

		<Container>
		<Visible xs>
		<Row>
		<Col>Visible on extra small</Col>
		</Row>
		</Visible>
		<Visible sm>
		<Row>
		<Col>Visible on small</Col>
		</Row>
		</Visible>
		<Visible md>
		<Row>
		<Col>Visible on medium</Col>
		</Row>
		</Visible>
		<Visible lg>
		<Row>
		<Col>Visible on large</Col>
		</Row>
		</Visible>
		<Visible xl>
		<Row>
		<Col>Visible on extra large</Col>
		</Row>
		</Visible>
		<Visible xxl>
		<Row>
		<Col>Visible on double extra large</Col>
		</Row>
		</Visible>
		</Container>

-103

examples/webpack.config.js

		const path = require('path');
		const webpack = require('webpack');
		const HtmlWebpackPlugin = require('html-webpack-plugin');
		const stylusLoader = require('stylus-loader');
		const nib = require('nib');

		module.exports = {
		devtool: 'cheap-module-eval-source-map',
		entry: path.resolve(__dirname, 'index.jsx'),
		output: {
		path: path.join(__dirname, '../docs'),
		filename: 'bundle.js?[hash]'
		},
		module: {
		rules: [
		// http://survivejs.com/webpack_react/linting_in_webpack/
		{
		test: /\.jsx?$/,
		loader: 'eslint-loader',
		enforce: 'pre',
		exclude: /node_modules/
		},
		{
		test: /\.styl$/,
		loader: 'stylint-loader',
		enforce: 'pre'
		},
		{
		test: /\.jsx?$/,
		loader: 'babel-loader',
		exclude: /(node_modules\|bower_components)/
		},
		{
		test: /\.styl$/,
		use: [
		'style-loader',
		'css-loader?camelCase&modules&importLoaders=1&localIdentName=[local]---[hash:base64:5]',
		'stylus-loader'
		]
		},
		{
		test: /\.css$/,
		loader: 'style-loader!css-loader'
		},
		{
		test: /\.md$/,
		loader: 'raw-loader'
		},
		{
		test: /\.(png\|jpg)$/,
		loader: 'url-loader',
		options: {
		limit: 8192
		}
		},
		{
		test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
		loader: 'url-loader',
		options: {
		limit: 10000,
		mimetype: 'application/font-woff'
		}
		},
		{
		test: /\.(ttf\|eot\|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
		loader: 'file-loader'
		}
		]
		},
		plugins: [
		new webpack.LoaderOptionsPlugin({
		debug: true
		}),
		new webpack.NamedModulesPlugin(),
		new webpack.NoEmitOnErrorsPlugin(),
		new stylusLoader.OptionsPlugin({
		default: {
		// nib - CSS3 extensions for Stylus
		use: [nib()],
		// no need to have a '@import "nib"' in the stylesheet
		import: ['~nib/lib/nib/index.styl']
		}
		}),
		new HtmlWebpackPlugin({
		filename: '../docs/index.html',
		template: 'index.html'
		})
		],
		resolve: {
		extensions: ['.js', '.json', '.jsx']
		},
		// https://webpack.github.io/docs/webpack-dev-server.html#additional-configuration-options
		devServer: {
		disableHostCheck: true,
		noInfo: false,
		lazy: false,
		// https://webpack.github.io/docs/node.js-api.html#compiler
		watchOptions: {
		poll: true, // use polling instead of native watchers
		ignored: /node_modules/
		}
		}
		};

github.com/trendmicro-frontend/react-grid-system - go Package Compare versions