Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

adds more examples, removes prettify layout

  • Loading branch information...
commit 9615741d07208cd310c689ec302b81990a96e2d8 1 parent 887e05f
@jonschlinkert jonschlinkert authored
View
8 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: {
View
5 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 `<a href="#"></a>`, `<button></button>`, `<input type="text">` etc.
View
138 _demo/button-020/index.html
@@ -14,76 +14,74 @@
</head>
<body>
<div class="page-wrap no-transitions" id="page-wrap">
- <div class="effeckt effeckt-demo-buttons group">
- <header>
- <h2>Example 2: Topcoat Buttons + Effeckt.css
- <a href="buttons.html">#</a>
- </h2>
- <span class="source">
- Source:
- <a href="http://lab.hakim.se/effeckt/">Hakim El Hattab</a>
- </span>
- </header>
- <div class="button-demo-wrap">
- <button class="effeckt-button expand-right topcoat-button">
- <span class="label">Expand Right</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button expand-left topcoat-button">
- <span class="label">Expand Left</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button expand-up topcoat-button">
- <span class="label">Expand Up</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button expand-down topcoat-button">
- <span class="label">Expand Down</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button slide-left topcoat-button">
- <span class="label">Slide Left</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button slide-right topcoat-button">
- <span class="label">Slide Right</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button slide-up topcoat-button">
- <span class="label">Slide Up</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button slide-down topcoat-button">
- <span class="label">Slide Down</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button zoom-out topcoat-button">
- <span class="label">Zoom Out</span>
- <span class="spinner"></span>
- </button>
- </div>
- <div class="button-demo-wrap">
- <button class="effeckt-button zoom-in topcoat-button">
- <span class="label">Zoom in</span>
- <span class="spinner"></span>
- </button>
- </div>
+ <header>
+ <h2>Example 1: Topcoat Buttons + Effeckt.css
+ <a href="buttons.html">#</a>
+ </h2>
+ <span class="source">
+ Source:
+ <a href="http://lab.hakim.se/effeckt/">Hakim El Hattab</a>
+ </span>
+ </header>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-right topcoat-button">
+ <span class="label">Expand Right</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-left topcoat-button">
+ <span class="label">Expand Left</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-up topcoat-button">
+ <span class="label">Expand Up</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-down topcoat-button">
+ <span class="label">Expand Down</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-left topcoat-button">
+ <span class="label">Slide Left</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-right topcoat-button">
+ <span class="label">Slide Right</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-up topcoat-button">
+ <span class="label">Slide Up</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-down topcoat-button">
+ <span class="label">Slide Down</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button zoom-out topcoat-button">
+ <span class="label">Zoom Out</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button zoom-in topcoat-button">
+ <span class="label">Zoom in</span>
+ <span class="spinner"></span>
+ </button>
</div>
</div>
View
9 _demo/button-021/index.html
@@ -14,14 +14,9 @@
</head>
<body>
<div class="page-wrap no-transitions" id="page-wrap">
- <div class="effeckt group">
+ <div class="effeckt effeckt-demo-buttons group">
<header>
- <h2>
- <a href=".html">#</a>
- </h2>
- </header>
- <header>
- <h2>Example 1: Topcoat Buttons + Effeckt.css
+ <h2>Example 2: Topcoat Buttons + Effeckt.css
<a href="buttons.html">#</a>
</h2>
<span class="source">
View
105 _demo/button-041/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Button Examples</title>
+ <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
+ <link rel="stylesheet" href="../assets/css/demo.autoprefixed.css">
+ <link rel="stylesheet" href="../assets/css/effeckt.autoprefixed.css">
+ <link rel="stylesheet" href="../assets/css/topcoat-mobile-dark.autoprefixed.css">
+ <link rel="stylesheet" href="../../button-041/styles.css">
+
+ <!-- Vendor Libs -->
+ <script src="../assets/js/jquery.min.js"></script>
+ <script src="../assets/js/modernizr.js"></script>
+ </head>
+ <body>
+ <div class="page-wrap no-transitions" id="page-wrap">
+ <div class="effeckt effeckt-demo-buttons group">
+ <header>
+ <h2>Example 4: Topcoat Buttons + Effeckt.css
+ <a href="buttons.html">#</a>
+ </h2>
+ <span class="source">
+ Source:
+ <a href="http://lab.hakim.se/effeckt/">Hakim El Hattab</a>
+ </span>
+ </header>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-right topcoat-button">
+ <span class="label">Expand Right</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-left topcoat-button">
+ <span class="label">Expand Left</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-up topcoat-button">
+ <span class="label">Expand Up</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button expand-down topcoat-button">
+ <span class="label">Expand Down</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-left topcoat-button">
+ <span class="label">Slide Left</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-right topcoat-button">
+ <span class="label">Slide Right</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-up topcoat-button">
+ <span class="label">Slide Up</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button slide-down topcoat-button">
+ <span class="label">Slide Down</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button zoom-out topcoat-button">
+ <span class="label">Zoom Out</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ <div class="button-demo-wrap">
+ <button class="effeckt-button zoom-in topcoat-button">
+ <span class="label">Zoom In</span>
+ <span class="spinner"></span>
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <!-- Demo -->
+ <script src="../assets/js/demo.js"></script>
+
+ <!-- Libs -->
+ <script src="../assets/js/modals.js"></script>
+ <script src="../assets/js/buttons.js"></script>
+ <script src="../assets/js/list-items.js"></script>
+ <script src="../assets/js/off-screen-nav.js"></script>
+ <script src="../assets/js/page-transitions.js"></script>
+ <script src="../assets/js/list-scroll.js"></script>
+ <script>
+ stroll.bind('.effeckt-demo-list-scroll ul');
+ </script>
+ </body>
+</html>
View
22 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.
View
22 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.
View
4 button-010/index.hbs
@@ -1,4 +1,6 @@
<div class="effeckt effeckt-demo-buttons group">
+
+ {{!-- demo metadata --}}
<header>
<h2>Example 1: Topcoat Buttons + Effeckt.css
<a href="buttons.html">#</a>
@@ -8,6 +10,8 @@
<a href="http://lab.hakim.se/effeckt/">Hakim El Hattab</a>
</span>
</header>
+
+ {{!-- buttons --}}
<div class="button-demo-wrap">
<button class="effeckt-button expand-right topcoat-button">
<span class="label">Expand Right</span>
View
4 button-011/index.hbs
@@ -1,5 +1,7 @@
<div class="effeckt effeckt-demo-buttons group">
+ {{!-- demo metadata --}}
+
<header>
<h2>Example 1: Topcoat Buttons + Effeckt.css
<a href="buttons.html">#</a>
@@ -10,6 +12,8 @@
</span>
</header>
+ {{!-- button component --}}
+
<div class="button-demo-wrap">
{{> button-expand-right }}
</div>
View
11 button-020/README.md
@@ -0,0 +1,11 @@
+# Buttons Example #2
+
+> Basic example, with component externalized.
+
+### index.hbs
+
+* `button` component is externalized to a `buttons.hbs`.
+* Demo page, `index.hbs`, lists out each button modifier as a separate "include".
+* [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.
View
21 button-020/index.hbs
@@ -1,13 +1,12 @@
----
-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/
----
+{{!-- demo metadata --}}
+<header>
+ <h2> Example 1: Topcoat Buttons + Effeckt.css <a href="buttons.html">#</a> </h2>
+ <span class="source">
+ Source: <a href="http://lab.hakim.se/effeckt/"> Hakim El Hattab </a>
+ </span>
+</header>
+
+{{!-- buttons --}}
<div class="button-demo-wrap">
{{> button button.expand-right }}
</div>
@@ -46,4 +45,4 @@ demo:
<div class="button-demo-wrap">
{{> button button.zoom-in }}
-</div>
+</div>
View
11 button-021/README.md
@@ -0,0 +1,11 @@
+# Buttons Example #2
+
+> Basic example, with component externalized.
+
+### index.hbs
+
+* `button` component is externalized to a `buttons.hbs`.
+* Demo page, `index.hbs`, lists out each button modifier as a separate "include".
+* [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.
View
5 button-021/button.hbs
@@ -1 +1,4 @@
-<button class="effeckt-button {{modifier}} topcoat-button"><span class="label">{{label}}</span> <span class="spinner"></span></button>
+<button class="effeckt-button {{modifier}} topcoat-button">
+ <span class="label">{{label}}</span>
+ <span class="spinner"></span>
+</button>
View
15 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/
---
-<header>
- <h2> Example 1: Topcoat Buttons + Effeckt.css <a href="buttons.html">#</a> </h2>
- <span class="source">
- Source: <a href="http://lab.hakim.se/effeckt/"> Hakim El Hattab </a>
- </span>
-</header>
-
+{{!-- buttons --}}
<div class="button-demo-wrap">
{{> button button.expand-right }}
</div>
View
5 button-030/button.hbs
@@ -1 +1,4 @@
-<button class="effeckt-button {{modifier}} topcoat-button"><span class="label">{{label}}</span> <span class="spinner"></span></button>
+<button class="effeckt-button {{modifier}} topcoat-button">
+ <span class="label">{{label}}</span>
+ <span class="spinner"></span>
+</button>
View
5 button-040/button.hbs
@@ -1 +1,4 @@
-<button class="effeckt-button {{modifier}} topcoat-button"><span class="label">{{label}}</span> <span class="spinner"></span></button>
+<button class="effeckt-button {{modifier}} topcoat-button">
+ <span class="label">{{label}}</span>
+ <span class="spinner"></span>
+</button>
View
3  button-040/styles.css
@@ -0,0 +1,3 @@
+body {
+ background: #ddd;
+}
View
4 button-041/button.hbs
@@ -0,0 +1,4 @@
+<button class="effeckt-button {{.}} topcoat-button">
+ <span class="label">{{titleize .}}</span>
+ <span class="spinner"></span>
+</button>
View
12 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"
+]
View
3  button-041/demo.css
@@ -0,0 +1,3 @@
+body {
+ background: #ddd;
+}
View
11 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/"
+ }
+ }
+}
View
8 button-041/index.hbs
@@ -0,0 +1,8 @@
+---
+layout: component.hbs
+---
+{{#each button}}
+ <div class="button-demo-wrap">
+ {{> button }}
+ </div>
+{{/each}}
View
1  button-100/button.hbs
@@ -0,0 +1 @@
+<button class="effeckt-button {{modifier}} topcoat-button"><span class="label">{{label}}</span> <span class="spinner"></span></button>
View
42 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"
+ }
+}
View
11 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/"
+ }
+ }
+}
View
101 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 %>"
+---
+
+<!-- button.expand-right -->
+
+{{#repeat number.expandright}}
+<div class="button-demo-wrap">
+ {{> button button.expand-right }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.expand-left -->
+
+{{#repeat number.expandleft}}
+<div class="button-demo-wrap">
+ {{> button button.expand-left }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.expand-up -->
+
+{{#repeat number.expandup}}
+<div class="button-demo-wrap">
+ {{> button button.expand-up }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.expand-down -->
+
+{{#repeat number.expanddown}}
+<div class="button-demo-wrap">
+ {{> button button.expand-down }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.slide-left -->
+
+{{#repeat number.slideleft}}
+<div class="button-demo-wrap">
+ {{> button button.slide-left }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.slide-right -->
+
+{{#repeat number.slideright}}
+<div class="button-demo-wrap">
+ {{> button button.slide-right }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.slide-up -->
+
+{{#repeat number.slideup}}
+<div class="button-demo-wrap">
+ {{> button button.slide-up }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.slide-down -->
+
+{{#repeat number.slidedown}}
+<div class="button-demo-wrap">
+ {{> button button.slide-down }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.zoom-out -->
+
+{{#repeat number.zoomout}}
+<div class="button-demo-wrap">
+ {{> button button.zoom-out }}
+</div>
+{{/repeat}}
+
+<hr> <!-- button.zoom-in -->
+
+{{#repeat number.zoomin}}
+<div class="button-demo-wrap">
+ {{> button button.zoom-in }}
+</div>
+{{/repeat}}
+
View
11 templates/includes/sidenav-one.hbs
@@ -0,0 +1,11 @@
+<span class="nav-section-title">
+ Getting Started
+</span>
+<ul class="nav nav-pills nav-stacked">
+ {{#each pages}}
+ {{#is data.section "getting started"}}
+ {{!> sidenav-link }}
+ <li{{#is ../../page.dest this.dest}} class="active"{{/is}}><a href="{{relative ../../page.dest this.dest}}" {{> click-tracker }}>{{data.title}}</a></li>
+ {{/is}}
+ {{/each}}
+</ul>
View
8 templates/includes/sidenav-two.hbs
@@ -0,0 +1,8 @@
+<span class="nav-section-title">
+ Getting Started
+</span>
+{{#li pages class="nav nav-pills nav-stacked"}}
+ {{#is data.section "getting started"}}
+ <a href="{{relative ../../page.dest this.dest}}" {{> click-tracker }}>{{data.title}}</a>
+ {{/is}}
+{{/li}}
View
3  templates/layouts/prettify.hbs
@@ -1,3 +0,0 @@
-{{#prettify indent="4"}}
- {{> body }}
-{{/prettify}}
Please sign in to comment.
Something went wrong with that request. Please try again.