Skip to content

Commit bc2bd84

Browse files
navin-moorthynavin-moorthy
authored
feat(snippets): ✨ add tailwind grid snippets (#30)
closes #29
1 parent 0fdf128 commit bc2bd84

File tree

4 files changed

+920
-33
lines changed

4 files changed

+920
-33
lines changed

‎CHANGELOG.md

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
1111
* **snippets:** ✨ add tailwind flexbox utilities ([#27](https://github.com/navin-moorthy/vscode-css-snippets/issues/27)) ([bbef38b](https://github.com/navin-moorthy/vscode-css-snippets/commit/bbef38bb89e589732b590ddf5adcf80910030afa)), closes [#26](https://github.com/navin-moorthy/vscode-css-snippets/issues/26) [#28](https://github.com/navin-moorthy/vscode-css-snippets/issues/28)
1212

1313

14-
### ♻️ Chores
15-
16-
* **changelog:** ✏️ fix double generated changelog ([abe2a15](https://github.com/navin-moorthy/vscode-css-snippets/commit/abe2a158ee35ad3a2b1eab3e635734a29d1e95ce))
17-
18-
19-
20-
21-
22-
# [0.3.0](https://github.com/navin-moorthy/vscode-css-snippets/compare/v0.2.1...v0.3.0) (2020-07-21)
23-
24-
25-
### ✨ Features
26-
27-
* **snippets:** ✨ add tailwind flexbox utilities ([#27](https://github.com/navin-moorthy/vscode-css-snippets/issues/27)) ([bbef38b](https://github.com/navin-moorthy/vscode-css-snippets/commit/bbef38bb89e589732b590ddf5adcf80910030afa)), closes [#26](https://github.com/navin-moorthy/vscode-css-snippets/issues/26) [#28](https://github.com/navin-moorthy/vscode-css-snippets/issues/28)
28-
29-
30-
### ♻️ Chores
31-
32-
* **changelog:** ✏️ fix double generated changelog ([abe2a15](https://github.com/navin-moorthy/vscode-css-snippets/commit/abe2a158ee35ad3a2b1eab3e635734a29d1e95ce))
33-
34-
3514

3615

3716

@@ -43,11 +22,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
4322
* **readme:** ✏️ fix emoji and local navigation ([a6b5a0d](https://github.com/navin-moorthy/vscode-css-snippets/commit/a6b5a0db87f0cc58f1a263417481a36f08c1bdd1))
4423

4524

46-
### ♻️ Chores
47-
48-
* **changelog:** ✏️ fix double generated changelog ([e69de86](https://github.com/navin-moorthy/vscode-css-snippets/commit/e69de863cc2400c4ff6edf40369995d18e28e3cd))
49-
50-
5125

5226

5327

@@ -66,11 +40,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
6640
* **readme:** 📝 add attributions with links ([#25](https://github.com/navin-moorthy/vscode-css-snippets/issues/25)) ([ffe0c1e](https://github.com/navin-moorthy/vscode-css-snippets/commit/ffe0c1edd1b3d8a7c2202aae1fe584fff3ec96c6)), closes [#24](https://github.com/navin-moorthy/vscode-css-snippets/issues/24)
6741

6842

69-
### ♻️ Chores
70-
71-
* **changelog:** ✏️ remove double generated changelog ([a9d3f87](https://github.com/navin-moorthy/vscode-css-snippets/commit/a9d3f87e7b2c53d571df0613245bd578218436d5))
72-
73-
7443

7544

7645

@@ -84,7 +53,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
8453

8554
### ♻️ Chores
8655

87-
* **changelog:** ✏️ fix changelog generated ([6781919](https://github.com/navin-moorthy/vscode-css-snippets/commit/6781919b97827c6ce7c3c5d0ea66735c5a8bfa6f))
8856
* **logo:** 🔧 move logo out of media to support vsce publish ([0567f1b](https://github.com/navin-moorthy/vscode-css-snippets/commit/0567f1b600ef78c7e05b56fa616940462641eb61))
8957
* **typo:** ✏️ issue url typo ([e70a650](https://github.com/navin-moorthy/vscode-css-snippets/commit/e70a650a8b9c4188369eb020dfe4f0111df5d867))
9058

@@ -134,7 +102,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
134102
* **logo:** 🔧 add logo to package ([#2](https://github.com/navin-moorthy/vscode-css-snippets/issues/2)) ([96fa2b8](https://github.com/navin-moorthy/vscode-css-snippets/commit/96fa2b822f7c41f2a43e25064347b93821887a90)), closes [#1](https://github.com/navin-moorthy/vscode-css-snippets/issues/1)
135103
* **prettier:** 🔧 add changelog to prettier ignore ([1dace05](https://github.com/navin-moorthy/vscode-css-snippets/commit/1dace0561311acc14a482556408eb7b7cfe042d1))
136104
* **preview:** 🔧 add preview flag to the extension ([#6](https://github.com/navin-moorthy/vscode-css-snippets/issues/6)) ([1b06c4e](https://github.com/navin-moorthy/vscode-css-snippets/commit/1b06c4e39b9159701551ed16766651d579a225c3)), closes [#5](https://github.com/navin-moorthy/vscode-css-snippets/issues/5)
137-
* **release:** publish v0.0.1 ([58bb339](https://github.com/navin-moorthy/vscode-css-snippets/commit/58bb33901f270a902b15403bc6889178c563fae6))
138105
* **theme:** 🔧 add gallery theme and color ([#4](https://github.com/navin-moorthy/vscode-css-snippets/issues/4)) ([d55bb21](https://github.com/navin-moorthy/vscode-css-snippets/commit/d55bb2129b99af8190d9044fdbd05502a6271ec7))
139106

140107

‎README.md

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,13 @@ You can enable tab completion (recommended) by opening
6767
- [Flex Grow](#flex-grow)
6868
- [Flex Shrink](#flex-shrink)
6969
- [Flex Order](#flex-order)
70+
- [Tailwind Grid](#tailwind-grid)
71+
- [Grid Template Columns](#grid-template-columns)
72+
- [Grid Column Start / End](#grid-column-start--end)
73+
- [Grid Template Rows](#grid-template-rows)
74+
- [Grid Row Start / End](#grid-row-start--end)
75+
- [Gap](#gap)
76+
- [Grid Auto Flow](#grid-auto-flow)
7077
- [1 line layouts](#1-line-layouts)
7178
- [Extra Guides](#extra-guides)
7279
- [Snippets generation from Selected line/lines](#snippets-generation-from-selected-linelines)
@@ -371,6 +378,183 @@ You can enable tab completion (recommended) by opening
371378
| `order-11` | order: 11; |
372379
| `order-12` | order: 12; |
373380

381+
### [Tailwind](https://tailwindcss.com/) Grid
382+
383+
#### [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns)
384+
385+
| Snippet | Purpose |
386+
| ---------------- | -------------------------------------------------- |
387+
| `grid-cols-1` | grid-template-columns: repeat(1, minmax(0, 1fr)); |
388+
| `grid-cols-2` | grid-template-columns: repeat(2, minmax(0, 1fr)); |
389+
| `grid-cols-3` | grid-template-columns: repeat(3, minmax(0, 1fr)); |
390+
| `grid-cols-4` | grid-template-columns: repeat(4, minmax(0, 1fr)); |
391+
| `grid-cols-5` | grid-template-columns: repeat(5, minmax(0, 1fr)); |
392+
| `grid-cols-6` | grid-template-columns: repeat(6, minmax(0, 1fr)); |
393+
| `grid-cols-7` | grid-template-columns: repeat(7, minmax(0, 1fr)); |
394+
| `grid-cols-8` | grid-template-columns: repeat(8, minmax(0, 1fr)); |
395+
| `grid-cols-9` | grid-template-columns: repeat(9, minmax(0, 1fr)); |
396+
| `grid-cols-10` | grid-template-columns: repeat(10, minmax(0, 1fr)); |
397+
| `grid-cols-11` | grid-template-columns: repeat(11, minmax(0, 1fr)); |
398+
| `grid-cols-12` | grid-template-columns: repeat(12, minmax(0, 1fr)); |
399+
| `grid-cols-none` | grid-template-columns: none; |
400+
401+
#### [Grid Column Start / End](https://tailwindcss.com/docs/grid-column)
402+
403+
| Snippet | Purpose |
404+
| ---------------- | ------------------------------- |
405+
| `col-auto` | grid-column: auto; |
406+
| `col-span-1` | grid-column: span 1 / span 1; |
407+
| `col-span-2` | grid-column: span 2 / span 2; |
408+
| `col-span-3` | grid-column: span 3 / span 3; |
409+
| `col-span-4` | grid-column: span 4 / span 4; |
410+
| `col-span-5` | grid-column: span 5 / span 5; |
411+
| `col-span-6` | grid-column: span 6 / span 6; |
412+
| `col-span-7` | grid-column: span 7 / span 7; |
413+
| `col-span-8` | grid-column: span 8 / span 8; |
414+
| `col-span-9` | grid-column: span 9 / span 9; |
415+
| `col-span-10` | grid-column: span 10 / span 10; |
416+
| `col-span-11` | grid-column: span 11 / span 11; |
417+
| `col-span-12` | grid-column: span 12 / span 12; |
418+
| `col-start-1` | grid-column-start: 1; |
419+
| `col-start-2` | grid-column-start: 2; |
420+
| `col-start-3` | grid-column-start: 3; |
421+
| `col-start-4` | grid-column-start: 4; |
422+
| `col-start-5` | grid-column-start: 5; |
423+
| `col-start-6` | grid-column-start: 6; |
424+
| `col-start-7` | grid-column-start: 7; |
425+
| `col-start-8` | grid-column-start: 8; |
426+
| `col-start-9` | grid-column-start: 9; |
427+
| `col-start-10` | grid-column-start: 10; |
428+
| `col-start-11` | grid-column-start: 11; |
429+
| `col-start-12` | grid-column-start: 12; |
430+
| `col-start-13` | grid-column-start: 13; |
431+
| `col-start-auto` | grid-column-start: auto; |
432+
| `col-end-1` | grid-column-end: 1; |
433+
| `col-end-2` | grid-column-end: 2; |
434+
| `col-end-3` | grid-column-end: 3; |
435+
| `col-end-4` | grid-column-end: 4; |
436+
| `col-end-5` | grid-column-end: 5; |
437+
| `col-end-6` | grid-column-end: 6; |
438+
| `col-end-7` | grid-column-end: 7; |
439+
| `col-end-8` | grid-column-end: 8; |
440+
| `col-end-9` | grid-column-end: 9; |
441+
| `col-end-10` | grid-column-end: 10; |
442+
| `col-end-11` | grid-column-end: 11; |
443+
| `col-end-12` | grid-column-end: 12; |
444+
| `col-end-13` | grid-column-end: 13; |
445+
| `col-end-auto` | grid-column-end: auto; |
446+
447+
#### [Grid Template Rows](https://tailwindcss.com/docs/grid-template-rows)
448+
449+
| Snippet | Purpose |
450+
| ---------------- | ---------------------------------------------- |
451+
| `grid-rows-1` | grid-template-rows: repeat(1, minmax(0, 1fr)); |
452+
| `grid-rows-2` | grid-template-rows: repeat(2, minmax(0, 1fr)); |
453+
| `grid-rows-3` | grid-template-rows: repeat(3, minmax(0, 1fr)); |
454+
| `grid-rows-4` | grid-template-rows: repeat(4, minmax(0, 1fr)); |
455+
| `grid-rows-5` | grid-template-rows: repeat(5, minmax(0, 1fr)); |
456+
| `grid-rows-6` | grid-template-rows: repeat(6, minmax(0, 1fr)); |
457+
| `grid-rows-none` | grid-template-rows: none; |
458+
459+
#### [Grid Row Start / End](https://tailwindcss.com/docs/grid-row)
460+
461+
| Snippet | Purpose |
462+
| ---------------- | -------------------------- |
463+
| `row-auto` | grid-row: auto; |
464+
| `row-span-1` | grid-row: span 1 / span 1; |
465+
| `row-span-2` | grid-row: span 2 / span 2; |
466+
| `row-span-3` | grid-row: span 3 / span 3; |
467+
| `row-span-4` | grid-row: span 4 / span 4; |
468+
| `row-span-5` | grid-row: span 5 / span 5; |
469+
| `row-span-6` | grid-row: span 6 / span 6; |
470+
| `row-start-1` | grid-row-start: 1; |
471+
| `row-start-2` | grid-row-start: 2; |
472+
| `row-start-3` | grid-row-start: 3; |
473+
| `row-start-4` | grid-row-start: 4; |
474+
| `row-start-5` | grid-row-start: 5; |
475+
| `row-start-6` | grid-row-start: 6; |
476+
| `row-start-7` | grid-row-start: 7; |
477+
| `row-start-auto` | grid-row-start: auto; |
478+
| `row-end-1` | grid-row-end: 1; |
479+
| `row-end-2` | grid-row-end: 2; |
480+
| `row-end-3` | grid-row-end: 3; |
481+
| `row-end-4` | grid-row-end: 4; |
482+
| `row-end-5` | grid-row-end: 5; |
483+
| `row-end-6` | grid-row-end: 6; |
484+
| `row-end-7` | grid-row-end: 7; |
485+
| `row-end-auto` | grid-row-end: auto; |
486+
487+
#### [Gap](https://tailwindcss.com/docs/gap)
488+
489+
| Snippet | Purpose |
490+
| ------------ | -------------------- |
491+
| `gap-0` | gap: 0; |
492+
| `gap-1` | gap: 0.25rem; |
493+
| `gap-2` | gap: 0.5rem; |
494+
| `gap-3` | gap: 0.75rem; |
495+
| `gap-4` | gap: 1rem; |
496+
| `gap-5` | gap: 1.25rem; |
497+
| `gap-6` | gap: 1.5rem; |
498+
| `gap-8` | gap: 2rem; |
499+
| `gap-10` | gap: 2.5rem; |
500+
| `gap-12` | gap: 3rem; |
501+
| `gap-16` | gap: 4rem; |
502+
| `gap-20` | gap: 5rem; |
503+
| `gap-24` | gap: 6rem; |
504+
| `gap-32` | gap: 8rem; |
505+
| `gap-40` | gap: 10rem; |
506+
| `gap-48` | gap: 12rem; |
507+
| `gap-56` | gap: 14rem; |
508+
| `gap-64` | gap: 16rem; |
509+
| `gap-px` | gap: 1px; |
510+
| `row-gap-0` | row-gap: 0; |
511+
| `row-gap-1` | row-gap: 0.25rem; |
512+
| `row-gap-2` | row-gap: 0.5rem; |
513+
| `row-gap-3` | row-gap: 0.75rem; |
514+
| `row-gap-4` | row-gap: 1rem; |
515+
| `row-gap-5` | row-gap: 1.25rem; |
516+
| `row-gap-6` | row-gap: 1.5rem; |
517+
| `row-gap-8` | row-gap: 2rem; |
518+
| `row-gap-10` | row-gap: 2.5rem; |
519+
| `row-gap-12` | row-gap: 3rem; |
520+
| `row-gap-16` | row-gap: 4rem; |
521+
| `row-gap-20` | row-gap: 5rem; |
522+
| `row-gap-24` | row-gap: 6rem; |
523+
| `row-gap-32` | row-gap: 8rem; |
524+
| `row-gap-40` | row-gap: 10rem; |
525+
| `row-gap-48` | row-gap: 12rem; |
526+
| `row-gap-56` | row-gap: 14rem; |
527+
| `row-gap-64` | row-gap: 16rem; |
528+
| `row-gap-px` | row-gap: 1px; |
529+
| `col-gap-0` | column-gap: 0; |
530+
| `col-gap-1` | column-gap: 0.25rem; |
531+
| `col-gap-2` | column-gap: 0.5rem; |
532+
| `col-gap-3` | column-gap: 0.75rem; |
533+
| `col-gap-4` | column-gap: 1rem; |
534+
| `col-gap-5` | column-gap: 1.25rem; |
535+
| `col-gap-6` | column-gap: 1.5rem; |
536+
| `col-gap-8` | column-gap: 2rem; |
537+
| `col-gap-10` | column-gap: 2.5rem; |
538+
| `col-gap-12` | column-gap: 3rem; |
539+
| `col-gap-16` | column-gap: 4rem; |
540+
| `col-gap-20` | column-gap: 5rem; |
541+
| `col-gap-24` | column-gap: 6rem; |
542+
| `col-gap-32` | column-gap: 8rem; |
543+
| `col-gap-40` | column-gap: 10rem; |
544+
| `col-gap-48` | column-gap: 12rem; |
545+
| `col-gap-56` | column-gap: 14rem; |
546+
| `col-gap-64` | column-gap: 16rem; |
547+
| `col-gap-px` | column-gap: 1px; |
548+
549+
#### [Grid Auto Flow](https://tailwindcss.com/docs/grid-auto-flow)
550+
551+
| Snippet | Purpose |
552+
| --------------------- | ----------------------------- |
553+
| `grid-flow-row` | grid-auto-flow: row; |
554+
| `grid-flow-col` | grid-auto-flow: column; |
555+
| `grid-flow-row-dense` | grid-auto-flow: row dense; |
556+
| `grid-flow-col-dense` | grid-auto-flow: column dense; |
557+
374558
### [1 line layouts](https://1linelayouts.glitch.me/)
375559

376560
**[Learn 1linelayouts in detail from Web Dev →](https://web.dev/one-line-layouts/)**

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@
4747
"language": "css",
4848
"path": "./snippets/tailwind/flexbox.json"
4949
},
50+
{
51+
"language": "css",
52+
"path": "./snippets/tailwind/grid.json"
53+
},
5054
{
5155
"language": "css",
5256
"path": "./snippets/1linelayouts/snippets.json"

0 commit comments

Comments
 (0)