emotion-flex

>


Fully customizable responsive grid system build with emotion, based on Bootstrap.

Install

> ⚠ WARNING
> For emotion 10 use v1.x.x of emotion-flex

``bash
npm i --save emotion-flex @emotion/react @emotion/styled

or

yarn add emotion-flex @emotion/react @emotion/styled
`

Usage

> Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .
> from Bootstrap docs

`html

`

Make sure you reset box-sizing somewhere in global styles:

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

html {
box-sizing: border-box;
}
`

`jsx
import React, { Component } from 'react'

import { Container, Row, Col } from 'emotion-flex'

class Example extends Component {
render () {
return (


1st column
2nd column


)
}
}
`

API

$3

| props | type | description |
| ----- | ------- | ----------------------------------------------------------- |
| fluid | boolean | Equivalent to Bootstrap's container and container-fluid |

$3

| props | type | description |
| --------- | ------- | ----------------------------- |
| noGutters | boolean | Remove Row's negative margins |

$3

| props | type | description |
| --------- | --------------------------- | ------------------------------------------------------ |
| noGutters | boolean | Removes the padding around Column |
| xsOffset | number (2-11) | The number of columns to offset on extra small devices |
| xsOrder | number or "first" or "last" | Sets the order on extra small devices |
| xs | number (1-12) | The number of columns to span on extra small devices |
| smOffset | number (2-11) | The number of columns to offset on small devices |
| smOrder | number or "first" or "last" | Sets the order on small devices |
| sm | number (1-12) | The number of columns to span on small devices |
| mdOffset | number (2-11) | The number of columns to offset on medium devices |
| mdOrder | number or "first" or "last" | Sets the order on medium devices |
| md | number (1-12) | The number of columns to span on medium devices |
| lgOffset | number (2-11) | The number of columns to offset on large devices |
| lgOrder | number or "first" or "last" | Sets the order on large devices |
| lg | number (1-12) | The number of columns to span on large devices |
| xlOffset | number (2-11) | The number of columns to offset on extra large devices |
| xlOrder | number or "first" or "last" | Sets the order on extra large devices |
| xl | number (1-12) | The number of columns to span on extra large devices |

Theming

`jsx
import React, { Component } from 'react'
import { ThemeProvider } from '@emotion/react'

import { Container, Row, Col } from 'emotion-flex'

const customTheme = {
breakpoints: {
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
maxWidths: {
sm: 576,
md: 768,
lg: 992,
xl: 1200,
},
gutters: 16
};

class Example extends Component {
render () {
return (



1st column
2nd column



)
}
}
`

Default theme:

`js
{
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200,
},
maxWidths: {
sm: 540,
md: 720,
lg: 960,
xl: 1140,
},
gutters: 15,
}
``

Other projects

- Rebass
- react-grid
- react-flexbox-grid
- react-styled-flexboxgrid
- styled-bootstrap-grid

License

MIT © janczizikow