Material Design Lite Selectors Snippets

A collection of Sublime Text selectors snippets for Material Design Lite. 👀

---

Menu

• Badges
• Buttons
• Cards
• Chips
• Dialogs
• Layout
• Grid
• Tabs
• Footer
• Lists
• Progress
• Spinner
• Menu
• Slider
• Snackbar
• Checkbox
• Radio
• Icon toggle
• Switch
• Table
• Textfield
• Tooltip
• Typography
• State Hooks
• JS
• Etc
• License

Installation

There are 3 methods for installing this plugin.

1. Search for "Material Design Lite Selectors Snippets" via the "Package Control: Install Packages" menu. Note: If you don't have Sublime Package Control installed, you can find out how to install it here https://sublime.wbond.net/installation

2. Clone the repository into your Sublime Text 2/3 packages directory. git clone https://github.com/radzev1ch/material-design-lite-snippets.git

3. Download the .zip file and unzip it into your Sublime Text 2/3 packages directory. Note: You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.

Usage

Start typing snippet in pug or html, css, sass, scss files.

Snippets

Badges

Snippet	MDL class
ma:g	mdl-badge
ma:nb	mdl-badge--no-background
ma:o	mdl-badge--overlap
ma:d	data-badge="value"

Buttons

Snippet	MDL class
mb:u	mdl-button
mb:r	mdl-button--raised
mb:f	mdl-button--fab
mb:mf	mdl-button--mini-fab
mb:i	mdl-button--icon
mb:c	mdl-button--colored
mb:p	mdl-button--primary
mb:a	mdl-button--accent

Cards

Snippet	MDL class
mca:r	mdl-card
mca:c	mdl-card--border
msh:d	mdl-shadow--Ndp
mca:t	mdl-card__title
mca:tt	mdl-card__title-text
mca:s	mdl-card__subtitle-text
mca:m	mdl-card__media
mca:st	mdl-card__supporting-text
mca:a	mdl-card__actions
mca:m	mdl-card__menu

Chips

Snippet	MDL class
mh:i	mdl-chip
mh:c	mdl-chip--contact
mh:t	mdl-chip__text
mh:a	mdl-chip__action
mh:co	mdl-chip__contact

Dialogs

Snippet	MDL class
md:i	mdl-dialog
md:t	mdl-dialog__title
md:c	mdl-dialog__content
md:a	mdl-dialog__actions
md:af	mdl-dialog__actions--full-width

Layout

Snippet	MDL class
ml:a	mdl-layout
ml:h	mdl-layout__header
ml:i	mdl-layout-icon
ml:hr	mdl-layout__header-row
ml:t	mdl-layout__title
ml:s	mdl-layout-spacer
ml:n	mdl-navigation
ml:nl	mdl-navigation__link
ml:d	mdl-layout__drawer
ml:c	mdl-layout__content
ml:hs	mdl-layout__header--scroll
ml:fd	mdl-layout--fixed-drawer
ml:fh	mdl-layout--fixed-header
ml:nd	mdl-layout--no-drawer-button
ml:ndd	mdl-layout--no-desktop-drawer-button
ml:l	mdl-layout--larget-screen-only
ml:ss	mdl-layout--small-screen-only
ml:hw	mdl-layout__header--waterfall
ml:hwh	mdl-layout__header--waterfall-hide-top
ml:ht	mdl-layout__header--transparent
ml:hs	mdl-layout__header--seamed
ml:tb	mdl-layout__tab-bar
ml:ta	mdl-layout__tab
ml:tp	mdl-layout__tab-panel
ml:tm	mdl-layout__tab-manual-switch
ml:ft	mdl-layout--fixed-tabs
ml:ce	mdl-layout-center

Grid

Snippet	MDL class
mg:r	mdl-grid
mg:n	mdl-grid--no-spacing
mc:e	mdl-cell
mc:c	mdl-cell--N-col
mc:cd	mdl-cell--N-col-desktop
mc:ct	mdl-cell--N-col-tablet
mc:cp	mdl-cell--N-col-phone
mc:o	mdl-cell--N-offset
mc:od	mdl-cell--N-offset-desktop
mc:ot	mdl-cell--N-offset-tablet
mc:op	mdl-cell--N-offset-phone
mc:or	mdl-cell--order-N
mc:ord	mdl-cell--order-N-desktop
mc:ort	mdl-cell--order-N-tablet
mc:orp	mdl-cell--order-N-phone
mc:hd	mdl-cell--hide-desktop
mc:ht	mdl-cell--hide-tablet
mc:hp	mdl-cell--hide-phone
mc:s	mdl-cell--stretch
mc:t	mdl-cell--top
mc:m	mdl-cell--middle
mc:b	mdl-cell--bottom

Tabs

Snippet	MDL class
mta:b	mdl-tabs
mta:tb	mdl-tabs__tab-bar
mta:t	mdl-tabs__tab
mta:p	mdl-tabs__panel

Footer

Snippet	MDL class
mm:f	mdl-mega-footer
mm:ft	mdl-mega-footer__top-section
mm:fl	mdl-mega-footer__left-section
mm:fs	mdl-mega-footer__social-btn
mm:fr	mdl-mega-footer__right-section
mm:fm	mdl-mega-footer__middle-section
mm:fd	mdl-mega-footer__drop-down-section
mm:fh	mdl-mega-footer__heading
mm:fll	mdl-mega-footer__link-list
mm:fb	mdl-mega-footer__bottom-section
mmi:f	mdl-mini-footer
mmi:fl	mdl-mini-footer__left-section
mmi:fll	mdl-mini-footer__link-list
mmi:fr	mdl-mini-footer__right-section
mmi:fs	mdl-mini-footer__social-btn

Lists

Snippet	MDL class
mli:s	mdl-list
mli:i	mdl-list__item
mli:it	mdl-list__item--two-line
mli:ith	mdl-list__item--three-line
mli:ip	mdl-list__item-primary-content
mli:ia	mdl-list__item-avatar
mli:ii	mdl-list__item-icon
mli:is	mdl-list__item-secondary-content
mli:isi	mdl-list__item-secondary-info
mli:isa	mdl-list__item-secondary-action
mli:itb	mdl-list__item-text-body

Progress

Snippet	MDL class
mp:i	mdl-progress--indeterminate

Spinner

Snippet	MDL class
ms:p	mdl-spinner
ms:sc	mdl-spinner--single-color

Menu

Snippet	MDL class
me:n	mdl-menu
me:i	mdl-menu__item
me:f	mdl-menu__item--full-bleed-divider
me:t	mdl-menu--top-left
me:tr	mdl-menu--top-right
me:b	mdl-menu--bottom-right

Slider

Snippet	MDL class
mr:s	mdl-slider

Snackbar

Snippet	MDL class
mn:a	mdl-snackbar
mn:t	mdl-snackbar__text
mn:ac	mdl-snackbar__action
mn:at	mdl-snackbar--active

Checkbox

Snippet	MDL class
mk:b	mdl-checkbox
mk:i	mdl-checkbox__input
mk:l	mdl-checkbox__label

Radio

Snippet	MDL class
mo:r	mdl-radio
mo:rb	mdl-radio__button
mo:rl	mdl-radio__label

Icon toggle

Snippet	MDL class
mic:o	mdl-icon-toggle
mic:i	mdl-icon-toggle__input
mic:l	mdl-icon-toggle__label

Switch

Snippet	MDL class
mw:i	mdl-switch
mw:in	mdl-switch__input
mw:l	mdl-switch__label

Table

Snippet	MDL class
mda:t	mdl-data-table
mda:s	mdl-data-table--selectable
mda:hs	mdl-data-table__header--sorted-ascending
mda:hd	mdl-data-table__header--sorted-descending
mda:c	mdl-data-table__cell--non-numeric

Textfield

Snippet	MDL class
mx:t	mdl-textfield
mx:i	mdl-textfield__input
mx:l	mdl-textfield__label
mx:f	mdl-textfield--floating-label
mx:e	mdl-textfield__error
mx:ex	mdl-textfield__expandable
mx:h	mdl-input__expandable-holder

Tooltip

Snippet	MDL class
moo:l	mdl-tooltip
moo:a	mdl-tooltip--large
moo:e	mdl-tooltip--left
moo:r	mdl-tooltip--right
moo:t	mdl-tooltip--top
moo:b	mdl-tooltip--bottom

Typography

Snippet	MDL class
mt:b1	mdl-typography--body-1
mt:b1f	mdl-typography--body-1-force-preferred-font
mt:b2	mdl-typography--body-2
mt:b2c	mdl-typography--body-2-color-contrast
mt:b2f	mdl-typography--body-2-force-preferred-font
mt:b	mdl-typography--button
mt:c	mdl-typography--caption
mt:cc	mdl-typography--caption-color-contrast
mt:d1	mdl-typography--display-1
mt:d1c	mdl-typography--display-1-color-contrast
mt:d2	mdl-typography--display-2
mt:d3	mdl-typography--display-3
mt:d4	mdl-typography--display-4
mt:h	mdl-typography--headline
mt:m	mdl-typography--menu
mt:s	mdl-typography--subhead
mt:sc	mdl-typography--subhead-color-contrast
mt:ts	mdl-typography--table-striped
mt:tc	mdl-typography--text-center
mt:tj	mdl-typography--text-justify
mt:tl	mdl-typography--text-left
mt:tr	mdl-typography--text-right
mt:tca	mdl-typography--text-capitalize
mt:tlo	mdl-typography--text-lowercase
mt:tu	mdl-typography--text-uppercase
mt:tn	mdl-typography--text-nowrap
mt:t	mdl-typography--title
mt:tcc	mdl-typgraphy--title-color-contrast

State hooks

Snippet	MDL class	Component
is:a	is-active	Layout
is:i	is-invalid	Textfield

JS

Snippet	MDL class	Component
mj:b	mdl-js-button	Button
mj:r	mdl-js-ripple-effect	Button
mj:l	mdl-js-layout	Layout
mj:ta	mdl-js-tabs	Tabs
mj:p	mdl-js-progress	Progress
mj:s	mdl-js-spinner	Spinner
mj:m	mdl-js-menu	Menu
mj:sl	mdl-js-slider	Slider
mj:c	mdl-js-checkbox	Checkbox
mj:r	mdl-js-radio	Radio
mj:i	mdl-js-icon-toggle	Icon toggle
mj:s	mdl-js-switch	Switch
mj:dt	mdl-js-data-table	Data table
mj:t	mdl-js-textfield	Textfield

Etc

Snippet	MDL class	Component
mi:c	material-icons	Applicable everywhere
mlo:g	mdl-logo	Footer

License

Material Design Lite Selectors Snippets - Sublime Plugin is open-sourced software licensed under the MIT license.