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

1. In VScode type F1 or Ctrl-Shift-P (Windows and Linux) or Cmd-Shift-P (MacOS). Type install extension and press enter.
2. In the search box, type materialize snippets and select it.
3. In the next window with the details of the plugin click on install button, that's it.
4. 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

mediacss

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

buttons

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

footer

Snippet	Snippet Content	Description
mz-footer:	default	Footer Default

forms

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

pagination

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

mediajs

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