From 9615741d07208cd310c689ec302b81990a96e2d8 Mon Sep 17 00:00:00 2001 From: Jon Schlinkert Date: Thu, 29 Aug 2013 22:55:16 -0400 Subject: [PATCH] adds more examples, removes prettify layout --- Gruntfile.js | 8 ++ README.md | 5 ++ _demo/button-020/index.html | 138 ++++++++++++++--------------- _demo/button-021/index.html | 9 +- _demo/button-041/index.html | 105 ++++++++++++++++++++++ button-000/README.md | 22 +++++ button-010/README.md | 22 +++++ button-010/index.hbs | 4 + button-011/index.hbs | 4 + button-020/README.md | 11 +++ button-020/index.hbs | 21 +++-- button-021/README.md | 11 +++ button-021/button.hbs | 5 +- button-021/index.hbs | 15 ++-- button-030/button.hbs | 5 +- button-040/button.hbs | 5 +- button-040/styles.css | 3 + button-041/button.hbs | 4 + button-041/button.json | 12 +++ button-041/demo.css | 3 + button-041/demo.json | 11 +++ button-041/index.hbs | 8 ++ button-100/button.hbs | 1 + button-100/button.json | 42 +++++++++ button-100/demo.json | 11 +++ button-100/index.hbs | 101 +++++++++++++++++++++ templates/includes/sidenav-one.hbs | 11 +++ templates/includes/sidenav-two.hbs | 8 ++ templates/layouts/prettify.hbs | 3 - 29 files changed, 507 insertions(+), 101 deletions(-) create mode 100644 _demo/button-041/index.html create mode 100644 button-000/README.md create mode 100644 button-010/README.md create mode 100644 button-020/README.md create mode 100644 button-021/README.md create mode 100644 button-040/styles.css create mode 100644 button-041/button.hbs create mode 100644 button-041/button.json create mode 100644 button-041/demo.css create mode 100644 button-041/demo.json create mode 100644 button-041/index.hbs create mode 100644 button-100/button.hbs create mode 100644 button-100/button.json create mode 100644 button-100/demo.json create mode 100644 button-100/index.hbs create mode 100644 templates/includes/sidenav-one.hbs create mode 100644 templates/includes/sidenav-two.hbs delete mode 100644 templates/layouts/prettify.hbs diff --git a/Gruntfile.js b/Gruntfile.js index 09d9f12..f61d987 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -82,6 +82,14 @@ module.exports = function(grunt) { styles: 'button-040/styles.css' } }, + button041: { + files: {'_demo/button-041/': ['button-041/index.hbs']}, + options: { + partials: 'button-041/button.hbs', + data: 'button-041/*.json', + styles: 'button-041/styles.css' + } + }, button050: { files: {'_demo/button-050/': ['button-050/index.hbs']}, options: { diff --git a/README.md b/README.md index 7d28511..38428df 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,11 @@ Each example in the project demonstrates a different approach to separating conc No judgement is made concerning how much abstraction is good or bad. + + + + + ## TODO * versatile button that can be ``, ``, `` etc. diff --git a/_demo/button-020/index.html b/_demo/button-020/index.html index a0bf4b5..b248fc2 100644 --- a/_demo/button-020/index.html +++ b/_demo/button-020/index.html @@ -14,76 +14,74 @@
-
-
-

Example 2: Topcoat Buttons + Effeckt.css - # -

- - Source: - Hakim El Hattab - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+
+

Example 1: Topcoat Buttons + Effeckt.css + # +

+ + Source: + Hakim El Hattab + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
diff --git a/_demo/button-021/index.html b/_demo/button-021/index.html index 06117d4..a0bf4b5 100644 --- a/_demo/button-021/index.html +++ b/_demo/button-021/index.html @@ -14,14 +14,9 @@
-
+
-

- # -

-
-
-

Example 1: Topcoat Buttons + Effeckt.css +

Example 2: Topcoat Buttons + Effeckt.css #

diff --git a/_demo/button-041/index.html b/_demo/button-041/index.html new file mode 100644 index 0000000..634931e --- /dev/null +++ b/_demo/button-041/index.html @@ -0,0 +1,105 @@ + + + + + Button Examples + + + + + + + + + + + +
+
+
+

Example 4: Topcoat Buttons + Effeckt.css + # +

+ + Source: + Hakim El Hattab + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + + diff --git a/button-000/README.md b/button-000/README.md new file mode 100644 index 0000000..5b92acf --- /dev/null +++ b/button-000/README.md @@ -0,0 +1,22 @@ +# Buttons Example #001 + +> Basic example, with component listed multiple times, wrapped with a layout. + +## demo +### markup + +### data + +## component +### markup + +### data + + + +### index.hbs + +* All demo markup for the component is constrained to a single page. +* [layout](), `default.hbs`, is used to "wrap" the demo page with a common head and footer. This layout is defined in the Gruntfile, in Assemble's task-level options. +* Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. +* Extraneous information about the demo is also embedded in the HTML with the component examples. \ No newline at end of file diff --git a/button-010/README.md b/button-010/README.md new file mode 100644 index 0000000..bd952f0 --- /dev/null +++ b/button-010/README.md @@ -0,0 +1,22 @@ +# Buttons Example #010 + +> Basic example, with component listed multiple times, wrapped with a layout. + +## demo +### markup + +### data + +## component +### markup + +### data + + + +### index.hbs + +* All demo markup for the component is constrained to a single page. +* [layout](), `default.hbs`, is used to "wrap" the demo page with a common head and footer. This layout is defined in the Gruntfile, in Assemble's task-level options. +* Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. +* Extraneous information about the demo is also embedded in the HTML with the component examples. \ No newline at end of file diff --git a/button-010/index.hbs b/button-010/index.hbs index cf809fe..d7d3081 100644 --- a/button-010/index.hbs +++ b/button-010/index.hbs @@ -1,4 +1,6 @@
+ + {{!-- demo metadata --}}

Example 1: Topcoat Buttons + Effeckt.css # @@ -8,6 +10,8 @@ Hakim El Hattab

+ + {{!-- buttons --}}
\ No newline at end of file + \ No newline at end of file diff --git a/button-021/index.hbs b/button-021/index.hbs index c77c39b..507ba5f 100644 --- a/button-021/index.hbs +++ b/button-021/index.hbs @@ -1,13 +1,14 @@ --- layout: component.hbs +demo: + title: "Example 2: Topcoat Buttons + Effeckt.css" + component: buttons + modifier: effeckt-demo-buttons + source: + name: Hakim El Hattab + url: http://lab.hakim.se/effeckt/ --- -
-

Example 1: Topcoat Buttons + Effeckt.css #

- - Source: Hakim El Hattab - -
- +{{!-- buttons --}}
{{> button button.expand-right }}
diff --git a/button-030/button.hbs b/button-030/button.hbs index 57befba..787e522 100644 --- a/button-030/button.hbs +++ b/button-030/button.hbs @@ -1 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/button-040/button.hbs b/button-040/button.hbs index 57befba..787e522 100644 --- a/button-040/button.hbs +++ b/button-040/button.hbs @@ -1 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/button-040/styles.css b/button-040/styles.css new file mode 100644 index 0000000..3494c50 --- /dev/null +++ b/button-040/styles.css @@ -0,0 +1,3 @@ +body { + background: #ddd; +} \ No newline at end of file diff --git a/button-041/button.hbs b/button-041/button.hbs new file mode 100644 index 0000000..9631310 --- /dev/null +++ b/button-041/button.hbs @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/button-041/button.json b/button-041/button.json new file mode 100644 index 0000000..9d313d5 --- /dev/null +++ b/button-041/button.json @@ -0,0 +1,12 @@ +[ + "expand-right", + "expand-left", + "expand-up", + "expand-down", + "slide-left", + "slide-right", + "slide-up", + "slide-down", + "zoom-out", + "zoom-in" +] \ No newline at end of file diff --git a/button-041/demo.css b/button-041/demo.css new file mode 100644 index 0000000..3494c50 --- /dev/null +++ b/button-041/demo.css @@ -0,0 +1,3 @@ +body { + background: #ddd; +} \ No newline at end of file diff --git a/button-041/demo.json b/button-041/demo.json new file mode 100644 index 0000000..b736f11 --- /dev/null +++ b/button-041/demo.json @@ -0,0 +1,11 @@ +{ + "demo": { + "title": "Example 4: Topcoat Buttons + Effeckt.css", + "component": "buttons", + "modifier": "effeckt-demo-buttons", + "source": { + "name": "Hakim El Hattab", + "url": "http://lab.hakim.se/effeckt/" + } + } +} \ No newline at end of file diff --git a/button-041/index.hbs b/button-041/index.hbs new file mode 100644 index 0000000..bd270c9 --- /dev/null +++ b/button-041/index.hbs @@ -0,0 +1,8 @@ +--- +layout: component.hbs +--- +{{#each button}} +
+ {{> button }} +
+{{/each}} \ No newline at end of file diff --git a/button-100/button.hbs b/button-100/button.hbs new file mode 100644 index 0000000..57befba --- /dev/null +++ b/button-100/button.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/button-100/button.json b/button-100/button.json new file mode 100644 index 0000000..535e3d3 --- /dev/null +++ b/button-100/button.json @@ -0,0 +1,42 @@ +{ + "expand-right": { + "label": "Expand Right", + "modifier": "expand-right" + }, + "expand-left": { + "label": "Expand Left", + "modifier": "expand-left" + }, + "expand-up": { + "label": "Expand Up", + "modifier": "expand-up" + }, + "expand-down": { + "label": "Expand Down", + "modifier": "expand-down" + }, + "slide-left": { + "label": "Slide Left", + "modifier": "slide-left" + }, + "slide-right": { + "label": "Slide Right", + "modifier": "slide-right" + }, + "slide-up": { + "label": "Slide Up", + "modifier": "slide-up" + }, + "slide-down": { + "label": "Slide Down", + "modifier": "slide-down" + }, + "zoom-out": { + "label": "Zoom Out", + "modifier": "zoom-out" + }, + "zoom-in": { + "label": "Zoom in", + "modifier": "zoom-in" + } +} \ No newline at end of file diff --git a/button-100/demo.json b/button-100/demo.json new file mode 100644 index 0000000..fe2f9fc --- /dev/null +++ b/button-100/demo.json @@ -0,0 +1,11 @@ +{ + "demo": { + "title": "Example 8: Topcoat Buttons + Effeckt.css", + "component": "buttons", + "modifier": "effeckt-demo-buttons", + "source": { + "name": "Hakim El Hattab", + "url": "http://lab.hakim.se/effeckt/" + } + } +} \ No newline at end of file diff --git a/button-100/index.hbs b/button-100/index.hbs new file mode 100644 index 0000000..405cb75 --- /dev/null +++ b/button-100/index.hbs @@ -0,0 +1,101 @@ +--- +layout: component.hbs + +# Example of using underscore templates +# to externalize the config for the helpers. +# The valuse are set in the Gruntfile, and +# then passed into the context of the repeat +# helper in the page. +number: + expandright: "<%= repeat.expandright %>" + expandleft : "<%= repeat.expandleft %>" + expandup : "<%= repeat.expandup %>" + expanddown : "<%= repeat.expanddown %>" + slideleft : "<%= repeat.slideleft %>" + slideright : "<%= repeat.slideright %>" + slideup : "<%= repeat.slideup %>" + slidedown : "<%= repeat.slidedown %>" + zoomout : "<%= repeat.zoomout %>" + zoomin : "<%= repeat.zoomin %>" +--- + + + +{{#repeat number.expandright}} +
+ {{> button button.expand-right }} +
+{{/repeat}} + +
+ +{{#repeat number.expandleft}} +
+ {{> button button.expand-left }} +
+{{/repeat}} + +
+ +{{#repeat number.expandup}} +
+ {{> button button.expand-up }} +
+{{/repeat}} + +
+ +{{#repeat number.expanddown}} +
+ {{> button button.expand-down }} +
+{{/repeat}} + +
+ +{{#repeat number.slideleft}} +
+ {{> button button.slide-left }} +
+{{/repeat}} + +
+ +{{#repeat number.slideright}} +
+ {{> button button.slide-right }} +
+{{/repeat}} + +
+ +{{#repeat number.slideup}} +
+ {{> button button.slide-up }} +
+{{/repeat}} + +
+ +{{#repeat number.slidedown}} +
+ {{> button button.slide-down }} +
+{{/repeat}} + +
+ +{{#repeat number.zoomout}} +
+ {{> button button.zoom-out }} +
+{{/repeat}} + +
+ +{{#repeat number.zoomin}} +
+ {{> button button.zoom-in }} +
+{{/repeat}} + diff --git a/templates/includes/sidenav-one.hbs b/templates/includes/sidenav-one.hbs new file mode 100644 index 0000000..a3070c9 --- /dev/null +++ b/templates/includes/sidenav-one.hbs @@ -0,0 +1,11 @@ + + Getting Started + + \ No newline at end of file diff --git a/templates/includes/sidenav-two.hbs b/templates/includes/sidenav-two.hbs new file mode 100644 index 0000000..acfd7b3 --- /dev/null +++ b/templates/includes/sidenav-two.hbs @@ -0,0 +1,8 @@ + + Getting Started + +{{#li pages class="nav nav-pills nav-stacked"}} + {{#is data.section "getting started"}} + click-tracker }}>{{data.title}} + {{/is}} +{{/li}} \ No newline at end of file diff --git a/templates/layouts/prettify.hbs b/templates/layouts/prettify.hbs deleted file mode 100644 index b5b4515..0000000 --- a/templates/layouts/prettify.hbs +++ /dev/null @@ -1,3 +0,0 @@ -{{#prettify indent="4"}} - {{> body }} -{{/prettify}} \ No newline at end of file