Material style for Angular Dart
Sample layout

Web Starter Kit, Material style for Angular / Dart

A port of Googles Web Starter Kit (Material branch) to Angular / 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

Styleguide

The Styleguide shows all samples on one page. It also tells you more about wsk_angular, how to get startet and how to use the components.

If you are not sure - this is your main entry point.

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".
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".
Single Page Application
Layout sample
The layout for the Single-Page-Application comes with a fixed header and a fixed footer. There is also a drop-down-menu if you click on the "more"-button. Always shows a header, even in smaller screens. On smaller screens the "mini-footer" will be replaced by a "bottom-bar".

Theming

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

main.scss:

    1.  @import "packages/wsk_angular/sass/wsk_resets/wsk_h5bp";
    2.  @import 'packages/wsk_angular/sass/wsk_typography/wsk_typography';
    3.  @import 'packages/wsk_angular/sass/wsk_palette/wsk_palette';

    4.  @import 'colors';

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

_colors.scss:
    1.  @import "packages/wsk_angular/sass/wsk_palette/wsk_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 project dart-material-icons