This Materialized sublime plugin contains snippets of Materialized CSS components. Hope it improves your workflow. :)
Contribute as much as you can via
Fork, clone, correct and send me a pull request or file any issues. No contribution is small.
- 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
There are 3 fun ways for installing this plugin.
-
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
-
Clone the repository into your Sublime Text 2/3 packages directory. `git clone https://github.com/ayinloya/materialized-css-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.
Press tab after typing the following snippet codes
Component | Snippet code |
---|---|
CDN Link(both CSS & JS) | m-cdn |
CDN link (CSS only) | m-cdn:css |
CDN link (JS only) | m-cdn:js |
Component | Snippet code |
---|---|
HTML5 Template Layout | m-template:html |
HTML5 Parallax Template Layout | m-template:parallax |
HTML5 starter Template Layout | m-template:starter |
Component | Snippet code |
---|---|
Form | m-form |
Registation form | m-form:register |
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 |
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 |
Component | Snippet code |
---|---|
Badge | m-badge |
Old badge | m-badge-o |
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 |
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 |
Component | Snippet code |
---|---|
Collapsible(single select) | m-collapsible |
Collapsible(multiple select) | m-collapsible:expandable |
Collapsible(default active) | m-collapsible:selected |
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 |
Component | Snippet code |
---|---|
Toast | m-toast |
Toast(Action) | m-toast:action |
Tooltip | m-tooltip |
Component | Snippet code |
---|---|
Dropdown | m-dropdown |
Dropdown(hover) | m-dropdown:hover |
Component | Snippet code |
---|---|
Footer | m-footer |
Sticky footer | m-sticky-footer:css |
*Sticky footer contains CSS code for implementing a sticky footer.
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 |
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 |
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 |
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
Component | Snippet code |
---|---|
Material Box | m-materialbox |
Material Box(caption) | m-materialbox:caption |
Slider | m-slider |
Component | Snippet code |
---|---|
Modal | m-modal |
Modal(fixed-footer) | m-modal:fixed-footer |
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 |
Component | Snippet code |
---|---|
Basic Pagination | m-pagination |
Component | Snippet code |
---|---|
Parallax | m-parallax |
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 |
Component | Snippet code |
---|---|
Scroll Spy | m-scrollspy |
Component | Snippet code |
---|---|
Toast dialog | m-toast |
Toast dialog js (programatically call a toast) | m-toast-js |
Component | Snippet code |
---|---|
Tab | m-tab |
Component | Snippet code |
---|---|
Text-flow | m-flow-text |
Component | Snippet code |
---|---|
Breadcrumps | m-breadcrumps |
Component | Snippet code |
---|---|
Contacts chip | m-breadcrumps |
Tags chip | m-breadcrumps |
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>
.