12 KiB
| layout | title | bodyclass | include_prefix |
|---|---|---|---|
| page | Getting started | started | ../ |
Contents
Include the master CSS & JavaScript
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.
<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">
Our source code is hosted [on GitHub](https://github.com/google/material-design-lite). You'll need to download the code and build it.
``` # 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 ```
You'll find the Material Design Lite library's file in the `dist` folder. Copy them to your project.
Simply install Material Design Lite files in your [Bower](http://bower.io/) enabled project using:
``` bower install material-design-lite --save ```
This will install the Material Design Lite library files in your project's `node_modules` folder.
Simply install Material Design Lite files in your [npm](https://www.npmjs.com/) enabled project using:
``` npm install material-design-lite --save ```
This will install the Material Design Lite library files in your project's `node_modules` folder.
That's it! You are now ready to add MDL components on your site.
Use the components
<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 & 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">
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.
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.
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.
General rules and principles
In general, follow these basic steps to use an MDL component in your HTML page:
- Start with a standard HTML element, such as ``, ``, or `
- `, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.
<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>
Use MDL on dynamic websites
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:
``````
What's next?
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.
License
Copyright Google, 2015. Licensed under an Apache-2 license.