Skip to content

Commit

Permalink
feat(snippets): ✨ add 1linelayouts to the snippets list (#19)
Browse files Browse the repository at this point in the history
closes #18
  • Loading branch information
navin-moorthy committed Jul 20, 2020
1 parent a9d3f87 commit 1bacd02
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 18 deletions.
63 changes: 45 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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)

Expand Down Expand Up @@ -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 <baseWidth>}; |
| `sidebar-says` | grid-template-columns: minmax(<min>, <max>) ...}; |
| `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(<base>, 1fr)); |
| `line-up` | justify-content: space-between; |
| `clamping-my-style` | clamp(<min>, <actual>, <max>); |
| `respect-for-aspect` | aspect-ratio: <width> / <height>}; |

## 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.
Expand Down
Binary file added media/1linelayouts.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
58 changes: 58 additions & 0 deletions snippets/1linelayouts/snippets.json
Original file line number Diff line number Diff line change
@@ -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"
}
}

0 comments on commit 1bacd02

Please sign in to comment.