Atom Packages Directory

a package directory for a text editor of the 21st Century

Materialize Css

Install with:
    apm install materialize-css

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 - 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


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


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

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


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

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


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


##### 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>.

Keywords: material, materialize, snippets, auto complete, materialize css Suggest keywords
Fork me on GitHub