Materialized CSS Snippets

by ayinloya ALL

Materialized CSS Package for sublime text 2/3

Labels snippets, css, materialized, material

Details

Version 1.1.1
Homepage github.com
Issues github.com
Modified 8 years ago
Last Seen 19 minutes ago
First Seen 11 years ago

Installs

Total 18K
Win 12K
Mac 3K
Linux 3K

	Oct 25	Oct 24	Oct 23	Oct 22	Oct 21	Oct 20	Oct 19	Oct 18	Oct 17	Oct 16	Oct 15	Oct 14	Oct 13	Oct 12	Oct 11	Oct 10	Oct 9	Oct 8	Oct 7	Oct 6	Oct 5	Oct 4	Oct 3	Oct 2	Oct 1	Sep 30	Sep 29	Sep 28	Sep 27	Sep 26	Sep 25	Sep 24	Sep 23	Sep 22	Sep 21	Sep 20	Sep 19	Sep 18	Sep 17	Sep 16	Sep 15	Sep 14	Sep 13	Sep 12	Sep 11
Windows	1	0	1	1	0	0	0	0	0	1	0	0	0	0	1	0	1	0	0	0	0	0	0	1	0	1	0	0	1	0	1	0	0	0	0	0	1	0	0	0	0	1	0	0	1
Mac	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0

Readme

Source: raw.githubusercontent.com

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

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.

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
Highlight Table	m-table:highlight

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