Add first part of Styles page
Addy Osmani
parent
af9016de0f
commit
4ab28263bd
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
|
|
@ -213,6 +213,7 @@ body:not(.about) .mdl-navigation__link.download > button {
|
|||
.about .docs-navigation .about,
|
||||
.templates .docs-navigation .templates,
|
||||
.started .docs-navigation .started,
|
||||
.styles .docs-navigation .styles,
|
||||
.components .docs-navigation .components,
|
||||
.styles .docs-navigation .styles,
|
||||
.customize .docs-navigation .customize {
|
||||
|
|
@ -936,6 +937,189 @@ code[class*=language-], pre[class*=language-] {
|
|||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
/*Styles page*/
|
||||
.styles .mdl-tabs__tab-bar {
|
||||
justify-content: flex-start;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.styles .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
|
||||
color: #00ACC1;
|
||||
}
|
||||
.styles .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
|
||||
background-color: #00ACC1;
|
||||
}
|
||||
.styles .docs-layout-content {
|
||||
text-align: center;
|
||||
}
|
||||
.styles .chapter-toc {
|
||||
display: table;
|
||||
}
|
||||
.styles .content h3 {
|
||||
display: table-cell;
|
||||
width: 140px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
padding-right: 60px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.styles .content section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.styles .section-content {
|
||||
display: table-cell;
|
||||
}
|
||||
.styles .content {
|
||||
padding: 40px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
.styles .content p {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.styles .mdl-tabs {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.styles .content h4 {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.styles .content .mdl-tabs__panel {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.styles .caption {
|
||||
font-size: 13px;
|
||||
max-width: 640px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.styles .caption h4 {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
margin-top: 0;
|
||||
}
|
||||
.styles .use-components pre {
|
||||
margin-top: 0;
|
||||
}
|
||||
.styles .component-example {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.styles ol {
|
||||
padding-left: 18px;
|
||||
font-size: 13px;
|
||||
max-width: 640px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.styles pre {
|
||||
width: 640px;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.styles .snippet-group {
|
||||
max-width: 640px;
|
||||
margin: 60px 0 40px 0;
|
||||
}
|
||||
|
||||
.styles .demo-page--typography table th {
|
||||
padding-right: 80px;
|
||||
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.styles .demo-typography--white {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.styles .demo-typography--black {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.styles .demo-typography--white,
|
||||
.styles .demo-typography--black,
|
||||
.styles .demo-typography--img-1,
|
||||
.styles .demo-typography--img-2 {
|
||||
width: 360px;
|
||||
height: 272px;
|
||||
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.styles .demo-typography--img-1 {
|
||||
background-image: url(img-1.png);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.styles .demo-typography--img-2 {
|
||||
background-image: url(img-2.png);
|
||||
color: white;
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
.styles .chapter-toc {
|
||||
display: block;
|
||||
}
|
||||
.styles .content h3 {
|
||||
display: block;
|
||||
width: auto;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
padding-right: 60px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.styles .section-content {
|
||||
display: block;
|
||||
}
|
||||
.styles pre {
|
||||
width: auto;
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
padding: 15px 40px;
|
||||
box-sizing: content-box;
|
||||
display: block;
|
||||
}
|
||||
.styles .caption {
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
max-width: none;
|
||||
box-sizing: content-box;
|
||||
padding: 15px 40px;
|
||||
}
|
||||
.styles .code-with-text {
|
||||
width: 100%;
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
padding: 15px 40px;
|
||||
display: block;
|
||||
}
|
||||
.styles .mdl-tabs__tab-bar {
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.styles .mdl-tabs__tab {
|
||||
padding: 0 3%;
|
||||
}
|
||||
.styles .content {
|
||||
display: block;
|
||||
}
|
||||
.styles .snippet-group {
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
max-width: none;
|
||||
}
|
||||
.styles .snippet-group code {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
|
||||
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
|
||||
(min-resolution: 2dppx), /* The standard way */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,235 @@
|
|||
---
|
||||
layout: layout
|
||||
layout: page
|
||||
title: Styles
|
||||
bodyclass: styles
|
||||
include_prefix: ../
|
||||
---
|
||||
|
||||
<section class="mdl-grid mdl-cell mdl-cell--8-col">
|
||||
<p>The Material Design Lite (MDL) **typography** component is a comprehensive approach to standardizing the use of typefaces in applications and page displays. MDL typography elements are intended to replace the myriad fonts used by developers (which vary significantly in appearance) and provide a robust, uniform library of text styles from which developers can choose.</p>
|
||||
|
||||
<p>The "Roboto" typeface is the standard for MDL display; it can easily be integrated into a web page using the CSS3 `@font-face` rule. However, Roboto is most simply accessed and included using a single standard HTML `<link>` element, which can be obtained at [this Google fonts page](http://www.google.com/fonts#UsePlace:use/Collection:Roboto).</p>
|
||||
|
||||
<p>Because of the many possible variations in font display characteristics in HTML and CSS, MDL typography aims to provide simple and intuitive styles that use the Roboto font and produce visually attractive and internally consistent text results. See the typography component's [Material Design specifications page](http://www.google.com/design/spec/style/typography.html) for details.</p>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
||||
<h2 class="mdl-typography--subhead">Typography</h2>
|
||||
<div class="demo-preview-block demo-page--typography">
|
||||
<table>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Display 4</th>
|
||||
<td class="mdl-typography--display-4">Light 112px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Display 3</th>
|
||||
<td class="mdl-typography--display-3">Regular 56px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Display 2</th>
|
||||
<td class="mdl-typography--display-2">Regular 45px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Display 1</th>
|
||||
<td class="mdl-typography--display-1">Regular 34px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Headline</th>
|
||||
<td class="mdl-typography--headline">Regular 24px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Title</th>
|
||||
<td class="mdl-typography--title">Medium 20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Subhead</th>
|
||||
<td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Body 2</th>
|
||||
<td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Body 1</th>
|
||||
<td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Body 2 (force preferred font)</th>
|
||||
<td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Body 1 (force preferred font)</th>
|
||||
<td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Caption</th>
|
||||
<td class="mdl-typography--caption">Regular 12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Menu</th>
|
||||
<td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mdl-typography--caption-color-contrast">Button</th>
|
||||
<td class="mdl-typography--button">Medium (All Caps) 14px</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Color Contrasts</h2>
|
||||
|
||||
<div class="demo-preview-block">
|
||||
<div class="demo-typography--white">
|
||||
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
||||
|
||||
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
||||
|
||||
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
||||
|
||||
<p class="mdl-typography--title-color-contrast">Title</p>
|
||||
|
||||
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-preview-block">
|
||||
<div class="demo-typography--black">
|
||||
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
||||
|
||||
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
||||
|
||||
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
||||
|
||||
<p class="mdl-typography--title-color-contrast">Title</p>
|
||||
|
||||
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-preview-block">
|
||||
<div class="demo-typography--img-1">
|
||||
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
||||
|
||||
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
||||
|
||||
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
||||
|
||||
<p class="mdl-typography--title-color-contrast">Title</p>
|
||||
|
||||
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-preview-block">
|
||||
<div class="demo-typography--img-2">
|
||||
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
||||
|
||||
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
||||
|
||||
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
||||
|
||||
<p class="mdl-typography--title-color-contrast">Title</p>
|
||||
|
||||
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
##Basic use
|
||||
|
||||
MDL typography does not require the inclusion of the minified CSS and JavaScript files that drive the other MDL components. Instead, just include a link to the Google stylesheet that accesses the font and its desired variations.
|
||||
```html
|
||||
<head>
|
||||
<link
|
||||
href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic'
|
||||
rel='stylesheet' type='text/css'>
|
||||
...
|
||||
</head>
|
||||
```
|
||||
|
||||
###To include an MDL typography component:
|
||||
|
||||
1. Code any element (`<div>`,`<p>`,`<span>`, etc.) that can contain text, including whatever content is appropriate.
|
||||
```html
|
||||
<p>This is a standard paragraph.</p>
|
||||
```
|
||||
2. Add one or more MDL classes, separated by spaces, to the element using the `class` attribute.
|
||||
```html
|
||||
<p class="mdl-typography--body-1">This is a standard paragraph.</p>
|
||||
```
|
||||
|
||||
The typography component is ready for use.
|
||||
|
||||
####Examples
|
||||
|
||||
A "headline" paragraph.
|
||||
|
||||
```html
|
||||
<p class="mdl-typography--headline">Regular 24px</p>
|
||||
```
|
||||
|
||||
A "title" paragraph.
|
||||
```html
|
||||
<p class="mdl-typography--title">Medium 20px</p>
|
||||
```
|
||||
|
||||
A "caption" span.
|
||||
```html
|
||||
<span class="mdl-typography--caption">Regular 12px</span>
|
||||
```
|
||||
|
||||
A "button" span.
|
||||
```html
|
||||
<span class="mdl-typography--button">Medium (All Caps) 14px</span>
|
||||
```
|
||||
A "display 1" table cell.
|
||||
```html
|
||||
<td class="mdl-typography--display-1">Regular 34px</td>
|
||||
```
|
||||
A "body-1" paragraph, also uppercased.
|
||||
```html
|
||||
<p class="mdl-typography--body-1 mdl-typography--text-uppercase">
|
||||
This is a standard paragraph, but uppercased.
|
||||
</p>
|
||||
```
|
||||
|
||||
>**Note:** Because the Roboto font is intended to apply to the entire page, standard "unclassed" HTML elements (e.g., heading levels, divs, paragraphs, spans, tables, etc. with no `class` attribute) and text modifiers (e.g., strong, em, small, etc.) will use Roboto, while also retaining their inherent and/or inherited characteristics.
|
||||
>
|
||||
>Also note that MDL typography provides some automatic adjustments based on its display environment. For example, the `body-1` style renders at 14px on a mobile device, but 13px on a desktop. You need not do anything to activate these self-modifiers; they are built into the MDL styles.
|
||||
|
||||
##Configuration options
|
||||
The MDL CSS classes specify the style to use. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `mdl-typography--body-1` | Regular 14px (Device), Regular 13px (Desktop) | Optional |
|
||||
| `mdl-typography--body-1-force-preferred-font` | Regular 14px (Device), Regular 13px (Desktop) | Optional |
|
||||
| `mdl-typography--body-2` | Medium 14px (Device), Medium 13px (Desktop) | Optional |
|
||||
| `mdl-typography--body-2` | mdl-typography-body-2 | Optional |
|
||||
| `mdl-typography--body-2-color-contrast` | Body with color contrast | Optional |
|
||||
| `mdl-typography--body-2-force-preferred-font` | Medium 14px (Device), Medium 13px (Desktop) | Optional |
|
||||
| `mdl-typography--button` | Medium (All Caps) 14px | Optional |
|
||||
| `mdl-typography--caption` | Regular 12px | Optional |
|
||||
| `mdl-typography--caption-color-contrast` | Caption with color contrast | Optional |
|
||||
| `mdl-typography--display-1` | Regular 34px | Optional |
|
||||
| `mdl-typography--display-1-color-contrast` | Display with color contrast | Optional |
|
||||
| `mdl-typography--display-2` | Regular 45px | Optional |
|
||||
| `mdl-typography--display-3` | Regular 56px | Optional |
|
||||
| `mdl-typography--display-4` | Light 112px | Optional |
|
||||
| `mdl-typography--headline` | Regular 24px | Optional |
|
||||
| `mdl-typography--menu` | Medium 14px (Device), Medium 13px (Desktop) | Optional |
|
||||
| `mdl-typography--subhead` | Regular 16px (Device), Regular 15px (Desktop) | Optional |
|
||||
| `mdl-typography--subhead-color-contrast` | Subhead with color contrast | Optional |
|
||||
| `mdl-typography--table-striped` | Striped table| Optional |
|
||||
| `mdl-typography--text-capitalize` | Capitalized text | Optional |
|
||||
| `mdl-typography--text-center` | Center aligned text | Optional |
|
||||
| `mdl-typography--text-justify` | Justified text | Optional |
|
||||
| `mdl-typography--text-left` | Left aligned text | Optional |
|
||||
| `mdl-typography--text-lowercase` | Lowercased text | Optional |
|
||||
| `mdl-typography--text-nowrap` | No wrap text | Optional |
|
||||
| `mdl-typography--text-right` | Right aligned text | Optional |
|
||||
| `mdl-typography--text-uppercase` | Uppercased text | Optional |
|
||||
| `mdl-typography--title` | Medium 20px | Optional |
|
||||
| `mdl-typography--title-color-contrast` | Title with color contrast | Optional |
|
||||
|
|
|
|||
Loading…
Reference in New Issue