/vscode-material-snippets

:lipstick: This extension for Visual Studio Code adds snippets for material design.

MIT LicenseMIT

Material Snippets for VS Code

This extension for Visual Studio Code adds snippets for material colors and material shadows.

Material Color Example

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

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 about Material Color

Material Shadows

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 about shadows

Text and background colors

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 about text and background colors

Languages

You can use this snippets in

  • *.scss
  • *.sass
  • *.css
  • *.less
  • *.vue

Read More 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