Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/janczizikow/emotion-flex
Fully customizable responsive grid system build with emotion, based on Bootstrap's grid.
https://github.com/janczizikow/emotion-flex
emotion flexbox react
Last synced: 4 months ago
JSON representation
Fully customizable responsive grid system build with emotion, based on Bootstrap's grid.
- Host: GitHub
- URL: https://github.com/janczizikow/emotion-flex
- Owner: janczizikow
- License: mit
- Created: 2019-04-25T22:08:35.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T07:00:00.000Z (about 2 years ago)
- Last Synced: 2024-04-25T22:22:29.699Z (10 months ago)
- Topics: emotion, flexbox, react
- Language: TypeScript
- Homepage:
- Size: 1.45 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# emotion-flex
>
[](https://travis-ci.org/janczizikow/emotion-flex)
[](https://coveralls.io/github/janczizikow/emotion-flex?branch=master)
[](https://www.npmjs.com/package/emotion-flex)
[](https://github.com/janczizikow/emotion-flex/blob/master/LICENSE)
[](https://github.com/prettier/prettier)
Fully customizable responsive grid system build with [emotion](https://emotion.sh/), based on [Bootstrap](https://getbootstrap.com/).
## 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](https://getbootstrap.com/docs/4.3/getting-started/introduction/#responsive-meta-tag)*
```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
### 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
```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](https://github.com/rebassjs/rebass)
- [react-grid](https://github.com/wangzuo/react-grid)
- [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid)
- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid)
- [styled-bootstrap-grid](https://github.com/dragma/styled-bootstrap-grid)
## License
MIT © [janczizikow](https://github.com/janczizikow)