Material Design Lite Selectors Snippets
A collection of Sublime Text selectors snippets for Material Design Lite. :eyes:
Menu
Installation
There are 3 methods for installing this plugin.
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
Clone the repository into your Sublime Text 2/3 packages directory.
git clone https://github.com/rasy-js/material-design-lite-snippets.git
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.
