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 App ;

API

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 > ) ; } }

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 > ) ; } }

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 > ) ; } }

Injects a clearfix solution into the component.

const Container = styled . div ` ${ gridContainer ( ) } ; ` ; class App extends Component { render ( ) { return ( < ThemeProvider theme = { Neat ( ) } > < Container > ... < / Container > < / ThemeProvider > ) ; } }

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 > ] } }

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 / > < / Container > < / div > < / ThemeProvider > ) ; } }

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 / > < / Container > < / div > < / ThemeProvider > ) ; } }

Creates series of visual guidelines based on the grid system.

References