diff --git a/README.md b/README.md index 79d8ad2..087184d 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,9 @@ ## Description -Collection of CSS Snippets to make your life easier by auto-completing css rules -based on popular CSS Library - [Tailwind](https://tailwindcss.com/) and +Collection of CSS Snippets to make your life easier by auto-completing +[common](#common) css rules, [Tailwind](https://tailwindcss.com/) utility +rules - [Tailwind](#tailwind-layout) and [1 line layouts](https://1linelayouts.glitch.me/) It's not debatable, most of us got used to utility classes from @@ -56,12 +57,13 @@ You can enable tab completion (recommended) by opening - [Top / Right / Bottom / Left](#top--right--bottom--left) - [Visibility](#visibility) - [Z-Index](#z-index) + - [1 line layouts](#1-line-layouts) + - [Extra Guides](#extra-guides) + - [Snippets generation from Selected line/lines](#snippets-generation-from-selected-linelines) - [Contributing](#contributing) ## Snippets -**[See how to utilize snippets marked with `selected` →](https://raw.githubusercontent.com/navin-moorthy/vscode-css-snippets/master/media/selected-guide.gif)** - ### Common #### CSS Reset @@ -87,20 +89,20 @@ You can enable tab completion (recommended) by opening #### [Breakpoints](https://tailwindcss.com/docs/breakpoints) -| Snippet | Purpose | -| ------------------ | ----------------------------------------------------------------------------------------- | -| `resp` | Get all tailwind breakpoints - 640px - 768px - 1024px - 1280px | -| `resp-sm` | Get tailwind breakpoint - sm - 640px | -| `resp-md` | Get tailwind breakpoint - md - 768px | -| `resp-lg` | Get tailwind breakpoint - lg - 1024px | -| `resp-xl` | Get tailwind breakpoint - xl - 1280px | -| `resp-selected` | Get all tailwind breakpoints for selected class/classes - 640px - 768px - 1024px - 1280px | -| `resp-sm-selected` | Get tailwind breakpoint for selected class/classes - sm - 640px | -| `resp-md-selected` | Get tailwind breakpoint for selected class/classes - md - 768px | -| `resp-lg-selected` | Get tailwind breakpoint for selected class/classes - lg - 1024px | -| `resp-xl-selected` | Get tailwind breakpoint for selected class/classes - xl - 1280px | - -### Tailwind Layout +| Snippet | Purpose | +| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | +| `resp` | Get all tailwind breakpoints - 640px - 768px - 1024px - 1280px | +| `resp-sm` | Get tailwind breakpoint - sm - 640px | +| `resp-md` | Get tailwind breakpoint - md - 768px | +| `resp-lg` | Get tailwind breakpoint - lg - 1024px | +| `resp-xl` | Get tailwind breakpoint - xl - 1280px | +| `resp-selected` | Get all tailwind breakpoints for selected class/classes - 640px - 768px - 1024px - 1280px [See how →](#snippets-generation-from-selected-linelines) | +| `resp-sm-selected` | Get tailwind breakpoint for selected class/classes - sm - 640px [See how →](#snippets-generation-from-selected-linelines) | +| `resp-md-selected` | Get tailwind breakpoint for selected class/classes - md - 768px [See how →](#snippets-generation-from-selected-linelines) | +| `resp-lg-selected` | Get tailwind breakpoint for selected class/classes - lg - 1024px [See how →](#snippets-generation-from-selected-linelines) | +| `resp-xl-selected` | Get tailwind breakpoint for selected class/classes - xl - 1280px [See how →](#snippets-generation-from-selected-linelines) | + +### [Tailwind](https://tailwindcss.com/) Layout #### [Container](https://tailwindcss.com/docs/container) @@ -256,6 +258,31 @@ You can enable tab completion (recommended) by opening | `z-50` | z-index: 50; | | `z-auto` | z-index: auto; | +### [1 line layouts](https://1linelayouts.glitch.me/) + +**[Learn 1linelayouts in detail from Web Dev →](https://web.dev/one-line-layouts/)** + +![1 line layout usage](media/1linelayouts.gif) + +| Snippet | Purpose | +| --------------------------- | ------------------------------------------------------------- | +| `super-centered` | place-items: center; | +| `deconstructed-pancake` | flex: 0 1 }; | +| `sidebar-says` | grid-template-columns: minmax(, ) ...}; | +| `pancake-stack` | grid-template-rows: auto 1fr auto; | +| `classic-holy-grail-layout` | grid-template: auto 1fr auto / auto 1fr auto; | +| `12-span-grid` | grid-template-columns: repeat(12, 1fr); | +| `ram` | grid-template-columns: repeat(auto-fit, minmax(, 1fr)); | +| `line-up` | justify-content: space-between; | +| `clamping-my-style` | clamp(, , ); | +| `respect-for-aspect` | aspect-ratio: / }; | + +## Extra Guides + +### Snippets generation from Selected line/lines + +![Guide on how to utilize selected lines in snippets](https://raw.githubusercontent.com/navin-moorthy/vscode-css-snippets/master/media/selected-guide.gif) + ## Contributing This is an Open Source Project with MIT License. diff --git a/media/1linelayouts.gif b/media/1linelayouts.gif new file mode 100644 index 0000000..5061d1d Binary files /dev/null and b/media/1linelayouts.gif differ diff --git a/package.json b/package.json index 6f8ab1c..d19ef54 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,10 @@ "language": "css", "path": "./snippets/tailwind/layout.json" }, + { + "language": "css", + "path": "./snippets/1linelayouts/snippets.json" + }, { "language": "css", "path": "./snippets/contributions/snippet.json" diff --git a/snippets/1linelayouts/snippets.json b/snippets/1linelayouts/snippets.json new file mode 100644 index 0000000..981782b --- /dev/null +++ b/snippets/1linelayouts/snippets.json @@ -0,0 +1,58 @@ +{ + "Super Centered": { + "prefix": "super-centered", + "body": ["place-items: center;", ""], + "description": "Super Centered" + }, + "The Deconstructed Pancake": { + "prefix": "deconstructed-pancake", + "body": ["flex: 0 1 ${1:baseWidth};", "${0}"], + "description": "The Deconstructed Pancake" + }, + "Sidebar Says": { + "prefix": "sidebar-says", + "body": [ + "grid-template-columns: minmax(${1:min}, ${2:max}) ${3:...};", + "${0}" + ], + "description": "Sidebar Says" + }, + "Pancake Stack": { + "prefix": "pancake-stack", + "body": ["grid-template-rows: auto 1fr auto;", ""], + "description": "Pancake Stack" + }, + "Classic Holy Grail Layout": { + "prefix": "classic-holy-grail-layout", + "body": ["grid-template: auto 1fr auto / auto 1fr auto;", ""], + "description": "Classic Holy Grail Layout" + }, + "12-Span Grid": { + "prefix": "12-span-grid", + "body": ["grid-template-columns: repeat(12, 1fr);", ""], + "description": "12-Span Grid" + }, + "RAM (Repeat, Auto, Minmax)": { + "prefix": "ram", + "body": [ + "grid-template-columns: repeat(auto-fit, minmax(${1:base}, 1fr));", + "${0}" + ], + "description": "RAM (Repeat, Auto, Minmax)" + }, + "Line Up": { + "prefix": "line-up", + "body": ["justify-content: space-between;", ""], + "description": "Line Up" + }, + "Clamping My Style": { + "prefix": "clamping-my-style", + "body": ["clamp(${1:min}, ${2:actual}, ${3:max});", "${0}"], + "description": "Clamping My Style" + }, + "Respect for Aspect": { + "prefix": "respect-for-aspect", + "body": ["aspect-ratio: ${1:width} / ${2:height};", "${0}"], + "description": "Respect for Aspect" + } +}