diff --git a/docs/_assets/main.css b/docs/_assets/main.css index c55337b5..71fa4bae 100644 --- a/docs/_assets/main.css +++ b/docs/_assets/main.css @@ -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; +} diff --git a/docs/_pages/getting_started.md b/docs/_pages/getting_started.md deleted file mode 100644 index a77c42c0..00000000 --- a/docs/_pages/getting_started.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -layout: page -title: Getting started -include_prefix: ../ ---- - - - -##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 — most importantly — 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 - - -``` - -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 ` + + content_copy Button w/ Ripples + + +
+ +
+ content_copy Colored FAB + +
+ 
+```
+```
+
+
+ 
+```
+```
+
+ +

+ 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: +

+
    +
  1. Start with a standard HTML element, such as `
+ +
+

+ A note about HTML elements and MDL CSS classes +

+ 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. +
+
+
+ +
+

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. +

+
+
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html index dbb10265..ebdebfb5 100644 --- a/docs/_templates/layout.html +++ b/docs/_templates/layout.html @@ -62,6 +62,7 @@