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

Adding a Getting started guide.

master
Nicolas Garnier 2015-06-10 11:24:35 +02:00
parent 5a360b7f2e
commit b3cbc48dea
8 changed files with 566 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
docs/_assets/main.css
View File

@ -1,40 +1,9 @@
html > body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
}
.docs-layout code,
.docs-layout pre {
display: inline-block;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;
font-size: 85%;
}
.docs-layout pre {
padding: 16px;
padding-right: 65px;
}
.docs-layout code:before,
.docs-layout code:after {
letter-spacing: -0.2em;
content: "\00a0";
}
.docs-layout pre > code:before,
.docs-layout pre > code:after {
letter-spacing: 0;
content: "";
}
.docs-layout pre > code {
background-color: rgba(0,0,0,0);
padding: 0px;
font-size: 100%;
}
.docs-layout pre[class*=language-]>code[data-language] {
overflow:auto;
}
pre[class*=language-]>code[data-language="markup"]::before {
content: "html";
background-color: #FAFAFA;
}
.docs-layout-header {
height: 33vh;
height: 30vh;
flex-shrink: 0;
background-size: auto 30%;
background-repeat: no-repeat;
@ -104,6 +73,10 @@ body:not(.about) .docs-layout-header {
background-color: #263238;
background-image: url('templates.svg');
}
.started .docs-layout-header {
background-color: #2E2E2E;
background-image: url('logo.svg');
}
.components .docs-layout-header {
background-color: #C2185B;
background-image: url('components.svg');
@ -179,6 +152,7 @@ body:not(.about) .docs-layout-title {
}
.about .docs-navigation .about,
.templates .docs-navigation .templates,
.started .docs-navigation .started,
.components .docs-navigation .components,
.styles .docs-navigation .styles,
.customize .docs-navigation .customize {
@ -270,6 +244,13 @@ body:not(.about) .docs-layout-title {
background-size: auto 50%;
cursor: pointer;
}
.docs-layout-content .about-panel--start > p {
color: rgb(66,66,66);
text-transform: uppercase;
font-size: 1.6rem;
margin-top: 20px;
margin-bottom: 0px;
}
.about-panel--templates {
background-color: #B3E0E1;
background-image: url(templates.svg);
@ -326,9 +307,13 @@ body:not(.about) .docs-layout-title {
.template > .template__preview {
height: auto;
}
.docs-text-styling p {
font-size: 15px;
.docs-layout-content dd {
font-size: 13px;
}
.docs-layout-content p {
font-size: 13px;
margin-bottom: 32px;
max-width: 640px;
/* Override */
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
@ -408,8 +393,9 @@ body:not(.about) .docs-layout-title {
}
}
.subpageheader {
height: 80px;
margin-top: 80px;
display: flex;
color: rgba(0, 0, 0, .54);
align-items: center;
padding: 0 40px;
flex-shrink: 0;
@ -420,3 +406,230 @@ body:not(.about) .docs-layout-title {
.about .subpageheader {
display: none;
}
.started .content {
max-width: 1000px;
}
.started .chapter-toc {
display: table;
}
.started .content h3 {
display: table-cell;
width: 140px;
font-size: 15px;
font-weight: bold;
padding-right: 60px;
line-height: 25px;
}
.started .content section {
margin-bottom: 30px;
}
.started .content nav ul {
border-left: solid 3px #C0EbF1;
padding-left: 20px;
line-height: 28px;
}
.started .content nav a {
font-weight: 400;
text-decoration: none;
}
.started .content nav li {
list-style: none;
}
.started .section-content {
display: table-cell;
}
.started .content {
padding: 40px;
display:block;
}
.started .content p {
margin-top: 10px;
margin-bottom: 15px;
}
.started .mdl-tabs {
margin-bottom: 22px;
}
.started .content h4 {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
margin-top: 20px;
}
.started .content .mdl-tabs__panel {
padding-top: 10px;
}
.started #toc li {
font-size: 16px;
}
.started .note {
font-size: 13px;
max-width: 640px;
margin-top: 15px;
padding: 15px 15px 15px 60px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
}
.started .note::before {
content: "Note:";
position: absolute;
margin-left: -45px;
}
.started .caption {
font-size: 13px;
max-width: 640px;
margin-top: 15px;
padding: 15px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
}
.started .caption h4 {
font-size: 13px;
font-weight: normal;
font-style: italic;
margin-top: 0;
}
.started .use-components pre {
margin-top: 0;
}
.started .component-example {
margin: 30px 0;
}
.started ol {
padding-left: 18px;
font-size: 13px;
max-width: 640px;
}
@media (max-width: 850px) {
.started .chapter-toc {
display: block;
}
.started .content h3 {
display: block;
width: auto;
font-size: 15px;
font-weight: bold;
padding-right: 60px;
line-height: 25px;
}
.started .section-content {
display: block;
}
}
/* Prism and code blocks styling and overrides */
.token.attr-name, .token.builtin, .token.selector, .token.string {
color: #E91E63;
}
.token.boolean, .token.constant, .token.number, .token.property, .token.symbol, .token.tag {
color: #9D1DB3;
}
.token.atrule, .token.attr-value, .token.keyword {
color: #00BCD4;
}
.docs-layout code,
.docs-layout pre {
display: inline-block;
background-color: rgba(0,0,0,0.06);
border-radius: 3px;
font-size: 85%;
}
.docs-layout pre {
padding: 16px;
padding-right: 65px;
font-size: 12px;
}
.docs-layout code:before,
.docs-layout code:after {
letter-spacing: -0.2em;
content: "\00a0";
}
.docs-layout pre > code:before,
.docs-layout pre > code:after {
letter-spacing: 0;
content: "";
}
.docs-layout pre > code {
background-color: rgba(0,0,0,0);
padding: 0px;
font-size: 100%;
}
.docs-layout pre[class*=language-]>code[data-language] {
overflow:auto;
}
pre[class*=language-]>code[data-language]::before {
content: "";
background: none;
}
.token.lf:before {
display: none;
}
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url, .token.variable {
color: #9D1DB3;
background: none;
}
code[class*=language-], pre[class*=language-] {
color: #3D3D3D;
text-shadow: none;
}
.code-with-text {
position: relative;
display: table-cell;
width: 1px;
border-spacing: 0;
border-collapse: collapse;
background-color: white;
padding: 15px;
border-radius: 3px;
font-size: 13px;
min-width: 500px;
}
.code-with-text pre {
margin: 15px -15px -21px -15px;
border-top-left-radius: 0;
border-top-right-radius: 0;
min-width: 500px;
}
/* Demo components */
.components-demo .mdl-tabs__tab-bar {
background-color: white;
}
.components-demo .mdl-tabs__panel {
padding-top: 0 !important;
}
.components-demo pre {
margin: 0;
box-sizing: border-box;
width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.components-demo.mdl-tabs {
margin-top: 90px;
}
.components-demo .mdl-tabs__tab {
text-transform: none;
overflow: visible;
}
.components-demo .material-icons {
height: 28px;
vertical-align: middle;
margin-right: 5px;
}
.components-demo .component {
position: absolute;
top: -70px;
height: 70px;
vertical-align: middle;
margin-left: -24px;
text-align: center;
width: 100%;
}
.mdl-tabs__tab-bar {
justify-content: flex-start;
border-bottom: 0;
}
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
color: #00ACC1;
}
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
background-color: #00ACC1;
}

56
docs/_pages/getting_started.md
View File

@ -1,56 +0,0 @@
---
layout: page
title: Getting started
include_prefix: ../
---
<nav class="chapter-toc">
<h1>Contents</h1>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#whats-next">What's next?</a></li>
</ul>
</nav>
##Introduction
**Material Design Light (MDL)** is a library of components for web developers based on Google's **Material Design** philosophy: "A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Understanding the goals and principles of Material Design is critical to the proper use of the MDL components. If you have not yet read the [Material Design Introduction](http://www.google.com/design/spec/material-design/introduction.html), you should do so before attempting to use the components.
The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more.
MDL is free to download and use, and may be used with or without any build library or development environment (such as [Material Design Lite](https://developers.google.com/web/starter-kit/)). It is a cross-browser, cross-OS web developer's toolkit that can be used by anyone who wants to write more productive, portable, and &mdash; most importantly &mdash; usable web pages.
## Getting started
###Get the components
To obtain the components, clone or download the [GitHub MDL repository](https://github.com/google/material-design-lite). Copy the entire package (the top-level folder and everything below it) to the project folder where you will write your HTML pages. This ensures that your project can access all of MDL's components and assets, and that you always have the original files for reference in case you break something. :-)
###Include the master CSS and JavaScript
In each HTML page in your project, include the minified (compressed) CSS and JavaScript files using standard relative-path references. This example assumes that a copy of the MDL package folders resides in your project folder.
```html
<link rel="stylesheet" href="css/material.min.css">
<script src="js/material.min.js"></script>
```
That's it! You are now ready to use the MDL components.
###Use the components
In general, follow these basic steps to use an MDL component in your HTML page.
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br/><br/>
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button`, `mdl-tabs__panel`, or `mdl-list--inline`, again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br/><br/>
3. View the page, preferably in multiple browsers on multiple devices, to ensure that the component looks and behaves as expected.
>**A note about HTML elements and MDL CSS classes**
>Material Design Lite uses CSS *independent classes*, which can apply to any HTML element, to construct components. For some components, you can use almost any element. For other components, some elements give better visual or behavioral performance than others. The examples in each component's README file use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.
##What's next?
Detailed instructions for using the components, including MDL classes and their effects, coding considerations, and configuration options, can be found in each component's `README.md` file. Working examples using various options are in each component's `demo.html` page.
## License
Copyright Google, 2015. Licensed under an Apache-2 license.

16
docs/_pages/index.md
View File

@ -8,7 +8,7 @@ include_prefix: ./
<dl>
<dt>Material Design Lite</dt>
<dd>
Material Design Lite lets you add a [Material Design](http://google.com/design/spec) look and feel to your static content websites. It doesn’t rely on any JavaScript frameworks and aims to optimise for cross-device use, gracefully degrade in older browsers and offer an experience that is accessible from the get-go.
Material Design Lite lets you add a [Material Design](http://google.com/design/spec) look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. [Get started now](../started).
</dd>
</dl>
</section>
@ -18,9 +18,9 @@ include_prefix: ./
</section>
<section class="about-panel about-panel--text mdl-cell mdl-cell--12-col">
<p>
Esse dolor ullamco ipsum enim aliquip minim. Sunt ullamco excepteur laboris nulla sunt. Consequat labore irure sint cillum aute labore est cupidatat eu. Culpa sint do non amet quis quis fugiat laboris sit sint id Lorem. Dolor adipisicing eu nostrud eiusmod sint consequat enim est velit et non mollit minim.
</p>
<p>
The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
</p>
</section>
<section class="about-panel about-panel--components mdl-color-text--white mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col" data-target="components">
@ -33,9 +33,9 @@ include_prefix: ./
Customize
</section>
<section class="about-panel about-panel--text mdl-cell--12-col">
<p>
Cillum magna sit ea exercitation excepteur enim pariatur ex deserunt. Deserunt aute nisi in laboris anim proident sunt enim pariatur quis. Aliqua anim voluptate veniam ad eiusmod ullamco deserunt. Laborum duis proident ipsum ex velit sint sint veniam amet eu Lorem. Nostrud adipisicing consequat deserunt magna consectetur pariatur culpa qui do. Ex dolor incididunt laborum ex ea non ea incididunt labore laboris minim consequat cillum. Proident nisi pariatur amet velit exercitation Lorem officia irure occaecat in deserunt. Tempor enim culpa do eu ipsum consequat irure amet officia.
</p>
<section class="about-panel about-panel--text mdl-cell mdl-cell--12-col">
<p>
The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more. MDL is free to download and use, and may be used with or without any library or development environment (such as [Material Design Lite](https://developers.google.com/web/starter-kit/)). It is a cross-browser, cross-OS web developer's toolkit that can be used by anyone who wants to write more productive, portable, and &mdash; most importantly &mdash; usable web pages.
</p>
</section>
<script src="assets/index.js" async></script>

267
docs/_pages/started.md Normal file
View File

@ -0,0 +1,267 @@
---
layout: page
title: Getting started
bodyclass: started
include_prefix: ../
---
<section id="toc">
<h3>Contents</h3>
<nav class="section-content">
<ul>
<li><a href="#include">Include the master CSS &amp; JavaScript</a></li>
<li><a href="#use-components">Use the components</a></li>
<li><a href="#general-rules">General rules and principles</a></li>
<li><a href="#dynamic">Use MDL on dynamic websites</a></li>
<li><a href="#whats-next">What's next?</a></li>
<li><a href="#license">License</a></li>
</ul>
</nav>
</section>
<section id="include">
<h3>Include the master CSS &amp; JavaScript</h3>
<div class="section-content">
<p>
Include the Material Lite CSS and JavaScript files in each HTML page in your project. We recommend that you use the **files hosted on our CDN**. You can also **customize and download** them to host them yourself, **build** them from our source code or install them in your **npm**/**Bower** project.
</p>
<div class="mdl-tabs mdl-js-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab1" class="mdl-tabs__tab is-active">CDN hosted libraries</a>
<a href="#tab2" class="mdl-tabs__tab">Download</a>
<a href="#tab3" class="mdl-tabs__tab">Build</a>
<a href="#tab4" class="mdl-tabs__tab">Bower</a>
<a href="#tab5" class="mdl-tabs__tab">npm</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1">
<div class="code-with-text">
Just add the following `<link>` and `<script>` elements into your HTML pages:
<pre class="language-markup">
```
<link rel="stylesheet"
href="https://storage.googleapis.com/materialdesignlite/$$version$$/material.indigo-pink.min.css">
<script
src="https://storage.googleapis.com/materialdesignlite/$$version$$/material.min.js">
</script>
```</pre></div>
<h4>Choose color scheme</h4>
<p>
[Color schemes used in Material Design](http://www.google.ch/design/spec/style/color.html) are based on a primary and an accent colors which you may want to personalize. These colors are specified in the CSS file name by following this pattern: `material.<primary>-<accent>.min.css` (e.g. `material.indigo-pink.min.css`). Our CDN hosts a number of color combinations based on common Material Design colors. To discover and preview available color combinations use our <a href="../customize">Customize and Preview tool</a>.
</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<p>
Use the <a href="../customize">Customize and Preview tool</a> to select and preview primary and accent colors combinations for your site. Then download the Material Design Lite files using the button. The zip file downloaded should contain a CSS and a JS file.
</p>
<div class="code-with-text">
Refer to these files by adding a `<link>` and a `<script>` element into your HTML pages:
<pre class="language-markup">
```
<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
```</pre>
</div>
</div>
<div class="mdl-tabs__panel" id="tab3">
<p>
Our source code is hosted [on GitHub](https://github.com/google/material-design-lite). You'll need to download the code and build it.
</p>
<div class="code-with-text">
Run the following commands in a shell:
<pre class="language-bash">
```
# Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp
```</pre>
</div>
<p>You'll find the Material Design Lite library's file in the `dist` folder. Copy them to your project.
</p>
<div class="code-with-text">
Refer to these files by adding a `<link>` and a `<script>` element into your HTML pages:
<pre class="language-markup">
```
<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
```</pre>
</div>
<div class="note">
Using this method you will not be able to customize the color scheme of the MDL elements. If you'd like to customize the color scheme prefer the CDN hosted or downloadable libraries. In this case use our <a href="../customize">Customize and Preview tool</a>.
</div>
</div>
<div class="mdl-tabs__panel" id="tab4">
<p>
Simply install Material Design Lite files in your [Bower](http://bower.io/) enabled project using:
</p>
<div class="code-with-text">
Run the following command in a shell:
<pre class="language-bash">
```
bower install material-design-lite --save
```</pre>
</div>
<p>
This will install the Material Design Lite library files in your project's `node_modules` folder.
</p>
<div class="code-with-text">
Refer to these files by adding a `<link>` and a `<script>` element into your HTML pages:
<pre class="language-markup">
```
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
```</pre>
</div>
<div class="note">
Using this method you will not be able to customize the color scheme of the MDL elements. If you'd like to customize the color scheme prefer the CDN hosted or downloadable libraries. In this case use our <a href="../customize">Customize and Preview tool</a>.
</div>
</div>
<div class="mdl-tabs__panel" id="tab5">
<p>
Simply install Material Design Lite files in your [npm](https://www.npmjs.com/) enabled project using:
</p>
<div class="code-with-text">
Run the following command in a shell:
<pre class="language-bash">
```
npm install material-design-lite --save
```</pre>
</div>
<p>
This will install the Material Design Lite library files in your project's `node_modules` folder.
</p>
<div class="code-with-text">
Refer to these files by adding a `<link>` and a `<script>` element into your HTML pages:
<pre class="language-markup">
```
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
```</pre>
</div>
<div class="note">
Using this method you will not be able to customize the color scheme of the MDL elements. If you'd like to customize the color scheme prefer the CDN hosted or downloadable libraries. In this case use our <a href="../customize">Customize and Preview tool</a>.
</div>
</div>
</div>
<p>
That's it! You are now ready to add MDL components on your site.
</p>
</div>
</section>
<section id="use-components">
<h3>Use the components</h3>
<div class="section-content">
<p>
You'll find below a couple of examples of MDL [Button](../components/#buttons-section) elements: a Button with ripples and a FAB Button. Just copy &amp; paste the corresponding source code in the `<body>` of an HTML page of your project and the elements will render as shown below.
</p>
<div class="mdl-tabs mdl-js-tabs components-demo">
<div class="mdl-tabs__tab-bar">
<a href="#tab6" class="mdl-tabs__tab is-active">
<div class="component">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>
</div>
<i class="material-icons">content_copy</i> Button w/ Ripples
</a>
<a href="#tab7" class="mdl-tabs__tab">
<div class="component">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
<i class="material-icons">content_copy</i> Colored FAB</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab6">
<pre class="language-markup">
```
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>```</pre>
</div>
<div class="mdl-tabs__panel" id="tab7">
<pre class="language-markup">
```
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">add</i>
</button>```</pre>
</div>
</div>
<p>
MDL elements can be tweaked and configured by adding CSS classes. For example adding `mdl-js-ripple-effect` to an MDL [Button](../components/#buttons-section) will add a Ripple effect when the button is clicked and adding `mdl-button--fab` will change the style of the button to a FAB button.
</p>
<p>
There are many other elements available such as [Card containers](../components/#cards-section), [Sliders](../components/#sliders-section), [Tables](../components/#tables-section), [Menus](../components/#menus-section)... For the complete set of MDL elements and options have a look at the [components](../components) page.
</p>
<p>
We also recommend that you check out our [templates](../templates). These are ready to use website templates using MDL components. Feel free to have a look at them to get started quickly on your next project.
</p>
</div>
</section>
<section id="general-rules">
<h3>General rules and principles</h3>
<div class="section-content">
<p>
In general, follow these basic steps to use an MDL component in your HTML page:
</p>
<ol>
<li>Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.</li>
<li>Add one or more MDL-specific CSS classes to the element, such as `mdl-button`, `mdl-tabs__panel`, or `mdl-list--inline`, again depending on the component. The classes apply the MDL enhancements to the element and turn it into an MDL component.</li>
</ol>
<div class="caption">
<h4>
A note about HTML elements and MDL CSS classes
</h4>
Material Design Lite uses namespaced [BEM](https://en.bem.info/method/) classes—which can apply to almost any HTML element—to construct components. For some components you can use almost any element. The examples in [each component's documentation](../components) use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.
</div>
</div>
</section>
<section id="dynamic">
<h3>Use MDL on dynamic websites</h3>
<div class="section-content">
<p>
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load.
However in the case where you are creating DOM elements dynamically you need to register new elements using the `upgradeElement` function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
</p>
<pre class="language-markup">
```
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode("Click Me!");
button.appendChild(textNode);
button.className = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect";
componentHandler.upgradeElement(button, 'MaterialButton');
document.getElementById('container').appendChild(button);
</script>```</pre>
</div>
</section>
<section id="whats-next">
<h3>What's next?</h3>
<div class="section-content">
<p>
Detailed instructions for using the components, including MDL classes and their effects, coding considerations, and configuration options, can be found in the [components](../components) page. Example of sites using MDL elements together can be found in the [templates](../templates) page.
</p>
</div>
</section>
<section id="license">
<h3>License</h3>
<div class="section-content">
<p>
Copyright Google, 2015. Licensed under an Apache-2 license.
</p>
</div>
</section>

1
docs/_templates/layout.html vendored
View File

@ -62,6 +62,7 @@
</div>
<nav class="docs-navigation mdl-navigation mdl-js-ripple-effect">
<a href="{{page.include_prefix}}" class="mdl-navigation__link about">About</a>
<a href="{{page.include_prefix}}started" class="mdl-navigation__link started">Getting Started</a>
<a href="{{page.include_prefix}}templates" class="mdl-navigation__link templates">Templates</a>
<a href="{{page.include_prefix}}components" class="mdl-navigation__link components">Components</a>
<a href="{{page.include_prefix}}styles" class="mdl-navigation__link styles">Styles</a>

4
docs/_templates/page.html vendored
View File

@ -2,10 +2,6 @@
{% block content %}
<span class="docs-text-styling">
<h1>{{page.title}}</h1>
{{content|safe}}
</span>
{% endblock %}

83
src/button/demo.html
View File

@ -1,82 +1,81 @@
<div class="demo-preview-block demo-button">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs components-demo mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a class="mdl-tabs__tab overflow-vis is-active" href="#raised-button">
<button class="mdl-button mdl-js-button mdl-button--raised highlight-button adjust">
Button
</button>
<span class="adjust">Raised Button</span>
<div class="component">
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>
</div>
<i class="material-icons">content_copy</i> Raised Button
</a>
<a class="mdl-tabs__tab overflow-vis" href="#plain-fab">
<button class="mdl-button mdl-js-button mdl-button--fab highlight-button adjust">
<i class="material-icons">add</i>
</button>
<span class="adjust">Plain FAB</span>
<div class="component">
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">add</i>
</button>
</div>
<i class="material-icons">content_copy</i> Plain FAB
</a>
<a class="mdl-tabs__tab overflow-vis" href="#colored-fab">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored highlight-button adjust">
<i class="material-icons">add</i>
</button>
<span class="adjust">Colored FAB</span>
<div class="component">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
<i class="material-icons">content_copy</i> Colored FAB
</a>
<a class="mdl-tabs__tab overflow-vis" href="#colored-fab-ripple">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect highlight-button adjust">
<i class="material-icons">add</i>
</button>
<span class="adjust">FAB w/ Ripple</span>
<div class="component">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</div>
<i class="material-icons">content_copy</i> FAB w/ Ripple
</a>
<a class="mdl-tabs__tab overflow-vis" href="#colored-fab-disabled">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--disabled highlight-button adjust" disabled>
<i class="material-icons">add</i>
</button>
<span class="adjust">Disabled</span>
<div class="component">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--disabled" disabled>
<i class="material-icons">add</i>
</button>
</div>
<i class="material-icons">content_copy</i> Disabled
</a>
</div>
<br>
<div class="mdl-tabs__panel is-active" id="raised-button">
<pre class="demo-code"><code class="language-markup">
&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
<pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--raised"&gt;
Button
&lt;/button&gt;
</code></pre>
&lt;/button&gt;</code></pre>
</div>
<div class="mdl-tabs__panel" id="plain-fab">
<pre class="demo-code"><code class="language-markup">
&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
<pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab"&gt;
&lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;
</code></pre>
&lt;/button&gt;</code></pre>
</div>
<div class="mdl-tabs__panel" id="colored-fab">
<pre class="demo-code"><code class="language-markup">
&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
<pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"&gt;
&lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;
</code></pre>
&lt;/button&gt;</code></pre>
</div>
<div class="mdl-tabs__panel" id="colored-fab-ripple">
<pre class="demo-code"><code class="language-markup">
&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
<pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"&gt;
&lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;
</code></pre>
&lt;/button&gt;</code></pre>
</div>
<div class="mdl-tabs__panel" id="colored-fab-disabled">
<pre class="demo-code"><code class="language-markup">
&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
<pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" disabled&gt;
&lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;
</code></pre>
&lt;/button&gt;</code></pre>
</div>
</div>
</div>

2
src/demos.css
View File

@ -36,6 +36,4 @@
.demo-code {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}