Overview Version History Q & A Rating & Review
Materialize CSS Snippets for Visual Studio Code
Attention.
Due to the current political, economic and social situation of my country Venezuela , I can not continue to maintain this extension, if you somehow or other want to continue maintaining this project let me know through an issue in the repository in Github.
A set of Materialize CSS Snippets for Visual Studio Code, ordered semantically following the structure of the documentation officer.
How to install
In VScode type F1 or Ctrl-Shift-P (Windows and Linux) or Cmd-Shift-P (MacOS). Type install extension and press enter.
In the search box, type materialize snippets and select it.
In the next window with the details of the plugin click on install button, that's it.
Reload or restart VScode for the changes to take effect.
How to use
Snippets are arranged according to the structure of the official documentation of Materialize css, only type mz- and the component that you want to use. Example: mz-card This will show you all available for the card component snippets.
Remember to put the word mz- and then the component that you want to call, card, btn, table, navbar, sidenav etc...
Table of Contents
Template
Snippet
Snippet Content
Description
mz-template:
cnd
Basic html structure using cdn files
mz-template:
local
Basic html structure using local files
mz-template:
grid
Basic grid structure
CSS
Snippet
Snippet Content
Description
mz-mediacss:
img-circular
Circular Image
mz-mediacss:
img-responsive
Responsive Image
mz-mediacss:
video-embeds
Embeds video
mz-mediacss:
video-responsive
Responsive Video
table
Snippet
Snippet Content
Description
mz-table:
bordered
Bordered Table
mz-table:
centered
Centered Table
mz-table:
default
Default Table
mz-table:
highlight
Highlight Table
mz-table:
responsive
Responsive Table
mz-table:
striped
Striped Table
typography
Snippet
Snippet Content
Description
mz-typography:
blockquote
Blockquote
mz-typography:
flow-text
Responsive Text
Components
badge
Snippet
Snippet Content
Description
mz-badge:
default
Default Badge
mz-badge:
new
New Badge
breadcrumb
Snippet
Snippet Content
Description
mz-breadcrumb:
breadcrumb
Breadcrumb
Snippet
Snippet Content
Description
mz-btn:
default
Default Button
mz-btn:
disabled
Disabled Button
mz-btn:
fab-ct-h
Fixed action button click to toggle horizontal
mz-btn:
fab-ct-v
Fixed action button click to toggle vertical
mz-btn:
fab-h
Fixed action button horizontal
mz-btn:
fab-toolbar
Fixed action button toolbar
mz-btn:
fab-v
Fixed action button vertical
mz-btn:
flat
Button Flat
mz-btn:
flat-disabled
Button flat disabled
mz-btn:
floating
Button Floating
mz-btn:
floating-disabled
Button Floating Disabled
mz-btn:
icon-left
Button with icon to the left
mz-btn:
icon-right
Button with icon to the right
mz-btn:
large
Large Button
mz-btn:
large-disabled
Large Button Diasbled
mz-btn:
large-icon-left
Large button with icon on the left
mz-btn:
large-icon-right
Large button with icon on the right
mz-btn:
submit
Submit Button
mz-btn:
fab-toolbar
Fixed action button toolbar
card
Snippet
Snippet Content
Description
mz-card:
basic
Basic Card
mz-card:
fab-large
Card with large Floating Action Button
mz-card:
fab-small
Card with small Floating Action Button
mz-card:
panel
Panel Card
mz-card:
horizontal
Horinzontal Card
mz-card:
image
Image Card
mz-card:
image-lg
Image Card Large
mz-card:
image-md
Image Card Medium
mz-card:
image-sm
Image Card Small
mz-card:
rao-default
Card reveal action option default
mz-card:
rao-lg
Card reveal action option large
mz-card:
rao-md
Card reveal action option medium
mz-card:
rao-sm
Card reveal action option small
mz-card:
reveal-default
Card reveal default
mz-card:
reveal-lg
Card reveal large
mz-card:
reveal-md
Card reveal medium
mz-card:
reveal-sm
Card reveal small
chips
Snippet
Snippet Content
Description
mz-chips:
contact
Chip Contacts
mz-chips:
tags
Chip Tags
mz-chips:
tags-close
Chip tag with icon close
collections
Snippet
Snippet Content
Description
mz-collections:
avatar
Avatar Collection
mz-collections:
basic
Basic Collection
mz-collections:
dismissable-content
Dismissable Content collection
mz-collections:
headers
headers collection
mz-collections:
link
Link Collection
mz-collections:
link-active
Link active collection
mz-collections:
secondary-content
Secondary Content Collection
Snippet
Snippet Content
Description
mz-footer:
default
Footer Default
Snippet
Snippet Content
Description
mz-forms:
contact
Contact Form
icons
Snippet
Snippet Content
Description
mz-icons:
default
Default Icon
mz-icons:
lg-icon
Large Icon
mz-icons:
md-icon
Medium Icon
mz-icons:
sm-icon
Small Icon
mz-icons:
tn-icon
Tiny Icon
navbar
Snippet
Snippet Content
Description
mz-navbar:
full_width
Menu full width
mz-navbar:
full-width-fixed
Menu fixed full width
mz-navbar:
width-centered
Menu width centered
mz-navbar:
width-centered-fixed
Menu fixed width centered
mz-navbar:
with-tabs
Menu with tabs
Snippet
Snippet Content
Description
mz-pagination:
default
Pagination Default
preloader
Snippet
Snippet Content
Description
mz-preloader:
circular-flashing-colors-lg
Preloader circular flashing colors big
mz-preloader:
circular-flashing-colors-default
Preloader circular flashing colors default
mz-preloader:
circular-flashing-colors-sm
Preloader circular flashing colors small
mz-preloader:
color-circular-lg
Preloader color circular big
mz-preloader:
color-circular-default
Preloader color circular default
mz-preloader:
color-circular-sm
Preloader color circular small
mz-preloader:
linear-determinate
Preloader linear determinate
mz-preloader:
linear-indeterminate
Preloader linear indeterminate
JavaScript
carousel
Snippet
Snippet Content
Description
mz-corousel:
default
Default Carousel
mz-corousel:
full-width
Carousel full width
mz-corousel:
special-options
Special options carousel
collapsible
Snippet
Snippet Content
Description
mz-collasible:
accordion
Collapsible accordion
mz-collasible:
expandable
Collapsible expandable
mz-collasible:
popout
Collapsible popout
dialogs
Snippet
Snippet Content
Description
mz-dialogs:
callback-toast
Callback Toast
mz-dialogs:
rounded-toast
Rounded Toast
mz-dialogs:
toast-default
Default Toast
mz-dialogs:
tooltips-bottom
Tooltips Bottom
mz-dialogs:
tooltips-left
Tooltips Left
mz-dialogs:
tooltips-right
Tooltips Right
mz-dialogs:
tooltips-top
Tooltips Top
dropdown
Snippet
Snippet Content
Description
mz-dropdown:
dropdown
Dropdown Structure
featurediscovery
Snippet
Snippet Content
Description
mz-featurediscovery:
tap-target
Tap Target
Snippet
Snippet Content
Description
mz-mediajs:
material-box
Material design lightbox
mz-mediajs:
material-box-captions
Material design lightbox captions
mz-mediajs:
slider
Material design slider
mz-mediajs:
slider-fullscreen
Material design slider fullscreen
modals
Snippet
Snippet Content
Description
mz-modals:
bottom-sheet
Bottom Sheet Modal
mz-modals:
default
Default Modal
mz-modals:
fixed-footer
Fixed Footer Modal
sidenav
Snippet
Snippet Content
Description
mz-sidenav:
dropdown-structure
Sidenav Dropdown
mz-sidenav:
fixed-structure
Sidenav Fixed
mz-sidenav:
fullscreen-structure
Sidenav Fullscreen
mz-sidenav:
html-structure
Sidenav HTML Structure
tabs
Snippet
Snippet Content
Description
mz-tabs:
default
Default Tab
mz-tabs:
swipeable
Swipeable tab
