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

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

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

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

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