Neat Components
A Styled Components implementation of Thoughtbot's Neat 2.0.
View Storybook examples here: https://magicink.github.io/neat-components/
Usage
import React, { Component } from 'react'
import styled, { ThemeProvider } from 'styled-components'
import Neat, { gridContainer, gridColumn, gridShift } from 'neat-components'
let constants = () => {
return `
background-color: blue;
height: 50px;
margin-top: 1em;
`
}
let Container = styled.div`
${gridContainer()};
`
let Column = styled.div`
${constants()} ${props => gridColumn(props.theme, 1)};
`
class App extends Component {
render() {
return (
<ThemeProvider theme={Neat()}>
<div>
<Container>
<Column />
<Column />
<Column />
<Column />
</Container>
</div>
</ThemeProvider>
)
}
}
export default AppAPI
Neat([settings])
Returns a theme object. You can pass this theme to a ThemeProvider component. For example
<ThemeProvider theme={Neat()}>...</ThemeProvider>You can pass in a settings object to create a custom grid. The settings object has the following properties:
color: Used by gridVisual() to determine the color the grid (default: null).
columns: The number of columns the grid supports (default: 12).
direction: The direction columns float. Accepts ltr (default) or rtl.
gutter: The spacing between columns (default: 20px)
media: Used by gridMedia() to specify the media the grid should be applied. It can accept a string (i.e. only screen and (max-width: 800px)) or a number (i.e 800). The later would produce only screen and (min-width: 800px). Defaults to null.
const CustomGrid = Neat({ columns: 3, gutter: '60px' })
const Container = styled.div`
margin-top: 1rem;
${gridContainer()};
`
const WideColumn = styled.div`
background-image: linear-gradient(to bottom right, #21e9f4, #00d4ff);
border-radius: 5px;
height: 20rem;
${props => gridColumn(props.theme, 1)};
`
class App extends Component {
render() {
return (
<ThemeProvider theme={Neat()}>
<Container>
<WideColumn theme={CustomGrid} />
<WideColumn theme={CustomGrid} />
<WideColumn theme={CustomGrid} />
</Container>
</ThemeProvider>
)
}
}gridCollapse(theme)
Used to create grids within grids.
const SidebarGrid = Neat({
columns: 3,
gutter: '40px'
})
const GalleryGrid = Neat({
columns: 4,
gutter: '40px'
})
const Container = styled.div`
${gridContainer()};
`
const SideBar = styled.div`
height: 19rem;
${props => gridColumn(SidebarGrid, 1)};
`
const Gallery = styled.div`
${props => gridColumn(GalleryGrid, 2)};
`
const GalleryContainer = styled.div`
${gridCollapse(GalleryGrid)} ${gridContainer()};
`
const GalleryItem = styled.div`
background-color: #496278;
height: 4rem;
margin-bottom: 1rem;
${gridColumn(GalleryGrid, 1)};
`
class App extends Component {
render() {
return (
<ThemeProvider theme={Neat()}>
<Container>
<SideBar />
<Gallery>
<GalleryContainer>
<GalleryItem />
...
</GalleryContainer>
</Gallery>
</Container>
</ThemeProvider>
)
}
}gridColumn(theme, span)
Creates a component that occupies span number of a given theme's columns
let Column = styled.div`
${props => gridColumn(props.theme, 1)};
`
class App extends Component {
render() {
return (
<ThemeProvider theme={Neat()}>
<div>
<Container>
<Column />
<Column />
<Column />
<Column />
</Container>
</div>
</ThemeProvider>
)
}
}gridContainer()
Injects a clearfix solution into the component.
const Container = styled.div`
${gridContainer()};
`
class App extends Component {
render() {
return (
<ThemeProvider theme={Neat()}>
<Container>...</Container>
</ThemeProvider>
)
}
}gridMedia(theme)
Used to inject media queries into the component.
const mobileGrid = Neat({
columns: 12,
gutter: '10px',
media: 'only screen and (max-width: 600px)'
})
const desktopGrid = Neat({
columns: 12,
gutter: '20px',
media: 'only screen and (min-width: 601px)'
})
const Column = styled.div`
height: 50px;
background-color: yellow;
margin-top: 1rem;
${gridColumn(mobileGrid, 2)}
${gridMedia(desktopGrid, [
{
...gridColumn(desktopGrid, 1),
'background-color': 'red'
}
])}
`
const Container = styled.div`
${gridContainer()}
`
export class GridMedia extends React.Component {
render() {
return [
<h1 key={'header'}>
<code>gridMedia</code>
</h1>,
<ThemeProvider key={'provider'} theme={Neat()}>
<Container>
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
</Container>
</ThemeProvider>
]
}
}gridShift(theme, shift)
Shifts a component shift number of columns. This reorganizes the components..
let constants = () => {
return `
background-color: blue;
height: 50px;
margin-top: 1em;
`
}
let Container = styled.div`
${gridContainer()};
`
let Column = styled.div`
${constants()} ${props => gridColumn(props.theme, 1)};
`
let Shifted = styled.div`
${constants()}
${props => gridColumn(props.theme, 1)}
${props => gridShift(props.theme, 2)}
`
class App extends Component {
render() {
return (
<ThemeProvider theme={Neat()}>
<div>
<Container>
<Column />
<Shifted /> // Shifted one column to the right.
</Container>
</div>
</ThemeProvider>
)
}
}gridPush(theme, push)
Pushes the component push number of columns. It's similar to gridShift() but does not rearrange the components.
let constants = () => {
return `
background-color: blue;
height: 50px;
margin-top: 1em;
`
}
let Container = styled.div`
${gridContainer()};
`
let Column = styled.div`
${constants()} ${props => gridColumn(props.theme, 1)};
`
let Pushed = styled.div`
${constants()}
${props => gridColumn(props.theme, 1)}
${props => gridPush(props.theme, 2)}
`
class App extends Component {
render() {
return (
<ThemeProvider theme={Neat()}>
<div>
<Container>
<Column />
<Pushed /> // Pushed one column to the right.
</Container>
</div>
</ThemeProvider>
)
}
}gridVisual(theme)
Creates series of visual guidelines based on the grid system.