materialize-css
Snippets of Materialize CSS components. Hope it improves your workflow. :)
materialize-css package
Materialize - Atom Plugin
This Materialize atom plugin contains snippets of Materialize 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.
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
In order to install this package, you can use the Install tab in the now familiar Settings View. Open up the Settings View using Ctrl+, click on the "Install" tab and type your Materialize css into the box under Install 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 |
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 |
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 Right | m-align:right |
| Align Left | m-align:left |
| Align Center | m-align:center |
| 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-chip:contact |
| Tags chip | m-chip:tag |
Very Important
Most content for v0.97.0 are no longer available
For material v0.97.0 and below, 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>.