google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix styling page (closes #671) (Closes #689)

master
Alexander Surma 2015-07-03 22:01:16 +01:00 committed by Addy Osmani
parent 997b8e4b73
commit ed28a9a1ec
2 changed files with 64 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
docs/_assets/main.css
View File

@ -1029,10 +1029,11 @@ code[class*=language-], pre[class*=language-] {
}
}
/*Styles page*/
.styles .docs-layout-content .content.nope {
max-width: 640px;
width: 100%;
margin: 0 auto;
.styles a {
color: #00BCD4;
}
.styles .styles__content h2 {
text-transform: none;
}
.styles .typo-styles {
margin-bottom: 40px;
@ -1047,7 +1048,7 @@ code[class*=language-], pre[class*=language-] {
border-radius: 16px;
line-height: 32px;
text-align: center;
font-weight: 300;
font-weight: 500;
margin-top: 5px;
}
.styles .typo-styles dd {
@ -1063,6 +1064,7 @@ code[class*=language-], pre[class*=language-] {
}
.styles .typo-styles .typo-styles__desc .typo-styles__name {
margin-right: 8px;
font-weight: 400;
}
.styles .download-btn {
color: rgba(0, 0, 0, 0.54);
@ -1071,13 +1073,16 @@ code[class*=language-], pre[class*=language-] {
font-weight: 300;
margin-bottom: 20px;
}
.styles .download-btn.download-btn--customizer .material-icons {
margin-top: -2px;
}
.styles .download-btn > * {
margin-right: 8px;
}
.styles .styles__ribbon {
background-color: #4A148C;
width: 100vw;
margin: 40px 0;
margin: 80px 0;
margin-left: -40px;
height: 320px;
display: flex;
@ -1093,14 +1098,14 @@ code[class*=language-], pre[class*=language-] {
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__image {
display: block;
margin-bottom: 16px;
margin-bottom: 48px;
border: 0;
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption {
color: white;
text-transform: uppercase;
font-size: 16px;
font-weight: 300;
font-weight: 500;
height: 24px;
line-height: 24px;
text-align: center;
@ -1113,6 +1118,7 @@ code[class*=language-], pre[class*=language-] {
height: 24px;
line-height: 24px;
vertical-align: middle;
margin-top: -1px;
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption.ribbon__caption--split > .material-icons {
float: right;
@ -1136,6 +1142,9 @@ code[class*=language-], pre[class*=language-] {
width: 100vw;
max-width: none;
}
.styles .content ul {
font-size: 13px;
}
.styles .content li:before {
font-size: 16px;
}
@ -1152,6 +1161,16 @@ code[class*=language-], pre[class*=language-] {
max-width: 960px;
margin: 0 auto;
}
.styles .styles__download {
display: flex;
}
.styles .styles__download a {
font-weight: 500;
margin-right: 16px;
}
.styles .styles__content a .customizer {
border: 0;
}
@media (max-width: 850px) {
.started .docs-layout .docs-text-styling pre[class*=language-markup] {

40
docs/_pages/styles.md
View File

@ -67,10 +67,13 @@ include_prefix: ../
</dd>
</dl>
<div class="styles__download">
<a class="download-btn download-btn--font" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LRjU4U1NSeXdjd1U/RobotoTTF.zip">
<i class="material-icons">file_download</i>
<strong>Download Roboto Font</strong> 1.21 MB (.zip)
Download Roboto Font
</a>
<span class="download__size">1.21 MB (.zip)</span>
</div>
<div class="code-with-text">
To embed Roboto into your web page, copy the code as the first element in the <code>&lt;head&gt;</code> of your HTML document.
@ -88,11 +91,11 @@ include_prefix: ../
</div>
<div class="styles__content mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Icons</h3>
<p>Material Design Icons are the official open-source icons featured in the Google Material Design specification. What’s included:</p>
</div>
<div class="mdl-cell mdl-cell--8-col right-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<ul>
<li>SVG versions of all icons in both 24px and 48px flavours</li>
<li>SVG and CSS sprites of all icons</li>
@ -101,17 +104,19 @@ include_prefix: ../
<li>Hi-dpi version of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)</li>
</ul>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Getting Started</h3>
<p>You have a few options for getting the icons.</p>
<h3>Download the Zip</h3>
<p>Grab the latest stable zip archive (~57MB) of all icons of the bleeding-edge version from master.</p>
<div class="styles__download">
<a class="download-btn download-btn--icons" href="https://github.com/google/material-design-icons/releases/download/2.0.0/material-design-icons-2.0.0.zip">
<i class="material-icons">file_download</i>
<strong>Download</strong>
Download
</a>
</div>
<div class="mdl-cell mdl-cell--8-col right-col">
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<h3>Bower</h3>
<div class="code-with-text">
Install the icons using the <strong>Bower</strong> package manager.
@ -134,14 +139,14 @@ include_prefix: ../
</ul>
<p>Decide on the icon resolution required for your project and copy, then reference the icons you wish to use.</p>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Spritesheets</h3>
<p>Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites directory, under svg-sprite and css-sprite.</p>
<h3>Using CSS Sprites</h3>
<p>To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. E.g. to use one of the play icons in css-sprite-av.</p>
<p>That’s it! Don’t forget to publish the corresponding CSS and SVG/PNG files when deploying your project.</p>
</div>
<div class="mdl-cell mdl-cell--8-col right-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<div class="code-with-text">
Reference the stylesheet:
<pre class="language-markup"><code>&lt;link href="css-sprite/sprite-av-black.css" rel="stylesheet"&gt;</code></pre>
@ -155,11 +160,11 @@ include_prefix: ../
<pre class="language-markup"><code>&lt;div class="icon icon-ic_play-circle_outline_black_24dp"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Using SVG Sprites</h3>
<p>Similarly, to use an SVG spritesheet, reference the stylesheet for the icon category, then include the icon definition in your markup.</p>
</div>
<div class="mdl-cell mdl-cell--8-col right-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<div class="code-with-text">
E.g: to use one of the play icons in <code>svg-sprite-av</code>, reference the stylesheet:
<pre class="language-markup"><code>&lt;link href="svg-sprite/svg-sprite-av.css" rel="stylesheet"&gt;</code></pre>
@ -181,7 +186,7 @@ include_prefix: ../
<h3>Polymer Icons</h3>
<p>If you wish to use the icon set with Polymer, we recommend consuming them via the <strong>&lt;iron-icons&gt;-element</strong>.
<h3>License</h3>
All icons are released under <strong>Attribution 4.0 International license</strong>.
<p>All icons are released under <strong>Attribution 4.0 International license</strong>.</p>
</div>
</div>
<div class="styles__ribbon styles__ribbon--colors">
@ -193,20 +198,25 @@ include_prefix: ../
</a>
</div>
<div class="styles__content mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col">
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Color palette</h3>
<p>If you’re using the extended color palette, use the first color as the primary color in your app and the other colors as accents.</p>
<p><strong>See all colors and their accessibility ratios</strong>. This resource includes info on the appropriate contrast ratios and alpha values when using white or black text on a colored background.</p>
<div class="styles__download">
<a class="download-btn download-btn--swatches" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LSGx6b0w3WWpMQ1k/color_swatches.zip">
<i class="material-icons">file_download</i>
<strong>Download color swatches</strong> 0.02 MB (.zip)
Download color swatches
</a>
<span class="download__size">0.02 MB (.zip)</span>
</div>
<div class="styles__download">
<a class="download-btn download-btn--customizer" href="../customize/index.html">
<i class="material-icons">arrow_forward</i>
<strong>Try the custom CSS Theme Builder</strong>
Try the custom CSS Theme Builder
</a>
</div>
<div class="mdl-cell mdl-cell--8-col right-col">
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<a href="../customize/index.html"><img class="customizer" src="../assets/customizer.png"></a>
</div>
</div>