Commit d494e71

authored

docs(gifs): 📝 add intro gif for tailwind snippets added (#41) (#42)

closes #41

1 parent bceaef2 commit d494e71Copy full SHA for d494e71

File tree

9 files changed

+39

-7

lines changed

README.md
docs/tailwind
media

9 files changed

+39

-7

lines changed

`‎README.md`

Lines changed: 19 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,10 @@ You can enable tab completion (recommended) by opening`
`43`	`43`	`- [Pseudo Styles](#pseudo-styles)`
`44`	`44`	`- [Breakpoints](#breakpoints)`
`45`	`45`	`- [Tailwind](#tailwind)`
	`46`	`+ - [Layout Snippets](#layout-snippets)`
	`47`	`+ - [FlexBox Snippets](#flexbox-snippets)`
	`48`	`+ - [Grid Snippets](#grid-snippets)`
	`49`	`+ - [Spacing Snippets](#spacing-snippets)`
`46`	`50`	`- [1 line layouts](#1-line-layouts)`
`47`	`51`	`- [Extra Guides](#extra-guides)`
`48`	`52`	`- [Snippets generation from Selected line/lines](#snippets-generation-from-selected-linelines)`
`@@ -91,10 +95,21 @@ You can enable tab completion (recommended) by opening`
`91`	`95`
`92`	`96`	`### [Tailwind](https://tailwindcss.com/)`
`93`	`97`
`94`		`-- [Layout Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/layout.md)`
`95`		`-- [FlexBox Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/flex.md)`
`96`		`-- [Grid Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/grid.md)`
`97`		`-- [Spacing Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/spacing.md)`
	`98`	`+#### [Layout Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/layout.md)`
	`99`	`+`
	`100`	`+![Layout Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-layout.gif)`
	`101`	`+`
	`102`	`+#### [FlexBox Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/flex.md)`
	`103`	`+`
	`104`	`+![FlexBox Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-flex.gif)`
	`105`	`+`
	`106`	`+#### [Grid Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/grid.md)`
	`107`	`+`
	`108`	`+![Grid Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-grid.gif)`
	`109`	`+`
	`110`	`+#### [Spacing Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/spacing.md)`
	`111`	`+`
	`112`	`+![Spacing Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-spacing.gif)`
`98`	`113`
`99`	`114`	`### [1 line layouts](https://1linelayouts.glitch.me/)`
`100`	`115`

`‎docs/tailwind/flex.md`

Lines changed: 5 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,9 @@`
`1`	`1`	`# [Tailwind](https://tailwindcss.com/) FlexBox`
`2`	`2`
	`3`	`+![FlexBox Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-flex.gif)`
	`4`	`+`
`3`	`5`	`- [Tailwind FlexBox](#tailwind-flexbox)`
	`6`	`+ - [Flex Direction](#flex-direction)`
`4`	`7`	`- [Flex Wrap](#flex-wrap)`
`5`	`8`	`- [Align Items](#align-items)`
`6`	`9`	`- [Align Content](#align-content)`
`@@ -10,7 +13,8 @@`
`10`	`13`	`- [Flex Grow](#flex-grow)`
`11`	`14`	`- [Flex Shrink](#flex-shrink)`
`12`	`15`	`- [Flex Order](#flex-order)`
`13`		`- [Flex Direction](https://tailwindcss.com/docs/flex-direction)`
	`16`	`+`
	`17`	`+## [Flex Direction](https://tailwindcss.com/docs/flex-direction)`
`14`	`18`
`15`	`19`	`\| Snippet \| Purpose \|`
`16`	`20`	`\| ------------------ \| ------------------------------- \|`

`‎docs/tailwind/grid.md`

Lines changed: 5 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,16 @@`
`1`	`1`	`# [Tailwind](https://tailwindcss.com/) Grid`
`2`	`2`
	`3`	`+![Grid Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-grid.gif)`
	`4`	`+`
`3`	`5`	`- [Tailwind Grid](#tailwind-grid)`
	`6`	`+ - [Grid Template Columns](#grid-template-columns)`
`4`	`7`	`- [Grid Column Start / End](#grid-column-start--end)`
`5`	`8`	`- [Grid Template Rows](#grid-template-rows)`
`6`	`9`	`- [Grid Row Start / End](#grid-row-start--end)`
`7`	`10`	`- [Gap](#gap)`
`8`	`11`	`- [Grid Auto Flow](#grid-auto-flow)`
`9`		`- [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns)`
	`12`	`+`
	`13`	`+## [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns)`
`10`	`14`
`11`	`15`	`\| Snippet \| Purpose \|`
`12`	`16`	`\| ---------------- \| -------------------------------------------------- \|`

`‎docs/tailwind/layout.md`

Lines changed: 5 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,9 @@`
`1`	`1`	`# [Tailwind](https://tailwindcss.com/) Layout`
`2`	`2`
	`3`	`+![Layout Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-layout.gif)`
	`4`	`+`
`3`	`5`	`- [Tailwind Layout](#tailwind-layout)`
	`6`	`+ - [Container](#container)`
`4`	`7`	`- [Box Sizing](#box-sizing)`
`5`	`8`	`- [Display](#display)`
`6`	`9`	`- [Float](#float)`
`@@ -14,6 +17,8 @@`
`14`	`17`	`- [Visibility](#visibility)`
`15`	`18`	`- [Z-Index](#z-index)`
`16`	`19`
	`20`	`+## [Container](https://tailwindcss.com/docs/container)`
	`21`	`+`
`17`	`22`	`\| Snippet \| Purpose \|`
`18`	`23`	`\| ----------- \| ------------------------------------------------------------------- \|`
`19`	`24`	\| `container` \| A component for fixing an element's width to the current breakpoint \|

`‎docs/tailwind/spacing.md`

Lines changed: 5 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,13 @@`
`1`	`1`	`# [Tailwind](https://tailwindcss.com/) Spacing`
`2`	`2`
	`3`	`+![Spacing Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-spacing.gif)`
	`4`	`+`
`3`	`5`	`- [Tailwind Spacing](#tailwind-spacing)`
	`6`	`+ - [Padding](#padding)`
`4`	`7`	`- [Margin](#margin)`
`5`	`8`	`- [Space Between](#space-between)`
`6`		`- [Padding](https://tailwindcss.com/docs/padding)`
	`9`	`+`
	`10`	`+## [Padding](https://tailwindcss.com/docs/padding)`
`7`	`11`
`8`	`12`	`\| Snippet \| Purpose \|`
`9`	`13`	`\| ------- \| ---------------------------------------------- \|`