Materialized - Sublime Plugin ============================= This Materialized sublime plugin contains snippets of Materialized CSS components. Hope it improves your workflow. :) Contribute as much as you can via - Twitter [@ayinloya](https://twitter.com/ayinloya) - [Issues](https://github.com/ayinloya/materialized-css-snippets/issues) Fork, clone, correct and send me a pull request or file any issues. No contribution is small. ## Here is a list of whats available - [Installation](#installation) - [CDN](#cdn) - [Templates for html5](#templates) - [Forms](#forms) - [Tables](#tables) - [Input Fields](#input-fields-form-fields) - [Badges](#badges) - [Buttons](#buttons) - [Cards](#cards) - [Collapsible](#collapsible) - [Collections](#collections) - [Dialogs](#dialogs) - [Dropdown](#dropdown) - [Footer](#footer) - [Grid](#grid) - [Icons](#icons) - [JS](#js) - [Media](#media) - [Modal](#modal) - [Navbar](#navbar) - [Pagination](#pagination) - [Progress Bar](#progress-bar) - [Scroll](#scroll) - [Tab](#tab) - [Typography](#typography) - License ### Installation There are 3 fun ways for installing this plugin. 1. Search for "Materialized CSS 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://packagecontrol.io/installation](https://packagecontrol.io/installation) 2. Clone the repository into your Sublime Text 2/3 packages directory. `git clone https://github.com/ayinloya/materialized-css-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. ### Some examples on how to use this plugin. Press tab after typing the following snippet codes ### CDN | Component |Snippet code | |-------------------------------|:------------------:| | CDN Link(both CSS & JS) | m-cdn | | CDN link (CSS only) | m-cdn:css | | CDN link (JS only) | m-cdn:js | ### Templates | Component | Snippet code | |---------------------------------| :---------------------------:| | HTML5 Template Layout | m-template:html | | HTML5 Parallax Template Layout | m-template:parallax | | HTML5 starter Template Layout | m-template:starter | ### Forms | Component | Snippet code | |---------------------------| :-----------------------------:| | Form | m-form | | Registation form | m-form:register | ### Tables | Component | Snippet code | |---------------------------| :-----------------------------:| | Table | m-table | | Bordered Table | m-table:bordered | | Center Table | m-table:centered | | Hover Table | m-table:hover | | Responsive Table | m-table:responsive | | Striped Table | m-table:striped | | Highlight Table | m-table:highlight | ### Input Fields (Form fields) | Component | Snippet code | |--------------------------------------------------------------| :-----------------------------:| | Input with custom input error and success messages | m-input:textarea | | Text-Area Input | m-input:textarea | | Text-area Input Icon | m-input:textarea-icon | | Text Input | m-input:text | | Text Input Icon | m-input:text-icon | | Checkbox | m-input:checkbox | | Checkbox filled | m-input:checkbox-fill | | Date Picker | m-input:date | | File Input | m-input:file | | Radio Button | m-input:radio | | Radio Button with Gap | m-input:radio-gap | | Radio Button group | m-input:radio-group | | Range Input | m-input:range | | Select Box | m-input:select | | Select Box-disabled | m-input:select-disabled | | Select Box browser default | m-input:select-default | | Select Box browser default-disabled | m-input:select-default-disabled| | Select Box group | m-input:select-group | | Select Box with image icon | m-input:select-icon | | Select Box with left image icon | m-input:select-icon-left | | Select Box multiselect | m-input:select-multiple | | Switch | m-input:switch | | Switch-disabled | m-input:switch-disabled | ### Badges | Component | Snippet code | |---------------------------| :-----------------------------:| | Badge | m-badge | | Old badge | m-badge-o | ### Buttons | Component | Snippet code | |-----------------------------------------| :----------------------------------:| | Button-disabled | m-button:disabled | | Fixed Floating Button | m-fixed-floating-button | | Fixed Floating Button - horizontal | m-fixed-floating-button:horizontal | | Flat Button | m-button:flat | | Floating Button | m-button:floating | | Large Button | m-lg-button | | Raised Button | m-raised-button | | Raised Button Icon | m-raised-button:icon | | Submit Button | m-submit-button | ### Cards | Component | Snippet code | |---------------------------| :-----------------------------:| | Default card | m-card | | Image card | m-image-card | | Panel card | m-panel-card | | Revile card | m-revile-card | | Default card(large) | m-card:lg | | Default card(medium) | m-card:md | | Default card(small) | m-card:sm | | Revile card(large) | m-revile-card:lg | | Revile card(medium) | m-revile-card:md | | Revile card(small) | m-revile-card:sm | ### Collapsible | Component | Snippet code | |-----------------------------| :---------------------------:| | Collapsible(single select) | m-collapsible | | Collapsible(multiple select)| m-collapsible:expandable | | Collapsible(default active) | m-collapsible:selected | ### Collections | Component | Snippet code | |-----------------------------| :---------------------------:| | Basic Collection | m-collection | | Collection with avatar | m-collection:avatar | | Collection(Swipe to Dismiss)| m-collection:dismiss | | Collection with links | m-collection:sec | ### Dialogs | Component | Snippet code | |---------------------------| :-----------------------------:| | Toast | m-toast | | Toast(Action) | m-toast:action | | Tooltip | m-tooltip | ### Dropdown | Component | Snippet code | |---------------------------| :-----------------------------:| | Dropdown | m-dropdown | | Dropdown(hover) | m-dropdown:hover | ### Footer | Component | Snippet code | |---------------------------| :-----------------------------:| | Footer | m-footer | | Sticky footer | m-sticky-footer:css | *Sticky footer contains CSS code for implementing a sticky footer. ### Grid | Component | Snippet code | |---------------------------| :-----------------------------:| | Column(Promo) | m-col:promo | | Column | m-col | | Column 1 | m-col:1 | | Column 2 | m-col:2 | | Column 3 | m-col:3 | | Column 4 | m-col:4 | | Column 5 | m-col:5 | | Column 6 | m-col:6 | | Column 7 | m-col:7 | | Column 8 | m-col:8 | | Column 9 | m-col:9 | | Column 10 | m-col:10 | | Column 11 | m-col:11 | | Column 12 | m-col:12 | ### Helpers | Component | Snippet code | |---------------------------| :-----------------------------:| | Align | m-align | | Align Righ | m-right-align | | Align Left | m-left-align | | Align Center | m-center-align | | Align Vertical | m-valign | | Vertical Align Wrapper | m-valign-wrapper | | Float Right | m-right | | Float Left | m-left | | Hidden for Desktop Only | m-hide:desktop | | Hidden for Tablet and Below | m-hide:tablet-down | | Hidden for Tablet and Above | m-hide:tablet-up | | Hidden for Tablet Only | m-hide:tablet | | Hidden for Mobile Only | m-hide:mobile | | Hidden for all Devices | m-hide | | Truncate | m-truncate | ### Icons | Component | Snippet code | |---------------------------| :-----------------------------:| | Icon | m-icon | | Icon(large) | m-icon:lg | | Icon(medium) | m-icon:md | | Icon(small) | m-icon:sm | | Icon(tiny) | m-icon:tiny | ### JS | Component | Snippet code | |---------------------------| :-----------------------------:| | Scrollfire | m-scrollfire | | Pushpin | m-pushpin | | Navbar-slideout-js | m-navbar:slideout-js | *Remember to precede Navbar-slideout-js with the "$" sign ### Media | Component | Snippet code | |---------------------------| :-----------------------------:| | Material Box | m-materialbox | | Material Box(caption) | m-materialbox:caption | | Slider | m-slider | ### Modal | Component | Snippet code | |---------------------------| :-----------------------------:| | Modal | m-modal | | Modal(fixed-footer) | m-modal:fixed-footer | ### Navbar | Component | Snippet code | |----------------------------| :-----------------------------:| | Navbar | m-navbar | | Navbar(center) | m-navbar:center | | Navbar(collapse) | m-navbar:collapse | | Navbar(fixed) | m-navbar:fixed | | Navbar-icon | m-navbar:icon | | Navbar-text-icon | m-navbar:icon-text | | Navbar(left) | m-navbar:left | | Navbar(right) | m-navbar:right | | Navbar(search) | m-navbar:search | | Navbar(slideout) | m-navbar:slideout | | Navbar(slideout-dropdown) | m-navbar:slideout-dropdown | | Navbar(slideout-fixed) | m-navbar:slideout-fixed | | Navbar(slideout-fullscreen)| m-navbar:slideout-fullscreen | ### Pagination | Component | Snippet code | |---------------------------| :-----------------------------:| | Basic Pagination | m-pagination | ### Parallax | Component | Snippet code | |---------------------------| :-----------------------------:| | Parallax | m-parallax | ### Progress Bar | Component | Snippet code | |---------------------------| :-----------------------------:| | Circular progress bar | m-progress-bar:circular | | Determinate progress bar | m-progress-bar:determinate | | Indeterminate progress bar| m-progress-bar:indeterminate | | Rainbow progress bar | m-progress-bar:rainbow | ### Scroll | Component | Snippet code | |---------------------------| :-----------------------------:| | Scroll Spy | m-scrollspy | ### Toast | Component | Snippet code | |-------------------------------------------------| :-----------------------------:| | Toast dialog | m-toast | | Toast dialog js (programatically call a toast) | m-toast-js | ### Tab | Component | Snippet code | |---------------------------| :-----------------------------:| | Tab | m-tab | ### Typography | Component | Snippet code | |---------------------------| :-----------------------------:| | Text-flow | m-flow-text | ### Breadcrumps | Component | Snippet code | |---------------------------| :-----------------------------:| | Breadcrumps | m-breadcrumps | ### Chips ##### for tags and contacts | Component | Snippet code | |------------------------------| :----------------------------:| | Contacts chip | m-breadcrumps | | Tags chip | m-breadcrumps | # Very Important When using the Materialize CSS versions below release v0.97.0, append ``-o`` eg. ``m-lg-button-o`` will produce the old icon implementation ````.