diff --git a/README.md b/README.md index 6faadca..78e735a 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,10 @@ You can enable tab completion (recommended) by opening - [Pseudo Styles](#pseudo-styles) - [Breakpoints](#breakpoints) - [Tailwind](#tailwind) + - [Layout Snippets](#layout-snippets) + - [FlexBox Snippets](#flexbox-snippets) + - [Grid Snippets](#grid-snippets) + - [Spacing Snippets](#spacing-snippets) - [1 line layouts](#1-line-layouts) - [Extra Guides](#extra-guides) - [Snippets generation from Selected line/lines](#snippets-generation-from-selected-linelines) @@ -91,10 +95,21 @@ You can enable tab completion (recommended) by opening ### [Tailwind](https://tailwindcss.com/) -- [Layout Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/layout.md) -- [FlexBox Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/flex.md) -- [Grid Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/grid.md) -- [Spacing Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/spacing.md) +#### [Layout Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/layout.md) + +![Layout Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-layout.gif) + +#### [FlexBox Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/flex.md) + +![FlexBox Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-flex.gif) + +#### [Grid Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/grid.md) + +![Grid Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-grid.gif) + +#### [Spacing Snippets](https://github.com/navin-moorthy/vscode-css-snippets/blob/master/docs/tailwind/spacing.md) + +![Spacing Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-spacing.gif) ### [1 line layouts](https://1linelayouts.glitch.me/) diff --git a/docs/tailwind/flex.md b/docs/tailwind/flex.md index 50319d8..46694a1 100644 --- a/docs/tailwind/flex.md +++ b/docs/tailwind/flex.md @@ -1,6 +1,9 @@ # [Tailwind](https://tailwindcss.com/) FlexBox +![FlexBox Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-flex.gif) + - [Tailwind FlexBox](#tailwind-flexbox) + - [Flex Direction](#flex-direction) - [Flex Wrap](#flex-wrap) - [Align Items](#align-items) - [Align Content](#align-content) @@ -10,7 +13,8 @@ - [Flex Grow](#flex-grow) - [Flex Shrink](#flex-shrink) - [Flex Order](#flex-order) - [Flex Direction](https://tailwindcss.com/docs/flex-direction) + +## [Flex Direction](https://tailwindcss.com/docs/flex-direction) | Snippet | Purpose | | ------------------ | ------------------------------- | diff --git a/docs/tailwind/grid.md b/docs/tailwind/grid.md index 5843d57..653aaa4 100644 --- a/docs/tailwind/grid.md +++ b/docs/tailwind/grid.md @@ -1,12 +1,16 @@ # [Tailwind](https://tailwindcss.com/) Grid +![Grid Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-grid.gif) + - [Tailwind Grid](#tailwind-grid) + - [Grid Template Columns](#grid-template-columns) - [Grid Column Start / End](#grid-column-start--end) - [Grid Template Rows](#grid-template-rows) - [Grid Row Start / End](#grid-row-start--end) - [Gap](#gap) - [Grid Auto Flow](#grid-auto-flow) - [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns) + +## [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns) | Snippet | Purpose | | ---------------- | -------------------------------------------------- | diff --git a/docs/tailwind/layout.md b/docs/tailwind/layout.md index fac417c..bc4200b 100644 --- a/docs/tailwind/layout.md +++ b/docs/tailwind/layout.md @@ -1,6 +1,9 @@ # [Tailwind](https://tailwindcss.com/) Layout +![Layout Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-layout.gif) + - [Tailwind Layout](#tailwind-layout) + - [Container](#container) - [Box Sizing](#box-sizing) - [Display](#display) - [Float](#float) @@ -14,6 +17,8 @@ - [Visibility](#visibility) - [Z-Index](#z-index) +## [Container](https://tailwindcss.com/docs/container) + | Snippet | Purpose | | ----------- | ------------------------------------------------------------------- | | `container` | A component for fixing an element's width to the current breakpoint | diff --git a/docs/tailwind/spacing.md b/docs/tailwind/spacing.md index 703b9e0..e4d27ec 100644 --- a/docs/tailwind/spacing.md +++ b/docs/tailwind/spacing.md @@ -1,9 +1,13 @@ # [Tailwind](https://tailwindcss.com/) Spacing +![Spacing Snippets Showcase](https://github.com/navin-moorthy/vscode-css-snippets/raw/master/media/tailwind-spacing.gif) + - [Tailwind Spacing](#tailwind-spacing) + - [Padding](#padding) - [Margin](#margin) - [Space Between](#space-between) - [Padding](https://tailwindcss.com/docs/padding) + +## [Padding](https://tailwindcss.com/docs/padding) | Snippet | Purpose | | ------- | ---------------------------------------------- | diff --git a/media/tailwind-flex.gif b/media/tailwind-flex.gif new file mode 100644 index 0000000..849580e Binary files /dev/null and b/media/tailwind-flex.gif differ diff --git a/media/tailwind-grid.gif b/media/tailwind-grid.gif new file mode 100644 index 0000000..cb39af7 Binary files /dev/null and b/media/tailwind-grid.gif differ diff --git a/media/tailwind-layout.gif b/media/tailwind-layout.gif new file mode 100644 index 0000000..ab2f0cc Binary files /dev/null and b/media/tailwind-layout.gif differ diff --git a/media/tailwind-spacing.gif b/media/tailwind-spacing.gif new file mode 100644 index 0000000..575c2ca Binary files /dev/null and b/media/tailwind-spacing.gif differ