https://github.com/brunnerlivio/vscode-material-snippets
:lipstick: This extension for Visual Studio Code adds snippets for material design.
https://github.com/brunnerlivio/vscode-material-snippets
material-color-snippets material-colors snippets visual-studio visual-studio-code
Last synced: 5 months ago
JSON representation
:lipstick: This extension for Visual Studio Code adds snippets for material design.
- Host: GitHub
- URL: https://github.com/brunnerlivio/vscode-material-snippets
- Owner: BrunnerLivio
- License: mit
- Created: 2016-10-19T10:12:24.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-14T20:21:31.000Z (over 9 years ago)
- Last Synced: 2025-03-03T09:23:07.533Z (over 1 year ago)
- Topics: material-color-snippets, material-colors, snippets, visual-studio, visual-studio-code
- Homepage:
- Size: 74.2 KB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Material Snippets for VS Code
This extension for Visual Studio Code adds snippets for material colors and material shadows.
## Usage
Type part of a snippet, press `enter`, and the snippet unfolds.
Alternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (OSX) to activate snippets from within the editor.
#### Material Colors
```css
md-red-*
md-pink
md-purple-*
md-deep-purple-*
md-indigo-*
md-blue-*
md-light-blue-*
md-cyan-*
md-teal-*
md-green-*
md-light-green-*
md-lime-*
md-yellow-*
md-amber-*
md-orange-*
md-deep-orange-*
md-brown-*
md-grey-*
md-blue-grey-*
md-black
md-white
```
[Read More](https://material.io/guidelines/style/color.html) about Material Color
#### Material Shadows
```css
md-shadows-2dp
md-shadows-3dp
md-shadows-4dp
md-shadows-6dp
md-shadows-8dp
md-shadows-12dp
md-shadows-16dp
md-shadows-24dp
```
[Read More](https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android) about shadows
#### Text and background colors
```css
md-primary-text-light
md-secondary-text-light
md-hint-text-light
md-dividers-text-light
md-primary-text-dark
md-secondy-text-dark
md-dividers-text-dark
md-active-icon-dark
md-inactive-icon-dark
md-active-icon-light
md-inactive-icon-light
```
[Read More](https://material.io/guidelines/style/color.html#color-text-background-colors) about text and background colors
## Languages
You can use this snippets in
- *.scss
- *.sass
- *.css
- *.less
- *.vue
[Read More](https://material.io/guidelines/material-design/elevation-shadows.html) about Material Shadows
## Installation
1. Install Visual Studio Code 0.10.1 or higher
2. Launch Code
3. From the command palette `Ctrl`-`Shift`-`P` (Windows, Linux) or `Cmd`-`Shift`-`P` (OSX)
4. Select `Install Extension`
5. Choose the extension
6. Reload Visual Studio Code