Materialized CSS Package for sublime text 2/3
HTML
Permalink
Failed to load latest commit information.
badges Added badges with custom caption Sep 8, 2016
breadcrumps Added breadcrumps Dec 17, 2015
button Correct m-lg-button description Oct 31, 2016
cards Made correction to bugs in registration form snippets Sep 22, 2015
cdn Merge branch 'master' of github.com:ayinloya/materialized-css-snippet… Jan 12, 2017
chip Added breadcrumps Dec 17, 2015
collapsible Added collapsible popout Dec 17, 2015
collections added support for add materialize css icons implementation Aug 18, 2015
dialogs Added descriptions to toast and dropdown snippets Dec 17, 2016
dropdown Added descriptions to toast and dropdown snippets Dec 17, 2016
footer Fixed indention for dropdown, footer and forms folders Jul 5, 2015
forms 1. Select: Jan 12, 2017
grid Added more column snippets Jul 13, 2016
helpers Added helpers Jul 13, 2016
icon added support for add materialize css icons implementation Aug 18, 2015
js Made correction to bugs in registration form snippets Sep 22, 2015
media Fix materialboxe caption Jul 23, 2016
messages 1. Select: Jan 12, 2017
modal Fixed indention for media, modal, pagination, parallax, scroll, tabs … Jul 5, 2015
navbar added support for add materialize css icons implementation Aug 18, 2015
pagination added support for add materialize css icons implementation Aug 18, 2015
parallax Fixed indention for media, modal, pagination, parallax, scroll, tabs … Jul 5, 2015
progressbar Fixed indention for navbar, progressbar, table and template folders Jul 5, 2015
scroll Fixed indention for media, modal, pagination, parallax, scroll, tabs … Jul 5, 2015
table Fixed indention for navbar, progressbar, table and template folders Jul 5, 2015
tabs Fixed indention for media, modal, pagination, parallax, scroll, tabs … Jul 5, 2015
template added support for add materialize css icons implementation Aug 18, 2015
typography Fixed indention for media, modal, pagination, parallax, scroll, tabs … Jul 5, 2015
.gitignore made corrections to triggers Mar 15, 2015
LICENSE Initial commit Mar 15, 2015
README.md 1. Select: Jan 12, 2017
messages.json 1. Select: Jan 12, 2017

README.md

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

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

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

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