navin-moorthy/vscode-css-snippetsPublic

NotificationsYou must be signed in to change notification settings
Fork0
Star10

Collection of CSS Snippets to make your life easier by auto-completing css rules.

marketplace.visualstudio.com/items?itemName=navin-moorthy.vscode-css-snippets

License

MIT license

10 stars 0 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 63 Commits
.vscode		.vscode
docs/tailwind		docs/tailwind
media		media
snippets		snippets
.commitlintrc.json		.commitlintrc.json
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gacprc.json		.gacprc.json
.gitignore		.gitignore
.huskyrc.json		.huskyrc.json
.lintstagedrc.json		.lintstagedrc.json
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.vscodeignore		.vscodeignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
icon.png		icon.png
lerna.json		lerna.json
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

VSCode CSS Snippets

Description

Collection of CSS Snippets to make your life easier by auto-completingcommon css rules, Tailwind utility classes as css rules -Tailwind and1 line layouts

It's not debatable, most of us got used to utility classes fromTailwind,BootStrapetc,. But when you come back to write plain CSS, wouldn't be great to have thoseutility classes converted as snippets instead of typing the CSS rules?

Apart from CSS Utility snippets, collection of snippets from popular CSSexamples found all over the web can be found.

To see the list of all the CSS Snippets, gohere →

Want to have your own favourite CSS Snippets in this extension, seeContributing →

Installation

Install via the Visual Studio Code Marketplace →

You can enable tab completion (recommended) by openingCode > Preferences > Settings (on a Mac) and applying"editor.tabCompletion": "onlySnippets" to your personal settings

VSCode CSS Snippets

Snippets

Common

CSS Reset

Snippet	Purpose
`css-reset`	An opinionated set of base styles Cloned fromTailwind Preflight -Original File

Pseudo Styles

Snippet	Purpose
`hover`	:hover
`focus`	:focus
`active`	:active
`disabled`	:disabled
`visited`	:visited
`first`	:first-child
`last`	:last-child
`even`	:nth-child(2n)
`odd`	:nth-child(odd)
`nth-child`	:nth-child(`rule`)

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 - 1280pxSee how →
`resp-sm-selected`	Get tailwind breakpoint for selected class/classes - sm - 640pxSee how →
`resp-md-selected`	Get tailwind breakpoint for selected class/classes - md - 768pxSee how →
`resp-lg-selected`	Get tailwind breakpoint for selected class/classes - lg - 1024pxSee how →
`resp-xl-selected`	Get tailwind breakpoint for selected class/classes - xl - 1280pxSee how →

Tailwind

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`};