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
npm i --save emotion-flex @emotion/react @emotion/styled
# or
yarn add emotion-flex @emotion/react @emotion/styledUsage
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
<head>. from Bootstrap docs
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Make sure you reset box-sizing somewhere in global styles:
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}import React, { Component } from 'react'
import { Container, Row, Col } from 'emotion-flex'
class Example extends Component {
render () {
return (
<Container>
<Row>
<Col xs={12} sm={6} md={4} lg={3}>1st column</Col>
<Col xs={12} sm={6} md={4} lg={3}>2nd column</Col>
</Row>
</Container>
)
}
}API
Container
| props | type | description |
|---|---|---|
| fluid | boolean | Equivalent to Bootstrap's container and container-fluid
|
Row
| props | type | description |
|---|---|---|
| noGutters | boolean | Remove Row's negative margins |
Col
| 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
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 (
<ThemeProvider theme={customTheme}>
<Container>
<Row>
<Col xs={12} sm={6} md={4} lg={3}>1st column</Col>
<Col xs={12} sm={6} md={4} lg={3}>2nd column</Col>
</Row>
</Container>
</ThemeProvider>
)
}
}Default theme:
{
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200,
},
maxWidths: {
sm: 540,
md: 720,
lg: 960,
xl: 1140,
},
gutters: 15,
}Other projects
License
MIT © janczizikow