Blame - node_modules/material-design-lite/dist/started/index.html - hores-external

32

<!--

33

-->

</head>

47

48

// if (document.location.hostname !== 'localhost' &&

49

// document.location.hostname !== '127.0.0.1' &&

50

// document.location.hostname.search('.corp.') === -1) {

51

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

52

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

53

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

54

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

55

ga('create', 'UA-25993200-9', 'auto');

56

// If a specific component page is loaded directly we'll attribute the

57

// page view to the specific component's page

58

if (window.location.pathname.indexOf('/components/') !== -1 &&

59

window.location.hash.indexOf('-section') !== -1) {

60

ga('send', 'pageview', '/components/' +

61

window.location.hash.split('#')[1].split('/')[0]);

62

} else {

63

ga('send', 'pageview');

}

// }

// Setup error tracking before anything else runs.

68

window.onerror = function(message, file, lineNumber, columnNumber, error) {

69

try {

70

if (error !== undefined) {

71

message = error.stack;

72

}

73

ga('send', 'event', 'error', file + ':' + lineNumber, String(message));

} catch (e) {

// no-op

}

};

</script>

<span class="docs-layout-title mdl-layout-title"><a href="../">Material<br>Design<br>Lite</a></span>

</div>

<a href="../index.html" class="mdl-navigation__link about">About</a>

88

<a href="../started/index.html" class="mdl-navigation__link started">Getting Started</a>

89

<a href="../templates/index.html" class="mdl-navigation__link templates">Templates</a>

90

<a href="../components/index.html" class="mdl-navigation__link components">Components</a>

91

<a href="../styles/index.html" class="mdl-navigation__link styles">Styles</a>

92

<a href="../customize/index.html" class="mdl-navigation__link customize">Customize</a>

93

<a href="../showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>

94

95

96

<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a>

97

98

<i class="material-icons"></i><span>Download</span>

</button>

</a>

</nav>

</div>

</header>

<div class="subpageheader mdl-cell--12-col">Getting started</div>

<h3>Contents</h3>

<ul>

<li><a href="#download">Include the master CSS & JavaScript</a></li>

120

<li><a href="#use-components">Use the components</a></li>

121

<li><a href="#general-rules">General rules and principles</a></li>

122

<li><a href="#dynamic">Use MDL on dynamic websites</a></li>

123

<li><a href="#responsibilities">What are MDL's responsibilities?</a></li>

124

125

<li><a href="#license">License</a></li>

</ul>

</nav>

</section>

<h3>Include the master CSS & JavaScript</h3>

132

133

<p>

134

Include the Material Lite CSS and JavaScript files in each HTML page in your project. We recommend that you use the <strong>files hosted on our CDN</strong>. You can also <strong>customize and download</strong> them to host them yourself, <strong>build</strong> them from our source code or install them in your <strong>npm</strong>/<strong>Bower</strong> project.

</p>

<a href="#tab1" class="mdl-tabs__tab is-active">Hosted</a>

140

<a href="#tab2" class="mdl-tabs__tab">Download</a>

141

<a href="#tab3" class="mdl-tabs__tab">Build</a>

142

<a href="#tab4" class="mdl-tabs__tab">Bower</a>

</div>

Just add the following <code><link></code> and <code><script></code> elements into your HTML pages (27kB gzipped):

</div>

<h4>Choose color scheme</h4>

153

<p>

154

<a href="http://www.google.com/design/spec/style/color.html">Color schemes used in Material Design</a> 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: <code>material.{primary}-{accent}.min.css</code> (e.g. <code>material.indigo-pink.min.css</code>). 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/index.html">Customize and Preview tool</a>.

</p>

</div>

<p>

Download the minified CSS and Javascript now (27kB gzipped):

</p>

Download MDL v1.3.0

</button>

</a>

</div>

Refer to these files by adding a <code><link></code> and a <code><script></code> elements into your HTML pages and also include the Material Icon font:

</div>

<h4>Choose color scheme</h4>

175

<p>

176

<a href="http://www.google.com/design/spec/style/color.html">Color schemes used in Material Design</a> are based on a primary and an accent colors which you may want to personalize. Use the <a href="../customize/index.html">Customize and Preview tool</a> to select and preview primary and accent colors combinations for your site. Then download your customized Material Design Lite CSS using the button and simply replace the `material.min.css` with the customized one.

</p>

</div>

<p>

Our source code is hosted <a href="https://github.com/google/material-design-lite">on GitHub</a>. You'll need to download the code and build it.

182

</p>

183

184

Run the following commands in a shell:

185

<pre class="language-bash"><code># Clone/copy the Material Design lite source code.

186

git clone https://github.com/google/material-design-lite.git

187

# Go into the newly created folder containing the source code.

188

cd material-design-lite

189

# Install necessary dependencies.

190

npm install && npm install -g gulp

191

# Build a production version of the components.

192

gulp</code></pre>

193

</div>

194

<p>You'll find the Material Design Lite library's file in the <code>dist</code> folder. Copy them to your project.

195

</p>

196

197

Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:

</div>

<h4>

Note:

</h4>

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/index.html">Customize and Preview tool</a>.

</div>

</div>

<p>

Simply install Material Design Lite files in your <a href="http://bower.io/">Bower</a> enabled project using:

212

</p>

213

214

Run the following command in a shell:

215

<pre class="language-bash"><code>bower install material-design-lite --save</code></pre>

216

</div>

217

<p>

218

This will install the Material Design Lite library files in your project's <code>bower_components</code> folder.

219

</p>

220

221

Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:

</div>

<h4>

Note:

</h4>

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/index.html">Customize and Preview tool</a>.

</div>

</div>

<p>

Simply install Material Design Lite files in your <a href="https://www.npmjs.com/">npm</a> enabled project using:

236

</p>

237

238

Run the following command in a shell:

239

<pre class="language-bash"><code>npm install material-design-lite --save</code></pre>

240

</div>

241

<p>

242

This will install the Material Design Lite library files in your project's <code>node_modules</code> folder.

243

</p>

244

245

Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:

</div>

<h4>

Note:

</h4>

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/index.html">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>

<h3>Use the components</h3>

<p>

You'll find below a couple of examples of MDL <a href="../components/index.html#buttons-section">Button</a> elements: a Button with ripples and a FAB Button. Just copy & paste the corresponding source code in the <code><body></code> of an HTML page of your project and the elements will render as shown below.

270

</p>

271

272

Button

</button>

</div>

</div>

</button>

</div>

</div>

</div>

Raised button

</div>

Colored FAB

</div>

</div>

</div>

Button

</button>

</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-colored.html">

</button>

</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>

body {

padding: 20px;

background: #fafafa;

position: relative;

}

</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>

</div>

</div>

<p>

MDL elements can be tweaked and configured by adding CSS classes. For example adding <code>mdl-js-ripple-effect</code> to an MDL <a href="../components/index.html#buttons-section">Button</a> will add a Ripple effect when the button is clicked and adding <code>mdl-button--fab</code> will change the style of the button to a FAB button.

342

</p>

343

<p>

344

There are many other elements available such as <a href="../components/index.html#cards-section">Card containers</a>, <a href="../components/index.html#sliders-section">Sliders</a>, <a href="../components/index.html#tables-section">Tables</a>, <a href="../components/index.html#menus-section">Menus</a>... For the complete set of MDL elements and options have a look at the <a href="../components/index.html">components</a> page.

345

</p>

346

<p>

347

We also recommend that you check out our <a href="../templates/index.html">templates</a>. 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>

<h3>General rules and principles</h3>

354

355

<p>

356

In general, follow these basic steps to use an MDL component in your HTML page:

357

</p>

358

<ol>

359

<li>Start with a standard HTML element, such as <code><button></code>, <code><div></code>, or <code><ul></code>, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.</li>

360

361

<li>Add one or more MDL-specific CSS classes to the element, such as <code>mdl-button</code> or <code>mdl-tabs__panel</code>, again depending on the component. The classes apply the MDL enhancements to the element and turn it into an MDL component.</li>

</ol>

<p>

Remember to include the <a href="https://developers.google.com/speed/docs/insights/ConfigureViewport">meta viewport</a> tag in your document so mobile devices will render correctly.

</p>

<h4>

A note about HTML elements and MDL CSS classes

372

</h4>

373

Material Design Lite uses namespaced <a href="https://en.bem.info/method/">BEM</a> classes—which can apply to almost any HTML element—to construct components. For some components you can use almost any element. The examples in <a href="../components/index.html">each component's documentation</a> 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>

<h3>Use MDL on dynamic websites</h3>

380

381

<p>

382

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load.

383

However in the case where you are creating DOM elements dynamically you need to register new elements using the <code>upgradeElement</code> function. Here is how you can dynamically create the same raised button with ripples shown in the section above:

</p>

var button = document.createElement('button');

388

var textNode = document.createTextNode('Click Me!');

389

button.appendChild(textNode);

390

button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';

391

componentHandler.upgradeElement(button);

392

document.getElementById('container').appendChild(button);

393

</script></code><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>

</div>

</section>

<h3>What are MDL's responsibilities?</h3>

399

400

<p>

401

Material Design Lite is built to provide a lightweight and basic set of Material Design components and templates for web sites.

402

The project does not intend to provide structures to create all possible UX needs, but to provide a low-friction Material Design implementation you can build on.

403

Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seamless manner.

404

When you find something not provided, such as dropdowns in the drawer, you may need to code your own component.

405

</p>

406

<p>

407

The team is committed to providing a great experience to developers while staying true to the promise of lite.

</p>

</div>

</section>

<p>

Detailed instructions for using the components, including MDL classes and their effects, coding considerations, and configuration options, can be found in the <a href="../components/index.html">components</a> page. Example of sites using MDL elements together can be found in the <a href="../templates/index.html">templates</a> page.

</p>

</div>

</section>

<h3>License</h3>