Material Design Lite /

Lite weight + 'batteries included'

Material Design Lite for Dart (MDL/Dart) is a library of components for web developers based on Google's Material Design philosophy.
In Dart - for Dart, for you!

import 'package:mdl/mdl.dart';

main() {
    registerMdl();
    componentFactory().run().then((_) {
    });
}
intro-image
<button class="mdl-button">Flat</button>
<button class="mdl-button mdl-button--raised">
    Raised
</button>
<button class="mdl-button mdl-button--fab ">
    <i class="material-icons">add</i>
</button>
<button class="mdl-button mdl-button--icon ">
    <i class="material-icons">create</i>
</button>

Getting started

Let's do it!

gettingstarted-image

Please follow the guide on styleguide.material-design-lite.pub

Go to Resources

  1. Unpack the downloade file.
  2. "cd" to samples/<your file>/
  3. pup get

The problem

Why you should use MDL/Dart

  • warning There is no "pure" Dart UI Library
  • warning Polymer is written in JS, Polymer.Dart is "just" a wrapper
  • warning Angular is written in Typescript - slows down development
  • warning Both, Polymer.Dart and Angular.Dart are huge, slow and hard to debug
It's always the same - the more calls a lib has to make until it gets a result, the slower it becomes.

  • check MDL/Dart is written in pure Dart.
    The styling-part is written in SCSS, prefixed (mdl-) and easy to use.
  • check MDL/Dart-Code is easy to read.
    The component-registration has about 55 lines of code.
    More on GitHub
  • check DI (Dependency Injection)
    You can use it but you don't have to.
    If you like DI it's easy to implement e.g. a MessageBus for your components.
  • check No HTML-Imports
    Google says HTML-Imports are a feature - I don't agree.
    All you get is a bloated HTML-Header.
    In MDL/Dart you have your HTML with your components and your main.dart where you define all the necessary imports - that's it!
  • check You can use classes, attributes or tags as your component
    (Not supported in MDL/JS)
    E.g. MaterialCheckbox uses mdl-js-checkbox for the Component-Registration
    The D&D sample uses the mdl-draggable tag
    as basis for the Component: - it's up to you!
    MaterialObserve uses an attribute as basis
  • check Easy to use public component functions
  • check Routing is included!
    The Styleguide uses all the SPA (SinglePageApplication) features like routing, dependency-injection or dynamic-content (dynamic views)
  • check Theming
    Sure Polymer has theming but with it's encapsulation approach
    it's more a pain then it helps.
    Here are the SCSS-Themes: GitHub
about-image

THE FEATURES

HOW WE DO IT

loyalty

Lightweight

MDL/Dart ist lightweight! material.min.css has about 170KB and main.dart.js for styleguide with all it's views, samples aso. has ~700KB.
The styleguide-sample takes about 500ms (cached-version) and about 900ms if cache is disabled!
(Pagespeed turned on)

redeem

Full featured framework. The following "batteries" are included:

now_widgets

Components ready to use

  • 16 base components designed / confirmed by Googles Material Design Team like MaterialButton, MaterialCheckbox, MaterialLayout, MaterialTabs aso.
  • 4 different dialogs like AlertDialog, ConfirmDialog, Notification-Messages and Snackbar
  • Directives for easy data-binding
  • Drag and Drop
  • Formatters to format the "observer" output directly from your HTML
  • Mustache-Based-Components (Template-Based)
    E.g. define your event-handler in HTML:
    <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
                                                                                  data-mdl-click="handleButtonClick()">Click me!</button>
  • You are not tied to css-class-based components. Choose weither your own component should be class-bases, attribute-based or tag-based! (GitHub)
color_lens

Theming

343 Precompiled (SCSS->CSS) Color-Themes for your application. All themes are based on Googles Material Design Color spec.

view_quilt

Templates

Nice templates as a quick-start for you

Resources

Check it out

All samples as TGZ-File

  1. Unpack the downloade file.
  2. "cd" to samples/<your file>/
  3. pup get

Contact

How you reach us

place

Office Location

Dorfstrasse 112, Westendorf 6363, Austria

email

Email Address

office@mikemitterer.at
bug_report

Issue reports

GitHub