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

Commit d39cba2

Browse files
committed
Sort + add more links
1 parent 6c79e9b commit d39cba2

File tree

2 files changed

+60
-48
lines changed

2 files changed

+60
-48
lines changed

README.md

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -45,51 +45,6 @@ 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-
9348
## Simple Buttons
9449

9550
[View the source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/simple-buttons/index.js)
@@ -184,3 +139,48 @@ module.exports = {
184139
```
185140

186141
Again, the sky is the limit in terms of the API a plugin exposes for configuration. You can do anything you want!
142+
143+
## CSS Grid Utilities
144+
145+
[View the source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js)
146+
147+
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).
148+
149+
![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png)
150+
151+
It exposes three configuration options:
152+
153+
- `grids`, for specifying all of the grid sizes you'd like to generate
154+
- `gaps`, for specifying the gap sizes you'd like to generate
155+
- `variants`, for specifying which variants to generate
156+
157+
```js
158+
module.exports = {
159+
// ...
160+
161+
plugins: [
162+
// ...
163+
require('./plugins/css-grid')({
164+
grids: [2, 3, 5, 6, 8, 10, 12],
165+
gaps: {
166+
0: '0',
167+
4: '1rem',
168+
8: '2rem',
169+
},
170+
variants: ['responsive'],
171+
}),
172+
],
173+
}
174+
```
175+
176+
With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility.
177+
178+
The plugin generates the following sets of classes:
179+
180+
- `.grid`, for setting `display: grid` on an element
181+
- `.grid-columns-{size}`, for specifying the number of columns in the grid
182+
- `.grid-gap-{size}`, for specifying the size of the gap between columns/rows
183+
- `.col-span-{columns}`, for specifying how wide a column should be
184+
- `.col-start-{line}` and `.col-end-{line}`, for specifying a column's start and end points explicitly (useful for reordering columns or leaving gaps)
185+
186+
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.

index.html

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
<div class="bg-white py-8">
1111
<div class="container mx-auto px-8">
1212
<h2 class="text-2xl font-bold text-black mb-2">Object-Fit Utilities</h2>
13-
<p class="mb-6"><a href="https://github.com/tailwindcss/plugin-examples/blob/master/plugins/object-fit/index.js" class="text-sm text-blue no-underline hover:underline">View plugin source</a></p>
13+
<p class="mb-6">
14+
<a href="https://github.com/tailwindcss/plugin-examples#object-fit-utilities" class="text-sm text-blue no-underline hover:underline">Learn more</a>
15+
<span class="mx-1">&middot;</span>
16+
<a href="https://github.com/tailwindcss/plugin-examples/blob/master/plugins/object-fit/index.js" class="text-sm text-blue no-underline hover:underline">View plugin source</a>
17+
</p>
1418

1519
<div class="flex flex-wrap -mx-4 -mb-4">
1620
<div class="px-4 mb-4">
@@ -49,7 +53,11 @@ <h2 class="text-2xl font-bold text-black mb-2">Object-Fit Utilities</h2>
4953
<div class="bg-grey-lighter py-8">
5054
<div class="container mx-auto px-8">
5155
<h2 class="text-2xl font-bold text-black mb-2">Simple Buttons</h2>
52-
<p class="mb-6"><a href="https://github.com/tailwindcss/plugin-examples/blob/master/plugins/simple-buttons/index.js" class="text-sm text-blue no-underline hover:underline">View plugin source</a></p>
56+
<p class="mb-6">
57+
<a href="https://github.com/tailwindcss/plugin-examples#simple-buttons" class="text-sm text-blue no-underline hover:underline">Learn more</a>
58+
<span class="mx-1">&middot;</span>
59+
<a href="https://github.com/tailwindcss/plugin-examples/blob/master/plugins/simple-buttons/index.js" class="text-sm text-blue no-underline hover:underline">View plugin source</a>
60+
</p>
5361
<div class="mb-6">
5462
<h3 class="text-lg text-grey-darker font-semibold mb-4">Colors</h3>
5563
<div class="flex flex-wrap">
@@ -80,7 +88,11 @@ <h3 class="text-lg text-grey-darker font-semibold mb-4">Sizes</h3>
8088
<div class="bg-white py-8">
8189
<div class="container mx-auto px-8">
8290
<h2 class="text-2xl font-bold text-black mb-2">CSS Grid Utilities</h2>
83-
<p class="mb-6"><a href="https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js" class="text-sm text-blue no-underline hover:underline">View plugin source</a></p>
91+
<p class="mb-6">
92+
<a href="https://github.com/tailwindcss/plugin-examples#css-grid-utilities" class="text-sm text-blue no-underline hover:underline">Learn more</a>
93+
<span class="mx-1">&middot;</span>
94+
<a href="https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js" class="text-sm text-blue no-underline hover:underline">View plugin source</a>
95+
</p>
8496
<div class="mb-8">
8597
<h3 class="text-xl font-bold text-black mb-6">Auto-column sizes</h3>
8698
<div class="mb-4">

0 commit comments

Comments
 (0)