google / material-design-lite Goto Github PK

View Code? Open in Web Editor NEW

32.3K 1.2K 5.0K 55.63 MB

Material Design Components in HTML/CSS/JS

Home Page: https://getmdl.io

License: Apache License 2.0

CSS 34.29% JavaScript 29.10% HTML 36.61%

material-design material-design-lite mdl material-components material

material-design-lite's Introduction

Material Design Lite

An implementation of Material Design components in vanilla CSS, JS, and HTML.

Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

Limited support

Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository.

No further development is taking place in MDL by the core team, but we are happy to review PRs, fix critical bugs and push out new releases. No breaking changes will be accepted.

Use MDL on your site?

This document is targeted at developers that will contribute to or compile MDL. If you are looking to use MDL on your website or web app please head to getmdl.io.

Browser Support

IE9	IE10	IE11	Chrome	Opera	Firefox	Safari	Chrome (Android)	Mobile Safari
B	A	A	A	A	A	A	A	A

A-grade browsers are fully supported. B-grade browsers will gracefully degrade to our CSS-only experience.

Download / Clone

Clone the repo using Git:

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

Alternatively you can download this repository.

Windows users, if you have trouble compiling due to line endings then make sure you configure git to checkout the repository with lf (unix) line endings. This can be achieved by setting core.eol.

git config core.eol lf
git config core.autocrlf input
git rm --cached -r .
git reset --hard

Remember, the master branch is considered unstable. Do not use this in production. Use a tagged state of the repository, npm, or bower for stability!

Feature requests

MDL is currently in limited support mode, with no further development taking place by the core team. We are happy to accept and review pull requests for new functionality, however, as long as there are no breaking changes.

Want to contribute?

If you found a bug, have any questions or want to contribute. Follow our guidelines, and help improve the Material Design Lite. For more information visit our wiki.

Please use the default branch, mdl-1.x.

Take note that Material Components for Web, which is MDL v2, is under early Alpha stages (which means everything is a moving target, and we can change anything at any moment). Use with caution.

However, we would absolutely love to have people testing MCW and provide feedback about their experiences using it, especially integrating with other frameworks and libraries.

License

material-design-lite's People

Contributors

Stargazers

Watchers

Forkers

martinduparc samccone madhugb xdumaine paulirish faizalpribadi vladikoff mercime claercio kvzivn basicsbeauty jstopchick p3po gyanprayaga epeay juhomi davidlim grimderp frontenddeveloping drewksparks chimdi2000 rthor andersonpablo iamnathanj hendstabanez johnsandall eduardolops teutomedien dinko2013 processnotproduct yongaru daishaunlv30x marcosvicente gragtah mezoclone felipeminello nullnotfound elderxavier momenbasel erneledesma marcosrioj marcelomata fromariz-zz megamil esneyder edrdesigner tribemedia egy4serv hafezoa kennylisc systorres xianghou ezhangle riccitamayo wpg patog7 qnmlgdsb killpoer3 malik810 cdll adatapost tathagatnawadia shahbaz17 henriquesuper hongkongjs srunyu mellz geofsu chanajun orlowang ridjohansen v1mal mrsitti leofrederiche yenchih pakoros mrjk05 rhelfan tomstocklein superax23 daya-prac anonilous zeroxfire var-mach rooshipatel kim1990 what1sc0de fourmatrix rishigohil lgarron makerdiary kkdeep harish94 live0717 feddroid llg84 vibster jobava psarna94 handong890

material-design-lite's Issues

Setup Jekyll scaffold for the Material site

@devnook has been kind enough to explore this project, which we'll land in a new repo.

Just posting an issue here for us to cross-reference :)

Layout example has demo-container class, slightly confusing

Check out https://github.com/google/material-design-lite/tree/master/src/layout

Scroll down to Example under wsk-layout__tab-bar.

I see this tag: <div class="demo-container"> which wraps the example.

Can we remove that div? For a n00b like me, I question why any and every tag and class is there... it's hard to tell what is required. :) Removing anything that's not actually part of the module/example helps eliminate possibilities to mess something up by people like me.

Thanks again for the awesome toolkit!

Update resource paths

Per discussion:

Update all components to have an images directory
Once components have been built, they will still reference images, but it will use the global images one instead.
Check that all images are not overwriting each other

Should this repo include minified versions by default?

They're currently minified. Is this what you would expect pulling it in as a dependency?

cc @gauntface @sgomes

Missing elements from wsk

I am not sure it is a goal of this library to provide these elements from the original wsk, but they were useful. Are there any plans?

https://developers.google.com/web/fundamentals/resources/styleguide/index

Editorial header
Highlights
Article section
Guides section
etc etc...

Infra: Include badges for build, bower, npm versions.

Decide on whether to ship with CSS Source maps

We could use gulp-sourcemaps for this. By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a relative file path in the sourcemaps.write() function.

gulp.src('./src/*.scss')
  .pipe(sourcemaps.init())
    .pipe(sass())
  .pipe(sourcemaps.write('./css'))
  .pipe(gulp.dest('./css'));

// will write the source maps to ./dest/css/maps

Change desktop functionality for the layout component

Make the default behavior for the layout component on desktop with .wsk-layout--fixed-drawer match the main material spec site where:

the menu button is in the upper left
the drawer is collapsed by default
clicking on the menu button displays the drawer, and the dark background
clicking away from the drawer container closes the drawer.

This will essentially match the experience currently found on mobile.

Moved issue: Why are we using the raf polyfill?

I know we are using the polyfill, but what is the reason for not using the proper requestAnimationFrame name? It is forcing me to include the requestAnim polyfill (specifically because I am including ripple.js) and it is not clear that there is this mandatory a dependency (in my project it is unneeded)

From @PaulKinlan

Author Web templates

Templates! Let's try to ship with at least 3 x templates. Ideally 5 if we have cycles. Requirements: Mocks from UX for what these should look like.

Current priorities:

General HTML template (💻mocks ready, waiting on 📱mocks)
Blog template (💻mocks in-flight)
Marketing template
Dashboard template
Basic empty-content templates

Include relevant links in README

Where can I preview the latest components?
Where can I run the tests?
Where can I run the visual tests?
Where can I find the docs?

Fix `gulp serve` not correctly displaying the style guide

Flatten /images folder

I think it would be much simpler if all the image files were directly in images/ directory.

Figure out how to include resources (e.g icons)

We are currently waiting on the Material icon font. As this hasn't been created yet, we either need to include a community created icon font and substitute for now or switch to using SVGs.

I would favor using a community icon font and updating our components. It would make switching to an official one easier later on. Any thoughts?

@gauntface @sgomes

Should per-component minified CSS/JS be provided?

Open-question. This was requested by an early user this week and wasn't something included in the refactor. I guess we could spit out fairly independent:

component.min.css (includes CSS for any deps)
component.min.js (same, all deps included)
Maybe a demo file

if we moved to a model with:

/dist
----/css/material.min.js
----/js/material.min.js
----/individual/button/
----/individual/spinner/
etc.

However, I'm not sure how desirable that is. @google/material-styleguide any thoughts?

Discrepancy in shadow size from MD site and MDL's header waterfall shadow

Maybe this on purpose (I'm still new to MD and MDL) but notice the differences in shadow sizes between the MD site's header and a header from WSK/MDL:

(official site on the right, MDL on the left)

MDL: box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 1.5px 0px, rgba(0, 0, 0, 0.239216) 0px 1px 1px 0px;

Official MD site: box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;

(Official MD site example page http://www.google.com/design/spec/style/typography.html#)

Add manual update method to all components

Programmatic changes to components don't trigger events, so we need a way of letting objects know their properties have been changed.

Since object observers are infeasible to use on every component, we should have a method that the developer can call after making changes to a component (e.g., disabling it) to make sure its state is consistent.

We may also want to add methods for programmatically doing all of the most common tasks (disabling, toggling, etc.) and update the object, so that the user doesn't need to do direct DOM manipulation.

Add browser support to README

Currently the only thing indicating our official browser support I see are the autoprefixer settings. It's handy to have it in the readme both for users of the library and for potential contributors.

Something similar to this table would be fine.

Request: link from layout README to column-layout README

While reading https://github.com/google/material-design-lite/tree/master/src/layout it would be helpful to link over to column-layout. They seem like related concepts.

For example, after I'm done putting my header/nav together, I want to know how to layout my body/content. I especially want to know how to keep my body centered on the desktop, with a max width, and have it gracefully adapt to mobile.

Default color for link doesn't seem styled

Just tying out MDL. Really excited!

The anchor tag doesn't seem to be styled by default. Should it be? I would expect something like white, by default.

Check out this screenshot, and notice that the world Hello is purple.

The source:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Dartdoc</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/material.min.css">
</head>
<body>

<div class="wsk-layout">
  <div class="wsk-layout__header wsk-layout__header--tall">
    <!-- Title -->
    <span class="wsk-layout-title">Web Starter Kit</span>
    <!-- Add spacer, to align navigation to the right -->
    <div class="wsk-layout-spacer"></div>
    <!-- Navigation -->
    <nav class="wsk-layout-navigation">
      <a class="wsk-layout-navigation-link" href="">Hello</a>
    </nav>
  </div>
  <div class="wsk-layout__drawer">
    <span class="wsk-layout-title">Web Starter Kit</span>
    <nav class="wsk-layout-navigation">
      <a class="wsk-layout-navigation-link" href="">Hello</a>
    </nav>
  </div>
  <div class="wsk-layout__content">
    Cool
  </div>
</div>

  <script src="js/material.min.js"></script>
</body>
</html>

Responsive Breakpoints

Current advice from the Material team:

the keylines should still be used. desktop keylines are 24 and 80 from the edge of the screen and/or container.

gutters and margins between content or containers can be 4, 8, 16, 24, 40

We're still defining a responsive page layout system, but... it's complicated, and we're still refining breakpoints, testing different grid strategies across a variety of layouts. There will be a responsive layout section that will eventually get added to spec once we feel that the rules we're defining work well.

As 3. is important for us and the ETAs are not yet defined, one option is to research what breakpoints other Google domains have opted for and review if they make sense as a stop-gap for our own recommendations.

Also completely open to suggestions for alternative approaches to deciding our breakpoint strategy.

This repo is private. Can I mention it exists?

Curious, as we're evaluating using it in an open source project.

Question: why is the styling for anchor repeated in material.css?

Standardize all screen sizes in a single .scss file

Right now, every component defines its own transition points between mobile / tablet / desktop. We should stardardize these in a single file.

Support absolute URLs for image resources.

So how are we going to handle images with material-design-lite? I see for example the checkbox still loads from url("../checkbox/tick.svg"), but that's not going to work for the minified version

We could include images/.. as one of the directories synthetically served during 'gulp serve' and just copy assets over to that directory during both gulp serve and the normal gulp build.

I still need to write a patch demonstrating how this could work.

Produce a list of graceful degradation bugs (for oldIE etc)

Use http://www.iwanttouse.com/ to compare our cutting-the-mustard test against browsers where we know these features will work and not work.
Use the above data to generate a list of "B" grade browsers. This helps with #15. Add the list there.
Test graceful degradation support in these browsers. Test should include visual rendering, interaction (can buttons, toggles and so on function without JS) and responsiveness (makes more sense for navigation).
Add findings to this issue. Team can discuss and start breaking those into issues we can tackle this week.

Question: how do I get a fixed-width responsive body container?

I'd like my body's content to have a fixed-width, centered container. What is the best way to accomplish this with MDL?

Thanks!

(Similar to bootstrap's container class)

Doc Request: how to color and/or theme my page

Assume my system doesn't use Sass and I can't use the awesome SCSS capabilities for coloring. How do I, in the best and most efficient way, color and theme my page?

For example, assume I'm using wsk-layout (header, content, etc). What's the best way to change all the colors?

thanks!

Demo/Example Request: header w/ hamburger icon triggering side panel

For the layout/demo.html file, I'd love to see an example/demo of header/side-panel technique from http://www.google.com/design/spec/style/typography.html#

how to get exactly the same paddings/margins (assuming the official MD site is correct... which it might not be)
how to show the "hamburger" menu button in the upper left
how to create the side-panel and have it slide out when the hamburger is selected

(I assume that http://www.google.com/design/spec/style/typography.html# is a "best practice" :)

Layout demo mentions `wsk-layout__container` but it's not mentioned in the README

Check out layout/demo.html

Scroll down to the multi-row layout example.

View the source.

See a mention of the wsk-layout__container class.

Go to https://github.com/google/material-design-lite/tree/master/src/layout

Expected: a mention of wsk-layout__container

Actual: no mention of wsk-layout__container

Not sure what wsk-layout__container is or when I'd want to use it. Can we add to the README in src/layout?

Thanks!

Add support for JS Source maps

.wsk-layoutheader .wsk-layoutdrawer-button should inherit its background-color

So I changed the background color of my header, with this:

header.wsk-layout__header {
  background-color: #0288D1;
}

but, when the hamburger menu pops up, its background is still dark blue.

Why does .wsk-layout__header .wsk-layout__drawer-button define its own background-color? Can it inherit?

Ideally, I wouldn't have to reset the background-color twice.

Thanks!

Page doesn't scroll if cursor is in tall waterfall multi-row header

Build a tall, waterfall, multi-row header.
add a body so large that one could scroll the page.
Place cursor in header.
Scroll with two fingers up on your track pad (or your mouse wheel)

Expected: page scrolls

Actual: page does not scroll

(if you put your cursor into main content, below the header, and try to scroll, it works)

Complete Android.com sample layout

Fix scrollTop/ID navigation bugs
Create a samples repo
Complete the Android.com sample
Push to the samples repo
Author README with details, setup
Update sample with grid component

Footer inside of layout is not full height

Not sure if putting the footer inside of the wsk-layout is correct (it didn't work when I put it below the wsk-layout closing tag), but the height isn't correct.

See example from WSK site:

See example from my page:

(notice the scroll bar is all the way to the bottom)

Offer both minified and unminified builds of JS & CSS

Please review whitespace around heading elements

I felt I had to do a lot of work in making a page with simple content, h1..3 p pre etc. look reasonable with regards white space around elements. Maybe I just don't get material's beauty. I felt the original wsk was much better. Please advise.

Can't build under node v0.12

gulp fails with Error: Module did not self-register under node v0.12.

This is probably due to sass/node-sass#653, which will be resolved in node-sass v2.0.0.

Jittery behavior when trying to scroll with waterfall header

Please see for a video of the behavior: https://dl.dropboxusercontent.com/u/316685/scrolling.mov

Here's the code. Looks like you need to be on a macbook air with a full-height window. If I resize the window, I don't see the jitters. Perhaps it's because the content is just about the size of the window.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Dartdoc</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/material.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="wsk-layout wsk-js-layout">
    <div class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--tall wsk-layout__header--waterfall">

      <div class="wsk-layout__header-row">
        <img class="wsk-layout-icon" src="dart-logo-64.png">
        <span class="wsk-layout-title">Dart API</span>
        <div class="wsk-layout-spacer"></div>
        <nav class="wsk-layout-navigation">
          <a class="wsk-navigation__link" href="">Hello</a>
        </nav>
      </div>
    </div>
    <div class="wsk-layout__drawer">
      <span class="wsk-layout-title">Web Starter Kit</span>
      <nav class="wsk-layout-navigation">
        <a class="wsk-navigation__link" href="">Hello</a>
      </nav>
    </div>
    <div class="wsk-layout__content">
      <div class="container">
        <section class="desc markdown" id="description">
          <h1>WOW FAKE PACKAGE IS <strong>BEST</strong> <a href="http://example.org">PACKAGE</a></h1>
          <p>If you don't have this package yet, get it.
          Don't ask questions.</p>
          <p>My favorite class is <a href="fake/Cool.html"> Cool</a>.</p>
          <p><em>Why should you get this package?</em></p><ul><li>We told you so.</li><li>Everyone is doing it.</li><li>It smells nice.</li></ul>
        </section>

        <section class="summary" id="classes">
          <h2>Classes</h2>

          <dl class="dl-horizontal">
              <dt id="Annotation">
                  <a href="fake/Annotation.html">Annotation</a>
              </dt>
              <dd>
                  Useful for annotations.


              </dd>
              <dt id="ConstantClass">
                  <a href="fake/ConstantClass.html">ConstantClass</a>
              </dt>
              <dd>
                  For make-better testing of constants.


              </dd>
              <dt id="Cool">
                  <a href="fake/Cool.html">Cool</a>
              </dt>
              <dd>
                  This class is cool!


              </dd>
              <dt id="MixMeIn">
                  <a href="fake/MixMeIn.html">MixMeIn</a>
              </dt>
              <dd>
                  Perfect for mix-ins.


              </dd>
              <dt id="Interface">
                  <a href="fake/Interface.html">Interface</a>
              </dt>
              <dd>
                  An interface that can be implemented.


              </dd>
              <dt id="AnotherInterface">
                  <a href="fake/AnotherInterface.html">AnotherInterface</a>
              </dt>
              <dd>
                  Yet another interface that can be implemented.


              </dd>
              <dt id="SuperAwesomeClass">
                  <a href="fake/SuperAwesomeClass.html">SuperAwesomeClass</a>
              </dt>
              <dd>
                  A super class, with many powers.


              </dd>
              <dt id="LongFirstLine">
                  <a href="fake/LongFirstLine.html">LongFirstLine</a>
              </dt>
              <dd>
                  This is a very long line spread across... wait for it... two physical lines.
              </dd>
              <dt id="Foo2">
                  <a href="fake/Foo2.html">Foo2</a>
              </dt>
              <dd>

              </dd>
          </dl>

        </section> <!-- summary classes -->
      </div> <!-- container -->
    </div> <!-- wsk-layout__content" -->
  </div> <!-- wek-layout -->

  <script src="js/material.js"></script>
</body>
</html>

Create a release script to generate the contents of this repo

Generate the latest CSS and JS
Ensure both have the relevant release/copyright banners. Atm I think this is just on the top of the JS file
Copy over bower.json and package.json as needed

cc @gauntface @sgomes

Infra: Author unit tests for components

Layout README does not mention mdl-js-layout

The README on https://github.com/google/material-design-lite/tree/master/src/layout doesn't mention the super cool wsk-js-layout class, which makes the header collapse when scrolled.

Request: add names to the list of icons

Love that MDL ships with a ton of icons! Except, it's hard to find the one that best matches the required semantics.

Can we add the icon's name to the gallery? That way I can "control-F" and find what I'm looking for.

Less this:

More this:

Thanks!

Style Guide still refers to WSK

favicon is WSK

and the menu says WSK

Request: layout example with multiple image/icon buttons aligned right

The layout demos/examples use words (hello, world). I'd love to see an example that uses icons/images.

Similar to the Search field, but more icons in a row.

Thanks!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Dartdoc</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/material.css">
  <link rel="stylesheet" href="skeleton-grid.css">
  <link rel="stylesheet" href="other_styles.css">
</head>
<body>

  <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
    <header class="wsk-layout__header">
      <div class="wsk-layout__header-row">
        <span class="wsk-layout-title">fake package</span>
        <div class="wsk-layout-spacer"></div>
        <div 
        <div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
          <label class="wsk-button wsk-js-button wsk-button--icon" for="sample-expclean2">
            <span class="wsk-icon wsk-icon--search"/>
          </label>
          <div class="wsk-textfield__expandable-holder">
            <input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean2" />
          </div>
        </div>
      </div>
    </header>
    <div class="wsk-layout__drawer">
      <span class="wsk-layout-title">dartdocs</span>
      <nav class="wsk-navigation">
        <a class="wsk-navigation__link" href="#">fake package</a>
        <a class="wsk-navigation__link" href="#">LongFirstLine class</a>
        <a class="wsk-navigation__link" href="#">cool method</a>
      </nav>
    </div>
    <div class="wsk-layout__content">
      <div class="container">
        <section class="desc markdown" id="description">
          <h1>WOW FAKE PACKAGE IS <strong>BEST</strong> <a href="http://example.org">PACKAGE</a></h1>
          <p>If you don't have this package yet, get it.
          Don't ask questions.</p>
          <p>My favorite class is <a href="fake/Cool.html"> Cool</a>.</p>
          <p><em>Why should you get this package?</em></p><ul><li>We told you so.</li><li>Everyone is doing it.</li><li>It smells nice.</li></ul>
        </section>

        <section class="summary" id="classes">
          <h4>Classes</h4>

          <dl class="dl-horizontal">
              <dt id="Annotation">
                  <a href="fake/Annotation.html">Annotation</a>
              </dt>
              <dd>
                  Useful for annotations.


              </dd>
              <dt id="ConstantClass">
                  <a href="fake/ConstantClass.html">ConstantClass</a>
              </dt>
              <dd>
                  For make-better testing of constants.


              </dd>
              <dt id="Cool">
                  <a href="fake/Cool.html">Cool</a>
              </dt>
              <dd>
                  This class is cool!


              </dd>
              <dt id="MixMeIn">
                  <a href="fake/MixMeIn.html">MixMeIn</a>
              </dt>
              <dd>
                  Perfect for mix-ins.


              </dd>
              <dt id="Interface">
                  <a href="fake/Interface.html">Interface</a>
              </dt>
              <dd>
                  An interface that can be implemented.


              </dd>
              <dt id="AnotherInterface">
                  <a href="fake/AnotherInterface.html">AnotherInterface</a>
              </dt>
              <dd>
                  Yet another interface that can be implemented.


              </dd>
              <dt id="SuperAwesomeClass">
                  <a href="fake/SuperAwesomeClass.html">SuperAwesomeClass</a>
              </dt>
              <dd>
                  A super class, with many powers.


              </dd>
              <dt id="LongFirstLine">
                  <a href="fake/LongFirstLine.html">LongFirstLine</a>
              </dt>
              <dd>
                  This is a very long line spread across... wait for it... two physical lines.
              </dd>
              <dt id="Foo2">
                  <a href="fake/Foo2.html">Foo2</a>
              </dt>
              <dd>
                  &nbsp;
              </dd>
          </dl>

        </section> <!-- summary classes -->

        <section class="summary" id="enums">
            <h4>Enums</h4>

            <dl class="dl-horizontal">
                <dt id="Color">
                    <a href="fake/Color.html">Color</a>
                </dt>
                <dd>
                    ROYGBIV


                </dd>
            </dl>
        </section>
        <section class="summary" id="properties">
            <h4>Properties</h4>

            <dl class="withreturntypes">
                <dt id="meaningOfLife">

                        <span class="returntype">int</span>
                        <span class="name">meaningOfLife</span>

                </dt>
                <dd>
                    <div>
                        <span class="has-it getter">read</span>
                        <span class=" setter">write</span>
                    </div>
                    Final property.


                </dd>
                <dt id="simpleProperty">

                        <span class="returntype">String</span>
                        <span class="name">simpleProperty</span>

                </dt>
                <dd>
                    <div>
                        <span class="has-it getter">read</span>
                        <span class="has-it setter">write</span>
                    </div>
                    Simple property


                </dd>
                <dt id="justSetter">

                        <span class="returntype">int</span>
                        <span class="name">justSetter</span>

                </dt>
                <dd>
                    <div>
                        <span class=" getter">read</span>
                        <span class="has-it setter">write</span>
                    </div>

                </dd>
                <dt id="justGetter">

                        <span class="returntype">bool</span>
                        <span class="name">justGetter</span>

                </dt>
                <dd>
                    <div>
                        <span class="has-it getter">read</span>
                        <span class=" setter">write</span>
                    </div>

                </dd>
                <dt id="setAndGet">

                        <span class="returntype">String</span>
                        <span class="name">setAndGet</span>

                </dt>
                <dd>
                    <div>
                        <span class="has-it getter">read</span>
                        <span class="has-it setter">write</span>
                    </div>

                </dd>
                <dt id="dynamicGetter">

                        <span class="returntype">dynamic</span>
                        <span class="name">dynamicGetter</span>

                </dt>
                <dd>
                    <div>
                        <span class="has-it getter">read</span>
                        <span class=" setter">write</span>
                    </div>

                </dd>
            </dl>
        </section>
        <section class="summary" id="constants">
            <h4>Constants</h4>

            <dl class="withreturntypes">
                <dt id="CUSTOM_CLASS">

                        <span class="returntype"><a href="fake/ConstantClass.html">ConstantClass</a></span>
                        <span class="name">CUSTOM_CLASS</span>
                        =
                        <span class="constant-value">const ConstantClass(&apos;custom&apos;)</span>

                </dt>
                <dd>

                </dd>
                <dt id="UP">

                        <span class="returntype">String</span>
                        <span class="name">UP</span>
                        =
                        <span class="constant-value">&apos;up&apos;</span>

                </dt>
                <dd>
                    Up is a direction.


                </dd>
                <dt id="DOWN">

                        <span class="returntype">dynamic</span>
                        <span class="name">DOWN</span>
                        =
                        <span class="constant-value">&apos;down&apos;</span>

                </dt>
                <dd>
                    Dynamic-typed down.


                </dd>
                <dt id="ZERO">

                        <span class="returntype">int</span>
                        <span class="name">ZERO</span>
                        =
                        <span class="constant-value">0</span>

                </dt>
                <dd>
                    A constant integer value,
    which is a bit redundant.


                </dd>
                <dt id="PI">

                        <span class="returntype">double</span>
                        <span class="name">PI</span>
                        =
                        <span class="constant-value">3.14159</span>

                </dt>
                <dd>
                    Constant property.


                </dd>
            </dl>
        </section>

        <section class="summary" id="functions">
            <h4>Functions</h4>

            <dl class="withreturntypes">
                <dt id="topLevelFunction">

                        <span class="returntype">String</span>
                        <span class="name-and-params">
                            <a href="fake/topLevelFunction.html"><span class="name">topLevelFunction</span></a>(<span class="type-annotation">int</span> <span class="parameter-name">param1</span>, <span class="type-annotation">bool</span> <span class="parameter-name">param2</span>, <span class="type-annotation"><a href="fake/Cool.html">Cool</a></span> <span class="parameter-name">coolBeans</span>, [<span class="type-annotation">double</span> <span class="parameter-name">optionalPositional</span>= <span class="default-value">0.0</span>])
                        </span>

                </dt>
                <dd>
                    Top-level function 3 params and 1 optional positional param.


                </dd>
                <dt id="onlyPositionalWithNoDefaultNoType">

                        <span class="returntype">void</span>
                        <span class="name-and-params">
                            <a href="fake/onlyPositionalWithNoDefaultNoType.html"><span class="name">onlyPositionalWithNoDefaultNoType</span></a>([<span class="type-annotation">dynamic</span> <span class="parameter-name">anything</span>])
                        </span>

                </dt>
                <dd>
                    A single optional positional param, no type annotation, no default value.


                </dd>
                <dt id="soIntense">

                        <span class="returntype">void</span>
                        <span class="name-and-params">
                            <a href="fake/soIntense.html"><span class="name">soIntense</span></a>(<span class="type-annotation">dynamic</span> <span class="parameter-name">anything</span>, {<span class="type-annotation">bool</span> <span class="parameter-name">flag</span>: <span class="default-value">true</span>, <span class="type-annotation">int</span> <span class="parameter-name">value</span>})
                        </span>

                </dt>
                <dd>
                    Top-level function with 1 param and 2 optional named params, 1 with a
    default value.


                </dd>
                <dt id="paramFromAnotherLib">

                        <span class="returntype">void</span>
                        <span class="name-and-params">
                            <a href="fake/paramFromAnotherLib.html"><span class="name">paramFromAnotherLib</span></a>(<span class="type-annotation"><a href="ex/Apple.html">Apple</a></span> <span class="parameter-name">thing</span>)
                        </span>

                </dt>
                <dd>
                    A comes from another library.


                </dd>
                <dt id="thisIsAsync">

                        <span class="returntype">Future</span>
                        <span class="name-and-params">
                            <a href="fake/thisIsAsync.html"><span class="name">thisIsAsync</span></a>()
                        </span>

                </dt>
                <dd>
                    An async function. It should look like I return a Future.


                </dd>
                <dt id="thisIsAlsoAsync">

                        <span class="returntype">Future</span>
                        <span class="name-and-params">
                            <a href="fake/thisIsAlsoAsync.html"><span class="name">thisIsAlsoAsync</span></a>()
                        </span>

                </dt>
                <dd>
                    Explicitly returns a Future and is marked async.


                </dd>
            </dl>
        </section>


        <section class="summary" id="exceptions">
            <h4>Exceptions/Errors</h4>

            <dl class="dl-horizontal">
                <dt id="Oops">
                    <a href="fake/Oops.html">Oops</a>
                </dt>
                <dd>
                    My bad!


                </dd>
                <dt id="Doh">
                    <a href="fake/Doh.html">Doh</a>
                </dt>
                <dd>
                    Also, my bad.


                </dd>
            </dl>
        </section>
      </div> <!-- container -->
    </div> <!-- wsk-layout__content" -->

    <footer class="wsk-mini-footer">
      <div class="wsk-mini-footer--left-section">
        <div class="wsk-logo">
          Dart API docs
        </div>
        <ul class="wsk-mini-footer--link-list">
          <li><a href="#">Privacy &amp; Terms</a></li>
        </ul>
      </div>
      <div class="wsk-mini-footer--right-section">
        <button class="wsk-mini-footer--social-btn"></button>
        <button class="wsk-mini-footer--social-btn"></button>
        <button class="wsk-mini-footer--social-btn"></button>
      </div>
    </footer>
  </div> <!-- wek-layout -->



  <script src="js/material.js"></script>
</body>
</html>

Author client-side "Customise" tool for theming

New issue from #36 so that we can track creating the tool over in this one :)

Here's what Sergio will be prototyping:

Generating a material.min.css.template file as part of our build process, and offering this as a base file in the repo (just like we do for material.min.css and friends).

Writing client-side JS code that takes the template file and produces a material.min.css file with the user's chosen palettes.

Creating a small page that does the above generation and previews it.

Making it available in our github.io page somewhere, and linking to it from the README.
If this works, the user flow would thus just be "go to site, choose colours, get customised material.min.css".

google / material-design-lite Goto Github PK

material-design-lite's Introduction

Material Design Lite

Limited support

Use MDL on your site?

Browser Support

Download / Clone

Feature requests

Want to contribute?

License

material-design-lite's People

Contributors

Stargazers

Watchers

Forkers

material-design-lite's Issues

Recommend Projects

Recommend Topics

Recommend Org