Skip to content

Commit ca71485

Browse files
jxnblkjxnblk
committed
Add docs
1 parent 267a45a commit ca71485

File tree

15 files changed

+431
-21
lines changed

15 files changed

+431
-21
lines changed

‎README.md

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,38 @@ class App extends React.Component {
4343

4444
## Props
4545

46-
- `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
47-
- `gap` (number or string) gutter (`grid-gap`) between columns - either a number pixel value or any valid CSS width value as a string
46+
### `width` (number or string)
47+
48+
Sets the width at which child elements will break into columns.
49+
Pass a number for pixel values or a string for any other valid CSS length.
50+
51+
```jsx
52+
<Grid width={512} />
53+
```
54+
55+
### `gap` (number or string)
56+
57+
Sets the gutter (`grid-gap`) between columns.
58+
Pass a number for pixel values or a string for any other valid CSS length.
59+
60+
```jsx
61+
<Grid gap={16} />
62+
```
63+
64+
### `align` (string)
65+
66+
Sets `align-items` to control child element alignment.
4867

4968

5069
## Browser Support
5170

5271
See http://caniuse.com/#feat=css-grid
5372

73+
5474
## Related
5575

5676
- [Grid Styled](https://github.com/jxnblk/grid-styled)
77+
- [Styled System](https://github.com/jxnblk/styled-system)
5778
- [styled-components][sc]
5879
- [CSS Grid Layout Module][spec]
5980
- [CSS Grid Layout on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

‎docs/App.js

Lines changed: 198 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,206 @@
11
import React from 'react'
2+
import { createProvider } from 'refunk'
3+
import XRay from 'react-x-ray'
24
import Grid from 'react-css-grid'
35
import { Box } from 'grid-styled'
46
import Col from './Col'
7+
import Heading from './Heading'
8+
import Pre from './Pre'
9+
import Text from './Text'
10+
import Link from './Link'
11+
import Flex from './Flex'
12+
import BlockLink from './BlockLink'
13+
import Image from './Image'
14+
import Tweet from './Tweet'
15+
import Code from './Code'
16+
import List from './List'
17+
import Live from './Live'
518

619
const App = props => (
7-
<Box p={3}>
8-
<Grid>
9-
<Col>
10-
<h1>React CSS Grid</h1>
11-
</Col>
12-
<Col>
13-
<p>
14-
React layout component based on CSS Grid Layout and built with styled-components
15-
</p>
16-
</Col>
17-
</Grid>
18-
</Box>
20+
<XRay disabled={!props.xray}>
21+
<button
22+
onClick={e => {
23+
props.update(toggleXRay)
24+
}}
25+
children='xray'
26+
/>
27+
<div>
28+
<label htmlFor='width'>width {props.width}</label>
29+
<input
30+
type='range'
31+
id='width'
32+
name='width'
33+
max={widths.length - 1}
34+
value={widths.indexOf(props.width)}
35+
onChange={e => props.update(handleWidthChange(e.target.value))}
36+
/>
37+
</div>
38+
<div>
39+
<label htmlFor='width'>gap {props.gap}</label>
40+
<input
41+
type='range'
42+
id='gap'
43+
name='gap'
44+
max={gaps.length - 1}
45+
value={gaps.indexOf(props.gap)}
46+
onChange={e => props.update(handleGapChange(e.target.value))}
47+
/>
48+
</div>
49+
<Box p={3}>
50+
<Grid
51+
width={props.width}
52+
gap={props.gap}
53+
align='baseline'>
54+
<Heading.h1>React CSS Grid</Heading.h1>
55+
<Grid.Item>
56+
<Text>
57+
React layout component based on CSS Grid Layout and built with
58+
{' '}
59+
<Link href='https://styled-components.com'>
60+
styled-components
61+
</Link>
62+
</Text>
63+
</Grid.Item>
64+
<Pre>npm i react-css-grid</Pre>
65+
<Flex>
66+
<BlockLink
67+
mr={1}
68+
href='https://travis-ci.org/jxnblk/react-css-grid'>
69+
<Image
70+
src='https://img.shields.io/travis/jxnblk/react-css-grid/master.svg?style=flat-square'
71+
height='20'
72+
/>
73+
</BlockLink>
74+
<Tweet />
75+
<BlockLink
76+
ml={1}
77+
href='https://github.com/jxnblk/react-css-grid'>
78+
<Image
79+
src='https://img.shields.io/github/stars/jxnblk/react-css-grid.svg?style=social&label=Star'
80+
/>
81+
</BlockLink>
82+
</Flex>
83+
<div>
84+
<Heading mb={2}>Usage</Heading>
85+
<Pre children={usage} />
86+
</div>
87+
<div>
88+
<Heading mb={2}>Features</Heading>
89+
<List>
90+
<li>Responsive grid layout with zero media queries</li>
91+
<li>Simple API for handling tiled layouts</li>
92+
<li>Customizable column width and gutters</li>
93+
</List>
94+
</div>
95+
<div>
96+
<Heading mb={2}>Props</Heading>
97+
<List>
98+
<li>
99+
<Code>width</Code>
100+
<Text>
101+
Sets the width at which child elements will break into columns.
102+
Pass a number for pixel values or a string for any other valid CSS length.
103+
</Text>
104+
</li>
105+
<li>
106+
<Code>gap</Code>
107+
<Text>
108+
Sets the gutter (grid-gap) between columns.
109+
Pass a number for pixel values or a string for any other valid CSS length.
110+
</Text>
111+
</li>
112+
<li>
113+
<Code>align</Code>
114+
<Text>
115+
Sets align-items to control child element alignment.
116+
</Text>
117+
</li>
118+
</List>
119+
</div>
120+
<div>
121+
<Heading mb={2}>Width</Heading>
122+
<Live code={widthExample} />
123+
</div>
124+
<div>
125+
<Heading mb={2}>Gap</Heading>
126+
<Live code={gapExample} />
127+
</div>
128+
<footer>
129+
<Flex>
130+
<Link href='https://github.com/jxnblk/react-css-grid'>GitHub</Link>
131+
<Box mr={1} />
132+
<Link href='http://jxnblk.com'>Made by Jxnblk</Link>
133+
</Flex>
134+
</footer>
135+
</Grid>
136+
</Box>
137+
</XRay>
19138
)
20139

21-
export default App
140+
const usage = `import React from 'react'
141+
import Grid from 'react-css-grid'
142+
143+
class App extends React.Component {
144+
render () {
145+
return (
146+
<Grid
147+
width={320}
148+
gap={24}>
149+
<div>Column</div>
150+
<div>Column</div>
151+
<div>Column</div>
152+
<div>Column</div>
153+
</Grid>
154+
)
155+
}
156+
}`
157+
158+
const widthExample = `<Grid width={128}>
159+
<h2>Hello</h2>
160+
<h2>Hi</h2>
161+
</Grid>`
162+
163+
const gapExample = `<Grid
164+
width={96}
165+
gap={16}>
166+
<h2>Hello</h2>
167+
<h2>Hi</h2>
168+
</Grid>`
169+
170+
const state = {
171+
width: 320,
172+
gap: 32,
173+
xray: false
174+
}
175+
176+
const toggleXRay = state => ({ xray: !state.xray })
177+
178+
const widths = [
179+
128,
180+
192,
181+
256,
182+
320,
183+
384,
184+
512,
185+
768,
186+
1024
187+
]
188+
189+
const handleWidthChange = val => state => ({
190+
width: widths[parseInt(val)]
191+
})
192+
193+
const gaps = [
194+
0,
195+
8,
196+
16,
197+
32,
198+
64,
199+
128
200+
]
201+
202+
const handleGapChange = val => state => ({
203+
gap: gaps[parseInt(val)]
204+
})
205+
206+
export default createProvider(state)(App)

‎docs/BlockLink.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import styled from 'styled-components'
2+
import { space } from 'styled-system'
3+
4+
const BlockLink = styled.a`
5+
margin: 0;
6+
display: block;
7+
text-decoration: none;
8+
color: inherit;
9+
${space}
10+
`
11+
12+
export default BlockLink

‎docs/Code.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components'
2+
3+
const Code = styled.code`
4+
font-family: Menlo, monospace;
5+
font-size: 14px;
6+
`
7+
8+
export default Code

‎docs/Flex.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components'
2+
3+
const Flex = styled.div`
4+
display: flex;
5+
align-items: center;
6+
`
7+
8+
export default Flex

‎docs/Heading.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from 'styled-components'
2+
import { space, fontSize } from 'styled-system'
3+
4+
const Heading = styled.h2`
5+
${space}
6+
${fontSize}
7+
`
8+
9+
Heading.defaultProps = {
10+
f: 5,
11+
m: 0
12+
}
13+
14+
Heading.h1 = Heading.withComponent('h1')
15+
16+
export default Heading

‎docs/Image.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styled from 'styled-components'
2+
3+
const Image = styled.img`
4+
display: block;
5+
margin: 0;
6+
max-width: 100%;
7+
height: auto;
8+
`
9+
10+
export default Image

‎docs/Link.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styled from 'styled-components'
2+
3+
const Link = styled.a`
4+
color: #07c;
5+
`
6+
7+
export default Link

‎docs/List.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components'
2+
3+
const List = styled.ul`
4+
padding-left: 0;
5+
margin: 0;
6+
`
7+
8+
export default List

‎docs/Live.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react'
2+
import Grid from 'react-css-grid'
3+
import XRay from 'react-x-ray'
4+
import styled from 'styled-components'
5+
import {
6+
LiveProvider,
7+
LivePreview,
8+
LiveEditor,
9+
LiveError,
10+
} from 'react-live'
11+
12+
const Preview = styled(LivePreview)`
13+
padding: 16px;
14+
border: 1px solid #999;
15+
border-radius: 3px 3px 0 0;
16+
`
17+
18+
const Editor = styled(LiveEditor)`
19+
font-family: Menlo, monospace;
20+
font-size: 12px;
21+
tab-size: 2;
22+
padding: 16px;
23+
margin: 0;
24+
color: white;
25+
background-color: black;
26+
border-radius: 0 0 3px 3px;
27+
outline: none;
28+
`
29+
30+
const Err = styled(LiveError)`
31+
font-family: Menlo, monospace;
32+
font-size: 12px;
33+
padding: 16px;
34+
color: white;
35+
background-color: red;
36+
`
37+
38+
const scope = {
39+
Grid
40+
}
41+
42+
const Live = props => (
43+
<LiveProvider
44+
{...props}
45+
mountStylesheet={false}
46+
scope={scope}>
47+
<XRay>
48+
<Preview />
49+
</XRay>
50+
<Editor />
51+
<Err />
52+
</LiveProvider>
53+
)
54+
55+
export default Live

0 commit comments

Comments
 (0)