Skip to content
This repository was archived by the owner on Sep 25, 2020. It is now read-only.

Commit 1c2a82c

Browse files
adamwathanadamwathan
committed
Finish CSS Grid example plugin
1 parent 79cb55d commit 1c2a82c

File tree

5 files changed

+285
-72
lines changed

5 files changed

+285
-72
lines changed

‎README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,51 @@ module.exports = {
4545

4646
This is just about the simplest type of plugin you could make.
4747

48+
## CSS Grid Utilities
49+
50+
[View the source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js)
51+
52+
In `plugins/css-grid/index.js` you'll find an example of a plugin that adds new utilities for using [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).
53+
54+
![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png)
55+
56+
It exposes three configuration options:
57+
58+
- `grids`, for specifying all of the grid sizes you'd like to generate
59+
- `gaps`, for specifying the gap sizes you'd like to generate
60+
- `variants`, for specifying which variants to generate
61+
62+
```js
63+
module.exports = {
64+
// ...
65+
66+
plugins: [
67+
// ...
68+
require('./plugins/css-grid')({
69+
grids: [2, 3, 5, 6, 8, 10, 12],
70+
gaps: {
71+
0: '0',
72+
4: '1rem',
73+
8: '2rem',
74+
},
75+
variants: ['responsive'],
76+
}),
77+
],
78+
}
79+
```
80+
81+
With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility.
82+
83+
The plugin generates the following sets of classes:
84+
85+
- `.grid`, for setting `display: grid` on an element
86+
- `.grid-columns-{size}`, for specifying the number of columns in the grid
87+
- `.grid-gap-{size}`, for specifying the size of the gap between columns/rows
88+
- `.col-span-{columns}`, for specifying how wide a column should be
89+
- `.col-start-{line}` and `.col-end-{line}`, for specifying a column's start and end points explicitly (useful for reordering columns or leaving gaps)
90+
91+
It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a column-only float or Flexbox grid.
92+
4893
## Simple Buttons
4994

5095
[View the source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/simple-buttons/index.js)

‎dist/styles.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4839,6 +4839,18 @@ button,
48394839
grid-auto-flow: dense;
48404840
}
48414841

4842+
.grid-gap-0 {
4843+
grid-gap: 0;
4844+
}
4845+
4846+
.grid-gap-4 {
4847+
grid-gap: 1rem;
4848+
}
4849+
4850+
.grid-gap-8 {
4851+
grid-gap: 2rem;
4852+
}
4853+
48424854
.grid-columns-1 {
48434855
grid-template-columns: repeat(1, 1fr);
48444856
}
@@ -8959,6 +8971,18 @@ button,
89598971
grid-auto-flow: dense;
89608972
}
89618973

8974+
.sm\:grid-gap-0 {
8975+
grid-gap: 0;
8976+
}
8977+
8978+
.sm\:grid-gap-4 {
8979+
grid-gap: 1rem;
8980+
}
8981+
8982+
.sm\:grid-gap-8 {
8983+
grid-gap: 2rem;
8984+
}
8985+
89628986
.sm\:grid-columns-1 {
89638987
grid-template-columns: repeat(1, 1fr);
89648988
}
@@ -13080,6 +13104,18 @@ button,
1308013104
grid-auto-flow: dense;
1308113105
}
1308213106

13107+
.md\:grid-gap-0 {
13108+
grid-gap: 0;
13109+
}
13110+
13111+
.md\:grid-gap-4 {
13112+
grid-gap: 1rem;
13113+
}
13114+
13115+
.md\:grid-gap-8 {
13116+
grid-gap: 2rem;
13117+
}
13118+
1308313119
.md\:grid-columns-1 {
1308413120
grid-template-columns: repeat(1, 1fr);
1308513121
}
@@ -17201,6 +17237,18 @@ button,
1720117237
grid-auto-flow: dense;
1720217238
}
1720317239

17240+
.lg\:grid-gap-0 {
17241+
grid-gap: 0;
17242+
}
17243+
17244+
.lg\:grid-gap-4 {
17245+
grid-gap: 1rem;
17246+
}
17247+
17248+
.lg\:grid-gap-8 {
17249+
grid-gap: 2rem;
17250+
}
17251+
1720417252
.lg\:grid-columns-1 {
1720517253
grid-template-columns: repeat(1, 1fr);
1720617254
}
@@ -21322,6 +21370,18 @@ button,
2132221370
grid-auto-flow: dense;
2132321371
}
2132421372

21373+
.xl\:grid-gap-0 {
21374+
grid-gap: 0;
21375+
}
21376+
21377+
.xl\:grid-gap-4 {
21378+
grid-gap: 1rem;
21379+
}
21380+
21381+
.xl\:grid-gap-8 {
21382+
grid-gap: 2rem;
21383+
}
21384+
2132521385
.xl\:grid-columns-1 {
2132621386
grid-template-columns: repeat(1, 1fr);
2132721387
}

‎index.html

Lines changed: 158 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<body class="font-sans text-black">
1010
<div class="bg-white py-8">
1111
<div class="container mx-auto px-8">
12-
<h2 class="mb-6">Object-Fit Utilities</h2>
12+
<h2 class="text-2xl font-bold text-black mb-6">Object-Fit Utilities</h2>
1313
<div class="flex flex-wrap -mx-4 -mb-4">
1414
<div class="px-4 mb-4">
1515
<code class="block mb-2 text-grey-dark">.object-contain</code>
@@ -46,7 +46,7 @@ <h2 class="mb-6">Object-Fit Utilities</h2>
4646
</div>
4747
<div class="bg-grey-lighter py-8">
4848
<div class="container mx-auto px-8">
49-
<h2 class="mb-6">Simple Buttons</h2>
49+
<h2 class="text-2xl font-bold text-black mb-6">Simple Buttons</h2>
5050
<div class="mb-6">
5151
<h3 class="text-lg text-grey-darker font-semibold mb-4">Colors</h3>
5252
<div class="flex flex-wrap">
@@ -76,64 +76,165 @@ <h3 class="text-lg text-grey-darker font-semibold mb-4">Sizes</h3>
7676
</div>
7777
<div class="bg-white py-8">
7878
<div class="container mx-auto px-8">
79-
<h2 class="mb-6">CSS Grid Utilities</h2>
80-
<div class="grid grid-columns-3 h-32 mb-4">
81-
<div class=""></div>
82-
<div class=""></div>
83-
<div class=""></div>
84-
</div>
85-
<div class="grid grid-columns-4 h-32 mb-4">
86-
<div class=""></div>
87-
<div class=""></div>
88-
<div class=""></div>
89-
<div class=""></div>
90-
</div>
91-
<div class="grid grid-columns-5 h-32 mb-4">
92-
<div class=""></div>
93-
<div class=""></div>
94-
<div class=""></div>
95-
<div class=""></div>
96-
<div class=""></div>
97-
</div>
98-
<div class="grid grid-columns-6 h-32 mb-4">
99-
<div class=""></div>
100-
<div class=""></div>
101-
<div class=""></div>
102-
<div class=""></div>
103-
<div class=""></div>
104-
<div class=""></div>
105-
</div>
106-
<div class="grid grid-columns-8 h-32 mb-4">
107-
<div class=""></div>
108-
<div class=""></div>
109-
<div class=""></div>
110-
<div class=""></div>
111-
<div class=""></div>
112-
<div class=""></div>
113-
<div class=""></div>
114-
<div class=""></div>
79+
<h2 class="text-2xl font-bold text-black mb-6">CSS Grid Utilities</h2>
80+
<div class="mb-8">
81+
<h3 class="text-xl font-bold text-black mb-6">Auto-column sizes</h3>
82+
<div class="mb-4">
83+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-2</code>
84+
<div class="grid grid-columns-2 h-16">
85+
<div class=""></div>
86+
<div class=""></div>
87+
</div>
88+
</div>
89+
<div class="mb-4">
90+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-3</code>
91+
<div class="grid grid-columns-3 h-16">
92+
<div class=""></div>
93+
<div class=""></div>
94+
<div class=""></div>
95+
</div>
96+
</div>
97+
<div class="mb-4">
98+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-4</code>
99+
<div class="grid grid-columns-4 h-16">
100+
<div class=""></div>
101+
<div class=""></div>
102+
<div class=""></div>
103+
<div class=""></div>
104+
</div>
105+
</div>
106+
<div class="mb-4">
107+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-5</code>
108+
<div class="grid grid-columns-5 h-16">
109+
<div class=""></div>
110+
<div class=""></div>
111+
<div class=""></div>
112+
<div class=""></div>
113+
<div class=""></div>
114+
</div>
115+
</div>
116+
<div class="mb-4">
117+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-6</code>
118+
<div class="grid grid-columns-6 h-16">
119+
<div class=""></div>
120+
<div class=""></div>
121+
<div class=""></div>
122+
<div class=""></div>
123+
<div class=""></div>
124+
<div class=""></div>
125+
</div>
126+
</div>
127+
<div class="mb-4">
128+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-8</code>
129+
<div class="grid grid-columns-8 h-16">
130+
<div class=""></div>
131+
<div class=""></div>
132+
<div class=""></div>
133+
<div class=""></div>
134+
<div class=""></div>
135+
<div class=""></div>
136+
<div class=""></div>
137+
<div class=""></div>
138+
</div>
139+
</div>
140+
<div class="mb-4">
141+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-10</code>
142+
<div class="grid grid-columns-10 h-16">
143+
<div class=""></div>
144+
<div class=""></div>
145+
<div class=""></div>
146+
<div class=""></div>
147+
<div class=""></div>
148+
<div class=""></div>
149+
<div class=""></div>
150+
<div class=""></div>
151+
<div class=""></div>
152+
<div class=""></div>
153+
</div>
154+
</div>
155+
<div class="mb-4">
156+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-12</code>
157+
<div class="grid grid-columns-12 h-16">
158+
<div class=""></div>
159+
<div class=""></div>
160+
<div class=""></div>
161+
<div class=""></div>
162+
<div class=""></div>
163+
<div class=""></div>
164+
<div class=""></div>
165+
<div class=""></div>
166+
<div class=""></div>
167+
<div class=""></div>
168+
<div class=""></div>
169+
<div class=""></div>
170+
</div>
171+
</div>
115172
</div>
116-
<div class="grid grid-columns-12 h-32 mb-4">
117-
<div class=""></div>
118-
<div class=""></div>
119-
<div class=""></div>
120-
<div class=""></div>
121-
<div class=""></div>
122-
<div class=""></div>
123-
<div class=""></div>
124-
<div class=""></div>
125-
<div class=""></div>
126-
<div class=""></div>
127-
<div class=""></div>
128-
<div class=""></div>
173+
<div class="mb-8">
174+
<h3 class="text-xl font-bold text-black mb-6">Spanning multiple columns</h3>
175+
<div class="mb-4">
176+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-12</code>
177+
<div class="grid grid-columns-12 h-16 mb-4">
178+
<div class="col-span-8 p-4">
179+
<code class="block text-grey-darker">.col-span-8</code>
180+
</div>
181+
<div class="col-span-4 p-4">
182+
<code class="block text-grey-darkest">.col-span-4</code>
183+
</div>
184+
</div>
185+
</div>
186+
<div class="mb-4">
187+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-5</code>
188+
<div class="grid grid-columns-5 h-16 mb-4">
189+
<div class="col-span-2 p-4">
190+
<code class="block text-grey-darker">.col-span-2</code>
191+
</div>
192+
<div class="col-span-3 p-4">
193+
<code class="block text-grey-darkest">.col-span-3</code>
194+
</div>
195+
</div>
196+
</div>
129197
</div>
130-
<div class="grid grid-columns-12 h-32 mb-4">
131-
<div class="col-span-8"></div>
132-
<div class="col-span-4"></div>
198+
<div class="mb-8">
199+
<h3 class="text-xl font-bold text-black mb-6">Explicit start and end points</h3>
200+
<div class="mb-4">
201+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-12</code>
202+
<div class="grid grid-columns-12 grid-dense h-16">
203+
<div class="col-start-1 col-end-4 p-4">
204+
<code class="block text-grey-darker">.col-start-1.col-end-4</code>
205+
</div>
206+
<div class="col-start-6 col-end-10 p-4">
207+
<code class="block text-grey-darker">.col-start-6.col-end-10</code>
208+
</div>
209+
</div>
210+
</div>
133211
</div>
134-
<div class="grid grid-columns-12 grid-dense h-32 mb-4">
135-
<div class="col-start-7 col-end-9"></div>
136-
<div class="col-start-1 col-end-4"></div>
212+
<div class="mb-8">
213+
<h3 class="text-xl font-bold text-black mb-6">Gutters</h3>
214+
<div class="mb-4">
215+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-3.grid-gap-0</code>
216+
<div class="grid grid-columns-3 grid-gap-0 h-16 mb-4">
217+
<div class=""></div>
218+
<div class=""></div>
219+
<div class=""></div>
220+
</div>
221+
</div>
222+
<div class="mb-4">
223+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-3.grid-gap-4</code>
224+
<div class="grid grid-columns-3 grid-gap-4 h-16 mb-4">
225+
<div class=""></div>
226+
<div class=""></div>
227+
<div class=""></div>
228+
</div>
229+
</div>
230+
<div class="mb-4">
231+
<code class="block mb-2 text-grey-dark">.grid.grid-columns-3.grid-gap-8</code>
232+
<div class="grid grid-columns-3 grid-gap-8 h-16 mb-4">
233+
<div class=""></div>
234+
<div class=""></div>
235+
<div class=""></div>
236+
</div>
237+
</div>
137238
</div>
138239
</div>
139240
</div>

0 commit comments

Comments
 (0)