Web Starter Kit - Material style
Sample layout

Web Starter Kit - Material Design, Dart version

A port of Googles Web Starter Kit (Material branch) to Dart

Web Starter Kit 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

Components

Styleguide

The Styleguide shows all samples in one page. (takes a while - loads all other samples in iframes)

Sample layouts

Fixed header, collapsible drawer for smaller screens, footer scrolls
Layout sample
This layout comes with a fixed header. Always shows a header, even in smaller screens. At the end of the page you'll see a "mini-footer".
Show me the sample
Fixed header, collapsible drawer for smaller screens, fixed footer
Layout sample
This layout comes with a fixed header and a fixed footer. Always shows a header, even in smaller screens. On smaller screens the "mini-footer" will be replaced by a "bottom-bar".
Show me the sample

Theming

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

main.scss: 

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

    4.  @import 'colors';

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

_colors.scss: 
    1.  @import "packages/wsk_material/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)