├── .gitignore
├── LICENSE
├── README.md
├── badges
    ├── m-badge-caption.sublime-snippet
    ├── m-badge-new-caption.sublime-snippet
    ├── m-badge-o.sublime-snippet
    └── m-badge.sublime-snippet
├── breadcrumps
    └── m-breadcrumps.sublime-snippet
├── button
    ├── m-disabled-button-o.sublime-snippet
    ├── m-disabled-button.sublime-snippet
    ├── m-fixed-floating-button-o.sublime-snippet
    ├── m-fixed-floating-button.sublime-snippet
    ├── m-fixed-floating-horizontal-button-o.sublime-snippet
    ├── m-fixed-floating-horizontal-button.sublime-snippet
    ├── m-flat-button-o.sublime-snippet
    ├── m-flat-button.sublime-snippet
    ├── m-floating-button-o.sublime-snippet
    ├── m-floating-button.sublime-snippet
    ├── m-icon-content-o.sublime-snippet
    ├── m-lg-button-o.sublime-snippet
    ├── m-lg-button.sublime-snippet
    ├── m-raised-button-icon-o.sublime-snippet
    ├── m-raised-button-icon.sublime-snippet
    ├── m-raised-button.sublime-snippet
    ├── m-submit-button-o.sublime-snippet
    └── m-submit-button.sublime-snippet
├── cards
    ├── m-basic-card.sublime-snippet
    ├── m-image-card.sublime-snippet
    ├── m-lg-basic-card.sublime-snippet
    ├── m-lg-revile-card-o.sublime-snippet
    ├── m-lg-revile-card.sublime-snippet
    ├── m-md-basic-card.sublime-snippet
    ├── m-md-revile-card-o.sublime-snippet
    ├── m-md-revile-card.sublime-snippet
    ├── m-panel-card.sublime-snippet
    ├── m-revile-card-o.sublime-snippet
    ├── m-revile-card.sublime-snippet
    ├── m-sm-basic-card.sublime-snippet
    ├── m-sm-revile-card-o.sublime-snippet
    └── m-sm-revile-card.sublime-snippet
├── cdn
    ├── index.html
    ├── m-cdn-css.sublime-snippet
    ├── m-cdn-google-icons.sublime-snippet
    ├── m-cdn-jquery.sublime-snippet
    ├── m-cdn-js.sublime-snippet
    └── m-cdn.sublime-snippet
├── chip
    ├── m-chip-contacts.sublime-snippet
    └── m-chip-tags.sublime-snippet
├── collapsible
    ├── m-collapsible-expandable-o.sublime-snippet
    ├── m-collapsible-expandable.sublime-snippet
    ├── m-collapsible-o.sublime-snippet
    ├── m-collapsible-popout.sublime-snippet
    ├── m-collapsible-selected-o.sublime-snippet
    ├── m-collapsible-selected.sublime-snippet
    └── m-collapsible.sublime-snippet
├── collections
    ├── m-avatar-collection-o.sublime-snippet
    ├── m-avatar-collection.sublime-snippet
    ├── m-basic-collection.sublime-snippet
    ├── m-dismiss-collection-o.sublime-snippet
    ├── m-dismiss-collection.sublime-snippet
    ├── m-sec-collection-o.sublime-snippet
    └── m-sec-collection.sublime-snippet
├── dialogs
    ├── m-toast-action.sublime-snippet
    ├── m-toast-js.sublime-snippet
    ├── m-toast.sublime-snippet
    └── m-tooltip.sublime-snippet
├── dropdown
    ├── m-dropdown-hover.sublime-snippet
    └── m-dropdown.sublime-snippet
├── footer
    ├── m-footer.sublime-snippet
    └── m-sticky-footer.sublime-snippet
├── forms
    ├── m-form.sublime-snippet
    ├── m-input-checkbox-filled.sublime-snippet
    ├── m-input-checkbox.sublime-snippet
    ├── m-input-custom-messages.sublime-snippet
    ├── m-input-date.sublime-snippet
    ├── m-input-file.sublime-snippet
    ├── m-input-radio-gap.sublime-snippet
    ├── m-input-radio-group.sublime-snippet
    ├── m-input-radio.sublime-snippet
    ├── m-input-range.sublime-snippet
    ├── m-input-select-default-disabled.sublime-snippet
    ├── m-input-select-default.sublime-snippet
    ├── m-input-select-disabled.sublime-snippet
    ├── m-input-select-grouped.sublime-snippet
    ├── m-input-select-icon-left.sublime-snippet
    ├── m-input-select-icon-right.sublime-snippet
    ├── m-input-select-multiple.sublime-snippet
    ├── m-input-select.sublime-snippet
    ├── m-input-switch-disabled.sublime-snippet
    ├── m-input-switch.sublime-snippet
    ├── m-input-text-icon-o.sublime-snippet
    ├── m-input-text-icon.sublime-snippet
    ├── m-input-text.sublime-snippet
    ├── m-input-textarea-icon-o.sublime-snippet
    ├── m-input-textarea-icon.sublime-snippet
    ├── m-input-textarea.sublime-snippet
    ├── m-registration-form-o.sublime-snippet
    └── m-registration-form.sublime-snippet
├── grid
    ├── m-col-1.sublime-snippet
    ├── m-col-10.sublime-snippet
    ├── m-col-11.sublime-snippet
    ├── m-col-12.sublime-snippet
    ├── m-col-2.sublime-snippet
    ├── m-col-3.sublime-snippet
    ├── m-col-4.sublime-snippet
    ├── m-col-5.sublime-snippet
    ├── m-col-6.sublime-snippet
    ├── m-col-7.sublime-snippet
    ├── m-col-8.sublime-snippet
    ├── m-col-9.sublime-snippet
    ├── m-col-promo.sublime-snippet
    └── m-col.sublime-snippet
├── helpers
    ├── align.sublime-snippet
    ├── center-align.sublime-snippet
    ├── float-left.sublime-snippet
    ├── float-right.sublime-snippet
    ├── hide-on-large-only.sublime-snippet
    ├── hide-on-med-and-down.sublime-snippet
    ├── hide-on-med-and-up.sublime-snippet
    ├── hide-on-med-only.sublime-snippet
    ├── hide-on-small-only.sublime-snippet
    ├── hide.sublime-snippet
    ├── left-align.sublime-snippet
    ├── right-align.sublime-snippet
    ├── truncate.sublime-snippet
    ├── valign-wrapper.sublime-snippet
    └── valign.sublime-snippet
├── icon
    ├── m-icon-3d-rotation.sublime-snippet
    ├── m-icon-accessibility.sublime-snippet
    ├── m-icon-action.sublime-snippet
    ├── m-icon-alert-error.sublime-snippet
    ├── m-icon-av.sublime-snippet
    ├── m-icon-communication.sublime-snippet
    ├── m-icon-content.sublime-snippet
    ├── m-icon-device.sublime-snippet
    ├── m-icon-editor.sublime-snippet
    ├── m-icon-file.sublime-snippet
    ├── m-icon-hardware.sublime-snippet
    ├── m-icon-image.sublime-snippet
    ├── m-icon-large-o.sublime-snippet
    ├── m-icon-large.sublime-snippet
    ├── m-icon-maps.sublime-snippet
    ├── m-icon-medium-o.sublime-snippet
    ├── m-icon-medium.sublime-snippet
    ├── m-icon-navigation-menu.sublime-snippet
    ├── m-icon-navigation.sublime-snippet
    ├── m-icon-notification.sublime-snippet
    ├── m-icon-o.sublime-snippet
    ├── m-icon-small-o.sublime-snippet
    ├── m-icon-small.sublime-snippet
    ├── m-icon-social.sublime-snippet
    ├── m-icon-tiny-o.sublime-snippet
    ├── m-icon-tiny.sublime-snippet
    ├── m-icon-toggle.sublime-snippet
    └── m-icon.sublime-snippet
├── js
    ├── m-pushpin.sublime-snippet
    ├── m-scrollfire.sublime-snippet
    └── m-slideout-js.sublime-snippet
├── media
    ├── m-materialbox-caption.sublime-snippet
    ├── m-materialbox.sublime-snippet
    └── m-slider.sublime-snippet
├── messages.json
├── messages
    ├── 1.0.1.txt
    ├── 1.0.10.txt
    ├── 1.0.2.txt
    ├── 1.0.5.txt
    ├── 1.0.6.txt
    ├── 1.0.7.txt
    ├── 1.0.8.txt
    ├── 1.0.9.txt
    ├── 1.1.0.txt
    ├── 1.1.1.txt
    └── install.txt
├── modal
    ├── m-modal-fixed-footer.sublime-snippet
    └── m-modal.sublime-snippet
├── navbar
    ├── m-navbar-center.sublime-snippet
    ├── m-navbar-collapse.sublime-snippet
    ├── m-navbar-fixed.sublime-snippet
    ├── m-navbar-icon-text.sublime-snippet
    ├── m-navbar-icons.sublime-snippet
    ├── m-navbar-left.sublime-snippet
    ├── m-navbar-o.sublime-snippet
    ├── m-navbar-right.sublime-snippet
    ├── m-navbar-search-o.sublime-snippet
    ├── m-navbar-search.sublime-snippet
    ├── m-navbar-slideout-dropdown.sublime-snippet
    ├── m-navbar-slideout-fixed.sublime-snippet
    ├── m-navbar-slideout-fullscreen.sublime-snippet
    ├── m-navbar-slideout-o.sublime-snippet
    ├── m-navbar-slideout.sublime-snippet
    └── m-navbar.sublime-snippet
├── pagination
    ├── m-basic-pagination-o.sublime-snippet
    └── m-basic-pagination.sublime-snippet
├── parallax
    └── m-parallax.sublime-snippet
├── progressbar
    ├── m-progress-bar-circular.sublime-snippet
    ├── m-progress-bar-determinate.sublime-snippet
    ├── m-progress-bar-indeterminate.sublime-snippet
    └── m-progress-bar-rainbow.sublime-snippet
├── scroll
    └── m-scrollspy.sublime-snippet
├── table
    ├── m-table-bordered.sublime-snippet
    ├── m-table-centered.sublime-snippet
    ├── m-table-highlight.sublime-snippet
    ├── m-table-hoverable.sublime-snippet
    ├── m-table-responsive.sublime-snippet
    ├── m-table-striped.sublime-snippet
    └── m-table.sublime-snippet
├── tabs
    └── m-tabs.sublime-snippet
├── template
    ├── m-template-html-o.sublime-snippet
    ├── m-template-html.sublime-snippet
    ├── m-template-parallax-o.sublime-snippet
    ├── m-template-parallax.sublime-snippet
    ├── m-template-starter-o.sublime-snippet
    └── m-template-starter.sublime-snippet
└── typography
    └── m-flow-text.sublime-snippet


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /try


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Barnabas A Nsoh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | Materialized - Sublime Plugin
  2 | =============================
  3 | 
  4 | This Materialized sublime plugin contains snippets of Materialized CSS components.
  5 | Hope it improves your workflow. :)
  6 | 
  7 | Contribute as much as you can via
  8 | - Twitter [@ayinloya](https://twitter.com/ayinloya)
  9 | - [Issues](https://github.com/ayinloya/materialized-css-snippets/issues)
 10 | 
 11 | Fork, clone, correct and send me a pull request  or file any issues. 
 12 | No contribution is small.
 13 | 
 14 | 
 15 | ## Here is a list of whats available
 16 | - [Installation](#installation)
 17 | - [CDN](#cdn)
 18 | - [Templates for html5](#templates)
 19 | - [Forms](#forms)
 20 | - [Tables](#tables)
 21 | - [Input Fields](#input-fields-form-fields)
 22 | - [Badges](#badges)
 23 | - [Buttons](#buttons)
 24 | - [Cards](#cards)
 25 | - [Collapsible](#collapsible)
 26 | - [Collections](#collections)
 27 | - [Dialogs](#dialogs)
 28 | - [Dropdown](#dropdown)
 29 | - [Footer](#footer)
 30 | - [Grid](#grid)
 31 | - [Icons](#icons)
 32 | - [JS](#js)
 33 | - [Media](#media)
 34 | - [Modal](#modal)
 35 | - [Navbar](#navbar)
 36 | - [Pagination](#pagination)
 37 | - [Progress Bar](#progress-bar)
 38 | - [Scroll](#scroll)
 39 | - [Tab](#tab)
 40 | - [Typography](#typography)
 41 | - License
 42 | 
 43 | ### Installation
 44 | 
 45 | There are 3 fun ways for installing this plugin.
 46 | 
 47 | 1. Search for "Materialized CSS Snippets" via the "Package Control: Install Packages" menu.
 48 | **Note:** If you don't have Sublime Package Control installed, you can find out how to install it here [https://packagecontrol.io/installation](https://packagecontrol.io/installation)
 49 | 
 50 | 2. Clone the repository into your Sublime Text 2/3 packages directory.
 51 | `git clone https://github.com/ayinloya/materialized-css-snippets.git
 52 | 
 53 | 3. Download the .zip file and unzip it into your Sublime Text 2/3 packages directory.
 54 | **Note:** You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.
 55 | 
 56 | ### Some examples on how to use this plugin.
 57 | Press tab after typing the following snippet codes
 58 | 
 59 | 
 60 | ### CDN
 61 | 
 62 | | Component                     |Snippet code 		   |
 63 | |-------------------------------|:------------------:|
 64 | | CDN Link(both CSS & JS)   	  |  m-cdn             |
 65 | | CDN link (CSS only)       	  | m-cdn:css          |
 66 | | CDN link (JS only)       		  | m-cdn:js           |
 67 | 
 68 | ### Templates
 69 | 
 70 | | Component                       | Snippet code                 |
 71 | |---------------------------------| :---------------------------:|
 72 | | HTML5 Template Layout           | m-template:html              |
 73 | | HTML5 Parallax Template Layout  | m-template:parallax          |
 74 | | HTML5 starter Template Layout   | m-template:starter           |
 75 | 
 76 | ### Forms
 77 | 
 78 | | Component                 | Snippet code                   |
 79 | |---------------------------| :-----------------------------:|
 80 | | Form                      | m-form                         |
 81 | | Registation form          | m-form:register                |
 82 | 
 83 | ### Tables
 84 | 
 85 | | Component                 | Snippet code                   |
 86 | |---------------------------| :-----------------------------:|
 87 | | Table                     | m-table                        |
 88 | | Bordered Table            | m-table:bordered               |
 89 | | Center Table              | m-table:centered               |
 90 | | Hover Table               | m-table:hover                  |
 91 | | Responsive Table          | m-table:responsive             |
 92 | | Striped Table             | m-table:striped                |
 93 | | Highlight Table           | m-table:highlight                |
 94 | 
 95 | ### Input Fields (Form fields)
 96 | 
 97 | | Component                                                    | Snippet code                   |
 98 | |--------------------------------------------------------------| :-----------------------------:|
 99 | | Input with custom input error and success messages           | m-input:textarea               |
100 | | Text-Area Input                                              | m-input:textarea               |
101 | | Text-area Input Icon                                         | m-input:textarea-icon          |
102 | | Text Input                                                   | m-input:text                   |
103 | | Text Input Icon                                              | m-input:text-icon              |
104 | | Checkbox                                                     | m-input:checkbox               |
105 | | Checkbox filled                                              | m-input:checkbox-fill          |
106 | | Date Picker                                                  | m-input:date                   |
107 | | File Input                                                   | m-input:file                   |
108 | | Radio Button                                                 | m-input:radio                  |
109 | | Radio Button with Gap                                        | m-input:radio-gap              |
110 | | Radio Button group                                           | m-input:radio-group            |
111 | | Range Input                                                  | m-input:range                  |
112 | | Select Box                                                   | m-input:select                 |
113 | | Select Box-disabled                                          | m-input:select-disabled        |
114 | | Select Box browser default                                   | m-input:select-default         |
115 | | Select Box browser default-disabled                          | m-input:select-default-disabled|
116 | | Select Box group                                             | m-input:select-group           |
117 | | Select Box with image icon                                   | m-input:select-icon            |
118 | | Select Box with left image icon                              | m-input:select-icon-left       |
119 | | Select Box multiselect                                       | m-input:select-multiple        |
120 | | Switch                                                       | m-input:switch         |
121 | | Switch-disabled                                              | m-input:switch-disabled        |
122 | 
123 | ### Badges
124 | 
125 | | Component                 | Snippet code                   |
126 | |---------------------------| :-----------------------------:|
127 | | Badge                     | m-badge                        |
128 | | Old badge                 | m-badge-o                      |
129 | 
130 | ### Buttons
131 | 
132 | | Component                               | Snippet code                        |
133 | |-----------------------------------------| :----------------------------------:|
134 | | Button-disabled                         | m-button:disabled                   |
135 | | Fixed Floating Button                   | m-fixed-floating-button             |
136 | | Fixed Floating Button - horizontal      | m-fixed-floating-button:horizontal  |
137 | | Flat Button                             | m-button:flat                       |
138 | | Floating Button                         | m-button:floating                   |
139 | | Large Button                            | m-lg-button                         |
140 | | Raised Button                           | m-raised-button                     |
141 | | Raised Button Icon                      | m-raised-button:icon                |
142 | | Submit Button                           | m-submit-button                     |
143 | 
144 | ### Cards
145 | 
146 | | Component                 | Snippet code                   | 
147 | |---------------------------| :-----------------------------:| 
148 | | Default card              | m-card                         | 
149 | | Image card                | m-image-card                   |
150 | | Panel card                | m-panel-card                   |
151 | | Revile card               | m-revile-card                  |
152 | | Default card(large)       | m-card:lg                      |
153 | | Default card(medium)      | m-card:md                      |
154 | | Default card(small)       | m-card:sm                      |
155 | | Revile card(large)        | m-revile-card:lg               |
156 | | Revile card(medium)       | m-revile-card:md               |
157 | | Revile card(small)        | m-revile-card:sm               |
158 | 
159 | ### Collapsible
160 | 
161 | | Component                   | Snippet code                 |
162 | |-----------------------------| :---------------------------:|
163 | | Collapsible(single select)  | m-collapsible                |
164 | | Collapsible(multiple select)| m-collapsible:expandable     |
165 | | Collapsible(default active) | m-collapsible:selected       |
166 | 
167 | ### Collections
168 | 
169 | | Component                   | Snippet code                 |
170 | |-----------------------------| :---------------------------:|
171 | | Basic Collection            | m-collection                 |
172 | | Collection with avatar      | m-collection:avatar          |
173 | | Collection(Swipe to Dismiss)| m-collection:dismiss         |
174 | | Collection with links       | m-collection:sec             |
175 | 
176 | ### Dialogs
177 | 
178 | | Component                 | Snippet code                   |
179 | |---------------------------| :-----------------------------:|
180 | | Toast                     | m-toast                        |
181 | | Toast(Action)             | m-toast:action                 |
182 | | Tooltip                   | m-tooltip                      |
183 | 
184 | ### Dropdown
185 | 
186 | | Component                 | Snippet code                   |
187 | |---------------------------| :-----------------------------:|
188 | | Dropdown                  | m-dropdown                     |
189 | | Dropdown(hover)           | m-dropdown:hover               |
190 | 
191 | ### Footer
192 | 
193 | | Component                 | Snippet code                   |
194 | |---------------------------| :-----------------------------:|
195 | | Footer                    | m-footer                       |
196 | | Sticky footer             | m-sticky-footer:css            |
197 | 
198 | *Sticky footer contains CSS code for implementing a sticky footer.
199 | 
200 | 
201 | ### Grid
202 | 
203 | | Component                 | Snippet code                   |
204 | |---------------------------| :-----------------------------:|
205 | | Column(Promo)             | m-col:promo                    |
206 | | Column                    | m-col                          |
207 | | Column 1                  | m-col:1                        |
208 | | Column 2                  | m-col:2                        |
209 | | Column 3                  | m-col:3                        |
210 | | Column 4                  | m-col:4                        |
211 | | Column 5                  | m-col:5                        |
212 | | Column 6                  | m-col:6                        |
213 | | Column 7                  | m-col:7                        |
214 | | Column 8                  | m-col:8                        |
215 | | Column 9                  | m-col:9                        |
216 | | Column 10                | m-col:10                        |
217 | | Column 11                | m-col:11                        |
218 | | Column 12                | m-col:12                        |
219 | 
220 | 
221 | ### Helpers
222 | 
223 | | Component                 | Snippet code                   |
224 | |---------------------------| :-----------------------------:|
225 | | Align                      | m-align                         |
226 | | Align Righ                     | m-right-align                         |
227 | | Align Left                      | m-left-align                         |
228 | | Align Center                     | m-center-align                         |
229 | | Align Vertical                     | m-valign                         |
230 | | Vertical Align Wrapper                     | m-valign-wrapper                         |
231 | | Float Right                      | m-right                         |
232 | | Float Left                      | m-left                         |
233 | | Hidden for Desktop Only                      | m-hide:desktop                          |
234 | | Hidden for Tablet and Below                      | m-hide:tablet-down                        |
235 | | Hidden for Tablet and Above                      | m-hide:tablet-up                         |
236 | | Hidden for Tablet Only                      | m-hide:tablet                         |
237 | | Hidden for Mobile Only                      | m-hide:mobile                         |
238 | | Hidden for all Devices                      | m-hide                         |
239 | | Truncate                      | m-truncate                         |
240 | 
241 | ### Icons
242 | 
243 | | Component                 | Snippet code                   |
244 | |---------------------------| :-----------------------------:|
245 | | Icon                      | m-icon                         |
246 | | Icon(large)               | m-icon:lg                      |
247 | | Icon(medium)              | m-icon:md                      |
248 | | Icon(small)               | m-icon:sm                      |
249 | | Icon(tiny)                | m-icon:tiny                    |
250 | 
251 | ### JS
252 | 
253 | | Component                 | Snippet code                   |
254 | |---------------------------| :-----------------------------:|
255 | | Scrollfire                |   m-scrollfire                 |
256 | | Pushpin                   |   m-pushpin                    |
257 | | Navbar-slideout-js        |   m-navbar:slideout-js         |
258 | 
259 | *Remember to precede Navbar-slideout-js with the "$" sign
260 | 
261 | ### Media
262 | 
263 | | Component                 | Snippet code                   |
264 | |---------------------------| :-----------------------------:|
265 | | Material Box              | m-materialbox                  |
266 | | Material Box(caption)     | m-materialbox:caption          |
267 | | Slider                    | m-slider                       |
268 | 
269 | ### Modal
270 | 
271 | | Component                 | Snippet code                   |
272 | |---------------------------| :-----------------------------:|
273 | | Modal                     | m-modal                        |
274 | | Modal(fixed-footer)       | m-modal:fixed-footer           |
275 | 
276 | 
277 | ### Navbar
278 | 
279 | | Component                  | Snippet code                   |
280 | |----------------------------| :-----------------------------:|
281 | | Navbar                     | m-navbar                       |
282 | | Navbar(center)             | m-navbar:center                |
283 | | Navbar(collapse)           | m-navbar:collapse              |
284 | | Navbar(fixed)              | m-navbar:fixed                 |
285 | | Navbar-icon                | m-navbar:icon                  |
286 | | Navbar-text-icon           | m-navbar:icon-text             |
287 | | Navbar(left)               | m-navbar:left                  |
288 | | Navbar(right)              | m-navbar:right                 |
289 | | Navbar(search)             | m-navbar:search                |
290 | | Navbar(slideout)           | m-navbar:slideout              |
291 | | Navbar(slideout-dropdown)  | m-navbar:slideout-dropdown     |
292 | | Navbar(slideout-fixed)     | m-navbar:slideout-fixed        |
293 | | Navbar(slideout-fullscreen)| m-navbar:slideout-fullscreen   |
294 | 
295 | 
296 | ### Pagination
297 | 
298 | | Component                 | Snippet code                   |
299 | |---------------------------| :-----------------------------:|
300 | | Basic Pagination          | m-pagination                   |
301 | 
302 | ### Parallax
303 | 
304 | | Component                 | Snippet code                   |
305 | |---------------------------| :-----------------------------:|
306 | | Parallax                  | m-parallax                     |
307 | 
308 | ### Progress Bar
309 | 
310 | | Component                 | Snippet code                   |
311 | |---------------------------| :-----------------------------:|
312 | | Circular progress bar     | m-progress-bar:circular        |
313 | | Determinate progress bar  | m-progress-bar:determinate     |
314 | | Indeterminate progress bar| m-progress-bar:indeterminate   |
315 | | Rainbow progress bar      | m-progress-bar:rainbow         |
316 | 
317 | ### Scroll
318 | 
319 | | Component                 | Snippet code                   |
320 | |---------------------------| :-----------------------------:|
321 | | Scroll Spy                | m-scrollspy                    |
322 | 
323 | ### Toast
324 | 
325 | | Component                                       | Snippet code                   |
326 | |-------------------------------------------------| :-----------------------------:|
327 | | Toast dialog                                    | m-toast                        |
328 | | Toast dialog js (programatically call a toast)  | m-toast-js                     |
329 | 
330 | ### Tab
331 | 
332 | | Component                 | Snippet code                   |
333 | |---------------------------| :-----------------------------:|
334 | | Tab                       | m-tab                          |
335 | 
336 | ### Typography
337 | 
338 | | Component                 | Snippet code                   |
339 | |---------------------------| :-----------------------------:|
340 | | Text-flow                 | m-flow-text                    |
341 | 
342 | ### Breadcrumps
343 | 
344 | | Component                 | Snippet code                   |
345 | |---------------------------| :-----------------------------:|
346 | | Breadcrumps               | m-breadcrumps                  |
347 | 
348 | ### Chips
349 | ##### for tags and contacts 
350 | | Component                 	 | Snippet code                  |
351 | |------------------------------| :----------------------------:|
352 | | Contacts chip		             | m-breadcrumps                 |
353 | | Tags chip               	   | m-breadcrumps                 |
354 | 
355 | # Very Important
356 | 
357 | When using the Materialize CSS versions below release v0.97.0, append ``-o``
358 |     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>``.
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 


--------------------------------------------------------------------------------
/badges/m-badge-caption.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <span class="badge" data-badge-caption="${1:custom caption}">${2:4}</span>
4 | ]]></content>
5 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 |   <tabTrigger>m-badge:caption</tabTrigger>
7 |   <!-- Optional: Set a scope t<description>My Fancy Snippet</description>o limit where the snippet will trigger -->
8 |   <description>Materialize badge with caption google icons</description>
9 | </snippet>


--------------------------------------------------------------------------------
/badges/m-badge-new-caption.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <span class="new badge" data-badge-caption="${1:custom caption}">${2:4}</span>
4 | ]]></content>
5 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 |   <tabTrigger>m-badge:new-caption</tabTrigger>
7 |   <!-- Optional: Set a scope t<description>My Fancy Snippet</description>o limit where the snippet will trigger -->
8 |   <description>Materialize new badge with caption and google icons</description>
9 | </snippet>


--------------------------------------------------------------------------------
/badges/m-badge-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <span class="badge">${1:Badge}</span>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-badge-o</tabTrigger>
 7 | 	<!-- Optional: Set a scope t<description>My Fancy Snippet</description>o limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.html</scope> -->
 9 | 	<description>Materialize old badge</description>
10 | </snippet>


--------------------------------------------------------------------------------
/badges/m-badge.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <span class="new badge">${1:Badge}</span>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-badge</tabTrigger>
7 | 	<!-- Optional: Set a scope t<description>My Fancy Snippet</description>o limit where the snippet will trigger -->
8 | 	<description>Materialize new badge with google icons</description>
9 | </snippet>


--------------------------------------------------------------------------------
/breadcrumps/m-breadcrumps.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <nav>
 4 |     <div class="nav-wrapper">
 5 |       <div class="col s12">
 6 |         <a href="#!" class="breadcrumb">${1:First}</a>
 7 |         <a href="#!" class="breadcrumb">${2:Second}</a>
 8 |         <a href="#!" class="breadcrumb">${3:Third}</a>
 9 |       </div>
10 |     </div>
11 |   </nav>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>m-breadcrumps</tabTrigger>
15 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
16 |   <!-- <scope>source.python</scope> -->
17 | </snippet>


--------------------------------------------------------------------------------
/button/m-disabled-button-o.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="btn${3-large} disabled">${4:<i class="mdi-content-add ${5:right}"></i>}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-button:disabled-o</tabTrigger>
6 | 	<description>Materialize diabled button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-disabled-button.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="btn${3-large} disabled">${4:<i class="material-icons ${5:right}">${6:}"></i>}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-button:disabled</tabTrigger>
6 | 	<description>Materialize diabled button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-fixed-floating-button-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
 4 | 	<${1:button} ${2:type="button"} class="btn-floating btn-large ${3:red}">
 5 | 		<i class="large mdi-editor-mode-edit"></i>
 6 | 	</${1:button}>
 7 | 	<ul>
 8 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
 9 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
10 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
11 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
12 | 	</ul>
13 | </div>
14 | 
15 | ]]></content>
16 | 	<tabTrigger>m-fixed-floating-button-o</tabTrigger>
17 | 	<description>Materialize fixed floating button</description>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/button/m-fixed-floating-button.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
 4 | 	<${1:button} ${2:type="button"} class="btn-floating btn-large ${3:red}">
 5 | 		<i class="large material-icons">mode_edit</i>
 6 | 	</${1:button}>
 7 | 	<ul>
 8 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">insert_chart</i></${1:button}></li>
 9 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">format_quote</i></${1:button}></li>
10 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">publish</i>
11 | 		</${1:button}></li>
12 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">attach_file</i></${1:button}></li>
13 | 	</ul>
14 | </div>
15 | 
16 | ]]></content>
17 | 	<tabTrigger>m-fixed-floating-button</tabTrigger>
18 | 	<description>Materialize fixed floating button with hover effects</description>
19 | </snippet>


--------------------------------------------------------------------------------
/button/m-fixed-floating-horizontal-button-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
 4 | 	<${1:button} ${2:type="button"} class="btn-floating btn-large ${3:red}">
 5 | 		<i class="large mdi-editor-mode-edit"></i>
 6 | 	</${1:button}>
 7 | 	<ul>
 8 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
 9 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
10 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
11 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="large mdi-editor-insert-chart"></i></${1:button}></li>
12 | 	</ul>
13 | </div>
14 | 
15 | ]]></content>
16 | 	<tabTrigger>m-fixed-floating-button:horizontal-o</tabTrigger>
17 | 	<description>Materialize fixed floating button</description>
18 | </snippet>


--------------------------------------------------------------------------------
/button/m-fixed-floating-horizontal-button.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
 4 | 	<${1:button} ${2:type="button"} class="btn-floating btn-large ${3:red}">
 5 | 		<i class="large material-icons">mode_edit</i>
 6 | 	</${1:button}>
 7 | 	<ul>
 8 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">insert_chart</i></${1:button}></li>
 9 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">format_quote</i></${1:button}></li>
10 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">publish</i>
11 | 		</${1:button}></li>
12 | 		<li><${1:button} ${2:type="button"} class="btn-floating ${3:red}"><i class="material-icons">attach_file</i></${1:button}></li>
13 | 	</ul>
14 | </div>
15 | 
16 | ]]></content>
17 | 	<tabTrigger>m-fixed-floating-button:horizontal</tabTrigger>
18 | 	<description>Materialize fixed floating button with hover effects</description>
19 | </snippet>


--------------------------------------------------------------------------------
/button/m-flat-button-o.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="waves-effect waves-teal btn-flat">${3:<i class="mdi-content-add"></i>}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-button:flat-o</tabTrigger>
6 | 	<description>Materialize flat button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-flat-button.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="waves-effect waves-teal btn-flat">${3:<i class="material-icons">{4:add}</i>}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-button:flat</tabTrigger>
6 | 	<description>Materialize flat button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-floating-button-o.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="btn-floating btn-large waves-effect waves-light ${3:red}"><i class="mdi-content-add"></i></${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-button:floating-o</tabTrigger>
6 | 	<description>Materialize floating button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-floating-button.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="btn-floating btn-large waves-effect waves-light ${3:red}"><i class="material-icons">add</i></${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-button:floating</tabTrigger>
6 | 	<description>Materialize floating button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-icon-content-o.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-content-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:content</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/button/m-lg-button-o.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="waves-effect waves-light btn-large">${3:<i class="mdi-file-cloud ${4:right}"></i>}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-lg-button-o</tabTrigger>
6 | 	<description>Materialize large button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-lg-button.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:button} ${2:type="button"} class="waves-effect waves-light btn-large">${3:<i class="material-icons ${4:right}">${5:cloud}</i>}</${1:button}>
4 | ]]></content>
5 |   <tabTrigger>m-lg-button</tabTrigger>
6 |   <description>Materialize large button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-raised-button-icon-o.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="waves-effect ${3:waves-light} btn">${4:<i class="mdi-file-cloud ${5:left}"></i>}${6:button}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-raised-button:icon-o</tabTrigger>
6 | 	<description>Materialize raised button with icon</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-raised-button-icon.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="waves-effect ${3:waves-light} btn">${4:<i class="material-icons ${5:left}">cloud</i>}${6:button}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-raised-button:icon</tabTrigger>
6 | 	<description>Materialize raised button with icon</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-raised-button.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="waves-effect ${3:waves-light} btn">${4:button}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-raised-button</tabTrigger>
6 | 	<description>Materialize raised button</description>
7 | </snippet>


--------------------------------------------------------------------------------
/button/m-submit-button-o.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="btn waves-effect waves-light">${3:<i class="mdi-content-send ${4:right}"></i>}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-submit-button-o</tabTrigger>
6 | 	<description>Materialize submit button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/button/m-submit-button.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <${1:button} ${2:type="button"} class="btn waves-effect waves-light">${3:<i class="material-icons ${4:right}">send</i>}</${1:button}>
4 | ]]></content>
5 | 	<tabTrigger>m-submit-button</tabTrigger>
6 | 	<description>Materialize submit button</description>
7 | </snippet>
8 | 


--------------------------------------------------------------------------------
/cards/m-basic-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<div class="col s12 m6">
 5 | 		<div class="card blue-grey darken-1">
 6 | 			<div class="card-content white-text">
 7 | 				<span class="card-title">${1:Card Title}</span>
 8 | 				<p>${2:I am a very simple card. I am good at containing small bits of information.
 9 | 				I am convenient because I require little markup to use effectively.}</p>
10 | 			</div>
11 | 			<div class="card-action">
12 | 				<a href="#">${3:This is a link}</a>
13 | 			</div>
14 | 		</div>
15 | 	</div>
16 | </div>
17 | ]]></content>
18 | 	<tabTrigger>m-card</tabTrigger>
19 | 	<description>Materialize basic card</description>
20 | </snippet>


--------------------------------------------------------------------------------
/cards/m-image-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<div class="col s12 m7">
 5 | 		<div class="card">
 6 | 			<div class="card-image">
 7 | 				<img src="${1:images/sample-1.jpg}">
 8 | 				<span class="card-title">${2:Card Title}</span>
 9 | 			</div>
10 | 			<div class="card-content">
11 | 				<p>${3:I am a very simple card. I am good at containing small bits of information.
12 | 				I am convenient because I require little markup to use effectively.}</p>
13 | 			</div>
14 | 			<div class="card-action">
15 | 				<a href="#">${4:This is a link}</a>
16 | 			</div>
17 | 		</div>
18 | 	</div>
19 | </div>
20 | ]]></content>
21 | 	<tabTrigger>m-image-card</tabTrigger>
22 | 	<description>Materialize image card</description>
23 | </snippet>


--------------------------------------------------------------------------------
/cards/m-lg-basic-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<div class="col s12 m6">
 5 | 		<div class="card large blue-grey darken-1">
 6 | 			<div class="card-content white-text">
 7 | 				<span class="card-title">${1:Card Title}</span>
 8 | 				<p>${2:I am a very simple card. I am good at containing small bits of information.
 9 | 					I am convenient because I require little markup to use effectively.}</p>
10 | 			</div>
11 | 			<div class="card-action">
12 | 				<a href="#">${3:This is a link}</a>
13 | 			</div>
14 | 		</div>
15 | 	</div>
16 | </div>
17 | ]]></content>
18 | 	<tabTrigger>m-card:lg</tabTrigger>
19 | 	<description>Materialize basic large card</description>
20 | </snippet>


--------------------------------------------------------------------------------
/cards/m-lg-revile-card-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card large">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="mdi-navigation-more-vert right"></i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="mdi-navigation-close right"></i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card:lg-o</tabTrigger>
18 | 	<description>Materialize revile large card with old icon</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cards/m-lg-revile-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card large">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="material-icons right">more_vert</i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="material-icons right">close</i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card:lg</tabTrigger>
18 | 	<description>Materialize revile large card</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cards/m-md-basic-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 |  <div class="row">
 4 | 	<div class="col 1:s12 m6">
 5 | 		<div class="card medium blue-grey darken-1">
 6 | 			<div class="card-content white-text">
 7 | 				<span class="card-title">${1:Card Title}</span>
 8 | 				<p>${2:I am a very simple card. I am good at containing small bits of information.
 9 | 					I am convenient because I require little markup to use effectively.}</p>
10 | 			</div>
11 | 			<div class="card-action">
12 | 				<a href="#">${3:This is a link}</a>
13 | 			</div>
14 | 		</div>
15 | 	</div>
16 | </div>
17 | ]]></content>
18 | 	<tabTrigger>m-card:md</tabTrigger>
19 | 	<description>Materialize basic medium card</description>
20 | </snippet>


--------------------------------------------------------------------------------
/cards/m-md-revile-card-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card medium">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="mdi-navigation-more-vert right"></i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="mdi-navigation-close right"></i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card:md-o</tabTrigger>
18 | 	<description>Materialize revile medium card old icons</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cards/m-md-revile-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card medium">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="material-icons right">more_vert</i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="material-icons right">cose</i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card:md</tabTrigger>
18 | 	<description>Materialize revile medium card</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cards/m-panel-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<div class="col s12 m5">
 5 | 		<div class="card-panel teal">
 6 | 			<span class="white-text">${1:I am a very simple card. I am good at containing small bits of information.
 7 | 				I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.}
 8 | 			</span>
 9 | 		</div>
10 | 	</div>
11 | </div>
12 | ]]></content>
13 | 	<tabTrigger>m-panel-card</tabTrigger>
14 | 	<description>Materialize panel card</description>
15 | </snippet>


--------------------------------------------------------------------------------
/cards/m-revile-card-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="mdi-navigation-more-vert right"></i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="mdi-navigation-close right"></i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card-o</tabTrigger>
18 | 	<description>Materialize revile card</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cards/m-revile-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="material-icons right">more_vert</i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="material-icons right"close></i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card</tabTrigger>
18 | 	<description>Materialize revile card</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cards/m-sm-basic-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<div class="col s12 m6">
 5 | 		<div class="card small blue-grey darken-1">
 6 | 			<div class="card-content white-text">
 7 | 				<span class="card-title">${1:Card Title}</span>
 8 | 				<p>${2:I am a very simple card. I am good at containing small bits of information.
 9 | 					I am convenient because I require little markup to use effectively.}</p>
10 | 			</div>
11 | 			<div class="card-action">
12 | 				<a href="#">${3:This is a link}</a>
13 | 			</div>
14 | 		</div>
15 | 	</div>
16 | </div>
17 | ]]></content>
18 | 	<tabTrigger>m-card:sm</tabTrigger>
19 | 	<description>Materialize basic small card</description>
20 | </snippet>


--------------------------------------------------------------------------------
/cards/m-sm-revile-card-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card small">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="mdi-navigation-more-vert right"></i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="mdi-navigation-close right"></i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card:sm-o</tabTrigger>
18 | 	<description>Materialize revile small card</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cards/m-sm-revile-card.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="card small">
 4 | 	<div class="card-image waves-effect waves-block waves-light">
 5 | 		<img class="activator" src="${1:images/office.jpg}">
 6 | 	</div>
 7 | 	<div class="card-content">
 8 | 		<span class="card-title activator grey-text text-darken-4">${2:Card Title}<i class="material-icons right">more_vert</i></span>
 9 | 		<p><a href="#">${3:This is a link}</a></p>
10 | 	</div>
11 | 	<div class="card-reveal">
12 | 		<span class="card-title grey-text text-darken-4">${2:Card Title} <i class="material-icons right">close</i></span>
13 | 		<p>${4:Here is some more information about this product that is only revealed once clicked on.}</p>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<tabTrigger>m-revile-card:sm</tabTrigger>
18 | 	<description>Materialize revile small card</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/cdn/index.html:
--------------------------------------------------------------------------------
 1 | Materialized - Sublime Plugin
 2 | =============================
 3 | 
 4 | This Materialized sublime plugin contains snippets of Materialized CSS components.
 5 | Hope it improves your workflow. :)
 6 | 
 7 | Contribute as much as you can via
 8 | - Twitter [@ayinloya](https://twitter.com/ayinloya)
 9 | - [Issues](https://github.com/ayinloya/materialized-css-snippets/issues)
10 | 
11 | Fork, clone, correct and send me a pull request  or file any issues. 
12 | No contribution is small.
13 | 
14 | 
15 | ## Here is a list of whats available
16 | - [Installation](#installation)
17 | - [CDN](#CDN)
18 | - Templates for html5
19 | - Navigation
20 | - Grid
21 | - Forms
22 | - Input
23 | - Buttons
24 | - Icons
25 | - Cards
26 | - Badges
27 | - Collections
28 | - Tables
29 | - Pagination
30 | - Images
31 | - Media - mostly images
32 | - License
33 | 
34 | ### Installation
35 | 
36 | There are 3 fun ways for installing this plugin.
37 | 
38 | 1. Search for "Materialized CSS Snippets" via the "Package Control: Install Packages" menu.
39 | **Note:** If you don't have Sublime Package Control installed, you can find out how to install it here [https://packagecontrol.io/installation](https://packagecontrol.io/installation)
40 | 
41 | 2. Clone the repository into your Sublime Text 2/3 packages directory.
42 | `git clone https://github.com/ayinloya/materialized-css-snippets.git
43 | 
44 | 3. Download the .zip file and unzip it into your Sublime Text 2/3 packages directory.
45 | **Note:** You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.
46 | 
47 | ### Some examples on how to use this plugin.
48 | Press tab after typing the following snippet codes
49 | 
50 | ### CDN
51 | 
52 | | Component                 | Snippet code                   |
53 | |---------------------------| :-----------------------------:|
54 | | CDN Link(both CSS & JS)   | m-cdn                          |
55 | | CDN link (CSS only)       | m-cdn:css                      |
56 | | CDN link (JS only)        | m-cdn:js                       |
57 | 
58 | ### Templates
59 | 
60 | | Component                 | Snippet code                   |
61 | |---------------------------| :-----------------------------:|
62 | | HTML5 Template Layout     | m-template:html                |
63 | 
64 | ### Forms and inputs
65 | 
66 | | Component                 | Snippet code                   |
67 | |---------------------------| :-----------------------------:|
68 | | Form                      | m-form                         |
69 | | Input Text                | m-input:text                   |
70 | | Submit Buttons            | m-button:submit                |
71 | 
72 | ### Icons
73 | 
74 | | Component                 | Snippet code                   |
75 | |---------------------------| :-----------------------------:|
76 | | Icons                     | m-icon                         |
77 | 
78 | ### Footer
79 | 
80 | | Component                 | Snippet code                   |
81 | |---------------------------| :-----------------------------:|
82 | | Footer                    | m-footer                       |
83 | 
84 | ### Cards
85 | 
86 | | Component                 | Snippet code                   | 
87 | |---------------------------| :-----------------------------:| 
88 | | Default card              | m-card                         | 
89 | | Image card                | m-card:image                   |


--------------------------------------------------------------------------------
/cdn/m-cdn-css.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Compiled and minified CSS -->
 4 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
 5 | 	
 6 | ]]></content>
 7 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 | 	<tabTrigger>m-cdn:css</tabTrigger>
 9 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
10 | 	<!-- <scope>source.python</scope> -->
11 |   <description>Materialize css cdn</description>
12 | </snippet>


--------------------------------------------------------------------------------
/cdn/m-cdn-google-icons.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-cdn:google-icons</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 |   <description>Google fonts cdn</description>
10 | 
11 | </snippet>


--------------------------------------------------------------------------------
/cdn/m-cdn-jquery.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 |   <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-cdn:jq</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/cdn/m-cdn-js.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Compiled and minified JavaScript -->
 4 | <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
 5 | 
 6 | ]]></content>
 7 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 | 	<tabTrigger>m-cdn:js</tabTrigger>
 9 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
10 | 	<!-- <scope>source.python</scope> -->
11 |   <description>Materialize js cdn</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/cdn/m-cdn.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Compiled and minified CSS -->
 4 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
 5 | 
 6 | <!-- Compiled and minified JavaScript -->
 7 | <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
 8 | 
 9 | ]]></content>
10 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
11 | 	<tabTrigger>m-cdn</tabTrigger>
12 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
13 | 	<!-- <scope>source.python</scope> -->
14 |   <description>Materialize css and js cdn</description>
15 | </snippet>


--------------------------------------------------------------------------------
/chip/m-chip-contacts.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="chip">
 4 |   <img src="${1:images/yuna.jpg}" alt="${2:Contact Person}">
 5 |   Jane Doe ${3:<i class="material-icons">close</i>}
 6 | </div>
 7 | ]]></content>
 8 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 |   <tabTrigger>m-chip:contact</tabTrigger>
10 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
11 |   <!-- <scope>source.python</scope> -->
12 |   <description>Materialize chip for contacts with optional close</description>
13 | </snippet>


--------------------------------------------------------------------------------
/chip/m-chip-tags.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="chip">
 4 |   ${1:Tag} ${2:<i class="material-icons">close</i>}
 5 | </div>
 6 | ]]></content>
 7 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 |   <tabTrigger>m-chip:tag</tabTrigger>
 9 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
10 |   <!-- <scope>source.python</scope> -->
11 |   <description>Materialize chip for tags</description>
12 | </snippet>


--------------------------------------------------------------------------------
/collapsible/m-collapsible-expandable-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collapsible" data-collapsible="expandable">
 4 | 	<li>
 5 | 		<div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
 6 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 7 | 	</li>
 8 | 	<li>
 9 | 		<div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
10 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
11 | 	</li>
12 | 	<li>
13 | 		<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
14 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
15 | 	</li>
16 | </ul>
17 | ]]></content>
18 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 | 	<tabTrigger>m-collapsible:expandable-o</tabTrigger>
20 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
21 | 	<!-- <scope>source.python</scope> -->
22 | 	<description>Materialize multiple select collapsible</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/collapsible/m-collapsible-expandable.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collapsible" data-collapsible="expandable">
 4 | 	<li>
 5 | 		<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
 6 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 7 | 	</li>
 8 | 	<li>
 9 | 		<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
10 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
11 | 	</li>
12 | 	<li>
13 | 		<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
14 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
15 | 	</li>
16 | </ul>
17 | ]]></content>
18 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 | 	<tabTrigger>m-collapsible:expandable</tabTrigger>
20 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
21 | 	<!-- <scope>source.python</scope> -->
22 | 	<description>Materialize multiple select collapsible</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/collapsible/m-collapsible-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collapsible" data-collapsible="accordion">
 4 | 	<li>
 5 | 		<div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
 6 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 7 | 	</li>
 8 | 	<li>
 9 | 		<div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
10 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
11 | 	</li>
12 | 	<li>
13 | 		<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
14 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
15 | 	</li>
16 | </ul>
17 | ]]></content>
18 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 | 	<tabTrigger>m-collapsible-o</tabTrigger>
20 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
21 | 	<!-- <scope>source.python</scope> -->
22 | 	<description>Materialize single select collapsible</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/collapsible/m-collapsible-popout.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="collapsible popout" data-collapsible="accordion">
 4 |   <li>
 5 |     <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
 6 |     <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 7 |   </li>
 8 |   <li>
 9 |     <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
10 |     <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
11 |   </li>
12 |   <li>
13 |     <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
14 |     <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
15 |   </li>
16 | </ul>
17 | ]]></content>
18 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 |   <tabTrigger>m-collapsible:popout</tabTrigger>
20 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
21 |   <!-- <scope>source.python</scope> -->
22 |   <description>Materialize single select popout collapsible</description>
23 | </snippet>


--------------------------------------------------------------------------------
/collapsible/m-collapsible-selected-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collapsible" data-collapsible="accordion">
 4 | 	<li>
 5 | 		<div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
 6 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 7 | 	</li>
 8 | 	<li>
 9 | 		<div class="collapsible-header active"><i class="mdi-maps-place"></i>Second</div>
10 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
11 | 	</li>
12 | 	<li>
13 | 		<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
14 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
15 | 	</li>
16 | </ul>
17 | ]]></content>
18 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 | 	<tabTrigger>m-collapsible:selected-o</tabTrigger>
20 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
21 | 	<!-- <scope>source.python</scope> -->
22 | 	<description>Materialize default active</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/collapsible/m-collapsible-selected.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collapsible" data-collapsible="accordion">
 4 | 	<li>
 5 | 		<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
 6 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 7 | 	</li>
 8 | 	<li>
 9 | 		<div class="collapsible-header active"><i class="material-icons"></i>Second</div>
10 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
11 | 	</li>
12 | 	<li>
13 | 		<div class="collapsible-header"><i class="material-icons"></i>Third</div>
14 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
15 | 	</li>
16 | </ul>
17 | ]]></content>
18 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 | 	<tabTrigger>m-collapsible:selected</tabTrigger>
20 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
21 | 	<!-- <scope>source.python</scope> -->
22 | 	<description>Materialize default active</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/collapsible/m-collapsible.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collapsible" data-collapsible="accordion">
 4 | 	<li>
 5 | 		<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
 6 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 7 | 	</li>
 8 | 	<li>
 9 | 		<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
10 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
11 | 	</li>
12 | 	<li>
13 | 		<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
14 | 		<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
15 | 	</li>
16 | </ul>
17 | ]]></content>
18 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 | 	<tabTrigger>m-collapsible</tabTrigger>
20 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
21 | 	<!-- <scope>source.python</scope> -->
22 | 	<description>Materialize single select collapsible</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/collections/m-avatar-collection-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collection">
 4 | 	<li class="collection-item avatar">
 5 | 		<img src="${1:images/yuna.jpg}" alt="" class="circle">
 6 | 		<span class="title">${2:Title}</span>
 7 | 		<p>${3:First Line} <br>
 8 | 			${4:Second Line}
 9 | 		</p>
10 | 		<a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
11 | 	</li>
12 | 	<li class="collection-item avatar">
13 | 		<i class="mdi-file-folder circle"></i>
14 | 		<span class="title">${5:Title}</span>
15 | 		<p>${6:First Line} <br>
16 | 			${7:Second Line}
17 | 		</p>
18 | 		<a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
19 | 	</li>
20 | </ul>
21 | ]]></content>
22 | 	<tabTrigger>m-collection:avatar-o</tabTrigger>
23 | 	<description>Materialize collection with avatar</description>
24 | </snippet>
25 | 


--------------------------------------------------------------------------------
/collections/m-avatar-collection.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collection">
 4 | 	<li class="collection-item avatar">
 5 | 		<img src="${1:images/yuna.jpg}" alt="" class="circle">
 6 | 		<span class="title">${2:Title}</span>
 7 | 		<p>${3:First Line} <br>
 8 | 			${4:Second Line}
 9 | 		</p>
10 | 		<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
11 | 	</li>
12 | 	<li class="collection-item avatar">
13 | 		<i class="mdi-file-folder circle"></i>
14 | 		<span class="title">${5:Title}</span>
15 | 		<p>${6:First Line} <br>
16 | 			${7:Second Line}
17 | 		</p>
18 | 		<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
19 | 	</li>
20 | </ul>
21 | ]]></content>
22 | 	<tabTrigger>m-collection:avatar</tabTrigger>
23 | 	<description>Materialize collection with avatar</description>
24 | </snippet>
25 | 


--------------------------------------------------------------------------------
/collections/m-basic-collection.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collection ${1:with-header}">
 4 | 	<li class="collection-item">${2: <h4>Alvin</h4>}</li>
 5 | 	<li class="collection-item">${3:Alvin}</li>
 6 | 	<li class="collection-item">${4:Alvin}</li>
 7 | 	<li class="collection-item">${5:Alvin}</li>
 8 | </ul>
 9 | ]]></content>
10 | 	<tabTrigger>m-collection</tabTrigger>
11 | 	<description>Materialize basic collection</description>
12 | </snippet>


--------------------------------------------------------------------------------
/collections/m-dismiss-collection-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collection">
 4 | 	<li class="collection-item dismissable"><div>${1:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 5 | 	<li class="collection-item dismissable"><div>${2:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 6 | 	<li class="collection-item dismissable"><div>${3:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 7 | 	<li class="collection-item dismissable"><div>${4:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 8 | </ul>
 9 | ]]></content>
10 | 	<tabTrigger>m-collection:dismiss-o</tabTrigger>
11 | 	<description>Materialize swipe-to-dismiss collection</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/collections/m-dismiss-collection.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collection">
 4 | 	<li class="collection-item dismissable"><div>${1:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 5 | 	<li class="collection-item dismissable"><div>${2:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 6 | 	<li class="collection-item dismissable"><div>${3:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 7 | 	<li class="collection-item dismissable"><div>${4:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 8 | </ul>
 9 | ]]></content>
10 | 	<tabTrigger>m-collection:dismiss</tabTrigger>
11 | 	<description>Materialize swipe-to-dismiss collection</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/collections/m-sec-collection-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collection with-header">
 4 | 	<li class="collection-header"><h4>${1:First Names}</h4></li>
 5 | 	<li class="collection-item"><div>${2:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 6 | 	<li class="collection-item"><div>${3:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 7 | 	<li class="collection-item"><div>${4:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 8 | 	<li class="collection-item"><div>${5:Alvin}<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 9 | </ul>
10 | ]]></content>
11 | 	<tabTrigger>m-collection:sec-o</tabTrigger>
12 | 	<description>Materialize collection with links</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/collections/m-sec-collection.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="collection with-header">
 4 | 	<li class="collection-header"><h4>${1:First Names}</h4></li>
 5 | 	<li class="collection-item"><div>${2:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 6 | 	<li class="collection-item"><div>${3:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 7 | 	<li class="collection-item"><div>${4:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 8 | 	<li class="collection-item"><div>${5:Alvin}<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
 9 | </ul>
10 | ]]></content>
11 | 	<tabTrigger>m-collection:sec</tabTrigger>
12 | 	<description>Materialize collection with links</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/dialogs/m-toast-action.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <${1:a} class="waves-effect waves-light btn" onclick="toast('${2:<span>Item Deleted</span>}${3:<a class=&quot;btn-flat yellow-text&quot; href=&quot;#!&quot;>Undo<a>}', 5000)">${0:Toast!}</${1:a}>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-toast:action</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 |   <description>Materialize toast with action</description>
10 | </snippet>


--------------------------------------------------------------------------------
/dialogs/m-toast-js.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | Materialize.toast(${1:'I am a toast!'}, ${2:3000}, ${3:'rounded'}) // 'rounded' is the class I'm applying to the toast
 4 | 
 5 | ]]></content>
 6 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 7 |   <tabTrigger>m-toast-js</tabTrigger>
 8 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
 9 |   <!-- <scope>source.python</scope> -->
10 | </snippet>


--------------------------------------------------------------------------------
/dialogs/m-toast.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <${1:a} class="btn" onclick="${2:toast(${3:'I am a toast'}, ${4:4000})}">${0:Toast!}</${1:a}>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-toast</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 |   <description>Materialize toast</description>
10 | 
11 | </snippet>


--------------------------------------------------------------------------------
/dialogs/m-tooltip.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- data-position can be : bottom, top, left, or right -->
 4 | <!-- add \$('.tooltipped').tooltip({delay: 50}); to document ready -->
 5 | <!-- data-delay controls delay before tooltip shows (in milliseconds)-->
 6 | <${1:a} class="btn tooltipped" data-position="${2:bottom}" data-delay="${3:50}" data-tooltip="${4:I am tooltip}">${0:Hover me!}</${1:a}>
 7 | ]]></content>
 8 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 | 	<tabTrigger>m-tooltip</tabTrigger>
10 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
11 | 	<!-- <scope>source.python</scope> -->
12 | </snippet>


--------------------------------------------------------------------------------
/dropdown/m-dropdown-hover.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Dropdown Trigger -->
 4 | <a class='dropdown-button btn'  data-beloworigin="true" href='#' data-activates='${1:dropdown1}'>Drop Me!</a>
 5 | 
 6 | <!-- Dropdown Structure -->
 7 | <ul id='${1:dropdown1}' class='dropdown-content'>
 8 | 	<li><a href="#!">${2:one}</a></li>
 9 | 	<li><a href="#!">${3:two}</a></li>
10 | 	<li class="divider"></li>
11 | 	<li><a href="#!">${4:three}</a></li>
12 | </ul>
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-dropdown:hover</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 | </snippet>


--------------------------------------------------------------------------------
/dropdown/m-dropdown.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Dropdown Trigger -->
 4 | <a class='dropdown-button btn' href='#' data-activates='${1:dropdown1}'>Drop Me!</a>
 5 | 
 6 | <!-- Dropdown Structure -->
 7 | <ul id='${1:dropdown1}' class='dropdown-content'>
 8 | 	<li><a href="#!">${2:one}</a></li>
 9 | 	<li><a href="#!">${3:two}</a></li>
10 | 	<li class="divider"></li>
11 | 	<li><a href="#!">${4:three}</a></li>
12 | </ul>
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-dropdown</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 |   <description>Materialize dropdown</description>
19 | 
20 | </snippet>
21 | 


--------------------------------------------------------------------------------
/footer/m-footer.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <footer class="page-footer">
 4 | 	<div class="container">
 5 | 		<div class="row">
 6 | 			<div class="col l6 s12">
 7 | 				<h5 class="white-text">${1:Footer Content}</h5>
 8 | 				<p class="grey-text text-lighten-4">${2:You can use rows and columns here to organize your footer content.}</p>
 9 | 			</div>
10 | 			<div class="col l4 offset-l2 s12">
11 | 				<h5 class="white-text">${3:Links}</h5>
12 | 				<ul>
13 | 					<li><a class="grey-text text-lighten-3" href="#!">${4:Link} 1</a></li>
14 | 					<li><a class="grey-text text-lighten-3" href="#!">${5:Link} 2</a></li>
15 | 					<li><a class="grey-text text-lighten-3" href="#!">${6:Link} 3</a></li>
16 | 					<li><a class="grey-text text-lighten-3" href="#!">${7:Link} 4</a></li>
17 | 				</ul>
18 | 			</div>
19 | 		</div>
20 | 	</div>
21 | 	<div class="footer-copyright">
22 | 		<div class="container">
23 | 			© 2015 Copyright ${8:Text}
24 | 			<a class="grey-text text-lighten-4 right" href="#!">${9:More Links}</a>
25 | 		</div>
26 | 	</div>
27 | </footer>
28 | ]]></content>
29 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
30 | 	<tabTrigger>m-footer</tabTrigger>
31 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
32 | 	<!-- <scope>source.hmtl</scope> -->
33 | 	<description>Materialize footer</description>
34 | </snippet>


--------------------------------------------------------------------------------
/footer/m-sticky-footer.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | body {
 4 | 	display: flex;
 5 | 	min-height: 100vh;
 6 | 	flex-direction: column;
 7 | }
 8 | main {
 9 | 	flex: 1 0 auto;
10 | }
11 | ]]></content>
12 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
13 | 	<tabTrigger>m-sticky-footer:css</tabTrigger>
14 | 	<description>Materialize CSS for sticky footer</description>
15 | </snippet>
16 | 


--------------------------------------------------------------------------------
/forms/m-form.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <form action="${1}" method="${2:POST}">
 4 | 	<legend>${3:Form title}</legend>
 5 | 	<div class="input-field"> 
 6 | 		<div class="form-group">
 7 | 			<label class="control-label" for="${4:}">${5:label}</label>
 8 | 			<span class="help-block"></span>
 9 | 			<input type="text" class="form-control" id="" placeholder="Input field">
10 | 		</div>
11 | 	</div>
12 | 	${0}
13 | 	<button type="submit" class="btn">${5:Submit}</button>
14 | </form>
15 | ]]></content>
16 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
17 | 	<tabTrigger>m-form</tabTrigger>
18 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
19 | 	<!-- <scope>source.hmtl</scope> -->
20 | 	<description>Materialize form</description>
21 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-checkbox-filled.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <p>
 4 |   <input type="checkbox" class="filled-in" id="${1:filled-in-box}" ${2:checked="checked"} />
 5 |   <label for="${1:filled-in-box}">${3:Filled in}</label>
 6 | </p>
 7 | ]]></content>
 8 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 |   <tabTrigger>m-input:checkbox-fill</tabTrigger>
10 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
11 |   <!-- <scope>source.python</scope> -->
12 |   <description>Materialize checkbox filled in</description>
13 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-checkbox.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <p>
 4 | 	<input type="checkbox" id="${1:test5}" />
 5 | 	<label for="${1:test5}">${2:Red}</label>
 6 | </p>
 7 | ]]></content>
 8 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 | 	<tabTrigger>m-input:checkbox</tabTrigger>
10 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
11 | 	<!-- <scope>source.python</scope> -->
12 | 	<description>Materialize checkbox</description>
13 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-custom-messages.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="input-field col ${5:s${6:12}}">
 4 |   <input id="${2:email}" type="${1:email}" class="validate">
 5 |   <label for="${2:email}" data-error="wrong" data-success="right">${4:Email}</label>
 6 | </div>${7}
 7 | ]]></content>
 8 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 |   <tabTrigger>m-input:message</tabTrigger>
10 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
11 |   <!-- <scope>source.python</scope> -->
12 |   <description>Materialize custom input error and success messages</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/forms/m-input-date.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <input type="date" class="datepicker">
 4 | 
 5 | <!-- please add this to document.ready-->
 6 | \$('.datepicker').pickadate({
 7 |     selectMonths: true, // Creates a dropdown to control month
 8 |     selectYears: 15 // Creates a dropdown of 15 years to control year
 9 |   });
10 | ]]></content>
11 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
12 | 	<tabTrigger>m-input:date</tabTrigger>
13 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
14 | 	<!-- <scope>source.python</scope> -->
15 | 	<description>Materialize datepicker</description>
16 | </snippet>
17 | 


--------------------------------------------------------------------------------
/forms/m-input-file.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="file-field input-field">
 4 |   <div class="btn">
 5 |   	<span>${1:File}</span>
 6 |     <input type="file" ${2:multiple}>
 7 |   </div>
 8 |   <div class="file-path-wrapper">
 9 |     <input class="file-path validate" type="text" ${3:placeholder="${4:Upload one or more files}"}>
10 |   </div>
11 | </div>
12 | ]]></content>
13 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 | 	<tabTrigger>m-input:file</tabTrigger>
15 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
16 | 	<!-- <scope>source.python</scope> -->
17 | 	<description>Materialize file input</description>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/forms/m-input-radio-gap.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <p>
 4 | 	<input ${1:class="with-gap"} name="${2:group1}" type="radio" id="${3:test1}" />
 5 | 	<label for="${3:test1}">${4:Label}</label>
 6 | </p>
 7 | ]]></content>
 8 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 | 	<tabTrigger>m-input:radio-gap</tabTrigger>
10 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
11 | 	<!-- <scope>source.python</scope> -->
12 | 	<description>Materialize radio button with gap</description>
13 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-radio-group.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <p>
 4 |   <input name="${1:group1}" type="radio" id="${2:test1}" />
 5 |   <label for="${2:test1}">${3:Red}</label>
 6 | </p>
 7 | <p>
 8 |   <input name="${1:group1}" type="radio" id="${4:test2}" />
 9 |   <label for="${4:test2}">${5:Yellow}</label>
10 | </p>
11 | ]]></content>
12 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
13 | 	<tabTrigger>m-input:radio-group</tabTrigger>
14 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
15 | 	<!-- <scope>source.python</scope> -->
16 | 	<description>Materialize radio button group</description>
17 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-radio.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <p>
 4 | 	<input name="${1:group1}" type="radio" id="${2:test1}" />
 5 | 	<label for="${2:test1}">${3:Label}</label>
 6 | </p>
 7 | ]]></content>
 8 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 | 	<tabTrigger>m-input:radio</tabTrigger>
10 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
11 | 	<!-- <scope>source.python</scope> -->
12 | 	<description>Materialize radio button</description>
13 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-range.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <p class="range-field">
 4 | 	<input type="range" id="${1:test5}" min="${2:0}" max="${3:100}" />
 5 | </p>
 6 | ]]></content>
 7 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 | 	<tabTrigger>m-input:range</tabTrigger>
 9 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
10 | 	<!-- <scope>source.python</scope> -->
11 | 	<description>Materialize range</description>
12 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select-default-disabled.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <label>Browser Select</label>
 4 | <select class="browser-default" disabled>
 5 |   <option value="" disabled selected>${1:Choose your option}</option>
 6 |   <option value="${2:1}">${3:Option 1}</option>
 7 |   <option value="${4:2}">${5:Option 2}</option>
 8 | </select>
 9 | ]]></content>
10 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
11 |   <tabTrigger>m-input:select-default-disabled</tabTrigger>
12 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
13 |   <!-- <scope>source.python</scope> -->
14 |   <description>Materialize default browser disabled select button</description>
15 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select-default.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <label>Browser Select</label>
 4 | <select class="browser-default">
 5 |   <option value="" disabled selected>${1:Choose your option}</option>
 6 |   <option value="${2:1}">${3:Option 1}</option>
 7 |   <option value="${4:2}">${5:Option 2}</option>
 8 | </select>
 9 | ]]></content>
10 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
11 |   <tabTrigger>m-input:select-default</tabTrigger>
12 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
13 |   <!-- <scope>source.python</scope> -->
14 |   <description>Materialize default browser select button</description>
15 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select-disabled.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | ${1:<!-- add \$('select').material_select(); to document.ready -->}
 4 | <div class="input-field col s12">
 5 | 	<select ${2:class="browser-default"} disabled>
 6 | 	  <option value="" disabled selected>${3:Choose your option}</option>
 7 | 	  <option value="${4:1}">${5:Option 1}</option>
 8 | 	  <option value="${6:2}">${7:Option 2}</option>
 9 | 	  <option value="${8:3}">${9:Option 3}</option>
10 | 	</select>
11 | </div>
12 | <label>${10:Materialize Disabled}</label>
13 | ]]></content>
14 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 |   <tabTrigger>m-input:select-disabled</tabTrigger>
16 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
17 |   <!-- <scope>source.python</scope> -->
18 |   <description>Materialize disabled select button</description>
19 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select-grouped.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="input-field col s12">
 4 |   <select ${1:multiple}>
 5 |     <optgroup label="${2:team 1}">
 6 |       <option value="${3:1}">${4:Option 1}</option>
 7 |       <option value="${5:2}">${6:Option 2}</option>
 8 |     </optgroup>
 9 |     <optgroup label="${7:team 2}">
10 |       <option value="${8:1}">${9:Option 3}</option>
11 |       <option value="${10:2}">${11:Option 4}</option>
12 |     </optgroup>
13 |   </select>
14 |   <label>${12:Optgroups}</label>
15 | </div>
16 | ]]></content>
17 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
18 |   <tabTrigger>m-input:select-group</tabTrigger>
19 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
20 |   <!-- <scope>source.python</scope> -->
21 |   <description>Materialize Group Select button</description>
22 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select-icon-left.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="input-field col s12 m6">
 4 |   <select class="icons">
 5 |     <option value="" disabled selected>${1:Choose your option}</option>
 6 |     <option value="" data-icon="${2:images/sample-1.jpg}" class="left circle">${3:example 1}</option>
 7 |     <option value="" data-icon="${4:images/office.jpg}" class="left circle">${5:example 2}</option>
 8 |     <option value="" data-icon="${6:images/yuna.jpg}" class="left circle">${7:example 1}</option>
 9 |   </select>
10 |   <label>${8:Images in select}</label>
11 | </div>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>m-input:select-icon-left</tabTrigger>
15 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
16 |   <!-- <scope>source.python</scope> -->
17 |   <description>Materialize select button with left image icons</description>
18 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select-icon-right.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="input-field col s12 m6">
 4 |   <select class="icons">
 5 |     <option value="" disabled selected>${1:Choose your option}</option>
 6 |     <option value="" data-icon="${2:images/sample-1.jpg}" class="circle">${3:example 1}</option>
 7 |     <option value="" data-icon="${4:images/office.jpg}" class="circle">${5:example 2}</option>
 8 |     <option value="" data-icon="${6:images/yuna.jpg}" class="circle">${7:example 1}</option>
 9 |   </select>
10 |   <label>${8:Images in select}</label>
11 | </div>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>m-input:select-icon-right</tabTrigger>
15 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
16 |   <!-- <scope>source.python</scope> -->
17 |   <description>Materialize select button with right image icons</description>
18 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select-multiple.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="input-field col s12">
 4 |   <select multiple>
 5 |     <option value="" disabled selected>${1:Choose your option}</option>
 6 |     <option value="${2:1}">${3:Option 1}</option>
 7 |     <option value="${4:2}">${5:Option 2}</option>
 8 |     <option value="${6:3}">${7:Option 3}</option>
 9 |     </select>
10 |     <label>${8:Materialize Select}</label>
11 | </div>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>m-input:select-multiple</tabTrigger>
15 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
16 |   <!-- <scope>source.python</scope> -->
17 |   <description>Materialize Multiple Select button</description>
18 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-select.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="input-field col s12">
 4 |   <select>
 5 |     <option value="" disabled selected>${1:Choose your option}</option>
 6 |     <option value="${2:1}">${3:Option 1}</option>
 7 |     <option value="${4:2}">${5:Option 2}</option>
 8 |     <option value="${6:3}">${7:Option 3}</option>
 9 |     </select>
10 |     <label>${8:Materialize Select}</label>
11 | </div>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>m-input:select</tabTrigger>
15 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
16 |   <!-- <scope>source.python</scope> -->
17 |   <description>Materialize select button</description>
18 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-switch-disabled.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Switch -->
 4 | <div class="switch">
 5 | 	<label>
 6 | 		${1:Off}
 7 | 		<input disabled type="checkbox">
 8 | 			<span class="lever"></span>
 9 | 			${2:On}
10 | 	</label>
11 | </div>
12 | ]]></content>
13 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 | 	<tabTrigger>m-input:switch-disabled</tabTrigger>
15 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
16 | 	<!-- <scope>source.python</scope> -->
17 | 	<description>Materialize disabled switch</description>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/forms/m-input-switch.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Switch -->
 4 | <div class="switch">
 5 | 	<label>
 6 | 		${1:Off}
 7 | 		<input type="checkbox">
 8 | 			<span class="lever"></span>
 9 | 			${2:On}
10 | 	</label>
11 | </div>
12 | ]]></content>
13 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 | 	<tabTrigger>m-input:switch</tabTrigger>
15 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
16 | 	<!-- <scope>source.python</scope> -->
17 | 	<description>Materialize switch</description>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/forms/m-input-text-icon-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="input-field col s6">
 4 | 	<i class="mdi-action-account-circle prefix">
 5 | 	<input id="${2:icon_prefix}" type="text" class="validate">
 6 | 	<label for="${2:icon_prefix}">${1:First Name}</label>
 7 | </div>
 8 | ]]></content>
 9 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 | 	<tabTrigger>m-input:text-icon-o</tabTrigger>
11 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
12 | 	<!-- <scope>source.python</scope> -->
13 | 	<description>Materialize text input with old icons</description>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/forms/m-input-text-icon.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="input-field col s6">
 4 | 	<i class="material-icons prefix">account_circle</>
 5 | 	<input id="${2:icon_prefix}" type="text" class="validate">
 6 | 	<label for="${2:icon_prefix}">${1:First Name}</label>
 7 | </div>
 8 | ]]></content>
 9 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 | 	<tabTrigger>m-input:text-icon</tabTrigger>
11 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
12 | 	<!-- <scope>source.python</scope> -->
13 | 	<description>Materialize text input with icon</description>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/forms/m-input-text.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="input-field col s6">
 4 | 	<input id="${2:icon_prefix}" type="text" class="validate">
 5 | 	<label for="${2:icon_prefix}">${1:First Name}</label>
 6 | </div>
 7 | ]]></content>
 8 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 | 	<tabTrigger>m-input:text</tabTrigger>
10 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
11 | 	<!-- <scope>source.python</scope> -->
12 | 	<description>Materialize text input</description>
13 | </snippet>


--------------------------------------------------------------------------------
/forms/m-input-textarea-icon-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="input-field col s6">
 4 |   <i class="mdi-editor-mode-edit prefix"></i>
 5 |   <textarea id="${1:icon_prefix2}" class="${2:materialize-textarea}"></textarea>
 6 |   <label for="${1:icon_prefix2}">${0:First Name}</label>
 7 | </div>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>m-input:textarea-icon-o</tabTrigger>
11 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
12 |   <!-- <scope>source.python</scope> -->
13 |   <description>Materialize textarea with icon</description>
14 |  </snippet>


--------------------------------------------------------------------------------
/forms/m-input-textarea-icon.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="input-field col s6">
 4 | 	<i class="material-icons prefix">mode_edi</i>
 5 | 	<textarea id="${1:icon_prefix2}" class="${2:materialize-textarea}"></textarea>
 6 | 	<label for="${1:icon_prefix2}">${0:First Name}</label>
 7 | </div>
 8 | ]]></content>
 9 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 | 	<tabTrigger>m-input:textarea-icon</tabTrigger>
11 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
12 | 	<!-- <scope>source.python</scope> -->
13 | 	<description>Materialize textarea with icon</description>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/forms/m-input-textarea.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="input-field col s12">
 4 | 	<textarea id="${1:textarea1}" class="${2:materialize-textarea}"></textarea>
 5 | 	<label for="${1:textarea1}">${0:Textarea}</label>
 6 | </div>
 7 | ]]></content>
 8 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 | 	<tabTrigger>m-input:textarea</tabTrigger>
10 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
11 | 	<!-- <scope>source.python</scope> -->
12 | 	<description>Materialize textarea</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/forms/m-registration-form-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 |   <form class="col s12">
 5 |     <div class="row">
 6 |       <div class="input-field col s6">
 7 |         <input id="${1:first_name}" type="text" class="validate">
 8 |           <label for="${1:first_name}">${1:First Name}</label>
 9 |       </div>
10 |       <div class="input-field col s6">
11 |         <input id="${2:last_name}" type="text" class="validate">
12 |         <label for="${2:last_name}">${2:Last Name}</label>
13 |       </div>
14 |     </div>
15 |     <div class="row">
16 |       <div class="input-field col s12">
17 |         <input id="${3:username}" type="text" class="validate">
18 |         <label for="${3:username}">${3:Username}</label>
19 |       </div>
20 |     </div>
21 |     <div class="row">
22 |       <div class="input-field col s12">
23 |         <input id="${4:password}" type="password" class="validate">
24 |         <label for="${4:password}">${4:Password}</label>
25 |       </div>
26 |     </div>
27 |     <div class="row">
28 |       <div class="input-field col s12">
29 |         <input id="email" type="email" class="validate">
30 |         <label for="email">Email</label>
31 |       </div>
32 |     </div>
33 |     <${5:button} ${6:type="button"} class="btn waves-effect waves-light">${7:<i class="mdi-content-send ${8:right}"></i>}</${5:button}>
34 |   </form>
35 | </div>
36 | ]]></content>
37 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
38 | 	<tabTrigger>m-form:register-o</tabTrigger>
39 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
40 | 	<!-- <scope>source.python</scope> -->
41 | 	<description>Materialize registration form with old icons</description>
42 | </snippet>
43 | 


--------------------------------------------------------------------------------
/forms/m-registration-form.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<form class="col s12">
 5 | 		<div class="row">
 6 | 			<div class="input-field col s6">
 7 | 				<input id="${1:first_name}" type="text" class="validate">
 8 | 					<label for="${1:first_name}">${1:First Name}</label>
 9 | 			</div>
10 | 			<div class="input-field col s6">
11 | 				<input id="${2:last_name}" type="text" class="validate">
12 | 				<label for="${2:last_name}">${2:Last Name}</label>
13 | 			</div>
14 | 		</div>
15 | 		<div class="row">
16 | 			<div class="input-field col s12">
17 | 				<input id="${3:username}" type="text" class="validate">
18 | 				<label for="${3:username}">${3:Username}</label>
19 | 			</div>
20 | 		</div>
21 | 		<div class="row">
22 | 			<div class="input-field col s12">
23 | 				<input id="${4:password}" type="password" class="validate">
24 | 				<label for="${4:password}">${4:Password}</label>
25 | 			</div>
26 | 		</div>
27 | 		<div class="row">
28 | 			<div class="input-field col s12">
29 | 				<input id="email" type="email" class="validate">
30 | 				<label for="email">Email</label>
31 | 			</div>
32 | 		</div>
33 | 		<${5:button} ${6:type="button"} class="btn waves-effect waves-light">${7:<i class="material-icons ${8:right}">send</i>}</${5:button}>
34 | 	</form>
35 | </div>
36 | ]]></content>
37 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
38 | 	<tabTrigger>m-form:register</tabTrigger>
39 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
40 | 	<!-- <scope>source.python</scope> -->
41 | 	<description>Materialize registration form</description>
42 | </snippet>
43 | 


--------------------------------------------------------------------------------
/grid/m-col-1.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s1 m1 l1">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:1</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-10.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s10 m10 l10">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:10</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-11.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s11 m11 l11">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:11</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-12.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s12 m12 l12">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:12</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-2.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s2 m2 l2">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:2</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-3.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s3 m3 l3">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:13</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-4.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s4 m4 l4">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:4</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-5.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s5 m5 l5">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:5</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-6.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s6 m6 l6">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:6</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-7.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s7 m7 l7">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:7</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-8.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s8 m8 l8">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:8</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-9.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="col s9 m9 l9">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col:9</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col-promo.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 
 5 | 	<div class="col s4">
 6 | 		${1:<!-- Promo Content 1 goes here -->}
 7 | 	</div>
 8 | 	<div class="col s4">
 9 | 		${2:<!-- Promo Content 2 goes here -->}
10 | 	</div>
11 | 	<div class="col s4">
12 | 		${3:<!-- Promo Content 3 goes here -->}
13 | 	</div>
14 | 
15 | </div>
16 | ]]></content>
17 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
18 | 	<tabTrigger>m-col:promo</tabTrigger>
19 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
20 | 	<!-- <scope>source.python</scope> -->
21 | </snippet>


--------------------------------------------------------------------------------
/grid/m-col.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <div class="${2:col s${1}} ${3:m${1}} ${4:l${1}}">
4 | 	${0}
5 | </div>
6 | ]]></content>
7 | 	<tabTrigger>m-col</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/helpers/align.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${2:h5} class="${1:center}-align">${3}</${2:h5}>
4 | ]]></content>
5 |   <tabTrigger>m-align</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/helpers/center-align.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:h5} class="center-align">${2}</${1:h5}>
4 | ]]></content>
5 |   <tabTrigger>m-center-align</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/helpers/float-left.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="left">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-left</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/helpers/float-right.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="right">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-right</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/helpers/hide-on-large-only.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="hide-on-large-only">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-hide:desktop</tabTrigger>
6 |   <description>Materializecss: Hidden for Desktop Only</description>
7 | </snippet>


--------------------------------------------------------------------------------
/helpers/hide-on-med-and-down.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="hide-on-med-and-down">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-hide:tablet-down</tabTrigger>
6 |   <description>Materializecss: Hidden for Tablet and Below</description>
7 | </snippet>


--------------------------------------------------------------------------------
/helpers/hide-on-med-and-up.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="hide-on-med-and-up">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-hide:tablet-up</tabTrigger>
6 |   <description>Materializecss: Hidden for Tablet and Above</description>
7 | </snippet>


--------------------------------------------------------------------------------
/helpers/hide-on-med-only.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="hide-on-med-only">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-hide:tablet</tabTrigger>
6 |   <description>Materializecss: Hidden for Tablet Only</description>
7 | </snippet>


--------------------------------------------------------------------------------
/helpers/hide-on-small-only.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="hide-on-small-only">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-hide:mobile</tabTrigger>
6 |   <description>Materializecss: Hidden for Mobile Only</description>
7 | </snippet>


--------------------------------------------------------------------------------
/helpers/hide.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} class="hide">${2}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>m-hide</tabTrigger>
6 |   <description>Materializecss: Hidden for all Devices</description>
7 | </snippet>


--------------------------------------------------------------------------------
/helpers/left-align.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:h5} class="left-align">${2}</${1:h5}>
4 | ]]></content>
5 |   <tabTrigger>m-left-align</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/helpers/right-align.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:h5} class="right-align">${2}</${1:h5}>
4 | ]]></content>
5 |   <tabTrigger>m-right-align</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/helpers/truncate.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:h4} class="truncate">${2}</${1:h4}>
4 | ]]></content>
5 |   <tabTrigger>m-truncate</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/helpers/valign-wrapper.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <div class="valign-wrapper">
4 |   ${1:<${2:h5} class="valign">${3}</${2:h5}>}
5 | </div>
6 | ]]></content>
7 |   <tabTrigger>m-valign-wrapper</tabTrigger>
8 | </snippet>


--------------------------------------------------------------------------------
/helpers/valign.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:h5} class="valign">${2}</${1:h5}>
4 | ]]></content>
5 |   <tabTrigger>m-valign</tabTrigger>
6 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-3d-rotation.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-action-3d-rotation"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:3d-rotation</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-accessibility.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-action-accessibility"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:accessibility</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-action.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-action-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:action</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-alert-error.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-alert-error"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:alert-error</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-av.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-av-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:av</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-communication.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-communication-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:communication</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-content.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-content-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:content</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-device.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-device-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:device</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-editor.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-editor-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:editor</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-file.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-file-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:file</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-hardware.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-hardware-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:hardware</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-image.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-image-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:image</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-large-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <i class="large mdi-content-add"></i>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-icon:lg-o</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/icon/m-icon-large.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="large material-icons">${1:}</i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:lg</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-maps.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-maps-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:maps</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-medium-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <i class="medium mdi-content-add"></i>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-icon:md-o</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/icon/m-icon-medium.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="medium material-icons">${1:}</i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:md</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-navigation-menu.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-navigation-menu"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:navigation-menu</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-navigation.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-navigation-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:navigation</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-notification.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-notification-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:notification</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <i class="mdi-content-add"></i>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-icon-o</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/icon/m-icon-small-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <i class="small mdi-content-add"></i>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-icon:sm-o</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/icon/m-icon-small.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="small material-icons">${1:}</i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:sm</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-social.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <i class="mdi-social-${1:}"></i>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-icon:social-o</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/icon/m-icon-tiny-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <i class="tiny mdi-content-add"></i>
 4 | ]]></content>
 5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6 | 	<tabTrigger>m-icon:tiny-o</tabTrigger>
 7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
 8 | 	<!-- <scope>source.python</scope> -->
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/icon/m-icon-tiny.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="tiny material-icons">${1:}</i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:tiny</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon-toggle.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="mdi-toggle-${1:}"></i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon:toggle</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/icon/m-icon.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <i class="material-icons">${1:}</i>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-icon</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/js/m-pushpin.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | \$('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-pushpin</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/js/m-scrollfire.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | var options = [
 4 | 	{selector: '.class', offset: 200, callback: 'globalFunction()' },
 5 | 	{selector: '.other-class', offset: 200, callback: 'globalFunction()' },
 6 | ];
 7 | scrollFire(options);
 8 | 
 9 | ]]></content>
10 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
11 | 	<tabTrigger>m-scrollfire</tabTrigger>
12 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
13 | 	<!-- <scope>source.python</scope> -->
14 | </snippet>


--------------------------------------------------------------------------------
/js/m-slideout-js.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | // Initialize collapse button
 4 | \$('.button-collapse').sideNav({
 5 | 	menuWidth: 300, // Default is 240
 6 | 	edge: 'right', // Choose the horizontal origin
 7 | 	closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
 8 | }
 9 | );
10 | // Initialize collapsible (uncomment the line below if you use the dropdown variation)
11 | //\$('.collapsible').collapsible();
12 | 
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-navbar:slideout-js</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 | </snippet>


--------------------------------------------------------------------------------
/media/m-materialbox-caption.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <img class="materialboxed" data-caption="${2:A picture of some deer and tons of trees}" width="${1:650}" src="${0:images/sample-1.jpg}">
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-materialbox:caption</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/media/m-materialbox.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <img class="materialboxed" width="${1:650}" src="${0:images/sample-1.jpg}">
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-materialbox</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------
/media/m-slider.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="slider">
 4 | 	<ul class="slides">
 5 | 		<li>
 6 | 			<img src="${7:http://lorempixel.com/580/250/nature/1}"> <!-- random image -->
 7 | 			<div class="caption ${6:center}-align">
 8 | 				<h3>${1:This is our big Tagline!}</h3>
 9 | 				<h5 class="light grey-text text-lighten-3">${2:Here's our small slogan.}</h5>
10 | 			</div>
11 | 		</li>
12 | 		<li>
13 | 			<img src="${3:http://lorempixel.com/580/250/nature/2}"> <!-- random image -->
14 | 			<div class="caption ${6:left}-align">
15 | 				<h3>${4:Left Aligned Caption}</h3>
16 | 				<h5 class="light grey-text text-lighten-3">${5:Here's our small slogan.}</h5>
17 | 			</div>
18 | 		</li>
19 | 	</ul>
20 | </div>
21 | ]]></content>
22 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
23 | 	<tabTrigger>m-slider</tabTrigger>
24 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
25 | 	<!-- <scope>source.python</scope> -->
26 | </snippet>


--------------------------------------------------------------------------------
/messages.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "install": "messages/install.txt",
 3 |   "1.0.1": "messages/1.0.1.txt",
 4 |   "1.0.2": "messages/1.0.2.txt",
 5 |   "1.0.5": "messages/1.0.5.txt",
 6 |   "1.0.6": "messages/1.0.6.txt",
 7 |   "1.0.7": "messages/1.0.7.txt",
 8 |   "1.0.8": "messages/1.0.8.txt",
 9 |   "1.0.9": "messages/1.0.9.txt",
10 |   "1.0.10": "messages/1.0.10.txt",
11 |   "1.1.0": "messages/1.1.0.txt",
12 |   "1.1.1": "messages/1.1.1.txt"
13 | }


--------------------------------------------------------------------------------
/messages/1.0.1.txt:
--------------------------------------------------------------------------------
 1 | v1.0.1 Changelog:
 2 | --------------------------------------------------------------------------------
 3 | 
 4 | 
 5 | * Thanks to (@theprinceanim), we now have a very comprehensive readme
 6 | * CDN
 7 | * collection tab triggers
 8 | 
 9 | If you find any bugs or have a contribution please let me know at:
10 | 
11 | https://github.com/ayinloya/materialized-css-snippets
12 | 
13 | Happy coding. :)
14 | 
15 | --------------------------------------------------------------------------------


--------------------------------------------------------------------------------
/messages/1.0.10.txt:
--------------------------------------------------------------------------------
 1 | v1.0.10 Change log:
 2 | --------------------------------------------------------------------------------
 3 | Bug fix:
 4 | Fix issue https://github.com/ayinloya/materialized-css-snippets/issues/13
 5 | Thanks @animeshsinghweb
 6 | 
 7 | If there are new features added to the materialize css project which is not available here, send a request or add it and make a pull request. 
 8 | 
 9 | Credit to all contributors
10 | * @pythad, new materialize css icons 
11 | * @logomaster256, awesome indentation
12 | * @theprinceanim), comprehensive readme
13 | * You, the hacker.
14 | 
15 | Thanks a lot.
16 | 
17 | If you find any bugs, have a contribution or suggestions please let me know at:
18 | 
19 | https://github.com/ayinloya/materialized-css-snippets
20 | 
21 | twitter.com/ayinloya
22 | 
23 | Happy coding. :)
24 | 
25 | --------------------------------------------------------------------------------
26 | 


--------------------------------------------------------------------------------
/messages/1.0.2.txt:
--------------------------------------------------------------------------------
 1 | v1.0.2 Changelog:
 2 | --------------------------------------------------------------------------------
 3 | 
 4 | 
 5 | * Thanks to (@theprinceanim), we now have a very comprehensive readme
 6 | * CDN
 7 | * collection tab triggers
 8 | * m-navbar:slideout-js fixed but remember to add $
 9 | * m-sticky-footer:css fixed
10 | 
11 | If you find any bugs or have a contribution please let me know at:
12 | 
13 | https://github.com/ayinloya/materialized-css-snippets
14 | 
15 | Happy coding. :)
16 | 
17 | --------------------------------------------------------------------------------


--------------------------------------------------------------------------------
/messages/1.0.5.txt:
--------------------------------------------------------------------------------
 1 | v1.0.5 Changelog:
 2 | --------------------------------------------------------------------------------
 3 | 
 4 | 
 5 | * Thanks to (@logomaster256), the snippets are now well indented and aligned.
 6 | 
 7 | Credits to https://github.com/logomaster256 for this version.
 8 | Thanks a lot.
 9 | 
10 | If you find any bugs or have a contribution please let me know at:
11 | 
12 | https://github.com/ayinloya/materialized-css-snippets
13 | 
14 | Happy coding. :)
15 | 
16 | --------------------------------------------------------------------------------


--------------------------------------------------------------------------------
/messages/1.0.6.txt:
--------------------------------------------------------------------------------
 1 | v1.0.6 Changelog:
 2 | --------------------------------------------------------------------------------
 3 | * Materialize Css has changed how icons are handled. 
 4 | * Thanks to https://github.com/pythad, the new materialize css icons implementation has be taken care of.
 5 |     
 6 |     In this update, the following are changed
 7 | 
 8 |     | Snippet                 |                     Old                     |         New
 9 |     |-------------------------|---------------------------------------------------------------------------------
10 |     | m-icon                  |  <i class="mdi-content-add"></i>            | <i class="material-icons"></i>
11 |     | m-icon:tiny             |  <i class="tiny mdi-content-add"></i>       | <i class="tiny material-icons"></i>
12 |     | m-icon:sm               |  <i class="small mdi-content-add"></i>      | <i class="small material-icons"></i>
13 |     | m-icon:md               |  <i class="medium mdi-content-add"></i>     | <i class="medium material-icons"></i>
14 |    
15 |     - All other icon snippets are removed, since they are a base to the rest of the icons.
16 | 
17 | 
18 | Credit to all contributors
19 | * @pythad, new materialize css icons 
20 | * @logomaster256, awesome indentation
21 | * @theprinceanim), comprehensive readme
22 | * You, the coder.
23 | 
24 | Thanks a lot.
25 | 
26 | If you find any bugs or have a contribution please let me know at:
27 | 
28 | https://github.com/ayinloya/materialized-css-snippets
29 | 
30 | Happy coding. :)
31 | 
32 | --------------------------------------------------------------------------------
33 | 


--------------------------------------------------------------------------------
/messages/1.0.7.txt:
--------------------------------------------------------------------------------
 1 | v1.0.7 Change log:
 2 | --------------------------------------------------------------------------------
 3 | 
 4 | * Materialize Css has changed how icons are handled. 
 5 | * Thanks to https://github.com/pythad, the new materialize css icons implementation has be taken care of.
 6 |     
 7 |     In this update, the following are changed
 8 | 
 9 |     Access the new version of materialize css
10 |     
11 |     | Snippet                   |                   code                     
12 |     |---------------------------|--------------------------------------------
13 |     | m-icon                    |  <i class="material-icons"></i>
14 |     | m-icon:tiny               |  i class="tiny material-icons"></i>
15 |     | m-icon:sm                 |  i class="small material-icons"></i>
16 |     | m-icon:md                 |  <i class="medium material-icons"></i>
17 | 
18 |     Using the old icon snippets
19 |     | Snippet                   |                   code                     
20 |     |---------------------------|---------------------------------------------
21 |     | m-icon-o                  |  <i class="mdi-content-add"></i>            
22 |     | m-icon:tiny-o             |  <i class="tiny mdi-content-add"></i>      
23 |     | m-icon:sm-o               |  <i class="small mdi-content-add"></i>     
24 |     | m-icon:md-o               |  <i class="medium mdi-content-add"></
25 | 
26 | 
27 |     - All other components that use icons have been refactored to append -o at the end
28 |         Please take a look at the REAM ME for more
29 | 
30 | 
31 | Credit to all contributors
32 | * @pythad, new materialize css icons 
33 | * @logomaster256, awesome indentation
34 | * @theprinceanim), comprehensive readme
35 | * You, the coder.
36 | 
37 | Thanks a lot.
38 | 
39 | If you find any bugs or have a contribution please let me know at:
40 | 
41 | https://github.com/ayinloya/materialized-css-snippets
42 | 
43 | Happy coding. :)
44 | 
45 | --------------------------------------------------------------------------------
46 | 


--------------------------------------------------------------------------------
/messages/1.0.8.txt:
--------------------------------------------------------------------------------
 1 | v1.0.8 Change log:
 2 | --------------------------------------------------------------------------------
 3 | * fixed bugs in registration form
 4 | * added m-toast for html toasts and m-toast-js for programatically calling toast messages
 5 | 
 6 | Credit to all contributors
 7 | * @pythad, new materialize css icons 
 8 | * @logomaster256, awesome indentation
 9 | * @theprinceanim), comprehensive readme
10 | * You, the coder.
11 | 
12 | Thanks a lot.
13 | 
14 | If you find any bugs or have a contribution please let me know at:
15 | 
16 | https://github.com/ayinloya/materialized-css-snippets
17 | 
18 | Happy coding. :)
19 | 
20 | --------------------------------------------------------------------------------
21 | 


--------------------------------------------------------------------------------
/messages/1.0.9.txt:
--------------------------------------------------------------------------------
 1 | v1.0.9 Change log:
 2 | --------------------------------------------------------------------------------
 3 | * changed m-badge to m-badge-o for old icons and m-badge for google icons
 4 | * Added horizontal fixed button         m-fixed-floating-button:horizontal
 5 | * Added breadcrumps                     m-breadcrumps
 6 | * Added chips for tags and contacts     m-chip:tag and m-chip:contact
 7 | * Added collapsible popout              m-collapsible:popout
 8 | * Reduced spaces in m-col               
 9 | * Update cdn url for css and js
10 | 
11 | Credit to all contributors
12 | * @pythad, new materialize css icons 
13 | * @logomaster256, awesome indentation
14 | * @theprinceanim), comprehensive readme
15 | * You, the hacker.
16 | 
17 | Thanks a lot.
18 | 
19 | If you find any bugs, have a contribution or suggestions please let me know at:
20 | 
21 | https://github.com/ayinloya/materialized-css-snippets
22 | 
23 | twitter.com/ayinloya
24 | 
25 | Happy coding. :)
26 | 
27 | --------------------------------------------------------------------------------
28 | 


--------------------------------------------------------------------------------
/messages/1.1.0.txt:
--------------------------------------------------------------------------------
 1 | v1.1.0 Change log:
 2 | --------------------------------------------------------------------------------
 3 | Bug fix:
 4 | Fix issue https://github.com/ayinloya/materialized-css-snippets/issues/13
 5 | Thanks @animeshsinghweb
 6 | 
 7 | If there are new features added to the materialize css project which is not available here, send a request or add it and make a pull request. 
 8 | 
 9 | Update
10 | --------------------------------------------------------------------------
11 | 1. Select: 
12 |   multiselect
13 |   with icons
14 |   default browser select
15 |   grouped options
16 | 2. custom error and success message for input fields
17 | 3. switch
18 | 4. check box fill
19 | 
20 | Credit to all contributors
21 | * @pythad, new materialize css icons 
22 | * @logomaster256, awesome indentation
23 | * @theprinceanim), comprehensive readme
24 | * You, the hacker.
25 | 
26 | Thanks a lot.
27 | 
28 | If you find any bugs, have a contribution or suggestions please let me know at:
29 | 
30 | https://github.com/ayinloya/materialized-css-snippets
31 | 
32 | twitter.com/ayinloya
33 | 
34 | Happy coding. :)
35 | 
36 | --------------------------------------------------------------------------------
37 | 


--------------------------------------------------------------------------------
/messages/1.1.1.txt:
--------------------------------------------------------------------------------
 1 | v1.1.0 Change log:
 2 | --------------------------------------------------------------------------------
 3 | Bug fix:
 4 | Fix issue https://github.com/ayinloya/materialized-css-snippets/issues/13
 5 | Thanks @animeshsinghweb
 6 | 
 7 | If there are new features added to the materialize css project which is not available here, send a request or add it and make a pull request. 
 8 | 
 9 | Update
10 | --------------------------------------------------------------------------
11 | 1. Updated jquery cdn to 3.2.1
12 | 2. Updated cdn to latest materialize css 0.100.2
13 | 2. Added table highlight
14 | 
15 | Credit to all contributors
16 | * @pythad, new materialize css icons 
17 | * @logomaster256, awesome indentation
18 | * @theprinceanim), comprehensive readme
19 | * You, the hacker.
20 | 
21 | Thanks a lot.
22 | 
23 | If you find any bugs, have a contribution or suggestions please let me know at:
24 | 
25 | https://github.com/ayinloya/materialized-css-snippets
26 | 
27 | twitter.com/ayinloya
28 | 
29 | Happy coding. :)
30 | 
31 | --------------------------------------------------------------------------------
32 | 


--------------------------------------------------------------------------------
/messages/install.txt:
--------------------------------------------------------------------------------
 1 | ============================================================
 2 | Thank you for installing Materialized Snippets
 3 | ============================================================
 4 | 
 5 | Materializedcss snippets contains snippets of Materialize CSS components.
 6 | Hope it improves your workflow. :)
 7 | 
 8 | Please have a look at the read me.
 9 | Contribute as much as you can here
10 | https://github.com/ayinloya/materialized-css-snippets
11 | 
12 | File any issues or fork, correct any issues and send me pull requests. 
13 | No contribution is small.
14 | 


--------------------------------------------------------------------------------
/modal/m-modal-fixed-footer.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Modal Trigger -->
 4 | <a class="waves-effect waves-light btn modal-trigger" href="#${1:modal1}">Modal</a>
 5 | 
 6 | <!-- Modal Structure -->
 7 | <div id="${1:modal1}" class="modal modal-fixed-footer">
 8 | 	<div class="modal-content">
 9 | 		<h4>${2:Modal Header}</h4>
10 | 		<p>${3:A bunch of text}</p>
11 | 	</div>
12 | 	<div class="modal-footer">
13 | 		<a href="#" class="waves-effect waves-green btn-flat modal-action modal-close">${0:Agree}</a>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
18 | 	<tabTrigger>m-modal:fixed-footer</tabTrigger>
19 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
20 | 	<!-- <scope>source.python</scope> -->
21 | </snippet>


--------------------------------------------------------------------------------
/modal/m-modal.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <!-- Modal Trigger -->
 4 | <a class="waves-effect waves-light btn modal-trigger" href="#${1:modal1}">Modal</a>
 5 | 
 6 | <!-- Modal Structure -->
 7 | <div id="${1:modal1}" class="modal">
 8 | 	<div class="modal-content">
 9 | 		<h4>${2:Modal Header}</h4>
10 | 		<p>${3:A bunch of text}</p>
11 | 	</div>
12 | 	<div class="modal-footer">
13 | 		<a href="#" class="waves-effect waves-green btn-flat modal-action modal-close">${0:Agree}</a>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
18 | 	<tabTrigger>m-modal</tabTrigger>
19 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
20 | 	<!-- <scope>source.python</scope> -->
21 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-center.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<a href="#" class="brand-logo center">Logo</a>
 6 | 		<ul id="nav-mobile" class="left hide-on-med-and-down">
 7 | 			<li><a href="sass.html">Sass</a></li>
 8 | 			<li><a href="components.html">Components</a></li>
 9 | 			<li><a href="javascript.html">JavaScript</a></li>
10 | 		</ul>
11 | 	</div>
12 | </nav>
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-navbar:center</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-collapse.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<a href="#!" class="brand-logo">${1:Logo}</a>
 6 | 		<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
 7 | 		<ul class="right hide-on-med-and-down">
 8 | 			<li><a href="sass.html">${2:Sass}</a></li>
 9 | 			<li><a href="components.html">Components</a></li>
10 | 			<li><a href="javascript.html">Javascript</a></li>
11 | 			<li><a href="mobile.html">Mobile</a></li>
12 | 		</ul>
13 | 		<ul class="side-nav" id="mobile-demo">
14 | 			<li><a href="sass.html">Sass</a></li>
15 | 			<li><a href="components.html">Components</a></li>
16 | 			<li><a href="javascript.html">Javascript</a></li>
17 | 			<li><a href="mobile.html">Mobile</a></li>
18 | 		</ul>
19 | 	</div>
20 | </nav>
21 | ]]></content>
22 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
23 | 	<tabTrigger>m-navbar:collapse</tabTrigger>
24 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
25 | 	<!-- <scope>source.python</scope> -->
26 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-fixed.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Dropdown Structure -->
 4 | <ul id="dropdown1" class="dropdown-content">
 5 | 	<li><a href="#!">one</a></li>
 6 | 	<li><a href="#!">two</a></li>
 7 | 	<li class="divider"></li>
 8 | 	<li><a href="#!">three</a></li>
 9 | </ul>
10 | <nav>
11 | 	<div class="navbar-fixed">
12 | 		<a href="#!" class="brand-logo">Logo</a>
13 | 		<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
14 | 		<ul class="right hide-on-med-and-down">
15 | 			<li><a href="sass.html">Sass</a></li>
16 | 			<li><a href="components.html">Components</a></li>
17 | 			<!-- Dropdown Trigger -->
18 | 			<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
19 | 		</ul>
20 | 		<ul class="side-nav" id="mobile-demo">
21 | 			<li><a href="sass.html">Sass</a></li>
22 | 			<li><a href="components.html">Components</a></li>
23 | 		</ul>
24 | 	</div>
25 | </nav>
26 | ]]></content>
27 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
28 | 	<tabTrigger>m-navbar:fixed</tabTrigger>
29 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
30 | 	<!-- <scope>source.python</scope> -->
31 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-icon-text.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<a href="#!" class="brand-logo">Logo</a>
 6 | 		<ul class="right hide-on-med-and-down">
 7 | 			<li><a href="sass.html"><i class="mdi-action-search left"></i>Link with Left Icon</a></li>
 8 | 			<li><a href="components.html"><i class="mdi-action-view-module right"></i>Link with Right Icon</a></li>
 9 | 		</ul>
10 | 	</div>
11 | </nav>
12 | ]]></content>
13 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 | 	<tabTrigger>m-navbar:icon-text</tabTrigger>
15 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
16 | 	<!-- <scope>source.python</scope> -->
17 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-icons.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<a href="#!" class="brand-logo">Logo</a>
 6 | 		<ul class="right hide-on-med-and-down">
 7 | 			<li><a href="sass.html"><i class="mdi-action-search"></i></a></li>
 8 | 			<li><a href="components.html"><i class="mdi-action-view-module"></i></a></li>
 9 | 			<li><a href="javascript.html"><i class="mdi-navigation-refresh"></i></a></li>
10 | 			<li><a href="mobile.html"><i class="mdi-navigation-more-vert"></i></a></li>
11 | 		</ul>
12 | 	</div>
13 | </nav>
14 | ]]></content>
15 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16 | 	<tabTrigger>m-navbar:icon</tabTrigger>
17 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
18 | 	<!-- <scope>source.python</scope> -->
19 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-left.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<a href="#" class="brand-logo right">Logo</a>
 6 | 		<ul id="nav-mobile" class="left hide-on-med-and-down">
 7 | 			<li><a href="sass.html">Sass</a></li>
 8 | 			<li><a href="components.html">Components</a></li>
 9 | 			<li><a href="javascript.html">JavaScript</a></li>
10 | 		</ul>
11 | 	</div>
12 | </nav>
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-navbar:left</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Dropdown Structure -->
 4 | <ul id="dropdown1" class="dropdown-content">
 5 | 	<li><a href="#!">one</a></li>
 6 | 	<li><a href="#!">two</a></li>
 7 | 	<li class="divider"></li>
 8 | 	<li><a href="#!">three</a></li>
 9 | </ul>
10 | <nav>
11 | 	<div class="nav-wrapper">
12 | 		<a href="#!" class="brand-logo">Logo</a>
13 | 		<!-- activate side-bav in mobile view -->
14 | 		<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
15 | 		<ul class="right hide-on-med-and-down">
16 | 			<li><a href="sass.html">Sass</a></li>
17 | 			<li><a href="components.html">Components</a></li>
18 | 			<!-- Dropdown Trigger -->
19 | 			<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
20 | 		</ul>
21 | 		<!-- navbar for mobile -->
22 | 		<ul class="side-nav" id="mobile-demo">
23 | 			<li><a href="sass.html">Sass</a></li>
24 | 			<li><a href="components.html">Components</a></li>
25 | 		</ul>
26 | 	</div>
27 | </nav>
28 | ]]></content>
29 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
30 | 	<tabTrigger>m-navbar-o</tabTrigger>
31 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
32 | 	<!-- <scope>source.python</scope> -->
33 | </snippet>
34 | 


--------------------------------------------------------------------------------
/navbar/m-navbar-right.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<a href="#" class="brand-logo">Logo</a>
 6 | 		<ul id="nav-mobile" class="right hide-on-med-and-down">
 7 | 			<li><a href="sass.html">Sass</a></li>
 8 | 			<li><a href="components.html">Components</a></li>
 9 | 			<li><a href="javascript.html">JavaScript</a></li>
10 | 		</ul>
11 | 	</div>
12 | </nav>
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-navbar:right</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-search-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<form>
 6 | 			<div class="input-field">
 7 | 				<input id="search" type="text" required>
 8 | 				<label for="search"><i class="mdi-action-search"></i></label>
 9 | 			</div>
10 | 		</form>
11 | 	</div>
12 | </nav>
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-navbar:search-o</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/navbar/m-navbar-search.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<div class="nav-wrapper">
 5 | 		<form>
 6 | 			<div class="input-field">
 7 | 				<input id="search" type="text" required>
 8 | 				<label for="search"><i class="material-icons">search</i></label>
 9 | 			</div>
10 | 		</form>
11 | 	</div>
12 | </nav>
13 | ]]></content>
14 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 | 	<tabTrigger>m-navbar:search</tabTrigger>
16 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
17 | 	<!-- <scope>source.python</scope> -->
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/navbar/m-navbar-slideout-dropdown.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul id="slide-out" class="side-nav">
 4 | 	<li><a href="#!">First Sidebar Link</a></li>
 5 | 	<li><a href="#!">Second Sidebar Link</a></li>
 6 | 	<li class="no-padding">
 7 | 		<ul class="collapsible collapsible-accordion">
 8 | 			<li>
 9 | 				<a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
10 | 				<div class="collapsible-body">
11 | 					<ul>
12 | 						<li><a href="#!">First</a></li>
13 | 						<li><a href="#!">Second</a></li>
14 | 						<li><a href="#!">Third</a></li>
15 | 						<li><a href="#!">Fourth</a></li>
16 | 					</ul>
17 | 				</div>
18 | 			</li>
19 | 		</ul>
20 | 	</li>
21 | </ul>
22 | <ul class="right hide-on-med-and-down">
23 | 	<li><a href="#!">First Sidebar Link</a></li>
24 | 	<li><a href="#!">Second Sidebar Link</a></li>
25 | 	<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
26 | 	<ul id='dropdown1' class='dropdown-content'>
27 | 		<li><a href="#!">First</a></li>
28 | 		<li><a href="#!">Second</a></li>
29 | 		<li><a href="#!">Third</a></li>
30 | 		<li><a href="#!">Fourth</a></li>
31 | 	</ul>
32 | </ul>
33 | <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
34 | ]]></content>
35 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
36 | 	<tabTrigger>m-navbar:slideout-dropdown</tabTrigger>
37 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
38 | 	<!-- <scope>source.python</scope> -->
39 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-slideout-fixed.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul id="slide-out" class="side-nav fixed">
 4 | 	<li><a href="#!">${1:First Sidebar Link}</a></li>
 5 | 	<li><a href="#!">${2:Second Sidebar Link}</a></li>
 6 | </ul>
 7 | <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
 8 | ]]></content>
 9 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 | 	<tabTrigger>m-navbar:slideout-fixed</tabTrigger>
11 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
12 | 	<!-- <scope>source.python</scope> -->
13 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-slideout-fullscreen.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul id="slide-out" class="side-nav fixed">
 4 | 	<li><a href="#!">${1:First Sidebar Link}</a></li>
 5 | 	<li><a href="#!">${2:Second Sidebar Link}</a></li>
 6 | </ul>
 7 | <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
 8 | ]]></content>
 9 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 | 	<tabTrigger>m-navbar:slideout-fullscreen</tabTrigger>
11 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
12 | 	<!-- <scope>source.python</scope> -->
13 | </snippet>


--------------------------------------------------------------------------------
/navbar/m-navbar-slideout-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<ul class="right hide-on-med-and-down">
 5 | 		<li><a href="#!">${1:First Sidebar Link}</a></li>
 6 | 		<li><a href="#!">${2:Second Sidebar Link}</a></li>
 7 | 	</ul>
 8 | 	<ul id="slide-out" class="side-nav">
 9 | 		<li><a href="#!">${1:First Sidebar Link}</a></li>
10 | 		<li><a href="#!">${2:Second Sidebar Link}</a></li>
11 | 	</ul>
12 | 	<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
13 | </nav>
14 | ]]></content>
15 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16 | 	<tabTrigger>m-navbar:slideout-o</tabTrigger>
17 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
18 | 	<!-- <scope>source.python</scope> -->
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/navbar/m-navbar-slideout.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <nav>
 4 | 	<ul class="right hide-on-med-and-down">
 5 | 		<li><a href="#!">${1:First Sidebar Link}</a></li>
 6 | 		<li><a href="#!">${2:Second Sidebar Link}</a></li>
 7 | 	</ul>
 8 | 	<ul id="slide-out" class="side-nav">
 9 | 		<li><a href="#!">${1:First Sidebar Link}</a></li>
10 | 		<li><a href="#!">${2:Second Sidebar Link}</a></li>
11 | 	</ul>
12 | 	<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
13 | </nav>
14 | ]]></content>
15 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16 | 	<tabTrigger>m-navbar:slideout</tabTrigger>
17 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
18 | 	<!-- <scope>source.python</scope> -->
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/navbar/m-navbar.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!-- Dropdown Structure -->
 4 | <ul id="dropdown1" class="dropdown-content">
 5 | 	<li><a href="#!">one</a></li>
 6 | 	<li><a href="#!">two</a></li>
 7 | 	<li class="divider"></li>
 8 | 	<li><a href="#!">three</a></li>
 9 | </ul>
10 | <nav>
11 | 	<div class="nav-wrapper">
12 | 		<a href="#!" class="brand-logo">Logo</a>
13 | 		<!-- activate side-bav in mobile view -->
14 | 		<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
15 | 		<ul class="right hide-on-med-and-down">
16 | 			<li><a href="sass.html">Sass</a></li>
17 | 			<li><a href="components.html">Components</a></li>
18 | 			<!-- Dropdown Trigger -->
19 | 			<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
20 | 		</ul>
21 | 		<!-- navbar for mobile -->
22 | 		<ul class="side-nav" id="mobile-demo">
23 | 			<li><a href="sass.html">Sass</a></li>
24 | 			<li><a href="components.html">Components</a></li>
25 | 		</ul>
26 | 	</div>
27 | </nav>
28 | ]]></content>
29 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
30 | 	<tabTrigger>m-navbar</tabTrigger>
31 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
32 | 	<!-- <scope>source.python</scope> -->
33 | </snippet>
34 | 


--------------------------------------------------------------------------------
/pagination/m-basic-pagination-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="pagination">
 4 | 	<li class="disabled"><a href="#!"><i class="mdi-navigation-chevron-left"></i></a></li>
 5 | 	<li class="active"><a href="#!">1</a></li>
 6 | 	<li class="waves-effect"><a href="#!">2</a></li>
 7 | 	<li class="waves-effect"><a href="#!">3</a></li>
 8 | 	<li class="waves-effect"><a href="#!">4</a></li>
 9 | 	<li class="waves-effect"><a href="#!">5</a></li>
10 | 	<li class="waves-effect"><a href="#!"><i class="mdi-navigation-chevron-right"></i></a></li>
11 | </ul>
12 | ]]></content>
13 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 | 	<tabTrigger>m-pagination-o</tabTrigger>
15 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
16 | 	<!-- <scope>source.python</scope> -->
17 | 	<description>Materialize basic pagination</description>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/pagination/m-basic-pagination.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <ul class="pagination">
 4 | 	<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
 5 | 	<li class="active"><a href="#!">1</a></li>
 6 | 	<li class="waves-effect"><a href="#!">2</a></li>
 7 | 	<li class="waves-effect"><a href="#!">3</a></li>
 8 | 	<li class="waves-effect"><a href="#!">4</a></li>
 9 | 	<li class="waves-effect"><a href="#!">5</a></li>
10 | 	<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
11 | </ul>
12 | ]]></content>
13 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 | 	<tabTrigger>m-pagination</tabTrigger>
15 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
16 | 	<!-- <scope>source.python</scope> -->
17 | 	<description>Materialize basic pagination</description>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/parallax/m-parallax.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="parallax-container">
 4 | 	<div class="parallax"><img src="${1:images/parallax1.jpg}"></div>
 5 | </div>
 6 | ]]></content>
 7 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 | 	<tabTrigger>m-parallax</tabTrigger>
 9 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
10 | 	<!-- <scope>source.python</scope> -->
11 | </snippet>


--------------------------------------------------------------------------------
/progressbar/m-progress-bar-circular.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="preloader-wrapper big active">
 4 | 	<div class="spinner-layer spinner-${1:blue}-only">
 5 | 		<div class="circle-clipper left">
 6 | 			<div class="circle"></div>
 7 | 		</div>
 8 | 		<div class="gap-patch">
 9 | 			<div class="circle"></div>
10 | 		</div>
11 | 		<div class="circle-clipper right">
12 | 			<div class="circle"></div>
13 | 		</div>
14 | 	</div>
15 | </div>
16 | ]]></content>
17 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
18 | 	<tabTrigger>m-progress-bar:circular</tabTrigger>
19 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
20 | 	<!-- <scope>source.python</scope> -->
21 | </snippet>


--------------------------------------------------------------------------------
/progressbar/m-progress-bar-determinate.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="progress">
 4 | 	<div class="determinate" style="width: 70%"></div>
 5 | </div>
 6 | ]]></content>
 7 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 | 	<tabTrigger>m-progress-bar:determinate</tabTrigger>
 9 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
10 | 	<!-- <scope>source.python</scope> -->
11 | </snippet>


--------------------------------------------------------------------------------
/progressbar/m-progress-bar-indeterminate.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="progress">
 4 | 	<div class="indeterminate"></div>
 5 | </div>
 6 | ]]></content>
 7 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 | 	<tabTrigger>m-progress-bar:indeterminate</tabTrigger>
 9 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
10 | 	<!-- <scope>source.python</scope> -->
11 | 	<description>Materialize indeterminate progress bar</description>
12 | </snippet>


--------------------------------------------------------------------------------
/progressbar/m-progress-bar-rainbow.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="preloader-wrapper big active">
 4 | 	<div class="spinner-layer spinner-blue">
 5 | 		<div class="circle-clipper left">
 6 | 			<div class="circle"></div>
 7 | 		</div>
 8 | 		<div class="gap-patch">
 9 | 			<div class="circle"></div>
10 | 		</div>
11 | 		<div class="circle-clipper right">
12 | 			<div class="circle"></div>
13 | 		</div>
14 | 	</div>
15 | 
16 | 	<div class="spinner-layer spinner-red">
17 | 		<div class="circle-clipper left">
18 | 			<div class="circle"></div>
19 | 		</div>
20 | 		<div class="gap-patch">
21 | 			<div class="circle"></div>
22 | 		</div>
23 | 		<div class="circle-clipper right">
24 | 			<div class="circle"></div>
25 | 		</div>
26 | 	</div>
27 | 
28 | 	<div class="spinner-layer spinner-yellow">
29 | 		<div class="circle-clipper left">
30 | 			<div class="circle"></div>
31 | 		</div>
32 | 		<div class="gap-patch">
33 | 			<div class="circle"></div>
34 | 		</div>
35 | 		<div class="circle-clipper right">
36 | 			<div class="circle"></div>
37 | 		</div>
38 | 	</div>
39 | 
40 | 	<div class="spinner-layer spinner-green">
41 | 		<div class="circle-clipper left">
42 | 			<div class="circle"></div>
43 | 		</div>
44 | 		<div class="gap-patch">
45 | 			<div class="circle"></div>
46 | 		</div>
47 | 		<div class="circle-clipper right">
48 | 			<div class="circle"></div>
49 | 		</div>
50 | 	</div>
51 | </div>
52 | ]]></content>
53 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
54 | 	<tabTrigger>m-progress-bar:rainbow</tabTrigger>
55 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
56 | 	<!-- <scope>source.python</scope> -->
57 | </snippet>
58 | 


--------------------------------------------------------------------------------
/scroll/m-scrollspy.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<div class="col s12 m9 l10">
 5 | 		<div id="${1:introduction}" class="section scrollspy">
 6 | 			<p>${2:Content} </p>
 7 | 		</div>
 8 | 
 9 | 		<div id="${3:structure}" class="section scrollspy">
10 | 			<p>${4:Content} </p>
11 | 		</div>
12 | 
13 | 		<div id="${5:initialization}" class="section scrollspy">
14 | 			<p>${6:Content} </p>
15 | 		</div>
16 | 	</div>
17 | 	<div class="col hide-on-small-only m3 l2">
18 | 		<ul class="section table-of-contents">
19 | 			<li><a href="#${1:introduction}">${1:Introduction}</a></li>
20 | 			<li><a href="#${3:structure}">${3:Structure}</a></li>
21 | 			<li><a href="#${5:initialization}">${5:Intialization}</a></li>
22 | 		</ul>
23 | 	</div>
24 | </div>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-scrollspy</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/table/m-table-bordered.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <table class="bordered">
 4 | 	<thead>
 5 | 		<tr>
 6 | 			<th data-field="${1:id}">${2:Name}</th>
 7 | 			<th data-field="${3:name}">${4:Item Name}</th>
 8 | 			<th data-field="${5:price}">${6:Item Price}</th>
 9 | 		</tr>
10 | 	</thead>
11 | 
12 | 	<tbody>
13 | 		<tr>
14 | 			<td>${7:Alvin}</td>
15 | 			<td>${8:Eclair}</td>
16 | 			<td>${9:$0.87}</td>
17 | 		</tr>
18 | 		<tr>
19 | 			<td>${10:Alan}</td>
20 | 			<td>${11:Jellybean}</td>
21 | 			<td>${12:$3.76}</td>
22 | 		</tr>
23 | 	</tbody>
24 | </table>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-table:bordered</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/table/m-table-centered.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <table class="centered">
 4 | 	<thead>
 5 | 		<tr>
 6 | 			<th data-field="${1:id}">${2:Name}</th>
 7 | 			<th data-field="${3:name}">${4:Item Name}</th>
 8 | 			<th data-field="${5:price}">${6:Item Price}</th>
 9 | 		</tr>
10 | 	</thead>
11 | 
12 | 	<tbody>
13 | 		<tr>
14 | 			<td>${7:Alvin}</td>
15 | 			<td>${8:Eclair}</td>
16 | 			<td>${9:$0.87}</td>
17 | 		</tr>
18 | 		<tr>
19 | 			<td>${10:Alan}</td>
20 | 			<td>${11:Jellybean}</td>
21 | 			<td>${12:$3.76}</td>
22 | 		</tr>
23 | 	</tbody>
24 | </table>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-table:centered</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/table/m-table-highlight.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <table class="highlight">
 4 | 	<thead>
 5 | 		<tr>
 6 | 			<th data-field="${1:id}">${2:Name}</th>
 7 | 			<th data-field="${3:name}">${4:Item Name}</th>
 8 | 			<th data-field="${5:price}">${6:Item Price}</th>
 9 | 		</tr>
10 | 	</thead>
11 | 
12 | 	<tbody>
13 | 		<tr>
14 | 			<td>${7:Alvin}</td>
15 | 			<td>${8:Eclair}</td>
16 | 			<td>${9:$0.87}</td>
17 | 		</tr>
18 | 		<tr>
19 | 			<td>${10:Alan}</td>
20 | 			<td>${11:Jellybean}</td>
21 | 			<td>${12:$3.76}</td>
22 | 		</tr>
23 | 	</tbody>
24 | </table>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-table:highlight</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/table/m-table-hoverable.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <table class="hoverable">
 4 | 	<thead>
 5 | 		<tr>
 6 | 			<th data-field="${1:id}">${2:Name}</th>
 7 | 			<th data-field="${3:name}">${4:Item Name}</th>
 8 | 			<th data-field="${5:price}">${6:Item Price}</th>
 9 | 		</tr>
10 | 	</thead>
11 | 
12 | 	<tbody>
13 | 		<tr>
14 | 			<td>${7:Alvin}</td>
15 | 			<td>${8:Eclair}</td>
16 | 			<td>${9:$0.87}</td>
17 | 		</tr>
18 | 		<tr>
19 | 			<td>${10:Alan}</td>
20 | 			<td>${11:Jellybean}</td>
21 | 			<td>${12:$3.76}</td>
22 | 		</tr>
23 | 	</tbody>
24 | </table>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-table:hover</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/table/m-table-responsive.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <table class="responsive-table">
 4 | 	<thead>
 5 | 		<tr>
 6 | 			<th data-field="${1:id}">${2:Name}</th>
 7 | 			<th data-field="${3:name}">${4:Item Name}</th>
 8 | 			<th data-field="${5:price}">${6:Item Price}</th>
 9 | 		</tr>
10 | 	</thead>
11 | 
12 | 	<tbody>
13 | 		<tr>
14 | 			<td>${7:Alvin}</td>
15 | 			<td>${8:Eclair}</td>
16 | 			<td>${9:$0.87}</td>
17 | 		</tr>
18 | 		<tr>
19 | 			<td>${10:Alan}</td>
20 | 			<td>${11:Jellybean}</td>
21 | 			<td>${12:$3.76}</td>
22 | 		</tr>
23 | 	</tbody>
24 | </table>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-table:responsive</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/table/m-table-striped.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <table class="striped">
 4 | 	<thead>
 5 | 		<tr>
 6 | 			<th data-field="${1:id}">${2:Name}</th>
 7 | 			<th data-field="${3:name}">${4:Item Name}</th>
 8 | 			<th data-field="${5:price}">${6:Item Price}</th>
 9 | 		</tr>
10 | 	</thead>
11 | 
12 | 	<tbody>
13 | 		<tr>
14 | 			<td>${7:Alvin}</td>
15 | 			<td>${8:Eclair}</td>
16 | 			<td>${9:$0.87}</td>
17 | 		</tr>
18 | 		<tr>
19 | 			<td>${10:Alan}</td>
20 | 			<td>${11:Jellybean}</td>
21 | 			<td>${12:$3.76}</td>
22 | 		</tr>
23 | 	</tbody>
24 | </table>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-table:striped</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/table/m-table.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <table>
 4 | 	<thead>
 5 | 		<tr>
 6 | 			<th data-field="${1:id}">${2:Name}</th>
 7 | 			<th data-field="${3:name}">${4:Item Name}</th>
 8 | 			<th data-field="${5:price}">${6:Item Price}</th>
 9 | 		</tr>
10 | 	</thead>
11 | 
12 | 	<tbody>
13 | 		<tr>
14 | 			<td>${7:Alvin}</td>
15 | 			<td>${8:Eclair}</td>
16 | 			<td>${9:$0.87}</td>
17 | 		</tr>
18 | 		<tr>
19 | 			<td>${10:Alan}</td>
20 | 			<td>${11:Jellybean}</td>
21 | 			<td>${12:$3.76}</td>
22 | 		</tr>
23 | 	</tbody>
24 | </table>
25 | ]]></content>
26 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
27 | 	<tabTrigger>m-table</tabTrigger>
28 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
29 | 	<!-- <scope>source.python</scope> -->
30 | </snippet>


--------------------------------------------------------------------------------
/tabs/m-tabs.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row">
 4 | 	<div class="col s12">
 5 | 		<ul class="tabs">
 6 | 			<li class="tab col s3"><a ${9:class="active"} href="#${1:test1}">${2:Test 1}</a></li>
 7 | 			<li class="tab col s3"><a class="active" href="#${3:test2}">${4:Test 2}</a></li>
 8 | 			<li class="tab col s3"><a href="#${5:test3}">${6:Test 3}</a></li>
 9 | 			<li class="tab col s3"><a href="#${7:test4}">${8:Test 4}</a></li>
10 | 		</ul>
11 | 	</div>
12 | 	<div id="${1:test1}" class="col s12">${2:Test 1}</div>
13 | 	<div id="${3:test2}" class="col s12">${4:Test 2}</div>
14 | 	<div id="${5:test3}" class="col s12">${6:Test 3}</div>
15 | 	<div id="${7:test4}" class="col s12">${8:Test 4}</div>
16 | </div>
17 | ]]></content>
18 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 | 	<tabTrigger>m-tab</tabTrigger>
20 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
21 | 	<!-- <scope>source.python</scope> -->
22 | </snippet>


--------------------------------------------------------------------------------
/template/m-template-html-o.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!DOCTYPE html>
 4 | <html>
 5 | 	<head>
 6 | 		<!--Import materialize.css-->
 7 | 		<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 8 | 
 9 | 		<!--Let browser know website is optimized for mobile-->
10 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
11 | 	</head>
12 | 
13 | 	<body>
14 | 		${1:content here}
15 | 		<!--Import jQuery before materialize.js-->
16 | 		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
17 | 		<script type="text/javascript" src="js/materialize.min.js"></script>
18 | 	</body>
19 | </html>
20 | ]]></content>
21 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
22 | 	<tabTrigger>m-template:html</tabTrigger>
23 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
24 | 	<!-- <scope>source.python</scope> -->
25 | </snippet>


--------------------------------------------------------------------------------
/template/m-template-html.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <!DOCTYPE html>
 4 | <html>
 5 | 	<head>
 6 | 		<!--Import materialize.css-->
 7 | 		<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 8 | 
 9 | 		<!--Let browser know website is optimized for mobile-->
10 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
11 | 	</head>
12 | 
13 | 	<body>
14 | 		${1:content here}
15 | 		<!--Import jQuery before materialize.js-->
16 | 		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
17 | 		<script type="text/javascript" src="js/materialize.min.js"></script>
18 | 	</body>
19 | </html>
20 | ]]></content>
21 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
22 | 	<tabTrigger>m-template:html</tabTrigger>
23 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
24 | 	<!-- <scope>source.python</scope> -->
25 | </snippet>


--------------------------------------------------------------------------------
/template/m-template-parallax-o.sublime-snippet:
--------------------------------------------------------------------------------
  1 | <snippet>
  2 | 	<content><![CDATA[
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | 	<head>
  6 | 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  7 | 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  8 | 		<title>Parallax Template - Materialize</title>
  9 | 
 10 | 		<!-- CSS  -->
 11 | 		<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 12 | 		<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 13 | 	</head>
 14 | 	<body>
 15 | 		<nav class="white" role="navigation">
 16 | 			<div class="nav-wrapper container">
 17 | 				<a id="logo-container" href="#" class="brand-logo">Logo</a>
 18 | 				<ul class="right">
 19 | 					<li><a href="#">Navbar Link</a></li>
 20 | 				</ul>
 21 | 
 22 | 				<ul id="nav-mobile" class="side-nav">
 23 | 					<li><a href="#">Navbar Link</a></li>
 24 | 				</ul>
 25 | 				<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
 26 | 			</div>
 27 | 		</nav>
 28 | 
 29 | 		<div id="index-banner" class="parallax-container">
 30 | 			<div class="section no-pad-bot">
 31 | 				<div class="container">
 32 | 					<br><br>
 33 | 					<h1 class="header center teal-text text-lighten-2">Parallax Template</h1>
 34 | 					<div class="row center">
 35 | 						<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
 36 | 					</div>
 37 | 					<div class="row center">
 38 | 						<a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
 39 | 					</div>
 40 | 					<br><br>
 41 | 
 42 | 				</div>
 43 | 			</div>
 44 | 			<div class="parallax"><img src="background1.jpg" alt="Unsplashed background img 2"></div>
 45 | 		</div>
 46 | 
 47 | 		<div class="container">
 48 | 			<div class="section">
 49 | 
 50 | 				<!--   Icon Section   -->
 51 | 				<div class="row">
 52 | 					<div class="col s12 m4">
 53 | 						<div class="icon-block">
 54 | 							<h2 class="center brown-text"><i class="mdi-image-flash-on"></i></h2>
 55 | 							<h5 class="center">Speeds up development</h5>
 56 | 
 57 | 							<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
 58 | 						</div>
 59 | 					</div>
 60 | 
 61 | 					<div class="col s12 m4">
 62 | 						<div class="icon-block">
 63 | 							<h2 class="center brown-text"><i class="mdi-social-group"></i></h2>
 64 | 							<h5 class="center">User Experience Focused</h5>
 65 | 
 66 | 							<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
 67 | 						</div>
 68 | 					</div>
 69 | 
 70 | 					<div class="col s12 m4">
 71 | 						<div class="icon-block">
 72 | 							<h2 class="center brown-text"><i class="mdi-action-settings"></i></h2>
 73 | 							<h5 class="center">Easy to work with</h5>
 74 | 
 75 | 							<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
 76 | 						</div>
 77 | 					</div>
 78 | 				</div>
 79 | 
 80 | 			</div>
 81 | 		</div>
 82 | 
 83 | 
 84 | 		<div class="parallax-container valign-wrapper">
 85 | 			<div class="section no-pad-bot">
 86 | 				<div class="container">
 87 | 					<div class="row center">
 88 | 						<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
 89 | 					</div>
 90 | 				</div>
 91 | 			</div>
 92 | 			<div class="parallax"><img src="background3.jpg" alt="Unsplashed background img 2"></div>
 93 | 		</div>
 94 | 
 95 | 		<div class="container">
 96 | 			<div class="section">
 97 | 
 98 | 				<div class="row">
 99 | 					<div class="col s12 center">
100 | 						<h3><i class="mdi-content-send brown-text"></i></h3>
101 | 						<h4>Contact Us</h4>
102 | 						<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
103 | 					</div>
104 | 				</div>
105 | 
106 | 			</div>
107 | 		</div>
108 | 
109 | 
110 | 		<div class="parallax-container valign-wrapper">
111 | 			<div class="section no-pad-bot">
112 | 				<div class="container">
113 | 					<div class="row center">
114 | 						<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
115 | 					</div>
116 | 				</div>
117 | 			</div>
118 | 			<div class="parallax"><img src="background2.jpg" alt="Unsplashed background img 3"></div>
119 | 		</div>
120 | 
121 | 		<footer class="page-footer teal">
122 | 			<div class="container">
123 | 				<div class="row">
124 | 					<div class="col l6 s12">
125 | 						<h5 class="white-text">Company Bio</h5>
126 | 						<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
127 | 
128 | 
129 | 					</div>
130 | 					<div class="col l3 s12">
131 | 						<h5 class="white-text">Settings</h5>
132 | 						<ul>
133 | 							<li><a class="white-text" href="#!">Link 1</a></li>
134 | 							<li><a class="white-text" href="#!">Link 2</a></li>
135 | 							<li><a class="white-text" href="#!">Link 3</a></li>
136 | 							<li><a class="white-text" href="#!">Link 4</a></li>
137 | 						</ul>
138 | 					</div>
139 | 					<div class="col l3 s12">
140 | 						<h5 class="white-text">Connect</h5>
141 | 						<ul>
142 | 							<li><a class="white-text" href="#!">Link 1</a></li>
143 | 							<li><a class="white-text" href="#!">Link 2</a></li>
144 | 							<li><a class="white-text" href="#!">Link 3</a></li>
145 | 							<li><a class="white-text" href="#!">Link 4</a></li>
146 | 						</ul>
147 | 					</div>
148 | 				</div>
149 | 			</div>
150 | 			<div class="footer-copyright">
151 | 				<div class="container">
152 | 					Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
153 | 				</div>
154 | 			</div>
155 | 		</footer>
156 | 
157 | 		<!--  Scripts-->
158 | 		<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
159 | 		<script src="js/materialize.js"></script>
160 | 		<script src="js/init.js"></script>
161 | 
162 | 	</body>
163 | </html>
164 | 				
165 | 				]]></content>
166 | 				<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
167 | 				<tabTrigger>m-template:parallax</tabTrigger>
168 | 				<!-- Optional: Set a scope to limit where the snippet will trigger -->
169 | 				<!-- <scope>source.python</scope> -->
170 | 			</snippet>


--------------------------------------------------------------------------------
/template/m-template-parallax.sublime-snippet:
--------------------------------------------------------------------------------
  1 | <snippet>
  2 | 	<content><![CDATA[
  3 | <!DOCTYPE html>
  4 | <!DOCTYPE html>
  5 | <html lang="en">
  6 | <head>
  7 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  8 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  9 |   <title>Parallax Template - Materialize</title>
 10 | 
 11 |   <!-- CSS  -->
 12 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 13 |   <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 14 |   <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 15 | </head>
 16 | <body>
 17 |   <nav class="white" role="navigation">
 18 |     <div class="nav-wrapper container">
 19 |       <a id="logo-container" href="#" class="brand-logo">Logo</a>
 20 |       <ul class="right hide-on-med-and-down">
 21 |         <li><a href="#">Navbar Link</a></li>
 22 |       </ul>
 23 | 
 24 |       <ul id="nav-mobile" class="side-nav">
 25 |         <li><a href="#">Navbar Link</a></li>
 26 |       </ul>
 27 |       <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
 28 |     </div>
 29 |   </nav>
 30 | 
 31 |   <div id="index-banner" class="parallax-container">
 32 |     <div class="section no-pad-bot">
 33 |       <div class="container">
 34 |         <br><br>
 35 |         <h1 class="header center teal-text text-lighten-2">Parallax Template</h1>
 36 |         <div class="row center">
 37 |           <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
 38 |         </div>
 39 |         <div class="row center">
 40 |           <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
 41 |         </div>
 42 |         <br><br>
 43 | 
 44 |       </div>
 45 |     </div>
 46 |     <div class="parallax"><img src="background1.jpg" alt="Unsplashed background img 1"></div>
 47 |   </div>
 48 | 
 49 | 
 50 |   <div class="container">
 51 |     <div class="section">
 52 | 
 53 |       <!--   Icon Section   -->
 54 |       <div class="row">
 55 |         <div class="col s12 m4">
 56 |           <div class="icon-block">
 57 |             <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
 58 |             <h5 class="center">Speeds up development</h5>
 59 | 
 60 |             <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
 61 |           </div>
 62 |         </div>
 63 | 
 64 |         <div class="col s12 m4">
 65 |           <div class="icon-block">
 66 |             <h2 class="center brown-text"><i class="material-icons">group</i></h2>
 67 |             <h5 class="center">User Experience Focused</h5>
 68 | 
 69 |             <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
 70 |           </div>
 71 |         </div>
 72 | 
 73 |         <div class="col s12 m4">
 74 |           <div class="icon-block">
 75 |             <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
 76 |             <h5 class="center">Easy to work with</h5>
 77 | 
 78 |             <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
 79 |           </div>
 80 |         </div>
 81 |       </div>
 82 | 
 83 |     </div>
 84 |   </div>
 85 | 
 86 | 
 87 |   <div class="parallax-container valign-wrapper">
 88 |     <div class="section no-pad-bot">
 89 |       <div class="container">
 90 |         <div class="row center">
 91 |           <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
 92 |         </div>
 93 |       </div>
 94 |     </div>
 95 |     <div class="parallax"><img src="background2.jpg" alt="Unsplashed background img 2"></div>
 96 |   </div>
 97 | 
 98 |   <div class="container">
 99 |     <div class="section">
100 | 
101 |       <div class="row">
102 |         <div class="col s12 center">
103 |           <h3><i class="mdi-content-send brown-text"></i></h3>
104 |           <h4>Contact Us</h4>
105 |           <p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
106 |         </div>
107 |       </div>
108 | 
109 |     </div>
110 |   </div>
111 | 
112 | 
113 |   <div class="parallax-container valign-wrapper">
114 |     <div class="section no-pad-bot">
115 |       <div class="container">
116 |         <div class="row center">
117 |           <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
118 |         </div>
119 |       </div>
120 |     </div>
121 |     <div class="parallax"><img src="background3.jpg" alt="Unsplashed background img 3"></div>
122 |   </div>
123 | 
124 |   <footer class="page-footer teal">
125 |     <div class="container">
126 |       <div class="row">
127 |         <div class="col l6 s12">
128 |           <h5 class="white-text">Company Bio</h5>
129 |           <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
130 | 
131 | 
132 |         </div>
133 |         <div class="col l3 s12">
134 |           <h5 class="white-text">Settings</h5>
135 |           <ul>
136 |             <li><a class="white-text" href="#!">Link 1</a></li>
137 |             <li><a class="white-text" href="#!">Link 2</a></li>
138 |             <li><a class="white-text" href="#!">Link 3</a></li>
139 |             <li><a class="white-text" href="#!">Link 4</a></li>
140 |           </ul>
141 |         </div>
142 |         <div class="col l3 s12">
143 |           <h5 class="white-text">Connect</h5>
144 |           <ul>
145 |             <li><a class="white-text" href="#!">Link 1</a></li>
146 |             <li><a class="white-text" href="#!">Link 2</a></li>
147 |             <li><a class="white-text" href="#!">Link 3</a></li>
148 |             <li><a class="white-text" href="#!">Link 4</a></li>
149 |           </ul>
150 |         </div>
151 |       </div>
152 |     </div>
153 |     <div class="footer-copyright">
154 |       <div class="container">
155 |       Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
156 |       </div>
157 |     </div>
158 |   </footer>
159 | 
160 | 
161 |   <!--  Scripts-->
162 |   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
163 |   <script src="../../dist/js/materialize.js"></script>
164 |   <script src="js/init.js"></script>
165 | 
166 |   </body>
167 | </html>
168 | 				
169 | 				]]></content>
170 | 				<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
171 | 				<tabTrigger>m-template:parallax</tabTrigger>
172 | 				<!-- Optional: Set a scope to limit where the snippet will trigger -->
173 | 				<!-- <scope>source.python</scope> -->
174 | 			</snippet>
175 | 


--------------------------------------------------------------------------------
/template/m-template-starter-o.sublime-snippet:
--------------------------------------------------------------------------------
  1 | <snippet>
  2 | 	<content><![CDATA[
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | 	<head>
  6 | 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  7 | 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  8 | 		<title>Starter Template - Materialize</title>
  9 | 
 10 | 		<!-- CSS  -->
 11 | 		<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 12 | 		<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 13 | 	</head>
 14 | 	<body>
 15 | 		<nav class="light-blue lighten-1" role="navigation">
 16 | 			<div class="container">
 17 | 				<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
 18 | 					<ul class="right">
 19 | 						<li><a href="#">Navbar Link</a></li>
 20 | 					</ul>
 21 | 
 22 | 					<ul id="nav-mobile" class="side-nav">
 23 | 						<li><a href="#">Navbar Link</a></li>
 24 | 					</ul>
 25 | 					<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
 26 | 				</div>
 27 | 			</div>
 28 | 		</nav>
 29 | 	<div class="section no-pad-bot" id="index-banner">
 30 | 		<div class="container">
 31 | 			<br><br>
 32 | 			<h1 class="header center orange-text">Starter Template</h1>
 33 | 			<div class="row center">
 34 | 				<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
 35 | 			</div>
 36 | 			<div class="row center">
 37 | 				<a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
 38 | 			</div>
 39 | 			<br><br>
 40 | 
 41 | 		</div>
 42 | 	</div>
 43 | 
 44 | 	<div class="container">
 45 | 		<div class="section">
 46 | 
 47 | 			<!--   Icon Section   -->
 48 | 			<div class="row">
 49 | 				<div class="col s12 m4">
 50 | 					<div class="icon-block">
 51 | 						<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
 52 | 						<h5 class="center">Speeds up development</h5>
 53 | 
 54 | 						<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
 55 | 					</div>
 56 | 				</div>
 57 | 
 58 | 				<div class="col s12 m4">
 59 | 					<div class="icon-block">
 60 | 						<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
 61 | 						<h5 class="center">User Experience Focused</h5>
 62 | 
 63 | 						<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
 64 | 					</div>
 65 | 				</div>
 66 | 
 67 | 				<div class="col s12 m4">
 68 | 					<div class="icon-block">
 69 | 						<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
 70 | 						<h5 class="center">Easy to work with</h5>
 71 | 
 72 | 						<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
 73 | 					</div>
 74 | 				</div>
 75 | 			</div>
 76 | 
 77 | 		</div>
 78 | 		<br><br>
 79 | 
 80 | 			<div class="section">
 81 | 
 82 | 			</div>
 83 | 		</div>
 84 | 
 85 | 		<footer class="page-footer orange">
 86 | 			<div class="container">
 87 | 				<div class="row">
 88 | 					<div class="col l6 s12">
 89 | 						<h5 class="white-text">Company Bio</h5>
 90 | 						<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
 91 | 
 92 | 
 93 | 					</div>
 94 | 					<div class="col l3 s12">
 95 | 						<h5 class="white-text">Settings</h5>
 96 | 						<ul>
 97 | 							<li><a class="white-text" href="#!">Link 1</a></li>
 98 | 							<li><a class="white-text" href="#!">Link 2</a></li>
 99 | 							<li><a class="white-text" href="#!">Link 3</a></li>
100 | 							<li><a class="white-text" href="#!">Link 4</a></li>
101 | 						</ul>
102 | 					</div>
103 | 					<div class="col l3 s12">
104 | 						<h5 class="white-text">Connect</h5>
105 | 						<ul>
106 | 							<li><a class="white-text" href="#!">Link 1</a></li>
107 | 							<li><a class="white-text" href="#!">Link 2</a></li>
108 | 							<li><a class="white-text" href="#!">Link 3</a></li>
109 | 							<li><a class="white-text" href="#!">Link 4</a></li>
110 | 						</ul>
111 | 					</div>
112 | 				</div>
113 | 			</div>
114 | 			<div class="footer-copyright">
115 | 				<div class="container">
116 | 					Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
117 | 				</div>
118 | 			</div>
119 | 		</footer>
120 | 
121 | 
122 | 		<!--  Scripts-->
123 | 		<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
124 | 		<script src="js/materialize.js"></script>
125 | 		<script src="js/init.js"></script>
126 | 
127 | 	</body>
128 | </html>
129 | 					
130 | ]]></content>
131 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
132 | 	<tabTrigger>m-template:starter</tabTrigger>
133 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
134 | 	<!-- <scope>source.python</scope> -->
135 | </snippet>


--------------------------------------------------------------------------------
/template/m-template-starter.sublime-snippet:
--------------------------------------------------------------------------------
  1 | <snippet>
  2 | 	<content><![CDATA[
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | <head>
  6 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  8 |   <title>Starter Template - Materialize</title>
  9 | 
 10 |   <!-- CSS  -->
 11 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 12 |   <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 13 |   <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 14 | </head>
 15 | <body>
 16 |   <nav class="light-blue lighten-1" role="navigation">
 17 |     <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
 18 |       <ul class="right hide-on-med-and-down">
 19 |         <li><a href="#">Navbar Link</a></li>
 20 |       </ul>
 21 | 
 22 |       <ul id="nav-mobile" class="side-nav">
 23 |         <li><a href="#">Navbar Link</a></li>
 24 |       </ul>
 25 |       <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
 26 |     </div>
 27 |   </nav>
 28 |   <div class="section no-pad-bot" id="index-banner">
 29 |     <div class="container">
 30 |       <br><br>
 31 |       <h1 class="header center orange-text">Starter Template</h1>
 32 |       <div class="row center">
 33 |         <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
 34 |       </div>
 35 |       <div class="row center">
 36 |         <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
 37 |       </div>
 38 |       <br><br>
 39 | 
 40 |     </div>
 41 |   </div>
 42 | 
 43 | 
 44 |   <div class="container">
 45 |     <div class="section">
 46 | 
 47 |       <!--   Icon Section   -->
 48 |       <div class="row">
 49 |         <div class="col s12 m4">
 50 |           <div class="icon-block">
 51 |             <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
 52 |             <h5 class="center">Speeds up development</h5>
 53 | 
 54 |             <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
 55 |           </div>
 56 |         </div>
 57 | 
 58 |         <div class="col s12 m4">
 59 |           <div class="icon-block">
 60 |             <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
 61 |             <h5 class="center">User Experience Focused</h5>
 62 | 
 63 |             <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
 64 |           </div>
 65 |         </div>
 66 | 
 67 |         <div class="col s12 m4">
 68 |           <div class="icon-block">
 69 |             <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
 70 |             <h5 class="center">Easy to work with</h5>
 71 | 
 72 |             <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
 73 |           </div>
 74 |         </div>
 75 |       </div>
 76 | 
 77 |     </div>
 78 |     <br><br>
 79 | 
 80 |     <div class="section">
 81 | 
 82 |     </div>
 83 |   </div>
 84 | 
 85 |   <footer class="page-footer orange">
 86 |     <div class="container">
 87 |       <div class="row">
 88 |         <div class="col l6 s12">
 89 |           <h5 class="white-text">Company Bio</h5>
 90 |           <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
 91 | 
 92 | 
 93 |         </div>
 94 |         <div class="col l3 s12">
 95 |           <h5 class="white-text">Settings</h5>
 96 |           <ul>
 97 |             <li><a class="white-text" href="#!">Link 1</a></li>
 98 |             <li><a class="white-text" href="#!">Link 2</a></li>
 99 |             <li><a class="white-text" href="#!">Link 3</a></li>
100 |             <li><a class="white-text" href="#!">Link 4</a></li>
101 |           </ul>
102 |         </div>
103 |         <div class="col l3 s12">
104 |           <h5 class="white-text">Connect</h5>
105 |           <ul>
106 |             <li><a class="white-text" href="#!">Link 1</a></li>
107 |             <li><a class="white-text" href="#!">Link 2</a></li>
108 |             <li><a class="white-text" href="#!">Link 3</a></li>
109 |             <li><a class="white-text" href="#!">Link 4</a></li>
110 |           </ul>
111 |         </div>
112 |       </div>
113 |     </div>
114 |     <div class="footer-copyright">
115 |       <div class="container">
116 |       Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
117 |       </div>
118 |     </div>
119 |   </footer>
120 | 
121 | 
122 |   <!--  Scripts-->
123 |   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
124 |   <script src="../../bin/materialize.js"></script>
125 |   <script src="js/init.js"></script>
126 | 
127 |   </body>
128 | </html>
129 | 					
130 | ]]></content>
131 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
132 | 	<tabTrigger>m-template:starter</tabTrigger>
133 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
134 | 	<!-- <scope>source.python</scope> -->
135 | </snippet>
136 | 


--------------------------------------------------------------------------------
/typography/m-flow-text.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 | 	<content><![CDATA[
3 | <p class="flow-text">${1:I am Flow Text}</p>
4 | ]]></content>
5 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6 | 	<tabTrigger>m-flow-text</tabTrigger>
7 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
8 | 	<!-- <scope>source.python</scope> -->
9 | </snippet>


--------------------------------------------------------------------------------