Skip to content

Commit 67a8e0d

Browse files
jacobsfletchjacobsfletch
committed
prepares for npm publishing
1 parent d545749 commit 67a8e0d

11 files changed

+400
-8266
lines changed

‎.eslintrc.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ module.exports = {
3737
"object-curly-newline": 0,
3838
"import/prefer-default-export": 0,
3939
"react/jsx-max-props-per-line": [1, { "maximum": 1 }],
40-
"object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }]
40+
"object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }],
41+
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
4142
},
4243
};

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) TRBL, LLC
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
# React CSS Grid ![Beta](https://img.shields.io/badge/release-alpha-ff4553)
1+
[![NPM](https://img.shields.io/npm/v/@trbl/react-css-grid)](https://www.npmjs.com/@trbl/react-css-grid)
2+
[![Supported by TRBL](https://img.shields.io/badge/supported_by-TRBL-black)](https://github.com/trbldesign)
3+
4+
# React CSS Grid
25

36
## Abstract
47

‎demo/Grid1.demo.js

+29-20
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,29 @@ const GridDemo1 = () => {
77
<p><b>14 column grid demo</b></p>
88
<p>To demonstrate a straightforward grid with nesting</p>
99
<hr />
10-
<p>props:</p>
11-
<code>
12-
<p>hCount: 14</p>
13-
<p>hGap: 10px</p>
14-
<p>vGap: 10px</p>
15-
<p>breakpoints:</p>
16-
<ul>
17-
<li>s: 576</li>
18-
<li>m: 768</li>
19-
<li>l: 992</li>
20-
<li>xl: 1200</li>
21-
</ul>
22-
<p>scopeCSSTo: &ldquo;#grid-14-col-demo&rdquo;</p>
23-
</code>
10+
<pre>
11+
<code>
12+
hCount: 14
13+
<br />
14+
hGap: 10px
15+
<br />
16+
vGap: 10px
17+
<br />
18+
{'breakpoints: {'}
19+
<br />
20+
&emsp;s: 576
21+
<br />
22+
&emsp;m: 768
23+
<br />
24+
&emsp;l: 992
25+
<br />
26+
&emsp;xl: 1200
27+
<br />
28+
{'}'}
29+
<br />
30+
scopeCSSTo: #grid-demo-1
31+
</code>
32+
</pre>
2433
<GridProvider
2534
hCount={14}
2635
hGap="10px"
@@ -41,7 +50,7 @@ const GridDemo1 = () => {
4150
>
4251
<Cell
4352
hSpan={4}
44-
style={{ backgroundColor: 'lightpink' }}
53+
style={{ backgroundColor: 'aqua' }}
4554
className="custom-cell-class"
4655
id="custom-cell-id"
4756
>
@@ -62,7 +71,7 @@ const GridDemo1 = () => {
6271
</Cell>
6372
<Cell
6473
hSpan={10}
65-
style={{ backgroundColor: 'lightpink' }}
74+
style={{ backgroundColor: 'aqua' }}
6675
>
6776
<p>hSpan 10</p>
6877
</Cell>
@@ -73,7 +82,7 @@ const GridDemo1 = () => {
7382
<Grid>
7483
<Cell
7584
hSpan={8}
76-
style={{ backgroundColor: 'lightpink' }}
85+
style={{ backgroundColor: 'aqua' }}
7786
>
7887
<Grid>
7988
<Cell
@@ -88,19 +97,19 @@ const GridDemo1 = () => {
8897
<Cell
8998
hSpan={6}
9099
htmlElement="section"
91-
style={{ backgroundColor: 'lightpink' }}
100+
style={{ backgroundColor: 'aqua' }}
92101
>
93102
<p>hSpan 6 as Section</p>
94103
</Cell>
95104
<Cell
96105
hSpan={10}
97-
style={{ backgroundColor: 'lightpink' }}
106+
style={{ backgroundColor: 'aqua' }}
98107
>
99108
<p>Implicit column to show row gap</p>
100109
</Cell>
101110
<Cell
102111
hSpan={10}
103-
style={{ backgroundColor: 'lightpink' }}
112+
style={{ backgroundColor: 'aqua' }}
104113
>
105114
<p>Start on vertical line 1</p>
106115
</Cell>

‎demo/Grid2.demo.js

+30-21
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,29 @@ const GridDemo2 = () => {
77
<p><b>12 column grid with gutter equal to the column width:</b></p>
88
<p>To demonstrate a nested grid that behaves differently across screen sizes</p>
99
<hr />
10-
<p>props:</p>
11-
<code>
12-
<p>hCount: 12</p>
13-
<p>hGap: columnWidth</p>
14-
<p>vGap: 10px</p>
15-
<p>breakpoints:</p>
16-
<ul>
17-
<li>s: 576</li>
18-
<li>m: 768</li>
19-
<li>l: 992</li>
20-
<li>xl: 1200</li>
21-
</ul>
22-
<p>scopeCSSTo: &ldquo;#grid-12-col-demo&rdquo;</p>
23-
</code>
10+
<pre>
11+
<code>
12+
hCount: 12
13+
<br />
14+
hGap: columnWidth
15+
<br />
16+
vGap: 10px
17+
<br />
18+
{'breakpoints: {'}
19+
<br />
20+
&emsp;s: 576
21+
<br />
22+
&emsp;m: 768
23+
<br />
24+
&emsp;l: 992
25+
<br />
26+
&emsp;xl: 1200
27+
<br />
28+
{'}'}
29+
<br />
30+
scopeCSSTo: #grid-12-col-demo
31+
</code>
32+
</pre>
2433
<GridProvider
2534
hCount={12}
2635
hGap="columnWidth"
@@ -43,7 +52,7 @@ const GridDemo2 = () => {
4352
hSpanM={4}
4453
hSpanS={3}
4554
hSpanXS={2}
46-
style={{ backgroundColor: 'lightblue' }}
55+
style={{ backgroundColor: 'coral' }}
4756
>
4857
<p>hSpan: 6</p>
4958
<p>hSpanL: 5</p>
@@ -57,7 +66,7 @@ const GridDemo2 = () => {
5766
hSpanM={4}
5867
hSpanS={3}
5968
hSpanXS={2}
60-
style={{ backgroundColor: 'lightblue' }}
69+
style={{ backgroundColor: 'coral' }}
6170
>
6271
<p>hSpan: 6</p>
6372
<p>hSpanL: 5</p>
@@ -74,7 +83,7 @@ const GridDemo2 = () => {
7483
hSpanM={3}
7584
hStart={2}
7685
hStartS={11}
77-
style={{ backgroundColor: 'lightblue' }}
86+
style={{ backgroundColor: 'coral' }}
7887
>
7988
<p>hSpan: 2</p>
8089
<p>hSpanM: 3</p>
@@ -86,7 +95,7 @@ const GridDemo2 = () => {
8695
hSpanL={3}
8796
hStart={6}
8897
hStartM={7}
89-
style={{ backgroundColor: 'lightblue' }}
98+
style={{ backgroundColor: 'coral' }}
9099
>
91100
<Grid>
92101
<Cell
@@ -110,19 +119,19 @@ const GridDemo2 = () => {
110119
<Grid>
111120
<Cell
112121
hSpan={12}
113-
style={{ backgroundColor: 'lightblue' }}
122+
style={{ backgroundColor: 'coral' }}
114123
>
115124
<p>first in DOM</p>
116125
</Cell>
117126
<Cell
118127
hSpan={12}
119-
style={{ backgroundColor: 'lightblue' }}
128+
style={{ backgroundColor: 'coral' }}
120129
>
121130
<p>second in DOM</p>
122131
</Cell>
123132
<Cell
124133
hSpan={12}
125-
style={{ backgroundColor: 'lightblue' }}
134+
style={{ backgroundColor: 'coral' }}
126135
>
127136
<p>third in DOM</p>
128137
</Cell>

‎demo/Grid3.demo.js

+30-20
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,31 @@ const GridDemo3 = () => {
77
<p><b>14 column grid grid with custom class name</b></p>
88
<p>Abstract: Lorem ipsum</p>
99
<hr />
10-
<p>props:</p>
11-
<code>
12-
<p>hCount: 14</p>
13-
<p>hGap: 10px</p>
14-
<p>vGap: 10px</p>
15-
<p>breakpoints:</p>
16-
<ul>
17-
<li>s: 576</li>
18-
<li>m: 768</li>
19-
<li>l: 992</li>
20-
<li>xl: 1200</li>
21-
</ul>
22-
<p>scopeCSSTo: &ldquo;#grid-12-col-demo&rdquo;</p>
23-
<p>classPrefix: &ldquo;custom&rdquo;</p>
24-
</code>
10+
<pre>
11+
<code>
12+
hCount: 14
13+
<br />
14+
hGap: 10px
15+
<br />
16+
vGap: 10px
17+
<br />
18+
{'breakpoints: {'}
19+
<br />
20+
&emsp;s: 576
21+
<br />
22+
&emsp;m: 768
23+
<br />
24+
&emsp;l: 992
25+
<br />
26+
&emsp;xl: 1200
27+
<br />
28+
{'}'}
29+
<br />
30+
scopeCSSTo: #grid-demo-3
31+
<br />
32+
classPrefix: abcde
33+
</code>
34+
</pre>
2535
<GridProvider
2636
hCount={14}
2737
hGap="10px"
@@ -35,19 +45,19 @@ const GridDemo3 = () => {
3545
}}
3646
minifyCSS={false}
3747
scopeCSSTo="#grid-demo-3"
38-
classPrefix="custom"
48+
classPrefix="abcde"
3949
>
4050
<div style={{ border: '1px solid' }}>
4151
<Grid>
4252
<Cell
4353
hSpan={4}
44-
style={{ backgroundColor: 'lightgreen' }}
54+
style={{ backgroundColor: 'aquamarine' }}
4555
>
4656
<p>hi</p>
4757
</Cell>
4858
<Cell
4959
hSpan={10}
50-
style={{ backgroundColor: 'lightgreen' }}
60+
style={{ backgroundColor: 'aquamarine' }}
5161
>
5262
<Grid disableHGap>
5363
<Cell
@@ -67,13 +77,13 @@ const GridDemo3 = () => {
6777

6878
<Cell
6979
hSpan={4}
70-
style={{ backgroundColor: 'lightgreen' }}
80+
style={{ backgroundColor: 'aquamarine' }}
7181
>
7282
<p>hi</p>
7383
</Cell>
7484
<Cell
7585
hSpan={10}
76-
style={{ backgroundColor: 'lightgreen' }}
86+
style={{ backgroundColor: 'aquamarine' }}
7787
>
7888
<Grid>
7989
<Cell

0 commit comments

Comments
 (0)