Permalink
Browse files

doc: Added more StageDive-Templates, QuickStart-Section

  • Loading branch information...
MikeMitterer committed Jul 16, 2015
1 parent 98cec09 commit 73538817656717ea436292018d19bd1ad2ed3fd1
Showing with 44,635 additions and 107 deletions.
  1. +20 −5 README.md
  2. +36 −40 example/styleguide/.sitegen/html/_content/views/home.html
  3. +33 −0 example/styleguide/.sitegen/html/_content/views/materialdesign.html
  4. +63 −0 example/styleguide/.sitegen/html/_content/views/quickstart.html
  5. +2 −0 example/styleguide/.sitegen/html/_templates/default.html
  6. +2 −0 example/styleguide/web/index.html
  7. +6 −0 example/styleguide/web/main.dart
  8. +35 −37 example/styleguide/web/views/home.html
  9. +29 −0 example/styleguide/web/views/materialdesign.html
  10. +61 −0 example/styleguide/web/views/quickstart.html
  11. +1 −1 example/template_android-dot-com/web/main.dart
  12. +1 −1 example/template_article/web/main.dart
  13. +1 −1 example/template_blog/web/main.dart
  14. +1 −1 example/template_dashboard/web/main.dart
  15. +1 −1 example/template_fixed-header/web/main.dart
  16. +2 −4 example/template_sticky-footer/web/main.dart
  17. +2 −0 example/template_sticky-footer/web/styles/demo.scss
  18. +1 −1 example/template_text-only/web/main.dart
  19. +3 −1 lib/_templates/android/manifest.yaml
  20. +2 −2 lib/_templates/android/pubspec.yaml
  21. +1 −1 lib/_templates/android/web/main.dart
  22. +18 −0 lib/_templates/article/manifest.yaml
  23. +22 −0 lib/_templates/article/pubspec.yaml
  24. +139 −0 lib/_templates/article/web/index.html
  25. +25 −0 lib/_templates/article/web/main.dart
  26. +8,285 −0 lib/_templates/article/web/material.css
  27. +17 −0 lib/_templates/article/web/material.scss
  28. +59 −0 lib/_templates/article/web/styles.css
  29. +17 −0 lib/_templates/blog/manifest.yaml
  30. +22 −0 lib/_templates/blog/pubspec.yaml
  31. +191 −0 lib/_templates/blog/web/entry.html
  32. BIN lib/_templates/blog/web/images/avatar.png
  33. BIN lib/_templates/blog/web/images/bg.jpg
  34. BIN lib/_templates/blog/web/images/co1.jpg
  35. BIN lib/_templates/blog/web/images/co2.jpg
  36. BIN lib/_templates/blog/web/images/coffee.jpg
  37. BIN lib/_templates/blog/web/images/logo.png
  38. BIN lib/_templates/blog/web/images/road.jpg
  39. BIN lib/_templates/blog/web/images/road_big.jpg
  40. BIN lib/_templates/blog/web/images/shopping.jpg
  41. +171 −0 lib/_templates/blog/web/index.html
  42. +25 −0 lib/_templates/blog/web/main.dart
  43. +8,285 −0 lib/_templates/blog/web/material.css
  44. +17 −0 lib/_templates/blog/web/material.scss
  45. +373 −0 lib/_templates/blog/web/styles.css
  46. +17 −0 lib/_templates/dashboard/manifest.yaml
  47. +22 −0 lib/_templates/dashboard/pubspec.yaml
  48. BIN lib/_templates/dashboard/web/images/dog.png
  49. BIN lib/_templates/dashboard/web/images/user.jpg
  50. +250 −0 lib/_templates/dashboard/web/index.html
  51. +25 −0 lib/_templates/dashboard/web/main.dart
  52. +8,285 −0 lib/_templates/dashboard/web/material.css
  53. +17 −0 lib/_templates/dashboard/web/material.scss
  54. +178 −0 lib/_templates/dashboard/web/styles.css
  55. +17 −0 lib/_templates/fixed-header/manifest.yaml
  56. +22 −0 lib/_templates/fixed-header/pubspec.yaml
  57. +8 −0 lib/_templates/fixed-header/web/assets/svg/logo-first-part_24px.svg
  58. +8 −0 lib/_templates/fixed-header/web/assets/svg/logo-first-part_48px.svg
  59. +8 −0 lib/_templates/fixed-header/web/assets/svg/logo-first-part_64px.svg
  60. BIN lib/_templates/fixed-header/web/images/app-icon.png
  61. BIN lib/_templates/fixed-header/web/images/desktop-handsfree-hero.jpg
  62. BIN lib/_templates/fixed-header/web/images/dog.png
  63. BIN lib/_templates/fixed-header/web/images/graph1.png
  64. BIN lib/_templates/fixed-header/web/images/graph2.png
  65. BIN lib/_templates/fixed-header/web/images/user.jpg
  66. +112 −0 lib/_templates/fixed-header/web/index.html
  67. +62 −0 lib/_templates/fixed-header/web/main.dart
  68. +8,340 −0 lib/_templates/fixed-header/web/styles/demo.css
  69. +87 −0 lib/_templates/fixed-header/web/styles/demo.scss
  70. +0 −9 lib/_templates/sample/.sitegen/html/_content/index.html
  71. +0 −2 lib/_templates/sample/.sitegen/site.yaml
  72. +17 −0 lib/_templates/sticky-footer/manifest.yaml
  73. +22 −0 lib/_templates/sticky-footer/pubspec.yaml
  74. BIN lib/_templates/sticky-footer/web/images/app-icon.png
  75. BIN lib/_templates/sticky-footer/web/images/desktop-handsfree-hero.jpg
  76. BIN lib/_templates/sticky-footer/web/images/dog.png
  77. BIN lib/_templates/sticky-footer/web/images/graph1.png
  78. BIN lib/_templates/sticky-footer/web/images/graph2.png
  79. BIN lib/_templates/sticky-footer/web/images/user.jpg
  80. +107 −0 lib/_templates/sticky-footer/web/index.html
  81. +62 −0 lib/_templates/sticky-footer/web/main.dart
  82. +57 −0 lib/_templates/sticky-footer/web/styles/demo.css
  83. +72 −0 lib/_templates/sticky-footer/web/styles/demo.scss
  84. +17 −0 lib/_templates/text-only/manifest.yaml
  85. +22 −0 lib/_templates/text-only/pubspec.yaml
  86. +297 −0 lib/_templates/text-only/web/index.html
  87. +25 −0 lib/_templates/text-only/web/main.dart
  88. +8,285 −0 lib/_templates/text-only/web/material.css
  89. +17 −0 lib/_templates/text-only/web/material.scss
  90. +208 −0 lib/_templates/text-only/web/styles.css
View
@@ -1,13 +1,18 @@
# Material Design Lite for Dart
> A library of [Material Design](http://www.google.com/design/spec/material-design/introduction.html) components in CSS, Dart, and HTML
([MDL Dart website][mdldemo]).
Material Design Lite lets you add a Material Design look and feel to your static content websites. It doesn’t rely on any JavaScript
frameworks or libraries. Optimised for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible
from the get-go.
## StageDive
## New
- mdl-model Component, Check out the [sample](http://samples.material-design-lite.pub/spa_model/index.html)
- More samples with **StageDive** support
- [Quick-Start-Section](http://www.material-design-lite.pub/#/quickstart)
- More infos on ["home"](http://www.material-design-lite.pub/#/quickstart)
## Quick Start with StageDive
MDL/Dart has StageDive support!
Try it out and follow these steps:
@@ -25,8 +30,16 @@ pub global activate sitegen
stagedive -l
# You should see something like this
# 'MDL Android Template' Package: mdl Template name: android Version: 1.0.1
# 'Simple Console' Package: stagedive Template name: console Version: 0.2.3
# 'MDL Android Template' Package: mdl Template name: android Version: 1.x
# 'MDL Android Template' Package: mdl Template name: android Version: 1.x
# 'MDL Article Template' Package: mdl Template name: article Version: 1.x
# 'MDL Android Template' Package: mdl Template name: blog Version: 1.x
# 'MDL Blog Template' Package: mdl Template name: dashboard Version: 1.x
# 'MDL Fixed-Header Template' Package: mdl Template name: fixed-header Version: 1.x
# 'MDL Sample Template' Package: mdl Template name: sample Version: 1.x
# 'MDL Sticky-Footer Template' Package: mdl Template name: sticky-footer Version: 1.x
# 'MDL Text-Only Template' Package: mdl Template name: text-only Version: 1.x
# Now lets generate a new (-n) folder: android
stagedive -n android -p mdl -t android
@@ -51,8 +64,10 @@ sitegen -x
localhost:8000
```
This is how it stagedive get's it's [template](https://goo.gl/O2gis7)
### Hint
Short form for the last 4 commands: `cd android/ && pub update && sitegen -x || cd -`
This is how it stagedive gets its [template](https://goo.gl/O2gis7)
## Quick Start
@@ -18,41 +18,63 @@ <h3 id="material-design-lite" class="mdl-color-text--600">MDL/<span
Design
Introduction</a>, you should do so before attempting to use the components.</p>
<h3>Quick Start</h3>
<p>OK - if this is to much noise for you - jump to the <a href="#/quickstart">"Quick-Start-Section"</a></p>
<h5>What are the benefits of MDL/Dart (compared to MDL/JS)</h5>
<p>First of all MDL/JS is cool but Dart has <strong>"Batteries included"</strong>
<h6>Dart</h6>
<ul>
<li>Native Dart-Code</li>
<li>pub integration</li>
<li>you can write your own components easily</li>
<li><a href="https://github.com/MikeMitterer/dart-material-design-lite" target="_blank">
Native Dart-Code</a></li>
<li><a href="https://pub.dartlang.org/packages/mdl" target="_blank">
pub integration
</a></li>
<li><a href="https://goo.gl/3pmgKT" target="_blank">
you can write your own components easily
</a></li>
<li>Use public component-functions via MdlComponent.widget</li>
</ul>
<h6>Additional components</h6>
<ul>
<li>Accordion</li>
<li>Nav-Pills</li>
<li>Panel</li>
<li><a href="#/accordion">
Accordion
</a></li>
<li><a href="#/nav-pills">
Nav-Pills
</a></li>
<li><a href="#/panel">
Panel
</a></li>
<li><a href="#/dnd">
Drag and Drop
</a></li>
</ul>
<h6>Dialogs</h6>
<ul>
<li>AlertDialog</li>
<li>ConfirmDialog</li>
<li>CustomDialog</li>
<li>SnackBar</li>
<li>Notification</li>
<li><a href="#/dialog">AlertDialog</a></li>
<li><a href="#/dialog">ConfirmDialog</a></li>
<li><a href="#/dialog">CustomDialog</a></li>
<li><a href="#/snackbar">SnackBar</a></li>
<li><a href="#/notification">Notification</a></li>
</ul>
<h6>Single Page Application (SPA) Features</h6>
<ul>
<li>Repeater</li>
<li>Observer</li>
<li><a href="#/repeat">Repeater</a></li>
<li><a href="#/observe">Observer</a></li>
<li>Mustache-Templates</li>
<li>View integration (loads HTML content dynamically)<br>
(Content- and Include-Component)
(<a href="http://samples.material-design-lite.pub/spa_content/index.html" target="_blank">
Content
</a>- and <a href="http://samples.material-design-lite.pub/spa_include/index.html" target="_blank">
Include-Component
</a>)
</li>
<li><a href="#/model">Model-Component</a></li>
</ul>
</ul>
@@ -64,33 +86,7 @@ <h6>Single Page Application (SPA) Features</h6>
</p>
<h5>What is Material Design?</h5>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Material
Design</a>
is a specification for a unified system of visual, motion, and interaction design that
adapts across different devices and different screen sizes. Below is a brief video that presents the
Material Design system:</p>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
<section class="links" id="links">
<h6>Links</h6>
<ul>
<li><a href="http://google.github.io/material-design-icons/" target="_blank">Googles Material Design
Icons - SVG</a></li>
<li><a href="https://www.google.com/design/icons/" target="_blank">Googles Material Design Icons -
Fonts</a></li>
<li><a href="https://developers.google.com/web/starter-kit/" target="_blank">Web Starter Kit</a></li>
<li><a href="http://www.google.com/design/spec/material-design/" target="_blank">Material design -
specifications</a>
</li>
</ul>
</section>
</article>
</section>
@@ -0,0 +1,33 @@
<section class="demo-section demo-section--materialdesign">
<article class="materialdesign sample">
<div>
<h3>What is Material Design?</h3>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Material
Design</a>
is a specification for a unified system of visual, motion, and interaction design that
adapts across different devices and different screen sizes. Below is a brief video that presents the
Material Design system:</p>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
<section class="links" id="links">
<h6>Links</h6>
<ul>
<li><a href="http://google.github.io/material-design-icons/" target="_blank">Googles Material Design
Icons - SVG</a></li>
<li><a href="https://www.google.com/design/icons/" target="_blank">Googles Material Design Icons -
Fonts</a></li>
<li><a href="https://developers.google.com/web/starter-kit/" target="_blank">Web Starter Kit</a></li>
<li><a href="http://www.google.com/design/spec/material-design/" target="_blank">Material design -
specifications</a>
</li>
</ul>
</section>
</article>
</section>
@@ -0,0 +1,63 @@
<section class="demo-section demo-section--quickstart">
<article class="quickstart sample">
<div>
<h3>Quick Start</h3>
<p>
MDL/Dart comes with <a href="https://pub.dartlang.org/packages/stagedive" target="_blank">StageDive</a> support!<br>
Try it out an follow these steps:
</p>
<pre class="prettyprint lang-bash">
# if you don't have mdl installed
pub cache add mdl
&nbsp;
# if you don't have stagedive installed or if you want to update stagedive
pub global activate stagedive
&nbsp;
# if you don't have sitegen installed or if you want to update sitegen
# sitegen - will later act as a local server
pub global activate sitegen
&nbsp;
stagedive -l
&nbsp;
# You should see something like this
&nbsp;
# 'MDL Android Template' Package: mdl Template name: android
# 'MDL Android Template' Package: mdl Template name: android
# 'MDL Article Template' Package: mdl Template name: article
# 'MDL Android Template' Package: mdl Template name: blog
# 'MDL Blog Template' Package: mdl Template name: dashboard
# 'MDL Fixed-Header Template' Package: mdl Template name: fixed-header
# 'MDL Sample Template' Package: mdl Template name: sample
# 'MDL Sticky-Footer Template' Package: mdl Template name: sticky-footer
# 'MDL Text-Only Template' Package: mdl Template name: text-only
&nbsp;
# Now lets generate a new (-n) folder: android
stagedive -n android -p mdl -t android
&nbsp;
# This is what stagedive asks you
# Your email address: office@mikemitterer
# Your name: Mike
# Enter the package-name: android_mdl
#
# 'MDL Android Template' created! (android)
&nbsp;
# move the the newly created dir
cd android
&nbsp;
# Update everything
pub update
&nbsp;
# Serve the site (you are in 'android'!)
sitegen -x
&nbsp;
# In Chromium/Dartium
localhost:8000</pre>
<h4>Hint</h4>
<p>Short form for the last 4 commands:
<pre class="prettyprint linenums lang-bash">cd android/ && pub update && sitegen -x || cd -</pre>
</p>
</div>
</article>
</section>
@@ -67,7 +67,9 @@
<div class="mdl-accordion">
<label class="mdl-accordion__label">Getting started<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<a class="mdl-navigation__link mdl-color-text--primary" href="#/quickstart">Quick Start</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/gettingstarted">Introduction</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/materialdesign">Material Design</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/contribute">Contribute</a>
</div>
</div>
@@ -57,7 +57,9 @@
<div class="mdl-accordion">
<label class="mdl-accordion__label">Getting started<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<a class="mdl-navigation__link mdl-color-text--primary" href="#/quickstart">Quick Start</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/gettingstarted">Introduction</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/materialdesign">Material Design</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/contribute">Contribute</a>
</div>
</div>
@@ -833,6 +833,9 @@ void configRouter() {
..addRoute(name: 'list', path: '/list',
enter: view("views/list.html", new DemoController()))
..addRoute(name: 'materialdesign', path: '/materialdesign',
enter: view("views/materialdesign.html", new DemoController()))
..addRoute(name: 'menu', path: '/menu',
enter: view("views/menu.html", new MenuController()))
@@ -857,6 +860,9 @@ void configRouter() {
..addRoute(name: 'progress', path: '/progress',
enter: view("views/progress.html", new ProgressController()))
..addRoute(name: 'quickstart', path: '/quickstart',
enter: view("views/quickstart.html", new DemoController()))
..addRoute(name: 'radio', path: '/radio',
enter: view("views/radio.html", new RadioController()))
Oops, something went wrong.

0 comments on commit 7353881

Please sign in to comment.