Material Design Lite
Sample layout

Material Design Lite, Dart version

A port of Googles Material Design Lite to Dart

Material Design Lite strives to give you a high performance starting point out of the box Responsive layout is included with the kit that adapts to fit the device your user is viewing it on.
Delete-key friendly
Create a tailored starter kit by taking only what you need, and easily deleting anything you don't.

The source code is hosted on GitHub. Issues, ideas: Issue-Tracker on GitHub

Styleguide

The Styleguide shows all samples in one page. It is also a nice example for a Single-Page-Application (SPA). All views are loaded dynamically via "MaterialContent-Component"

Single Page Sample (SPA)

Theming

Theming is very easy. This is your basic SCSS file:

main.scss:

    1.  @import 'packages/mdl/sass/resets/h5bp';
    2.  @import 'packages/mdl/sass/typography/typography';
    3.  @import 'packages/mdl/sass/palette/palette';

    4.  @import 'colors';

    5.  @import 'packages/mdl/sass/layout/layout';
            
Line 1 - 3 shows you basic imports from mdl.
On line 4 you import your local "colors" file.

_colors.scss:
    1.  @import "packages/mdl/sass/palette/palette";

    2.  /* ==========  Color & Themes  ========== */

    3.  // Use color primarily for emphasis. Choose colors that fit with
    4.  // your brand and provide good contrast between visual components.

    5.  $palette-primary: $palette-indigo !default;
    6.  $palette-accent: $palette-pink !default;
    7.  $palette-secondary: $palette-grey !default;
    8.  $palette-disabled: $palette-grey !default;
    9.  $palette-page: $palette-grey !default;
        ...
                
Now change the pallets-name
Yes - that's it! Compile your sass-file and you are done!

If you want to know how to theme your SVG-Icons - check out this files main.scss (svgShapeComponent)