- Column - Column - Column - Column -

- -export default createGrid(CustomGrid) -``` - ## Features -- Simple, encapsulated grid layout API -- Uses CSS for native @media-rule-based responsive styles -- Works with server-side rendering - -## Grid component props -- `col` (number 0–12) sets width across all breakpoints based on a 12 column grid. -- `sm` (number 0–12) sets width from the `sm` breakpoint up -- `md` (number 0–12) sets width from the `md` breakpoint up -- `lg` (number 0–12) sets width from the `lg` breakpoint up -- `align` (string, `top`, `middle`, `bottom`, or `baseline`) - sets vertical align -## How it works - -The Grid component uses `display: inline-block` to create grid layouts. -It creates CSS rules based on props and inserts that string into an inline style tag. -The component only creates the rules it needs for itself, -however other Grid components may generate duplicative styles of their own. +- Simple, encapsulated grid layout API -## Caveats -- Produces an inline style **tag** within the body (e.g. not inline styles) -- Similar component instances create duplicative CSS rules – this may or may not affect performance -- Atomic class selectors are global +[spec]: https://www.w3.org/TR/css-grid-1/ MIT License diff --git a/demo/App.js b/demo/App.js deleted file mode 100644 index d87b66d..0000000 --- a/demo/App.js +++ /dev/null @@ -1,33 +0,0 @@ - -import React from 'react' -import Grid from '../src/Grid' - -class App extends React.Component { - render () { - return ( - - ) - } -} - -export default App - diff --git a/demo/entry.js b/demo/entry.js deleted file mode 100644 index 7b734fa..0000000 --- a/demo/entry.js +++ /dev/null @@ -1,9 +0,0 @@ - -import React from 'react' -import ReactDOM from 'react-dom' -import App from './App' - -const div = document.getElementById('app') - -ReactDOM.render(, div) - diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index 0c2729c..0000000 --- a/demo/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - -

- diff --git a/index.js b/index.js deleted file mode 100644 index b52ef3e..0000000 --- a/index.js +++ /dev/null @@ -1,5 +0,0 @@ - -module.exports = require('./dist/Grid').default -module.exports.createGrid = require('./dist/createGrid').default -module.exports.createStyles = require('./dist/create-styles').default - diff --git a/package.json b/package.json index f7e797f..f5c0a62 100644 --- a/package.json +++ b/package.json @@ -1,39 +1,43 @@ { "name": "react-css-grid", - "version": "1.0.0-beta.1", - "description": "Responsive CSS-based React grid component", - "main": "index.js", + "version": "1.0.0", + "description": "React layout component based on CSS Grid Layout", + "main": "dist/index.js", "scripts": { - "build": "webpack -p", - "start": "webpack-dev-server", - "gh-pages": "gh-pages -d demo", - "prepublish": "mkdir -p dist && babel src --out-dir dist", - "test": "standard && ava -v" + "prepublish": "babel src -d dist", + "start": "start-storybook -c storybook -p 8000", + "build": "build-storybook -c storybook -o .site", + "deploy": "storybook-to-ghpages", + "test": "nyc ava" }, "keywords": [ "react", "react-component", + "styled-components", + "layout", + "css-grid", "grid", "css" ], "author": "Brent Jackson", "license": "MIT", + "dependencies": { + "prop-types": "^15.5.10", + "styled-components": "^2.1.2" + }, "devDependencies": { - "ava": "^0.15.2", - "babel-cli": "^6.11.4", - "babel-loader": "^6.2.4", - "babel-preset-es2015": "^6.9.0", - "babel-preset-react": "^6.11.1", - "babel-preset-stage-0": "^6.5.0", - "babel-register": "^6.11.6", - "enzyme": "^2.4.1", - "gh-pages": "^0.11.0", - "react": "^15.3.0", - "react-addons-test-utils": "^15.3.0", - "react-dom": "^15.3.0", - "standard": "^7.1.2", - "webpack": "^1.13.1", - "webpack-dev-server": "^1.14.1" + "@storybook/react": "^3.2.8", + "@storybook/storybook-deployer": "^2.0.0", + "ava": "^0.22.0", + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-preset-env": "^1.6.0", + "babel-preset-react": "^6.24.1", + "babel-register": "^6.26.0", + "nyc": "^11.1.0", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "react-test-renderer": "^15.6.1" }, "ava": { "require": [ diff --git a/src/Grid.js b/src/Grid.js deleted file mode 100644 index 15a07c0..0000000 --- a/src/Grid.js +++ /dev/null @@ -1,7 +0,0 @@ - -import createGrid from './createGrid' - -const Grid = createGrid('div') - -export default Grid - diff --git a/src/create-styles.js b/src/create-styles.js deleted file mode 100644 index f300d20..0000000 --- a/src/create-styles.js +++ /dev/null @@ -1,70 +0,0 @@ - -export const width = col => `${col / 12 * 100}%` - -export const createClassName = prefix => base => `__${prefix}${base}` - -export const createWidthRule = breakpoints => breakpoint => className => col => { - if (typeof col !== 'number') { - return '' - } - const media = breakpoints[breakpoint] - const rule = `.${className}{width:${width(col)}}` - - return media ? `@media ${media}{${rule}}` : rule -} - -export const createRule = className => prop => val => { - return `.${className}{${prop}:${val}}` -} - -const createStyles = breakpoints => ({ - align = 'top', - ...rest -}) => { - const createBreakpointRule = createWidthRule(breakpoints) - - const styles = Object.keys(rest).map(key => { - const val = rest[key] - if (!val) { - return false - } - const className = createClassName(key)(val) - const rule = createBreakpointRule(key)(className)(val) - - return { - className, - rule - } - }).filter(s => s !== false) - - const boxSizingClassName = createClassName('b')('b') - styles.push({ - className: boxSizingClassName, - rule: createRule(boxSizingClassName)('box-sizing')('border-box') - }) - - const displayClassName = createClassName('d')('ib') - styles.push({ - className: displayClassName, - rule: createRule(displayClassName)('display')('inline-block') - }) - - const alignClassName = createClassName('a')(align) - styles.push({ - className: alignClassName, - rule: createRule(alignClassName)('vertical-align')(align) - }) - - const css = styles.reduce((a, b) => { - return a + b.rule - }, '') - - const className = styles.reduce((a, b) => { - return a + b.className + ' ' - }, '').trim() - - return { css, className } -} - -export default createStyles - diff --git a/src/createGrid.js b/src/createGrid.js deleted file mode 100644 index b380912..0000000 --- a/src/createGrid.js +++ /dev/null @@ -1,56 +0,0 @@ - -import React from 'react' -import createStyles from './create-styles' - -const breakpoints = { - sm: 'screen and (min-width:40em)', - md: 'screen and (min-width:52em)', - lg: 'screen and (min-width:64em)' -} - -const cols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] - -export const createGrid = (Comp) => { - class GridWrap extends React.Component { - render () { - const { - col = 12, - sm, - md, - lg, - align, - children, - ...props - } = this.props - - const { css, className } = createStyles(breakpoints)({ align, col, sm, md, lg }) - - const cx = className + ' ' + (props.className || '') - - return ( - - +

+ diff --git a/package.json b/package.json index f5c0a62..fa51098 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,12 @@ { "name": "react-css-grid", "version": "1.0.0", - "description": "React layout component based on CSS Grid Layout", + "description": "React layout component based on CSS Grid Layout and built with styled-components", "main": "dist/index.js", "scripts": { "prepublish": "babel src -d dist", - "start": "start-storybook -c storybook -p 8000", - "build": "build-storybook -c storybook -o .site", - "deploy": "storybook-to-ghpages", + "start": "webpack-dev-server", + "build": "webpack -p", "test": "nyc ava" }, "keywords": [ @@ -27,17 +26,22 @@ }, "devDependencies": { "@storybook/react": "^3.2.8", - "@storybook/storybook-deployer": "^2.0.0", "ava": "^0.22.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "babel-register": "^6.26.0", + "grid-styled": "^2.0.0-10", "nyc": "^11.1.0", "react": "^15.6.1", "react-dom": "^15.6.1", - "react-test-renderer": "^15.6.1" + "react-live": "^1.7.0", + "react-test-renderer": "^15.6.1", + "react-x-ray": "^1.0.0-2", + "refunk": "^1.0.0-2", + "webpack": "^3.5.5", + "webpack-dev-server": "^2.7.1" }, "ava": { "require": [ diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..38a12ff --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,37 @@ +const path = require('path') +const webpack = require('webpack') + +module.exports = { + entry: './docs/entry.js', + + output: { + path: path.join(__dirname, 'docs'), + filename: 'bundle.js' + }, + + resolve: { + alias: { + 'react-css-grid': path.join(__dirname, 'src') + } + }, + + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel-loader' + } + ] + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) + }) + ], + + devServer: { + contentBase: 'docs/' + } +} From ca7148574cf330b186d53473287dea0fb277c030 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Tue, 29 Aug 2017 21:01:24 -0400 Subject: [PATCH 05/14] Add docs --- README.md | 25 +++++- docs/App.js | 211 +++++++++++++++++++++++++++++++++++++++++++--- docs/BlockLink.js | 12 +++ docs/Code.js | 8 ++ docs/Flex.js | 8 ++ docs/Heading.js | 16 ++++ docs/Image.js | 10 +++ docs/Link.js | 7 ++ docs/List.js | 8 ++ docs/Live.js | 55 ++++++++++++ docs/Pre.js | 14 +++ docs/Text.js | 12 +++ docs/Tweet.js | 26 ++++++ docs/index.html | 16 ++++ src/index.js | 24 ++++-- 15 files changed, 431 insertions(+), 21 deletions(-) create mode 100644 docs/BlockLink.js create mode 100644 docs/Code.js create mode 100644 docs/Flex.js create mode 100644 docs/Heading.js create mode 100644 docs/Image.js create mode 100644 docs/Link.js create mode 100644 docs/List.js create mode 100644 docs/Live.js create mode 100644 docs/Pre.js create mode 100644 docs/Text.js create mode 100644 docs/Tweet.js diff --git a/README.md b/README.md index 1b1f198..acd8e11 100644 --- a/README.md +++ b/README.md @@ -43,17 +43,38 @@ class App extends React.Component { ## Props -- `width` (number or string) width at which child elements will break into columns - either a number pixel value or any valid CSS width value as a string -- `gap` (number or string) gutter (`grid-gap`) between columns - either a number pixel value or any valid CSS width value as a string +### `width` (number or string) + +Sets the width at which child elements will break into columns. +Pass a number for pixel values or a string for any other valid CSS length. + +```jsx + +``` + +### `gap` (number or string) + +Sets the gutter (`grid-gap`) between columns. +Pass a number for pixel values or a string for any other valid CSS length. + +```jsx + +``` + +### `align` (string) + +Sets `align-items` to control child element alignment. ## Browser Support See http://caniuse.com/#feat=css-grid + ## Related - [Grid Styled](https://github.com/jxnblk/grid-styled) +- [Styled System](https://github.com/jxnblk/styled-system) - [styled-components][sc] - [CSS Grid Layout Module][spec] - [CSS Grid Layout on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) diff --git a/docs/App.js b/docs/App.js index 6b3295f..9f221ac 100644 --- a/docs/App.js +++ b/docs/App.js @@ -1,21 +1,206 @@ import React from 'react' +import { createProvider } from 'refunk' +import XRay from 'react-x-ray' import Grid from 'react-css-grid' import { Box } from 'grid-styled' import Col from './Col' +import Heading from './Heading' +import Pre from './Pre' +import Text from './Text' +import Link from './Link' +import Flex from './Flex' +import BlockLink from './BlockLink' +import Image from './Image' +import Tweet from './Tweet' +import Code from './Code' +import List from './List' +import Live from './Live' const App = props => ( - - - -

React CSS Grid

- - -

- React layout component based on CSS Grid Layout and built with styled-components -

- - - + + { + props.update(toggleXRay) + }} + children='xray' + /> +

+ width {props.width} + props.update(handleWidthChange(e.target.value))} + /> +

+

+ gap {props.gap} + props.update(handleGapChange(e.target.value))} + /> +

+ + + React CSS Grid + + + React layout component based on CSS Grid Layout and built with + {' '} + + styled-components + + + +

npm i react-css-grid

+ + + + + + + + + +

+ Usage +

+        

+

+ Features + +

Responsive grid layout with zero media queries

+

Simple API for handling tiled layouts

+

Customizable column width and gutters

+ +

+

+ Props + +

+ width + + Sets the width at which child elements will break into columns. + Pass a number for pixel values or a string for any other valid CSS length. + +

+

+ gap + + Sets the gutter (grid-gap) between columns. + Pass a number for pixel values or a string for any other valid CSS length. + +

+

+ align + + Sets align-items to control child element alignment. + +

+ +

+

+ Width + +

+

+ Gap + +

+ + + + ) -export default App +const usage = `import React from 'react' +import Grid from 'react-css-grid' + +class App extends React.Component { + render () { + return ( + +

Column

+

Column

+

Column

+

Column

+ + ) + } +}` + +const widthExample = ` +

Hello

+

Hi

+` + +const gapExample = ` +

Hello

+

Hi

+` + +const state = { + width: 320, + gap: 32, + xray: false +} + +const toggleXRay = state => ({ xray: !state.xray }) + +const widths = [ + 128, + 192, + 256, + 320, + 384, + 512, + 768, + 1024 +] + +const handleWidthChange = val => state => ({ + width: widths[parseInt(val)] +}) + +const gaps = [ + 0, + 8, + 16, + 32, + 64, + 128 +] + +const handleGapChange = val => state => ({ + gap: gaps[parseInt(val)] +}) + +export default createProvider(state)(App) diff --git a/docs/BlockLink.js b/docs/BlockLink.js new file mode 100644 index 0000000..e9ae6f1 --- /dev/null +++ b/docs/BlockLink.js @@ -0,0 +1,12 @@ +import styled from 'styled-components' +import { space } from 'styled-system' + +const BlockLink = styled.a` + margin: 0; + display: block; + text-decoration: none; + color: inherit; + ${space} +` + +export default BlockLink diff --git a/docs/Code.js b/docs/Code.js new file mode 100644 index 0000000..eba7bde --- /dev/null +++ b/docs/Code.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +const Code = styled.code` + font-family: Menlo, monospace; + font-size: 14px; +` + +export default Code diff --git a/docs/Flex.js b/docs/Flex.js new file mode 100644 index 0000000..18ac9d6 --- /dev/null +++ b/docs/Flex.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +const Flex = styled.div` + display: flex; + align-items: center; +` + +export default Flex diff --git a/docs/Heading.js b/docs/Heading.js new file mode 100644 index 0000000..b497e5a --- /dev/null +++ b/docs/Heading.js @@ -0,0 +1,16 @@ +import styled from 'styled-components' +import { space, fontSize } from 'styled-system' + +const Heading = styled.h2` + ${space} + ${fontSize} +` + +Heading.defaultProps = { + f: 5, + m: 0 +} + +Heading.h1 = Heading.withComponent('h1') + +export default Heading diff --git a/docs/Image.js b/docs/Image.js new file mode 100644 index 0000000..76338cb --- /dev/null +++ b/docs/Image.js @@ -0,0 +1,10 @@ +import styled from 'styled-components' + +const Image = styled.img` + display: block; + margin: 0; + max-width: 100%; + height: auto; +` + +export default Image diff --git a/docs/Link.js b/docs/Link.js new file mode 100644 index 0000000..6577110 --- /dev/null +++ b/docs/Link.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +const Link = styled.a` + color: #07c; +` + +export default Link diff --git a/docs/List.js b/docs/List.js new file mode 100644 index 0000000..e9ad8da --- /dev/null +++ b/docs/List.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +const List = styled.ul` + padding-left: 0; + margin: 0; +` + +export default List diff --git a/docs/Live.js b/docs/Live.js new file mode 100644 index 0000000..e35d6b9 --- /dev/null +++ b/docs/Live.js @@ -0,0 +1,55 @@ +import React from 'react' +import Grid from 'react-css-grid' +import XRay from 'react-x-ray' +import styled from 'styled-components' +import { + LiveProvider, + LivePreview, + LiveEditor, + LiveError, +} from 'react-live' + +const Preview = styled(LivePreview)` + padding: 16px; + border: 1px solid #999; + border-radius: 3px 3px 0 0; +` + +const Editor = styled(LiveEditor)` + font-family: Menlo, monospace; + font-size: 12px; + tab-size: 2; + padding: 16px; + margin: 0; + color: white; + background-color: black; + border-radius: 0 0 3px 3px; + outline: none; +` + +const Err = styled(LiveError)` + font-family: Menlo, monospace; + font-size: 12px; + padding: 16px; + color: white; + background-color: red; +` + +const scope = { + Grid +} + +const Live = props => ( + + + + + + + +) + +export default Live diff --git a/docs/Pre.js b/docs/Pre.js new file mode 100644 index 0000000..d8575b5 --- /dev/null +++ b/docs/Pre.js @@ -0,0 +1,14 @@ +import styled from 'styled-components' +import { space } from 'styled-system' + +const Pre = styled.pre` + font-family: Menlo, monospace; + font-size: 14px; + ${space} +` + +Pre.defaultProps = { + m: 0 +} + +export default Pre diff --git a/docs/Text.js b/docs/Text.js new file mode 100644 index 0000000..ad4d620 --- /dev/null +++ b/docs/Text.js @@ -0,0 +1,12 @@ +import styled from 'styled-components' +import { + space, + fontSize +} from 'styled-system' + +const Text = styled.div` + ${space} + ${fontSize} +` + +export default Text diff --git a/docs/Tweet.js b/docs/Tweet.js new file mode 100644 index 0000000..527e52f --- /dev/null +++ b/docs/Tweet.js @@ -0,0 +1,26 @@ +import React from 'react' + +const text = `` + +class Tweet extends React.Component { + componentDidMount () { + if (typeof twttr !== 'undefined') { + twttr.widgets.load( + this.root + ) + } + } + + render () { + return ( + this.root = ref} + className='twitter-share-button' + href={`https://twitter.com/intent/tweet?via=jxnblk`} + children='Tweet' + /> + ) + } +} + +export default Tweet diff --git a/docs/index.html b/docs/index.html index ddcc4ac..4338590 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,6 +1,22 @@ + + + + +

+ + diff --git a/src/index.js b/src/index.js index d86c8e8..61ff39f 100644 --- a/src/index.js +++ b/src/index.js @@ -11,11 +11,21 @@ const gap = props => ({ gridGap: px(props.gap) }) -const Grid = styled.div` - display: grid; - ${width} - ${gap} -` +const align = props => props.align ? ({ + alignItems: props.align +}) : null + +const span = props => props.span ? ({ + gridColumn: `span ${props.span}` +}) : null + +const Grid = styled.div([], { + display: 'grid' +}, + width, + gap, + align +) Grid.propTypes = { width: PropTypes.oneOfType([ @@ -29,8 +39,10 @@ Grid.propTypes = { } Grid.defaultProps = { - width: 256, + width: 320, gap: 32 } +Grid.Item = styled.div([], span) + export default Grid From 6c4c7701d5e78aad6c7b108a0906c74d945a0f4b Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Tue, 29 Aug 2017 21:38:37 -0400 Subject: [PATCH 06/14] Add slider --- docs/App.js | 135 +++++++++++++++++++++++++++++-------------------- docs/Bar.js | 9 ++++ docs/Pre.js | 2 + docs/Slider.js | 33 ++++++++++++ src/index.js | 11 ++-- 5 files changed, 131 insertions(+), 59 deletions(-) create mode 100644 docs/Bar.js create mode 100644 docs/Slider.js diff --git a/docs/App.js b/docs/App.js index 9f221ac..216b39e 100644 --- a/docs/App.js +++ b/docs/App.js @@ -3,6 +3,8 @@ import { createProvider } from 'refunk' import XRay from 'react-x-ray' import Grid from 'react-css-grid' import { Box } from 'grid-styled' +import Bar from './Bar' +import Slider from './Slider' import Col from './Col' import Heading from './Heading' import Pre from './Pre' @@ -18,72 +20,78 @@ import Live from './Live' const App = props => ( - { - props.update(toggleXRay) - }} - children='xray' - /> -

- width {props.width} - props.update(handleWidthChange(e.target.value))} - /> -

-

- gap {props.gap} - props.update(handleGapChange(e.target.value))} - /> -

- + + + { + props.update(toggleXRay) + }} + children='xray' + /> + + width {props.width} + props.update(handleWidthChange(e.target.value))} + /> + + + gap {props.gap} + props.update(handleGapChange(e.target.value))} + /> + + + + - React CSS Grid - + React CSS Grid + React layout component based on CSS Grid Layout and built with {' '} styled-components + + + + + + + + + -

npm i react-css-grid

- - - - - - - - -

+ Install +

npm i react-css-grid

+

+ Usage

-        

npm i react-css-grid