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
• 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
• CDN
• Templates for html5
• Forms
• Tables
• Input Fields
• Badges
• Buttons
• Cards
• Collapsible
• Collections
• Dialogs
• Dropdown
• Footer
• Grid
• Icons
• JS
• Media
• Modal
• Navbar
• Pagination
• Progress Bar
• Scroll
• Tab
• 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

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 <button type="button" class="waves-effect waves-light btn-large"><i class="mdi-file-cloud right"></i></button>.