Skip to content

Commit

Permalink
feat(grid): introducing the best flexbox grid library ever
Browse files Browse the repository at this point in the history
  • Loading branch information
@smakosh
smakosh committed Jul 2, 2019
1 parent 2794544 commit c33de95
Show file tree
Hide file tree
Showing 5 changed files with 196 additions and 65 deletions.
45 changes: 9 additions & 36 deletions README.md
View file
Expand Up @@ -21,36 +21,7 @@ Or
yarn add react-flex-ready
```

```jsx
import React from "react";
import { render } from "react-dom";
import { Flex, Item } from "react-flex-ready";

const myList = [{ title: "first" }, { title: "second" }, { title: "third" }];

const Demo = () => (
<div>
<h1>Example</h1>
<Flex>
{myList.map(({ title }, i) => (
<Item key={i} col="3" colTablet="3" colMobile="1" stretch>
<div
style={{
textAlign: "center",
width: "100%",
border: "1px solid #eee"
}}
>
<h1>{title}</h1>
</div>
</Item>
))}
</Flex>
</div>
);

render(<Demo />, document.querySelector("#root"));
```
[See Example](https://codesandbox.io/s/react-flex-ready-example-q6fdg)

## Props

Expand All @@ -61,7 +32,9 @@ These docs are inspired by reactjs-popup docs
| Option | Default | Type | Description |
| -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| align | center | {string} | The way you want to align your items (`align-items`)
| col | 1 | {string} | How many columns you have within your grid
| col | | {number} | depends if you have like 5 elements and each one takes 4 out of 12 of space, will explain this more on a blog post
| colTablet | | {number} | Same as col but on Tablet
| colMobile | | {number} | Same as col but on Mobile
| as | div | {string, Component} | https://www.styled-components.com/docs/api#as-polymorphic-prop
| className | | {string} | you can add a className and style the component the way you wish
| style | | {object} | you can pass in CSS in JS directly
Expand All @@ -70,11 +43,11 @@ These docs are inspired by reactjs-popup docs

| Option | Default | Type | Description |
| -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| col | 1 | {string} | How many columns of 12 your item will take on desktop |
| col | 1 | {string} | How many columns you have within your grid
| colTablet | 1 | {string} | How many columns of 12 your item will take on tablet
| colMobile | 1 | {string} | How many columns of 12 your item will take on mobile
| marginBottom | `3rem` | {string} | Margin bottom of your item, last item always has 0 on mobile
| gap | 1 | {number} | The gap value between your elements, 1 is highly recommended (it's not valid when your element takes 12 out of 12 of space)
| col | 1 | {number} | How many columns out of 12 your item will take on desktop
| colTablet | 1 | {number} | How many columns out of 12 your item will take on tablet
| colMobile | 1 | {number} | How many columns out of 12 your item will take on mobile
| marginBottom | `10px` on mobile | {number} | Margin bottom of your item, last item always has 0 on mobile
| stretch | false | {bool} | Whether you want the items to have the same height or not
| as | div | {string, Component} | https://www.styled-components.com/docs/api#as-polymorphic-prop
| className | | {string} | you can add a className and style the component the way you wish
Expand Down
131 changes: 131 additions & 0 deletions demo/src/example.json
View file
@@ -0,0 +1,131 @@
[
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 1
},
{
"columns": 2
},
{
"columns": 2
},
{
"columns": 2
},
{
"columns": 2
},
{
"columns": 2
},
{
"columns": 2
},
{
"columns": 3
},
{
"columns": 3
},
{
"columns": 3
},
{
"columns": 3
},
{
"columns": 4
},
{
"columns": 4
},
{
"columns": 4
},
{
"columns": 5
},
{
"columns": 7
},
{
"columns": 6
},
{
"columns": 6
},
{
"columns": 4
},
{
"columns": 8
},
{
"columns": 3
},
{
"columns": 9
},
{
"columns": 2
},
{
"columns": 10
},
{
"columns": 1
},
{
"columns": 11
},
{
"columns": 12
},
{
"columns": 4
},
{
"columns": 4
},
{
"columns": 4
},
{
"columns": 4
},
{
"columns": 4
}
]
47 changes: 33 additions & 14 deletions demo/src/index.js
View file
@@ -1,22 +1,41 @@
import React from 'react'
import {render} from 'react-dom'
import { Flex, Item } from '../../src'

const myList = [{ title: "first" }, { title: "second" }, { title: "third" }];
import myList from './example.json'

const Demo = () => (
<div>
<h1>Example</h1>
<Flex>
{myList.map(({ title }, i) => (
<Item key={i} col="3" colTablet="3" colMobile="1" stretch>
<div style={{ textAlign: "center", width: "100%", border: '1px solid #eee' }}>
<h1>{title}</h1>
</div>
</Item>
))}
</Flex>
</div>
<div
style={{
maxWidth: 960,
margin: "0 auto"
}}
>
<h1>Example</h1>
<Flex col={4}>
{myList.map(({ columns }, i) => (
<Item
key={i}
col={columns}
colTablet={6}
colMobile={12}
gap={1}
marginBottom={30}
stretch
>
<div
style={{
textAlign: "center",
width: "100%",
border: "1px solid #eee",
background: "#eee"
}}
>
<h1>{columns}</h1>
</div>
</Item>
))}
</Flex>
</div>
)


Expand Down
16 changes: 12 additions & 4 deletions src/Flex.js
View file
Expand Up @@ -3,24 +3,32 @@ import PropTypes from 'prop-types'

const Flex = styled.div`
display: flex;
align-items: ${({ align }) => align || "center"};
justify-content: space-between;
flex-wrap: wrap;
align-items: ${({ align }) => align || "center"};
&:after {
content: "";
max-width: ${({ col }) => (col && col > 1 ? `${100 / col - 2}%` : "100%")};
max-width: ${({ col, gap = 1 }) => (col && col < 12 ? `${100 * col / 12 - gap}%` : "100%")};
width: 100%;
@media (max-width: 960px) {
max-width: 100%;
max-width: ${({ colTablet, gabTablet = 1 }) =>
colTablet && colTablet < 12 ? `${100 * colTablet / 12 - gabTablet}%` : "100%"};
}
@media (max-width: 680px) {
max-width: ${({ colMobile, gapMobile = 1 }) =>
colMobile && colMobile < 12 ? `${100 * colMobile / 12 - gapMobile}%` : "100%"};
}
}
`;

Flex.propTypes = {
align: PropTypes.string,
col: PropTypes.string
col: PropTypes.number,
gap: PropTypes.number

}

export default Flex
22 changes: 11 additions & 11 deletions src/Item.js
View file
Expand Up @@ -3,27 +3,27 @@ import PropTypes from 'prop-types'

const Item = styled.div`
width: 100%;
max-width: ${({ col }) => (col && col > 1 ? `${100 / col - 2}%` : "100%")};
max-width: ${({ col, gap = 1 }) => (col && col < 12 ? `${100 * col / 12 - gap}%` : "100%")};
${({ marginBottom }) =>
marginBottom &&
`
margin-bottom: ${marginBottom};
margin-bottom: ${marginBottom}px;
`}
@media (max-width: 960px) {
max-width: ${({ colTablet }) =>
colTablet && colTablet > 1 ? `${100 / colTablet - 2}%` : "100%"};
margin-bottom: ${({ marginBottom }) => marginBottom || "3rem"};
max-width: ${({ colTablet, gabTablet = 1 }) =>
colTablet && colTablet < 12 ? `${100 * colTablet / 12 - gabTablet}%` : "100%"};
margin-bottom: ${({ marginBottom = 10 }) => `${marginBottom}px`};
&:last-child {
margin-bottom: unset;
}
}
@media (max-width: 680px) {
max-width: ${({ colMobile }) =>
colMobile && colMobile > 1 ? `${100 / colMobile - 2}%` : "100%"};
max-width: ${({ colMobile, gapMobile = 1 }) =>
colMobile && colMobile < 12 ? `${100 * colMobile / 12 - gapMobile}%` : "100%"};
}
${({ stretch }) =>
Expand All @@ -35,10 +35,10 @@ const Item = styled.div`
`;

Item.propTypes = {
col: PropTypes.string,
colTablet: PropTypes.string,
colMobile: PropTypes.string,
marginBottom: PropTypes.string,
col: PropTypes.number,
colTablet: PropTypes.number,
colMobile: PropTypes.number,
marginBottom: PropTypes.number,
stretch: PropTypes.bool
}

Expand Down

0 comments on commit c33de95

Please sign in to comment.