# Sublime Snippets For Material Design Lite A new styling framework material lite now comes to Sublime. ![Snippets for sublime.](https://raw.githubusercontent.com/arindampradhan/material-lite-snippet/master/material-lite-snippet.gif) ## Elements! - [badges](#badges) - [buttons](#buttons) - [cards](#cards) - [chips](#chips) - [dialogs](#dialogs) - [extras](#extras) - [layouts](#layouts) - [lists](#lists) - [loading](#loading) - [menus](#menus) - [panel](#panel) - [sliders](#sliders) - [snackbar](#snackbar) - [tables](#tables) - [template](#template) - [textfields](#textfields) - [toggles](#toggles) - [tooltips](#tooltips) - [LICENSE](#LICENSE) ## Installation There are 3 methods for installing this plugin. 1. Search for "Material Lite 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](https://sublime.wbond.net/installation) 2. Clone the repository into your Sublime Text 2/3 packages directory. `git clone https://github.com/arindam/sublime-material-lite.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. ### ``badges`` ------------------ | Snippet code | Component | |-------------------|---------------- | mdl-badge-icon | badge on icon | | mdl-badge-no-icon | badge on text | | mdl-badge | simple badge | ### ``buttons`` ------------------ | Snippet code | Component | |---------------------------------|-------------------------------------------------- | mdl-button-accent-ripple-raised | ripple effect , accent color , raised button | | mdl-button-accent-ripple | ripple effect , accent color | | mdl-button-colored-ripple-raised| ripple effect , primary color , raised button | | mdl-button-colored-ripple | ripple effect , primary color | | mdl-button-fab-colored-ripple | fab button , primary color , ripple effect | | mdl-button-fab-colored | fab button , primary color | | mdl-button-fab-ripple | fab button , ripple effect | | mdl-button-fab-disable | fab button , disabled | | mdl-button-fab | fab button | | mdl-button-ripple-raised | ripple effect , raised button | | mdl-button-disable-raised | disabled , raised button | | mdl-button-raised | raised button | | mdl-button-ripple | ripple effect button | | mdl-button-disable | disabled , raised button | | mdl-button | simple button | ### ``cards`` ------------------ | Snippet code | Component | |-------------------------|---------------------------------------------- | mdl-card-event-nostyle | card event with inline style | | mdl-card-event | card event with styling | | mdl-card-square-nostyle | card event square dimension inline style | | mdl-card-square | card event square dimension with styling | | mdl-card-wide-nostyle | card wide with inline style | | mdl-card-wide | simple card | ### ``chips`` ------------------ | Snippet code | Component | |-----------------------|---------------------------- | mdl-chip-button | Button Chip | | mdl-chip-contact | Contact Chip | | mdl-chip-deletable2 | Deletable Contact Chip | | mdl-chip-deletable | Deletable Chip | | mdl-chip | Basic Chip | ### ``dialogs`` ------------------ | Snippet code | Component | |-----------------------|------------------------------------------------ | mdl-dialog-full-script| wide/full dialog with button onlick javascript| | mdl-dialog-full | wide/full dialog | | mdl-dialog-script | dialog with button onlick javascript | | mdl-dialog | simple dialog | ### ``extras`` ------------------ | Snippet code | Component | |-------------------|------------------------------------ | mdl-link | cdn link for stylesheets and font | | mdl-script | cdn for material.js | | mdl-cdn | all cdn for material design lite | ### ``layouts`` ------------------ | Snippet code | Component | |-------------------------|---------------------------------------------- | mdl-cell-phone | responsive grid column for phone | | mdl-cell-tablet | responsive grid column for tablet | | mdl-cell | responsive grid column for web | | mdl-content-tab | Content tabs | | mdl-footer-mega | Mega footer | | mdl-footer | Basic Footer | | mdl-grid | responsive grid layout | | mdl-layout-drawer | Side drawer (Only) | | mdl-layout-fixed | Fixed Side drawer | | mdl-layout-scroll | Scrolling header | | mdl-layout | Basic Layout: Navbar + SideBar | | mdl-layout-tab-fixed | Fixed tabs | | mdl-layout-tab | Scrollable tabs | | mdl-layout-transparent | Transparent header - with background image | | mdl-layout-waterfall | Waterfall header | | mdl-tabs | Multiple Navbar tabs | | mdl-tab | Basic Navbar tab | ### ``lists`` ------------------ | Snippet code | Component | |-------------------|---------------------------- | mdl-list-3line | Three line (in content) | | mdl-list-actions | Avatars and actions | | mdl-list-basic | Basic list | | mdl-list-controls | Avatars and controls | | mdl-list | Simple list | | mdl-list-2line | Two line (in content) | ### ``loading`` ------------------ | Snippet code | Component | |----------------------------|------------------------------- | mdl-progress-buffer | Buffering | | mdl-progress-indeterminate | Indeterminate | | mdl-progress | Basic Progress bar | | mdl-spinner | Basic Spinner | | mdl-spinner-colored | Basic Spinner Color(Primary) | ### ``menus`` ------------------ | Snippet code | Component | |--------------------|------------------------------------------- | mdl-menu-left | Bottom left | | mdl-menu-left-top | Top left | | mdl-menu-right | Bottom right | | mdl-menu-right-top | Top right | | mdl-menu | default -> lower left (dropdown style) | ### ``panel`` ------------------ | Snippet code | Component | |-------------------|---------------- | mdl-panel | Panel element | ### ``sliders`` ------------------ | Snippet code | Component | |-------------------|---------------- | mdl-slider | Basic slider | ### ``snackbar`` ------------------ | Snippet code | Component | |---------------------|-------------------------- | mdl-snackbar-script | Snackbar with javascript| | mdl-snackbar | Snackbar | | mdl-toast-script | Toast with javascript | | mdl-toast | Toast | ### ``tables`` ------------------ | Snippet code | Component | |----------------------|------------------------- | mdl-table-selectable | Selectable Data table | | mdl-table | Basic Data table | ### ``template`` ------------------ | Snippet code | Component | |------------------------------|------------------------------------- | mdl-template-article | Template for article | | mdl-template-contact | Template for Contact | | mdl-template-login2 | Template for login different style | | mdl-template-login | Template for login | | mdl-template-register | Template for registration | | mdl-template-vertical-content| Template for vertical column | | mdl-template | Template starter | **NOTE:** New templates coming soon!. ### ``textfields (Input Fields)`` ------------------ | Snippet code | Component | |--------------------|------------------------------- | mdl-form-expand | Expandable Textfield | | mdl-form-float | Text with floating label | | mdl-form-multiline | Floating Multiline Textfield | | mdl-form-number | Numeric input | | mdl-form | Simple Textfield | ### ``toggles`` ------------------ | Snippet code | Component | |-------------------|-----------------------| | mdl-check-icon | CheckBox | | mdl-check-ripple | CheckBox ripple effect| | mdl-check | CheckBox | | mdl-switch | Switch | | mdl-radio-group | Radio | | mdl-radio | Radio | ### ``tooltips`` ------------------ | Snippet code | Component | |-------------------|---------------- | mdl-tooltip-large | Large Tooltip | | mdl-tooltip | Basic Tooltip | ### ``Configurations`` ---------------------- **Coming Soon!** ### ``LICENSE`` ------------------ MIT