styled-grid-responsive

A responsive, fluid, deeply nestable, non-flexbox grid system built with styled-components 💅.
On version 2, the mediaQuery utility was removed and made into it's own package, you can find it here

Installation:

npm install styled-grid-responsive

Breakpoints:

you can use the default breakpoints or set your own through the theme provider.

Default breakpoints:

```javascript
defaultDevices: {
phone: {
max: 768
},
tablet: {
min: 768,
max: 1160
},
desktop: {
min: 1160,
max: 1400
},
large: {
min: 1400
}
}
``

Setting you own breakpoints:

``javascript
import React from 'react'
import { ThemeProvider } from 'styled-components'

export const breakpoints = {
smallPhone: {
max: 576
},
mediumPhone: {
min: 576,
max: 768
},
tablet: {
min: 768,
max: 992
},
desktop: {
min: 992,
max: 1200
},
reallyLarge: {
min: 1200,
}
}

const theme = {
breakpoints
}


Hello World!

``

Grid usage:


``javascript
import { Grid, GridItem } from 'styled-grid-responsive'

``


Grid Options:


* gutter: integer for the desired gutter value (default: 20)
* full: bool to have a gutterless grid
* middle: bool to vertically align the grid items middle (default: false, vertical-align: top)
* bottom: bool to vertically align the grid items bottom (default: false, vertical-align: top)
* center: bool to horizontally align the grid items center (default: false, text-align: center)
* rev: bool to reverse the order of the grid items (default: false)

GridItem Options:

* col: any fraction to represent the default column width, this is overridden by the media value specified at each breakpoint
* media: object with the grid item rules for each of the breakpoint

Gotcha

* For the gutters to work properly, your application needs to be set to use box-sizing: border-box;
* https://css-tricks.com/box-sizing/

``css
, :before, *:after {
box-sizing: border-box;
}
``

More Grid Examples:


``javascript

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

``

Testing locally:

To test it locally:
1)Clone this repo and cd into it
2)npm install
3) npm start
4) to run tests npm test`