Skip to content

Commit 4f3e1a5

Browse files
navin-moorthynavin-moorthy
authored
feat(docs): 📝 finish readme with snippets categorised (#8)
closed #7
1 parent 1b06c4e commit 4f3e1a5

File tree

9 files changed

+951
-628
lines changed

9 files changed

+951
-628
lines changed

‎README.md

Lines changed: 261 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,263 @@
11
# VSCode CSS Snippets
22

3-
CSS Snippets for fast prototyping
3+
![Cover](media/cover.jpg)
4+
5+
## Description
6+
7+
Collection of CSS Snippets to make your life easier by auto-completing your
8+
desired styles based on popular CSS Library -
9+
[Tailwind](https://tailwindcss.com/) and
10+
[1 line layouts](https://1linelayouts.glitch.me/)
11+
12+
It's not debatable, most of us got used to utility classes from
13+
[Tailwind](https://tailwindcss.com/), [BootStrap](https://getbootstrap.com/)
14+
etc,. But when you come back to write plain CSS, wouldn't be great to have those
15+
utility classes converted as snippets instead of typing the CSS rules?
16+
17+
Apart from CSS Utility snippets, collection of snippets from popular CSS
18+
examples found all over the web can be found.
19+
20+
To see the list of all the CSS Snippets, go [here →](#snippets)
21+
22+
Want to have your own favourite CSS Snippets in this extension, see
23+
[Contributing →](#contributing)
24+
25+
![Tailwind Layout snippets Showcase](media/vscode-css-snippets.gif)
26+
27+
## Installation
28+
29+
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=navin-moorthy.vscode-css-snippets)**
30+
31+
You can enable tab completion (recommended) by opening
32+
`Code > Preferences > Settings` (on a Mac) and applying
33+
`"editor.tabCompletion": "onlySnippets"` to your personal settings
34+
35+
## Table of Contents
36+
37+
- [VSCode CSS Snippets](#vscode-css-snippets)
38+
- [Description](#description)
39+
- [Installation](#installation)
40+
- [Table of Contents](#table-of-contents)
41+
- [Snippets](#snippets)
42+
- [Common](#common)
43+
- [CSS Reset](#css-reset)
44+
- [Pseudo Styles](#pseudo-styles)
45+
- [Breakpoints](#breakpoints)
46+
- [Tailwind Layout](#tailwind-layout)
47+
- [Container](#container)
48+
- [Box Sizing](#box-sizing)
49+
- [Display](#display)
50+
- [Float](#float)
51+
- [Clear](#clear)
52+
- [Clear](#clear-1)
53+
- [Object Fit](#object-fit)
54+
- [Object Position](#object-position)
55+
- [Overflow](#overflow)
56+
- [Position](#position)
57+
- [Top / Right / Bottom / Left](#top--right--bottom--left)
58+
- [Visibility](#visibility)
59+
- [Z-Index](#z-index)
60+
- [Contributing](#contributing)
61+
62+
## Snippets
63+
64+
### Common
65+
66+
#### CSS Reset
67+
68+
| Snippet | Purpose |
69+
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
70+
| `css-reset` | An opinionated set of base styles Cloned from [Tailwind Preflight](https://tailwindcss.com/docs/preflight) - [Original File](https://unpkg.com/tailwindcss@1.5.1/dist/tailwind.css) |
71+
72+
#### Pseudo Styles
73+
74+
| Snippet | Purpose |
75+
| ----------- | --------------- |
76+
| `hover` | :hover |
77+
| `focus` | :focus |
78+
| `active` | :active |
79+
| `disabled` | :disabled |
80+
| `visited` | :visited |
81+
| `first` | :first-child |
82+
| `last` | :last-child |
83+
| `even` | :nth-child(2n) |
84+
| `odd` | :nth-child(odd) |
85+
| `nth-child` | :nth-child() |
86+
87+
#### [Breakpoints](https://tailwindcss.com/docs/breakpoints)
88+
89+
| Snippet | Purpose |
90+
| ------------------ | ----------------------------------------------------------------------------------------- |
91+
| `resp` | Get all tailwind breakpoints - 640px - 768px - 1024px - 1280px |
92+
| `resp-sm` | Get tailwind breakpoint - sm - 640px |
93+
| `resp-md` | Get tailwind breakpoint - md - 768px |
94+
| `resp-lg` | Get tailwind breakpoint - lg - 1024px |
95+
| `resp-xl` | Get tailwind breakpoint - xl - 1280px |
96+
| `resp-selected` | Get all tailwind breakpoints for selected class/classes - 640px - 768px - 1024px - 1280px |
97+
| `resp-sm-selected` | Get tailwind breakpoint for selected class/classes - sm - 640px |
98+
| `resp-md-selected` | Get tailwind breakpoint for selected class/classes - md - 768px |
99+
| `resp-lg-selected` | Get tailwind breakpoint for selected class/classes - lg - 1024px |
100+
| `resp-xl-selected` | Get tailwind breakpoint for selected class/classes - xl - 1280px |
101+
102+
### Tailwind Layout
103+
104+
#### [Container](https://tailwindcss.com/docs/container)
105+
106+
| Snippet | Purpose |
107+
| ----------- | ------------------------------------------------------------------- |
108+
| `container` | A component for fixing an element's width to the current breakpoint |
109+
110+
#### [Box Sizing](https://tailwindcss.com/docs/box-sizing)
111+
112+
| Snippet | Purpose |
113+
| ------------- | ------------------------ |
114+
| `box-border` | box-sizing: border-box; |
115+
| `box-content` | box-sizing: content-box; |
116+
117+
#### [Display](https://tailwindcss.com/docs/display)
118+
119+
| Snippet | Purpose |
120+
| -------------------- | ---------------------------- |
121+
| `hidden` | display: none; |
122+
| `block` | display: block; |
123+
| `flow-root` | display: flow-root; |
124+
| `inline-block` | display: inline-block; |
125+
| `inline` | display: inline; |
126+
| `flex` | display: flex; |
127+
| `inline-flex` | display: inline-flex; |
128+
| `grid` | display: grid; |
129+
| `inline-grid` | display: inline-grid; |
130+
| `table` | display: table; |
131+
| `table-caption` | display: table-caption; |
132+
| `table-cell` | display: table-cell; |
133+
| `table-column` | display: table-column; |
134+
| `table-column-group` | display: table-column-group; |
135+
| `table-footer-group` | display: table-footer-group; |
136+
| `table-header-group` | display: table-header-group; |
137+
| `table-row-group` | display: table-row-group; |
138+
| `table-row` | display: table-row; |
139+
140+
#### [Float](https://tailwindcss.com/docs/float)
141+
142+
| Snippet | Purpose |
143+
| ------------- | ------------------------------------------------------ |
144+
| `float-right` | float: right; |
145+
| `float-left` | float: left; |
146+
| `float-none` | float: none; |
147+
| `clearfix` | &::after { content: "": display: table; clear: both; } |
148+
149+
#### [Clear](https://tailwindcss.com/docs/clear)
150+
151+
| Snippet | Purpose |
152+
| ------------- | ------------- |
153+
| `clear-left` | clear: left; |
154+
| `clear-right` | clear: right; |
155+
| `clear-both` | clear: both; |
156+
| `clear-none` | clear: none; |
157+
158+
#### [Clear](https://tailwindcss.com/docs/clear)
159+
160+
| Snippet | Purpose |
161+
| ------------- | ------------- |
162+
| `clear-left` | clear: left; |
163+
| `clear-right` | clear: right; |
164+
| `clear-both` | clear: both; |
165+
| `clear-none` | clear: none; |
166+
167+
#### [Object Fit](https://tailwindcss.com/docs/object-fit)
168+
169+
| Snippet | Purpose |
170+
| ------------------- | ----------------------- |
171+
| `object-contain` | object-fit: contain; |
172+
| `object-cover` | object-fit: cover; |
173+
| `object-fill` | object-fit: fill; |
174+
| `object-none` | object-fit: none; |
175+
| `object-scale-down` | object-fit: scale-down; |
176+
177+
#### [Object Position](https://tailwindcss.com/docs/object-position)
178+
179+
| Snippet | Purpose |
180+
| --------------------- | ------------------------------ |
181+
| `object-bottom` | object-position: bottom; |
182+
| `object-center` | object-position: center; |
183+
| `object-left` | object-position: left; |
184+
| `object-left-bottom` | object-position: left bottom; |
185+
| `object-left-top` | object-position: left top; |
186+
| `object-right` | object-position: right; |
187+
| `object-right-bottom` | object-position: right bottom; |
188+
| `object-right-top` | object-position: right top; |
189+
| `object-top` | object-position: top; |
190+
191+
#### [Overflow](https://tailwindcss.com/docs/overflow)
192+
193+
| Snippet | Purpose |
194+
| -------------------- | ---------------------------------- |
195+
| `overflow-auto` | overflow: auto; |
196+
| `overflow-hidden` | overflow: hidden; |
197+
| `overflow-visible` | overflow: visible; |
198+
| `overflow-scroll` | overflow: scroll; |
199+
| `overflow-x-auto` | overflow-x: auto; |
200+
| `overflow-y-auto` | overflow-y: auto; |
201+
| `overflow-x-hidden` | overflow-x: hidden; |
202+
| `overflow-y-hidden` | overflow-y: hidden; |
203+
| `overflow-x-visible` | overflow-x: visible; |
204+
| `overflow-y-visibl` | overflow-y: visible; |
205+
| `overflow-x-scroll` | overflow-x: scroll; |
206+
| `overflow-y-scroll` | overflow-y: scroll; |
207+
| `scrolling-touch` | -webkit-overflow-scrolling: touch; |
208+
| `scrolling-auto` | -webkit-overflow-scrolling: auto; |
209+
210+
#### [Position](https://tailwindcss.com/docs/position)
211+
212+
| Snippet | Purpose |
213+
| ---------- | ------------------- |
214+
| `static` | position: static; |
215+
| `fixed` | position: fixed; |
216+
| `absolute` | position: absolute; |
217+
| `relative` | position: relative; |
218+
| `sticky` | position: sticky; |
219+
220+
#### [Top / Right / Bottom / Left](https://tailwindcss.com/docs/top-right-bottom-left)
221+
222+
| Snippet | Purpose |
223+
| -------------- | ------------------------------------------------- |
224+
| `inset-0` | top: 0; right: 0; bottom: 0; left: 0; |
225+
| `inset-y-0` | top: 0; bottom: 0; |
226+
| `inset-x-0` | right: 0; left: 0; |
227+
| `top-0` | top: 0; |
228+
| `right-0` | right: 0; |
229+
| `bottom-0` | bottom: 0; |
230+
| `left-0` | left: 0; |
231+
| `inset-auto` | top: auto; right: auto; bottom: auto; left: auto; |
232+
| `inset-y-auto` | top: auto; bottom: auto; |
233+
| `inset-x-auto` | left: auto; right: auto; |
234+
| `top-auto` | top: auto; |
235+
| `bottom-auto` | bottom: auto; |
236+
| `left-auto` | left: auto; |
237+
| `right-auto` | right: auto; |
238+
239+
#### [Visibility](https://tailwindcss.com/docs/visibility)
240+
241+
| Snippet | Purpose |
242+
| ----------- | -------------------- |
243+
| `visible` | visibility: visible; |
244+
| `invisible` | visibility: hidden; |
245+
246+
#### [Z-Index](https://tailwindcss.com/docs/z-index)
247+
248+
| Snippet | Purpose |
249+
| -------- | -------------- |
250+
| `z-0` | z-index: 0; |
251+
| `z-10` | z-index: 10; |
252+
| `z-20` | z-index: 20; |
253+
| `z-30` | z-index: 30; |
254+
| `z-40` | z-index: 40; |
255+
| `z-50` | z-index: 50; |
256+
| `z-auto` | z-index: auto; |
257+
258+
## Contributing
259+
260+
This is an Open Source Project with MIT License. You can also contribute to this
261+
extension by adding your own list of CSS Snippets which you think will help
262+
others increase their productivity, see [Contributing Docs →]() for detailed
263+
guidance.

‎media/cover.jpg

218 KB
Loading

‎media/vscode-css-snippets.gif

9.36 MB
Loading

‎package.json

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,23 @@
2929
"snippets": [
3030
{
3131
"language": "css",
32-
"path": "./snippets/snippets.json"
32+
"path": "./snippets/css-reset.json"
33+
},
34+
{
35+
"language": "css",
36+
"path": "./snippets/pseudo.json"
37+
},
38+
{
39+
"language": "css",
40+
"path": "./snippets/breakpoints.json"
41+
},
42+
{
43+
"language": "css",
44+
"path": "./snippets/tailwind/layout.json"
45+
},
46+
{
47+
"language": "css",
48+
"path": "./snippets/contributions/snippet.json"
3349
}
3450
]
3551
},

0 commit comments

Comments
 (0)