Skip to content

Commit 609e90d

Browse files
Daniel WDaniel W
Daniel W
authored and
Daniel W
committed
refactor: fix html
1 parent a47c584 commit 609e90d

8 files changed

+1288
-1401
lines changed

‎getting-started.html

+15-12
Original file line numberDiff line numberDiff line change
@@ -235,18 +235,21 @@ <h5>Compiling Sass</h5>
235235
can link this newly outputted file in your HTML page.
236236
</p>
237237

238-
<pre><code class="language-markup directory-markup">MyWebsite/
239-
|--css/
240-
| |--materialize.css &lt;-- compiled from scss/materialize.scss
241-
|
242-
|--js/
243-
| |--materialize.js
244-
|
245-
|--scss/
246-
| |--materialize.scss
247-
| |--components/
248-
|
249-
|--index.html
238+
<pre><code class="language-markup directory-markup">
239+
<xmp>
240+
MyWebsite/
241+
|--css/
242+
| |--materialize.css <-- compiled from scss/materialize.scss
243+
|
244+
|--js/
245+
| |--materialize.js
246+
|
247+
|--scss/
248+
| |--materialize.scss
249+
| |--components/
250+
|
251+
|--index.html
252+
</xmp>
250253
</code></pre>
251254
</div>
252255
</div>

‎grid.html

+197-283
Large diffs are not rendered by default.

‎icons.html

+19-46
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,22 @@
1313
<div id="usage" class="scrollspy">
1414
<p class="caption">
1515
We use Google Material Icons by Google. They provide a
16-
<a href="https://fonts.google.com/icons?icon.set=Material+Icons"
17-
>searchable list</a
18-
>
19-
(which we do not include in the documentation here), which will
20-
also show you the relevant icon names for the CSS classes. You
21-
can download the icons directly from the
22-
<a
23-
href="https://google.github.io/material-design-icons/#icon-font-for-the-web"
24-
>Material Design specs</a
25-
>.
16+
<a href="https://fonts.google.com/icons?icon.set=Material+Icons">searchable list</a>
17+
(which we do not include in the documentation here), which will also show you the relevant icon names for the CSS classes. You can download the icons directly from
18+
the
19+
<a href="https://google.github.io/material-design-icons/#icon-font-for-the-web">Material Design specs</a>.
2620
</p>
2721
<p class="caption">
28-
In addition to Material Icons, we also provide support to every
29-
variation of
30-
<a
31-
href="https://fonts.google.com/icons?icon.set=Material+Symbols"
32-
>Material Symbols</a
33-
>
22+
In addition to Material Icons, we also provide support to every variation of
23+
<a href="https://fonts.google.com/icons?icon.set=Material+Symbols">Material Symbols</a>
3424
set (outlined, rounded and sharp).
3525
</p>
3626
<h3 class="header">Usage</h3>
3727
<p>
38-
To be able to use these icons, you must include one of the
39-
following lines in the
40-
<code class="language-markup"><head></code>portion of your
41-
HTML code
28+
To be able to use these icons, you must include one of the following lines in the
29+
<code class="language-markup">
30+
<xmp><head></head></xmp></code
31+
>portion of your HTML code
4232
</p>
4333
<pre><code class="language-markup">
4434
<xmp>
@@ -53,9 +43,7 @@ <h3 class="header">Usage</h3>
5343
</xmp>
5444
</code></pre>
5545
<p>
56-
To use these icons, use either the material-icons class or the
57-
corresponding material-symbols set class on an element and
58-
provide the ligature as the text content.
46+
To use these icons, use either the material-icons class or the corresponding material-symbols set class on an element and provide the ligature as the text content.
5947
</p>
6048
<pre><code class="language-markup">
6149
<xmp>
@@ -70,8 +58,7 @@ <h3 class="header">Usage</h3>
7058
<h5>Icon Sizes</h5>
7159
<p>
7260
To control the size of the icon, change the
73-
<code class="language-css">font-size: 30px</code> property of
74-
your icon. Optionally you can use preset classes as shown below.
61+
<code class="language-css">font-size: 30px</code> property of your icon. Optionally you can use preset classes as shown below.
7562
</p>
7663
<div class="row center-align">
7764
<div class="s3">
@@ -96,24 +83,16 @@ <h5>Icon Sizes</h5>
9683
<h5>Symbol Sizes</h5>
9784
<div class="row center-align">
9885
<div class="s3">
99-
<i class="material-symbols-outlined tiny icon-demo"
100-
>settings</i
101-
>
86+
<i class="material-symbols-outlined tiny icon-demo">settings</i>
10287
</div>
10388
<div class="s3">
104-
<i class="material-symbols-outlined small icon-demo"
105-
>settings</i
106-
>
89+
<i class="material-symbols-outlined small icon-demo">settings</i>
10790
</div>
10891
<div class="s3">
109-
<i class="material-symbols-outlined medium icon-demo"
110-
>settings</i
111-
>
92+
<i class="material-symbols-outlined medium icon-demo">settings</i>
11293
</div>
11394
<div class="s3">
114-
<i class="material-symbols-outlined large icon-demo"
115-
>settings</i
116-
>
95+
<i class="material-symbols-outlined large icon-demo">settings</i>
11796
</div>
11897

11998
<div class="s3"><p>Tiny</p></div>
@@ -137,20 +116,14 @@ <h5>Symbol Sizes</h5>
137116

138117
<div class="col hide-on-small-only m3 xl3">
139118
<div class="toc-wrapper">
140-
<div style="height: 1px;">
119+
<div style="height: 1px">
141120
<ul class="section table-of-contents">
142121
<li><a href="#usage">Usage</a></li>
143122
<li>
144-
<a
145-
href="https://fonts.google.com/icons?icon.set=Material+Icons"
146-
>Search Google's Material Icons</a
147-
>
123+
<a href="https://fonts.google.com/icons?icon.set=Material+Icons">Search Google's Material Icons</a>
148124
</li>
149125
<li>
150-
<a
151-
href="https://fonts.google.com/icons?icon.set=Material+Symbols"
152-
>Search Google's Material Symbols</a
153-
>
126+
<a href="https://fonts.google.com/icons?icon.set=Material+Symbols">Search Google's Material Symbols</a>
154127
</li>
155128
</ul>
156129
</div>

0 commit comments

Comments
 (0)