Skip to content

Commit c33de95

Browse files
smakoshsmakosh
committed
feat(grid): introducing the best flexbox grid library ever
1 parent 2794544 commit c33de95

File tree

5 files changed

+196
-65
lines changed

5 files changed

+196
-65
lines changed

‎README.md

Lines changed: 9 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,7 @@ Or
2121
yarn add react-flex-ready
2222
```
2323

24-
```jsx
25-
import React from "react";
26-
import { render } from "react-dom";
27-
import { Flex, Item } from "react-flex-ready";
28-
29-
const myList = [{ title: "first" }, { title: "second" }, { title: "third" }];
30-
31-
const Demo = () => (
32-
<div>
33-
<h1>Example</h1>
34-
<Flex>
35-
{myList.map(({ title }, i) => (
36-
<Item key={i} col="3" colTablet="3" colMobile="1" stretch>
37-
<div
38-
style={{
39-
textAlign: "center",
40-
width: "100%",
41-
border: "1px solid #eee"
42-
}}
43-
>
44-
<h1>{title}</h1>
45-
</div>
46-
</Item>
47-
))}
48-
</Flex>
49-
</div>
50-
);
51-
52-
render(<Demo />, document.querySelector("#root"));
53-
```
24+
[See Example](https://codesandbox.io/s/react-flex-ready-example-q6fdg)
5425

5526
## Props
5627

@@ -61,7 +32,9 @@ These docs are inspired by reactjs-popup docs
6132
| Option | Default | Type | Description |
6233
| -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
6334
| align | center | {string} | The way you want to align your items (`align-items`)
64-
| col | 1 | {string} | How many columns you have within your grid
35+
| 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
36+
| colTablet | | {number} | Same as col but on Tablet
37+
| colMobile | | {number} | Same as col but on Mobile
6538
| as | div | {string, Component} | https://www.styled-components.com/docs/api#as-polymorphic-prop
6639
| className | | {string} | you can add a className and style the component the way you wish
6740
| style | | {object} | you can pass in CSS in JS directly
@@ -70,11 +43,11 @@ These docs are inspired by reactjs-popup docs
7043

7144
| Option | Default | Type | Description |
7245
| -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
73-
| col | 1 | {string} | How many columns of 12 your item will take on desktop |
74-
| col | 1 | {string} | How many columns you have within your grid
75-
| colTablet | 1 | {string} | How many columns of 12 your item will take on tablet
76-
| colMobile | 1 | {string} | How many columns of 12 your item will take on mobile
77-
| marginBottom | `3rem` | {string} | Margin bottom of your item, last item always has 0 on mobile
46+
| 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)
47+
| col | 1 | {number} | How many columns out of 12 your item will take on desktop
48+
| colTablet | 1 | {number} | How many columns out of 12 your item will take on tablet
49+
| colMobile | 1 | {number} | How many columns out of 12 your item will take on mobile
50+
| marginBottom | `10px` on mobile | {number} | Margin bottom of your item, last item always has 0 on mobile
7851
| stretch | false | {bool} | Whether you want the items to have the same height or not
7952
| as | div | {string, Component} | https://www.styled-components.com/docs/api#as-polymorphic-prop
8053
| className | | {string} | you can add a className and style the component the way you wish

‎demo/src/example.json

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
[
2+
{
3+
"columns": 1
4+
},
5+
{
6+
"columns": 1
7+
},
8+
{
9+
"columns": 1
10+
},
11+
{
12+
"columns": 1
13+
},
14+
{
15+
"columns": 1
16+
},
17+
{
18+
"columns": 1
19+
},
20+
{
21+
"columns": 1
22+
},
23+
{
24+
"columns": 1
25+
},
26+
{
27+
"columns": 1
28+
},
29+
{
30+
"columns": 1
31+
},
32+
{
33+
"columns": 1
34+
},
35+
{
36+
"columns": 1
37+
},
38+
{
39+
"columns": 2
40+
},
41+
{
42+
"columns": 2
43+
},
44+
{
45+
"columns": 2
46+
},
47+
{
48+
"columns": 2
49+
},
50+
{
51+
"columns": 2
52+
},
53+
{
54+
"columns": 2
55+
},
56+
{
57+
"columns": 3
58+
},
59+
{
60+
"columns": 3
61+
},
62+
{
63+
"columns": 3
64+
},
65+
{
66+
"columns": 3
67+
},
68+
{
69+
"columns": 4
70+
},
71+
{
72+
"columns": 4
73+
},
74+
{
75+
"columns": 4
76+
},
77+
{
78+
"columns": 5
79+
},
80+
{
81+
"columns": 7
82+
},
83+
{
84+
"columns": 6
85+
},
86+
{
87+
"columns": 6
88+
},
89+
{
90+
"columns": 4
91+
},
92+
{
93+
"columns": 8
94+
},
95+
{
96+
"columns": 3
97+
},
98+
{
99+
"columns": 9
100+
},
101+
{
102+
"columns": 2
103+
},
104+
{
105+
"columns": 10
106+
},
107+
{
108+
"columns": 1
109+
},
110+
{
111+
"columns": 11
112+
},
113+
{
114+
"columns": 12
115+
},
116+
{
117+
"columns": 4
118+
},
119+
{
120+
"columns": 4
121+
},
122+
{
123+
"columns": 4
124+
},
125+
{
126+
"columns": 4
127+
},
128+
{
129+
"columns": 4
130+
}
131+
]

‎demo/src/index.js

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,41 @@
11
import React from 'react'
22
import {render} from 'react-dom'
33
import { Flex, Item } from '../../src'
4-
5-
const myList = [{ title: "first" }, { title: "second" }, { title: "third" }];
4+
import myList from './example.json'
65

76
const Demo = () => (
8-
<div>
9-
<h1>Example</h1>
10-
<Flex>
11-
{myList.map(({ title }, i) => (
12-
<Item key={i} col="3" colTablet="3" colMobile="1" stretch>
13-
<div style={{ textAlign: "center", width: "100%", border: '1px solid #eee' }}>
14-
<h1>{title}</h1>
15-
</div>
16-
</Item>
17-
))}
18-
</Flex>
19-
</div>
7+
<div
8+
style={{
9+
maxWidth: 960,
10+
margin: "0 auto"
11+
}}
12+
>
13+
<h1>Example</h1>
14+
<Flex col={4}>
15+
{myList.map(({ columns }, i) => (
16+
<Item
17+
key={i}
18+
col={columns}
19+
colTablet={6}
20+
colMobile={12}
21+
gap={1}
22+
marginBottom={30}
23+
stretch
24+
>
25+
<div
26+
style={{
27+
textAlign: "center",
28+
width: "100%",
29+
border: "1px solid #eee",
30+
background: "#eee"
31+
}}
32+
>
33+
<h1>{columns}</h1>
34+
</div>
35+
</Item>
36+
))}
37+
</Flex>
38+
</div>
2039
)
2140

2241

‎src/Flex.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,32 @@ import PropTypes from 'prop-types'
33

44
const Flex = styled.div`
55
display: flex;
6-
align-items: ${({ align }) => align || "center"};
76
justify-content: space-between;
87
flex-wrap: wrap;
8+
align-items: ${({ align }) => align || "center"};
99
1010
&:after {
1111
content: "";
12-
max-width: ${({ col }) => (col && col > 1 ? `${100 / col - 2}%` : "100%")};
12+
max-width: ${({ col, gap = 1 }) => (col && col < 12 ? `${100 * col / 12 - gap}%` : "100%")};
1313
width: 100%;
1414
1515
@media (max-width: 960px) {
16-
max-width: 100%;
16+
max-width: ${({ colTablet, gabTablet = 1 }) =>
17+
colTablet && colTablet < 12 ? `${100 * colTablet / 12 - gabTablet}%` : "100%"};
18+
}
19+
20+
@media (max-width: 680px) {
21+
max-width: ${({ colMobile, gapMobile = 1 }) =>
22+
colMobile && colMobile < 12 ? `${100 * colMobile / 12 - gapMobile}%` : "100%"};
1723
}
1824
}
1925
`;
2026

2127
Flex.propTypes = {
2228
align: PropTypes.string,
23-
col: PropTypes.string
29+
col: PropTypes.number,
30+
gap: PropTypes.number
31+
2432
}
2533

2634
export default Flex

‎src/Item.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@ import PropTypes from 'prop-types'
33

44
const Item = styled.div`
55
width: 100%;
6-
max-width: ${({ col }) => (col && col > 1 ? `${100 / col - 2}%` : "100%")};
6+
max-width: ${({ col, gap = 1 }) => (col && col < 12 ? `${100 * col / 12 - gap}%` : "100%")};
77
88
${({ marginBottom }) =>
99
marginBottom &&
1010
`
11-
margin-bottom: ${marginBottom};
11+
margin-bottom: ${marginBottom}px;
1212
`}
1313
1414
@media (max-width: 960px) {
15-
max-width: ${({ colTablet }) =>
16-
colTablet && colTablet > 1 ? `${100 / colTablet - 2}%` : "100%"};
17-
margin-bottom: ${({ marginBottom }) => marginBottom || "3rem"};
15+
max-width: ${({ colTablet, gabTablet = 1 }) =>
16+
colTablet && colTablet < 12 ? `${100 * colTablet / 12 - gabTablet}%` : "100%"};
17+
margin-bottom: ${({ marginBottom = 10 }) => `${marginBottom}px`};
1818
1919
&:last-child {
2020
margin-bottom: unset;
2121
}
2222
}
2323
2424
@media (max-width: 680px) {
25-
max-width: ${({ colMobile }) =>
26-
colMobile && colMobile > 1 ? `${100 / colMobile - 2}%` : "100%"};
25+
max-width: ${({ colMobile, gapMobile = 1 }) =>
26+
colMobile && colMobile < 12 ? `${100 * colMobile / 12 - gapMobile}%` : "100%"};
2727
}
2828
2929
${({ stretch }) =>
@@ -35,10 +35,10 @@ const Item = styled.div`
3535
`;
3636

3737
Item.propTypes = {
38-
col: PropTypes.string,
39-
colTablet: PropTypes.string,
40-
colMobile: PropTypes.string,
41-
marginBottom: PropTypes.string,
38+
col: PropTypes.number,
39+
colTablet: PropTypes.number,
40+
colMobile: PropTypes.number,
41+
marginBottom: PropTypes.number,
4242
stretch: PropTypes.bool
4343
}
4444

0 commit comments

Comments
 (0)