Skip to content

Commit 98c7f3a

Browse files
acburstacburst
committedNov 1, 2017
fixed headers for css and components
·
1.0.01.0.0-alpha.1
1 parent 0eb2bdd commit 98c7f3a

13 files changed

+158
-96
lines changed
 

‎jade/page-contents/buttons_content.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h3 class="header">Floating</h3>
2424
</code></pre>
2525
<br>
2626

27-
<h4 class="light">Fixed Action Button</h4>
27+
<h5>Fixed Action Button</h5>
2828
<p>If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page.</p>
2929
<pre><code class="language-markup col s12">
3030
&lt;div class="fixed-action-btn">
@@ -49,7 +49,7 @@ <h4 class="light">Fixed Action Button</h4>
4949
});
5050
</code></pre>
5151
<br>
52-
<h4 class="light">Horizontal FAB</h4>
52+
<h5>Horizontal FAB</h5>
5353
<p>Creating a horizontal FAB is easy! Just set the direction parameter.</p>
5454
<div style="position: relative; height: 70px;">
5555
<div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 24px;">
@@ -83,7 +83,7 @@ <h4 class="light">Horizontal FAB</h4>
8383
</div>
8484
<br>
8585

86-
<h4 class="light">Click-only FAB</h4>
86+
<h5>Click-only FAB</h5>
8787
<p>If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the <code class="language-markup">click-to-toggle</code> class to the FAB.</p>
8888
<div style="position: relative; height: 70px;">
8989
<div class="fixed-action-btn click-to-toggle" style="position: absolute; right: 24px;">
@@ -104,8 +104,9 @@ <h4 class="light">Click-only FAB</h4>
104104
hoverEnabled: false
105105
});
106106
</code></pre>
107+
<br>
107108

108-
<h4 class="light">FAB to Toolbar</h4>
109+
<h5>FAB to Toolbar</h5>
109110
<p>Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the <code class="language-markup">toolbar</code> class to the FAB.</p>
110111
<iframe src="fab-toolbar-demo.html" frameborder="0" width="100%" height="100px"></iframe>
111112
<pre><code class="language-javascript">

‎jade/page-contents/cards_content.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ <h3 class="header">Card Reveal</h3>
257257
</div>
258258
<div class="row">
259259
<div class="col s12 m6">
260-
<h4 class="light">Card Action Options</h4>
260+
<h5>Card Action Options</h5>
261261
<div class="card">
262262
<div class="card-image waves-effect waves-block waves-light">
263263
<img class="activator" src="images/office.jpg">
@@ -359,7 +359,7 @@ <h3 class="header">Tabs in Cards</h3>
359359
</div>
360360
<div class="row">
361361
<div class="col s12 m6">
362-
<h4 class="light">White</h4>
362+
<h5>White</h5>
363363
<div class="card">
364364
<div class="card-content">
365365
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
@@ -387,7 +387,7 @@ <h4 class="light">White</h4>
387387
</div>
388388
<div class="row">
389389
<div class="col s12 m6">
390-
<h4 class="light">Colored</h4>
390+
<h5>Colored</h5>
391391
<div class="card blue">
392392
<div class="card-content white-text">
393393
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
@@ -431,7 +431,7 @@ <h3 class="header">Card Sizes</h3>
431431
</div>
432432
<div class="row">
433433
<div class="col s12 m6">
434-
<h4 class="light">Small</h4>
434+
<h5>Small</h5>
435435
<div class="card small">
436436
<div class="card-image">
437437
<img src="images/sample-1.jpg">
@@ -456,7 +456,7 @@ <h4 class="light">Small</h4>
456456

457457
<div class="row">
458458
<div class="col s12 m7">
459-
<h4 class="light">Medium</h4>
459+
<h5>Medium</h5>
460460
<div class="card medium">
461461
<div class="card-image">
462462
<img src="images/sample-1.jpg">
@@ -481,7 +481,7 @@ <h4 class="light">Medium</h4>
481481

482482
<div class="row">
483483
<div class="col s12 m8">
484-
<h4 class="light">Large</h4>
484+
<h5>Large</h5>
485485
<div class="card large">
486486
<div class="card-image">
487487
<img src="images/sample-1.jpg">

‎jade/page-contents/chips_content.html

+85-23
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
55

66
<div id="introduction" class="section scrollspy">
7-
<h4>Introduction</h4>
87
<p class="caption">
98
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
109
</p>
@@ -19,7 +18,7 @@ <h4>Introduction</h4>
1918
</div>
2019

2120
<div id="contact" class="section scrollspy">
22-
<h4>Contacts</h4>
21+
<h3 class="header">Contacts</h3>
2322
<p class="caption">
2423
To create a contact chip just add an img inside.
2524
</p>
@@ -32,7 +31,7 @@ <h4>Contacts</h4>
3231
</div>
3332

3433
<div id="tag" class="section scrollspy">
35-
<h4>Tags</h4>
34+
<h3 class="header">Tags</h3>
3635
<p class="caption">
3736
To create a tag chip just add a close icon inside with the class <code class="language-markup">close</code>.
3837
</p>
@@ -45,7 +44,7 @@ <h4>Tags</h4>
4544
</div>
4645

4746
<div id="basic" class="section scrollspy">
48-
<h4>Javascript Plugin Usage</h4>
47+
<h3 class="header">Javascript Plugin</h4>
4948
<p class="caption">To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by using your delete button.</p>
5049
<div class="chips"><input></div>
5150
<br>
@@ -60,17 +59,21 @@ <h4>Javascript Plugin Usage</h4>
6059
</div>
6160

6261
<div id="properties" class="section scrollspy">
63-
<h4>Markup</h4>
6462
<pre><code class="language-markup">
6563
&lt;div class="chips">&lt;/div>
6664
&lt;div class="chips chips-initial">&lt;/div>
6765
&lt;div class="chips chips-placeholder">&lt;/div>
6866
&lt;div class="chips chips-autocomplete">&lt;/div>
6967
</code></pre>
70-
<h4>jQuery Initialization</h4>
68+
<h3 class="header">Initialization</h3>
7169
<pre><code class="language-javascript">
72-
$('.chips').material_chip();
73-
$('.chips-initial').material_chip({
70+
var elem = document.querySelector('.chips');
71+
var instance = new M.Chips(elem, options);
72+
73+
// Or with jQuery
74+
75+
$('.chips').chips();
76+
$('.chips-initial').chips({
7477
data: [{
7578
tag: 'Apple',
7679
}, {
@@ -79,11 +82,11 @@ <h4>jQuery Initialization</h4>
7982
tag: 'Google',
8083
}],
8184
});
82-
$('.chips-placeholder').material_chip({
85+
$('.chips-placeholder').chips({
8386
placeholder: 'Enter a tag',
8487
secondaryPlaceholder: '+Tag',
8588
});
86-
$('.chips-autocomplete').material_chip({
89+
$('.chips-autocomplete').chips({
8790
autocompleteOptions: {
8891
data: {
8992
'Apple': null,
@@ -105,54 +108,63 @@ <h4>jQuery Initialization</h4>
105108
</code></pre>
106109

107110
<br>
108-
<h4>jQuery Plugin Options</h4>
111+
<h3 class="header">Options</h3>
109112
<table class="table highlight">
110113
<thead>
111114
<tr>
112-
<th>Option Name</th>
115+
<th>Name</th>
113116
<th>Type</th>
117+
<th>Default</th>
114118
<th>Description</th>
115119
</tr>
116120
</thead>
117121
<tbody>
118122
<tr>
119123
<td>data</td>
120-
<td>array</td>
124+
<td>Array</td>
125+
<td>[]</td>
121126
<td>Set the chip data (look at the Chip data object)</td>
122127
</tr>
123128
<tr>
124129
<td>placeholder</td>
125-
<td>string</td>
130+
<td>String</td>
131+
<td>''</td>
126132
<td>Set first placeholder when there are no tags.</td>
127133
</tr>
128134
<tr>
129135
<td>secondaryPlaceholder</td>
130-
<td>string</td>
136+
<td>String</td>
137+
<td>''</td>
131138
<td>Set second placeholder when adding additional tags.</td>
132139
</tr>
133140
<tr>
134141
<td>autocompleteOptions</td>
135142
<td>Object</td>
143+
<td>{}</td>
136144
<td>Set autocomplete options.</td>
137145
</tr>
138146
<tr>
139147
<td>limit</td>
140148
<td>Integer</td>
149+
<td>Infinity</td>
141150
<td>Set chips limit.</td>
142151
</tr>
143152
<tr>
144153
<td>onChipAdd</td>
145154
<td>Function</td>
155+
<td>null</td>
146156
<td>Callback for chip add.</td>
147157
</tr>
148158
<tr>
149159
<td>onChipSelect</td>
150160
<td>Function</td>
161+
<td>null</td>
151162
<td>Callback for chip select.</td>
152163
</tr>
153164
<tr>
154165
<td>onChipDelete</td>
155166
<td>Function</td>
167+
<td>null</td>
156168
<td>Callback for chip delete.</td>
157169
</tr>
158170
<tr>
@@ -161,20 +173,70 @@ <h4>jQuery Plugin Options</h4>
161173
</div>
162174

163175
<div id="methods" class="section scrollspy">
164-
<h4>Methods</h4>
176+
<h3 class="header">Methods</h3>
165177
<p class="caption">
166178
Use these methods to interact with chips.
167179
</p>
168180

169-
<pre><code class="language-javascript">
170-
// Add Chip
171-
$('.chips-initial').chips('addChip', data);
181+
<blockquote>
182+
<p>Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: </p>
183+
<pre><code class="language-javascript col s12">
184+
var instance = M.Carousel.getInstance(elem);
185+
186+
/* jQuery Method Calls
187+
You can still use the old jQuery plugin method calls.
188+
But you won't be able to access instance properties.
172189

173-
// Select Chip
174-
$('.chips-initial').chips('selectChip', chipIndex);
190+
$('.carousel').carousel('methodName');
191+
$('.carousel').carousel('methodName', paramName);
192+
*/
193+
</code></pre>
194+
</blockquote>
195+
196+
<h5 class="method-header">
197+
.next();
198+
</h5>
199+
<p>Move carousel to next slide or go forward a given amount of slides.</p>
200+
<h6>Arguments</h6>
201+
<p><b>Integer (optional):</b> How many times the carousel slides.</p>
202+
<pre><code class="language-javascript col s12">
203+
instance.next();
204+
instance.next(3); // Move next n times.
205+
</code></pre>
206+
<br>
207+
208+
<h5 class="method-header">
209+
.addChip();
210+
</h5>
211+
<p>Add chip to input.</p>
212+
<h6>Arguments</h6>
213+
<p><b>Chip:</b> Chip data object.</p>
214+
<pre><code class="language-javascript col s12">
215+
instance.prev();
216+
instance.prev(3); // Move previous n times.
217+
</code></pre>
218+
<br>
219+
220+
<h5 class="method-header">
221+
.deleteChip();
222+
</h5>
223+
<p>Delete nth chip.</p>
224+
<h6>Arguments</h6>
225+
<p><b>Integer:</b> Index of chip.</p>
226+
<pre><code class="language-javascript col s12">
227+
instance.set();
228+
instance.set(3); // Set to nth slide.
229+
</code></pre>
230+
<br>
175231

176-
// Delete Chip
177-
$('.chips-initial').chips('deleteChip', chipIndex);
232+
<h5 class="method-header">
233+
.selectChip();
234+
</h5>
235+
<p>Select nth chip.</p>
236+
<h6>Arguments</h6>
237+
<p><b>Integer:</b> Index of chip.</p>
238+
<pre><code class="language-javascript col s12">
239+
instance.destroy();
178240
</code></pre>
179241

180242
</div>

‎jade/page-contents/css-transitions_content.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,16 @@
66
<div id="scale" class="section scrollspy">
77
<p class="caption">We've made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.</p>
88

9-
<h4>Scale</h4>
9+
<br>
10+
<h5>Scale</h5>
1011
<p>Use this scale in and out elements. Make sure to add the base transition class <code class="language-markup">scale-transition</code>. Then add the class <code class="language-markup">scale-out</code> to scale the element down until it is hidden. To start something as hidden, add the class <code class="language-markup">scale-out</code> first, and then add the class <code class="language-markup">scale-in</code> to scale the element up until it is shown.</p>
12+
<br>
1113

1214
<a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition"><i class="material-icons">add</i></a>
1315

1416
<a id="scale-demo-trigger" href="#!" class="btn right">Toggle Scale</a>
1517

18+
<br><br>
1619
<pre><code class="language-markup">
1720
&lt;!-- Scaled in -->
1821
&lt;a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">

‎jade/page-contents/grid_content.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<h3 class="header">Container</h3>
1010
<p>The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The <code class="language-markup">container</code> class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
1111

12-
<h4>Demo</h4>
12+
<h5>Demo</h5>
1313
<p>Try the button below to see what the page looks like without containers.</p>
1414
<a id="container-toggle-button" class="btn waves-effect waves-light">Turn off Containers</a>
1515

@@ -63,7 +63,7 @@ <h4>Demo</h4>
6363
<div id="grid-intro" class="scrollspy">
6464
<h3 class="header">Introduction</h3>
6565
<p>Take a look at this section to quickly understand how the grid works!</p>
66-
<h4>12 Columns</h4>
66+
<h5>12 Columns</h5>
6767
<p>Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.</p>
6868
<div class="row">
6969
<div class="col s1 grid-example"><span class="flow-text">1</span></div>
@@ -100,7 +100,7 @@ <h4>12 Columns</h4>
100100

101101
<br>
102102

103-
<h4>Columns live inside Rows</h4>
103+
<h5>Columns live inside Rows</h5>
104104
<p>Remember when you are creating your layout that all columns must be contained inside a row and that you must add the <code class="language-markup">col</code> class to your inner divs to make them into columns</p>
105105
<div class="row">
106106
<div class="col s12 grid-example"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
@@ -160,16 +160,16 @@ <h3 class="header">Creating Layouts</h3>
160160
<p>Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.</p>
161161
<div class="row">
162162
<div class="col s12 m6">
163-
<h4>Section</h4>
163+
<h5>Section</h5>
164164
<p>The section class is used for simple top and bottom padding. Just add the <code class="language-markup">section</code> class to your div's containing large blocks of content.</p>
165165
</div>
166166
<div class="col s12 m6">
167-
<h4>Divider</h4>
167+
<h5>Divider</h5>
168168
<p>Dividers are 1 pixel lines that help break up your content. Just add the <code class="language-markup">divider</code> to a div in between your content.</p>
169169
</div>
170170
</div>
171171

172-
<h4>Example Sections and Dividers</h4>
172+
<h5>Example Sections and Dividers</h5>
173173
<div class="divider"></div>
174174
<div class="section">
175175
<h5>Section 1</h5>
@@ -204,7 +204,7 @@ <h5>Section 3</h5>
204204
&lt;/div>
205205
</code></pre><br>
206206

207-
<h4>Example Promotion Table</h4>
207+
<h5>Example Promotion Table</h5>
208208
<p>If we want 3 divs that are equal size, we define the divs with a width of 4-columns, as 4+4+4 nicely adds up to 12. Inside those divs, we can put our content. Take our front page content for example. We've modified it slightly for the sake of this example.</p>
209209
<div class="row">
210210
<div class="col s4">
@@ -248,7 +248,7 @@ <h4>Example Promotion Table</h4>
248248

249249
<br>
250250

251-
<h4>Example Side Navigation Layout</h4>
251+
<h5>Example Side Navigation Layout</h5>
252252
<p>You can see how easy it is to create layouts using the grid system. Just remember to make sure your column numbers add up to 12 for an even layout.</p>
253253

254254
<div class="row">
@@ -307,7 +307,7 @@ <h4>Example Side Navigation Layout</h4>
307307
<div id="grid-responsive" class="scrollspy">
308308
<h3 class="header">Creating Responsive Layouts</h3>
309309
<p>Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.</p>
310-
<h4>Screen Sizes</h4>
310+
<h5>Screen Sizes</h5>
311311
<table class="highlight">
312312
<thead>
313313
<tr>
@@ -345,7 +345,7 @@ <h4>Screen Sizes</h4>
345345

346346
<br>
347347

348-
<h4>Adding Responsiveness</h4>
348+
<h5>Adding Responsiveness</h5>
349349
<p>In the previous examples, we only defined the size for small screens using <code class="language-markup">"col s12"</code>. This is fine if we want a fixed layout since the rules propagate upwards. By just saying s12, we are essentially saying <code class="language-markup">"col s12 m12 l12"</code>. But by explicitly defining the size we can make our website more responsive.</p>
350350

351351
<div class="row">
@@ -361,7 +361,7 @@ <h4>Adding Responsiveness</h4>
361361

362362
<br>
363363

364-
<h4>Responsive Side Navigation Layout</h4>
364+
<h5>Responsive Side Navigation Layout</h5>
365365
<p>In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.</p>
366366

367367
<div class="row">
@@ -426,7 +426,7 @@ <h4>Responsive Side Navigation Layout</h4>
426426
&lt;/div>
427427
</code></pre>
428428

429-
<h4>More Responsive Grid Examples</h4>
429+
<h5>More Responsive Grid Examples</h5>
430430
<div class="row">
431431
<div class="col grid-example s12 blue lighten-1"><span class="flow-text">s12</span></div>
432432
<div class="col grid-example s12 m4 l2 teal lighten-1"><span class="flow-text">s12 m4 l2</span></div>

‎jade/page-contents/helpers_content.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<h3 class="header">Alignment</h3>
99
<p class="caption">We have easy to use classes to help you align your content.</p>
1010

11-
<h5 class="light">Vertical Align</h5>
11+
<h5>Vertical Align</h5>
1212
<p>You can easily vertically center things by adding the class <code class="language-markup">valign-wrapper</code> to the container holding the items you want to vertically align.</p>
1313
<div class="valign-demo valign-wrapper">
1414
<h5>This should be vertically aligned</h5>
@@ -19,7 +19,7 @@ <h5>This should be vertically aligned</h5>
1919
&lt;/div>
2020
</code></pre><br>
2121

22-
<h5 class="light">Text Align</h5>
22+
<h5>Text Align</h5>
2323
<p>These classes are for horizontally aligning content: <code class="language-markup">.left-align</code>, <code class="language-markup">.right-align</code> and <code class="language-markup">.center-align</code>.</p>
2424
<div class="talign-demo">
2525
<br>
@@ -47,7 +47,7 @@ <h5 class="center-align">This should be center aligned</h5>
4747
&lt;/div>
4848
</code></pre><br>
4949

50-
<h5 class="light">Quick Floats</h5>
50+
<h5>Quick Floats</h5>
5151
<p>Quickly float things by adding the class <code class="language-markup">left</code> or <code class="language-markup">right</code> to the element. <code class="language-markup">!important</code> is used to avoid specificity issues.</p>
5252
<pre><code class="language-markup">
5353
&lt;div class="left">...&lt;/div>
@@ -63,7 +63,7 @@ <h3 class="header">Hiding/Showing Content</h3>
6363
<table class="striped">
6464
<thead>
6565
<tr>
66-
<th></th>
66+
<th>Class</th>
6767
<th>Screen Range</th>
6868
</tr>
6969
</thead>
@@ -115,7 +115,7 @@ <h3 class="header">Hiding/Showing Content</h3>
115115
</tbody>
116116
</table>
117117
<br>
118-
<h5 class="light">Usage</h5>
118+
<h5>Usage</h5>
119119
<pre><code class="language-markup">
120120
&lt;div class="hide-on-small-only">&lt;/div>
121121
</code></pre><br>
@@ -129,7 +129,7 @@ <h5 class="light">Usage</h5>
129129
<h3 class="header">Formatting</h3>
130130
<p>These classes help format various content on your site.</p>
131131

132-
<h5 class="light">Truncation</h5>
132+
<h5>Truncation</h5>
133133
<p>To truncate long lines of text in an ellipsis, add the class <code class="language-markup">truncate</code> to the tag which contains the text. See an example below of a header being truncated inside a card.</p>
134134

135135
<div class="row">
@@ -144,7 +144,7 @@ <h4 class="truncate">This is an extremely long title that will be truncated</h4>
144144
&lt;h4 class="truncate">This is an extremely long title that will be truncated&lt;/h4>
145145
</code></pre><br>
146146

147-
<h5 class="light">Hover</h5>
147+
<h5>Hover</h5>
148148
<p>The <code class="language-markup">hoverable</code> is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.</p>
149149
<div class="card hoverable small">
150150
<div class="card-image">

‎jade/page-contents/icons_content.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<div id="usage" class="scrollspy">
66
<p class="caption">We have included 932 Material Design Icons courtesy of Google. You can download them directly from the <a href="https://google.github.io/material-design-icons/#icon-font-for-the-web">Material Design specs</a>.</p>
7-
<h4>Usage</h4>
7+
<h3 class="header">Usage</h3>
88
<p>To be able to use these icons, you must include this line in the <code class="language-markup">&lt;head></code>portion of your HTML code</p>
99
<pre><code class="language-markup">
1010
&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></code></pre>
@@ -13,7 +13,7 @@ <h4>Usage</h4>
1313
&lt;i class="material-icons">add&lt;/i>
1414
</code></pre>
1515

16-
<h4>Sizes</h4>
16+
<h5>Sizes</h5>
1717
<p>To control the size of the icon, change the <code class="language-css">font-size: 30px</code> property of your icon. Optionally you can use preset classes as shown below.</p>
1818
<div class="row">
1919
<div class="center-align">

‎jade/page-contents/media-css_content.html

+23-14
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,27 @@
88
<h3 class="header">Images</h3>
99
<p class="caption">Images can be styled in different ways using Materialize</p>
1010

11-
<h4>Responsive Images</h4>
11+
<br>
12+
<h5>Responsive Images</h5>
1213
<p>To make images resize responsively to page width, you can add the class <code class="language-markup">responsive-img</code> to your image tag. It will now have a <code class="language-markup">max-width: 100%</code> and <code class="language-markup">height:auto</code>.</p>
1314
<pre><code class="language-markup">
1415
&lt;img class="responsive-img" src="cool_pic.jpg">
1516
</code></pre>
16-
<h4>Circular images</h4>
17-
<div class="col s12 m8 offset-m2 l6 offset-l3">
18-
<div class="card-panel grey lighten-5 z-depth-1">
19-
<div class="row valign-wrapper">
20-
<div class="col s4 m2">
21-
<img src="images/yuna.jpg" alt="" class="circle responsive-img valign">
22-
</div>
23-
<div class="col s8 m10">
24-
<span class="black-text">
25-
This is a square image. Add the "circle" class to it to make it appear circular.
26-
</span>
17+
18+
<br>
19+
<h5>Circular images</h5>
20+
<div class="row">
21+
<div class="col s12 m8">
22+
<div class="card-panel grey lighten-5 z-depth-1">
23+
<div class="row valign-wrapper">
24+
<div class="col s4 m2">
25+
<img src="images/yuna.jpg" alt="" class="circle responsive-img valign">
26+
</div>
27+
<div class="col s8 m10">
28+
<span class="black-text">
29+
This is a square image. Add the "circle" class to it to make it appear circular.
30+
</span>
31+
</div>
2732
</div>
2833
</div>
2934
</div>
@@ -56,7 +61,9 @@ <h4>Circular images</h4>
5661
<div id="videos" class="section scrollspy">
5762
<h3 class="header">Videos</h3>
5863
<p class="caption">We provide a container for Embedded Videos that resizes them responsively.</p>
59-
<h4>Responsive Embeds</h4>
64+
65+
<br>
66+
<h5>Responsive Embeds</h5>
6067
<p>To make your embeds responsive, merely wrap them with a containing div which has the class <code class="language-markup">video-container</code></p>
6168
<div class="video-container">
6269
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
@@ -66,7 +73,9 @@ <h4>Responsive Embeds</h4>
6673
&lt;iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen>&lt;/iframe>
6774
&lt;/div>
6875
</code></pre>
69-
<h4>Responsive Videos</h4>
76+
77+
<br>
78+
<h5>Responsive Videos</h5>
7079
<p>To make your HTML5 Videos responsive just add the class <code class="language-markup">responsive-video</code> to the video tag.</p>
7180

7281
<video width="100%" controls>

‎jade/page-contents/navbar_content.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,7 @@ <h3 class="header">Mobile Collapse Button</h3>
483483
</code></pre>
484484

485485
<br>
486-
<h4>Initialization</h4>
486+
<h5>Initialization</h5>
487487
<p>After including the button-collapse line into your navbar, all you have to do now is place this code in your page's <code class="language-javascript">$( document ).ready(function(){})</code> code. This example below assumes you have not modified the classes in the above example. In the case that you have, just change the jQuery selector in the line below to match it.</p>
488488
<pre><code class="language-javascript">
489489
$('.sidenav').sidenav();

‎jade/page-contents/preloader_content.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<div id="linear" class="section scrollspy">
77
<h3 class="header">Linear</h3>
88
<p>There are a couple different types of linear progress bars.</p>
9-
<h4>Determinate</h4>
9+
<br>
10+
<h5>Determinate</h5>
1011
<div class="row">
1112
<div class="div col s8 offset-s2">
1213
<div class="progress">
@@ -19,8 +20,9 @@ <h4>Determinate</h4>
1920
&lt;div class="determinate" style="width: 70%">&lt;/div>
2021
&lt;/div>
2122
</code></pre>
23+
<br>
2224

23-
<h4>Indeterminate</h4>
25+
<h5>Indeterminate</h5>
2426
<div class="row">
2527
<div class="div col s8 offset-s2">
2628
<div class="progress">
@@ -40,7 +42,8 @@ <h4>Indeterminate</h4>
4042
<div id="circular" class="section scrollspy">
4143
<h3 class="header">Circular</h3>
4244
<p>There are 4 colors and 3 sizes of circular spinners. The spinner should be nested in a <code class="language-markup">preloader-wrapper</code> div. The default size is medium, but you can add the classes <code class="language-markup">big</code> or <code class="language-markup">small</code> to adjust the size accordingly. You can add the classes <code class="language-markup">spinner-red-only</code>, <code class="language-markup">spinner-blue-only</code>, <code class="language-markup">spinner-yellow-only</code> and <code class="language-markup">spinner-green-only</code>. You can also leave this class as just <code class="language-markup">spinner-layer</code> and it will be set to the <code class="language-css">$spinner-default-color</code> variable in our variables.scss file.</p>
43-
<h4>Colors</h4>
45+
<br>
46+
<h5>Colors</h5>
4447
<div class="row">
4548
<div class="col s12 m4 center">
4649
<div class="preloader-wrapper big active">

‎jade/page-contents/pulse_content.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
<div id="pulse" class="section scrollspy">
66
<p class="caption">Draw attention to your buttons with this subtle but captivating effect. Just add the class <code class="language-markup">pulse</code> to your button. Note: This is meant for floating buttons, so it may not work perfectly with every component.</p>
77

8+
<br>
89
<div style="display: flex; justify-content: space-around;">
910
<a class="btn-floating pulse"><i class="material-icons">menu</i></a>
1011
<a class="btn-floating btn-large pulse"><i class="material-icons">cloud</i></a>
1112
<a class="btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>
1213
</div>
14+
<br>
1315

14-
<h4>Pulse HTML Structure</h4>
16+
<h5>Pulse HTML Structure</h5>
1517
<pre><code class="language-markup">
1618
&lt;a class="btn-floating pulse">&lt;i class="material-icons">menu&lt;/i>&lt;/a>
1719
&lt;a class="btn-floating btn-large pulse">&lt;i class="material-icons">cloud&lt;/i>&lt;/a>

‎jade/page-contents/sass_content.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@ <h3 class="header">Media Queries</h3>
4545
Extra Large screen are defined as having a min-width of 1200px
4646
</p>
4747

48-
<h4>CSS</h4>
48+
<br>
49+
<h5>CSS</h5>
4950
<pre><code class="language-css col s12">
5051
/* These classes can be added to HTML Elements
5152
* to affect visibility on certain displays.
@@ -63,7 +64,8 @@ <h4>CSS</h4>
6364
.show-on-medium-and-down
6465
</code></pre>
6566

66-
<h4>Sass</h4>
67+
<br>
68+
<h5>Sass</h5>
6769
<pre><code class="language-scss col s12">
6870
@media #{$small-and-down} {
6971
// styles for small screens and down

‎jade/page-contents/typography_content.html

-20
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,6 @@
44
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
55

66
<div class="section">
7-
<div id="roboto" class="scrollspy">
8-
<h3 class="header">Roboto 2.0</h3>
9-
<p class="caption">
10-
The standard font Material Design uses is Roboto. We have included the font files with our framework.
11-
</p>
12-
<div class="row">
13-
<p class="col s12 m4">We bundle our framework with the latest iteration of Roboto Google has released. It comes with 5 different font weights you can use: 100, 300, 400, 500, 600.<br> <br> Here is an image from Google's Roboto Specimen document displaying the different font weights.</p>
14-
<img class="col s12 m8" src="https://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7SW9CUzR4MnRpOTg/style_typography_roboto1.png">
15-
</div>
16-
17-
<h4>Removing Roboto</h4>
18-
<p>In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the code below to your liking and add it to your custom css.</p>
19-
<pre><code class="language-css">
20-
html {
21-
font-family: GillSans, Calibri, Trebuchet, sans-serif;
22-
}
23-
</code></pre>
24-
</div>
25-
267

278
<div id="headers" class="section scrollspy">
289
<h3 class="header">Headers</h3>
@@ -81,7 +62,6 @@ <h3 class="header">Flow Text</h3>
8162
</div>
8263
<div style="height: 1px;">
8364
<ul class="section table-of-contents">
84-
<li><a href="#roboto">Roboto</a></li>
8565
<li><a href="#headers">Headers</a></li>
8666
<li><a href="#blockquote">Blockquotes</a></li>
8767
<li><a href="#flow">Flow Text</a></li>

0 commit comments

Comments
 (0)
Please sign in to comment.