├── .bowerrc ├── button-040 ├── styles.css ├── index.hbs ├── button.hbs ├── demo.json └── button.json ├── button-041 ├── demo.css ├── index.hbs ├── button.hbs ├── button.json └── demo.json ├── AUTHORS ├── _demo ├── assets │ ├── font │ │ ├── SourceSansPro-Light.otf │ │ ├── SourceSansPro-Regular.otf │ │ ├── SourceSansPro-Semibold.otf │ │ └── LICENSE.txt │ └── js │ │ ├── _template.js │ │ ├── buttons.js │ │ ├── demo.js │ │ ├── list-items.js │ │ ├── page-transitions.js │ │ ├── off-screen-nav.js │ │ └── modals.js ├── button-080 │ ├── button-01-zoom-in.html │ ├── button-01-slide-up.html │ ├── button-01-zoom-out.html │ ├── button-01-expand-up.html │ ├── button-01-slide-down.html │ ├── button-01-slide-left.html │ ├── button-01-expand-down.html │ ├── button-01-expand-left.html │ ├── button-01-expand-right.html │ └── button-01-slide-right.html ├── button-081 │ ├── button-02-zoom-in.html │ ├── button-02-slide-up.html │ ├── button-02-zoom-out.html │ ├── button-02-expand-up.html │ ├── button-02-slide-down.html │ ├── button-02-slide-left.html │ ├── button-02-expand-down.html │ ├── button-02-expand-left.html │ ├── button-02-expand-right.html │ └── button-02-slide-right.html ├── button-000 │ └── index.html ├── button-010 │ └── index.html ├── button-011 │ └── index.html ├── button-020 │ └── index.html ├── button-021 │ └── index.html ├── button-070 │ ├── button-7-1.html │ ├── button-7-2.html │ └── button-7-3.html ├── button-i18n │ ├── index-en.html │ ├── index-pt.html │ └── index-fr.html ├── button-040 │ └── index.html ├── button-041 │ └── index.html ├── button-050 │ └── index.html └── button-090 │ ├── button-zoomin.html │ └── button-slideup.html ├── button-050 ├── button.hbs ├── index.hbs ├── demo.json └── button.json ├── CHANGELOG ├── button-020 ├── button.hbs ├── README.md ├── button.json └── index.hbs ├── button-060 ├── button.hbs ├── demo.json ├── button.json └── index.hbs ├── button-070 ├── button.hbs ├── demo.json ├── button.json └── index.hbs ├── button-080 ├── button.hbs ├── demo.json ├── button.json └── index.hbs ├── button-090 ├── button.hbs ├── demo.json ├── button.json └── index.hbs ├── button-100 ├── button.hbs ├── demo.json ├── button.json └── index.hbs ├── button-021 ├── button.hbs ├── README.md ├── button.json └── index.hbs ├── button-030 ├── button.hbs ├── demo.json ├── button.json └── index.hbs ├── button-011 ├── includes │ ├── button-zoom-in.hbs │ ├── button-slide-up.hbs │ ├── button-zoom-out.hbs │ ├── button-expand-up.hbs │ ├── button-slide-down.hbs │ ├── button-slide-left.hbs │ ├── button-expand-down.hbs │ ├── button-expand-left.hbs │ ├── button-expand-right.hbs │ └── button-slide-right.hbs ├── index.hbs └── README.md ├── .travis.yml ├── .gitignore ├── .editorconfig ├── templates ├── includes │ ├── sidenav-two.hbs │ ├── sidenav-one.hbs │ ├── footer.hbs │ └── header.hbs ├── index.hbs ├── layouts │ ├── default.hbs │ └── component.hbs └── helpers │ ├── helper-repeat.js │ └── helper-prettify.js ├── button-i18n ├── i18n │ ├── en.json │ ├── pt.json │ └── fr.json ├── index-en.hbs ├── index-fr.hbs └── index-pt.hbs ├── button-000 ├── README.md └── index.html ├── button-010 ├── README.md └── index.hbs ├── package.json ├── LICENSE-MIT ├── README.md ├── Gruntfile.js └── data └── benchmarks.json /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "vendor" 3 | } -------------------------------------------------------------------------------- /button-040/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #ddd; 3 | } -------------------------------------------------------------------------------- /button-041/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #ddd; 3 | } -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | Jon Schlinkert (http://github.com/jonschlinkert) 2 | -------------------------------------------------------------------------------- /_demo/assets/font/SourceSansPro-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/assemble/buttons/master/_demo/assets/font/SourceSansPro-Light.otf -------------------------------------------------------------------------------- /_demo/assets/font/SourceSansPro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/assemble/buttons/master/_demo/assets/font/SourceSansPro-Regular.otf -------------------------------------------------------------------------------- /_demo/assets/font/SourceSansPro-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/assemble/buttons/master/_demo/assets/font/SourceSansPro-Semibold.otf -------------------------------------------------------------------------------- /button-050/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CHANGELOG: -------------------------------------------------------------------------------- 1 | v0.1.0: 2 | date: "2013-08-14" 3 | changes: 4 | - Generated from [Yeoman](http://yeoman.io) Generator for [Assemble](http://assemble.io) 5 | -------------------------------------------------------------------------------- /button-020/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-060/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-070/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-080/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-090/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-100/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-040/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | --- 4 | {{#each button}} 5 |
6 | {{> button }} 7 |
8 | {{/each}} -------------------------------------------------------------------------------- /button-041/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | --- 4 | {{#each button}} 5 |
6 | {{> button }} 7 |
8 | {{/each}} -------------------------------------------------------------------------------- /button-021/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-030/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-040/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-041/button.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-zoom-in.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-slide-up.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-zoom-out.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-expand-up.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-slide-down.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-slide-left.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-expand-down.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-expand-left.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-expand-right.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-011/includes/button-slide-right.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | os: 3 | - linux 4 | - osx 5 | language: node_js 6 | node_js: 7 | - node 8 | - '7' 9 | - '6' 10 | - '5' 11 | - '4' 12 | - '0.12' 13 | - '0.10' 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | 17 | tmp 18 | temp 19 | vendor 20 | *.sublime-* -------------------------------------------------------------------------------- /button-041/button.json: -------------------------------------------------------------------------------- 1 | [ 2 | "expand-right", 3 | "expand-left", 4 | "expand-up", 5 | "expand-down", 6 | "slide-left", 7 | "slide-right", 8 | "slide-up", 9 | "slide-down", 10 | "zoom-out", 11 | "zoom-in" 12 | ] -------------------------------------------------------------------------------- /button-050/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | --- 4 | {{#each button}} 5 |
6 |

{{titleize @key}} {{../demo.component}}

7 | {{> button .}} 8 |
9 | {{/each}} 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [Makefile] 14 | indent_style = tab 15 | -------------------------------------------------------------------------------- /button-030/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 3: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-040/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 4: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-041/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 4: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-050/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 5: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-060/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 6: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-070/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 7-3: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-080/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 8: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-090/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 8: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /button-100/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "title": "Example 8: Topcoat Buttons + Effeckt.css", 4 | "component": "buttons", 5 | "modifier": "effeckt-demo-buttons", 6 | "source": { 7 | "name": "Hakim El Hattab", 8 | "url": "http://lab.hakim.se/effeckt/" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /_demo/assets/js/_template.js: -------------------------------------------------------------------------------- 1 | var Effeckt = { 2 | 3 | init: function() { 4 | 5 | this.bindUIActions(); 6 | 7 | }, 8 | 9 | bindUIActions: function() { 10 | 11 | // event handlers 12 | 13 | }, 14 | 15 | specificAction: function() { 16 | 17 | } 18 | 19 | }; 20 | 21 | Effeckt.init(); 22 | -------------------------------------------------------------------------------- /templates/includes/sidenav-two.hbs: -------------------------------------------------------------------------------- 1 | 2 | Getting Started 3 | 4 | {{#li pages class="nav nav-pills nav-stacked"}} 5 | {{#is data.section "getting started"}} 6 | click-tracker }}>{{data.title}} 7 | {{/is}} 8 | {{/li}} -------------------------------------------------------------------------------- /templates/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buttons 3 | --- 4 | 5 | {{title}} 6 | 7 | -------------------------------------------------------------------------------- /templates/layouts/default.hbs: -------------------------------------------------------------------------------- 1 | {{#prettify}} 2 | 3 | 4 | 5 | {{> header }} 6 | 7 | 8 | 9 | {{!-- Content 10 | ================================================ --}} 11 |
12 | {{> body }} 13 |
14 | 15 | {{> footer }} 16 | 17 | 18 | {{/prettify}} -------------------------------------------------------------------------------- /button-i18n/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": "Source: ", 3 | "expand_right": "Expand Right", 4 | "expand_left": "Expand Left", 5 | "expand_up": "Expand Up", 6 | "expand_down": "Expand Down", 7 | "slide_left": "Slide Left", 8 | "slide_right": "Slide Right", 9 | "slide_up": "Slide Up", 10 | "slide_down": "Slide Down", 11 | "zoom_out": "Zoom Out", 12 | "zoom_in": "Zoom In" 13 | } -------------------------------------------------------------------------------- /templates/includes/sidenav-one.hbs: -------------------------------------------------------------------------------- 1 | 2 | Getting Started 3 | 4 | -------------------------------------------------------------------------------- /button-i18n/i18n/pt.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": "Fonte: ", 3 | "expand_right": "Expandir direito", 4 | "expand_left": "Expandir esquerda", 5 | "expand_up": "Expandir para cima", 6 | "expand_down": "Expandir para baixo", 7 | "slide_left": "Deslize para a esquerda", 8 | "slide_right": "Deslize para a direito", 9 | "slide_up": "Deslize para a cima", 10 | "slide_down": "Deslize para a baixo", 11 | "zoom_out": "Reduzir", 12 | "zoom_in": "Aumentar" 13 | } -------------------------------------------------------------------------------- /button-i18n/i18n/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": "Source : ", 3 | "expand_right": "Agrandir vers la Droite", 4 | "expand_left": "Agrandir vers la Gauche", 5 | "expand_up": "Agrandir vers le Haut", 6 | "expand_down": "Agrandir vers le Bas", 7 | "slide_left": "Glisser vers la Gauche", 8 | "slide_right": "Glisser vers la Droite", 9 | "slide_up": "Glisser vers le Haut", 10 | "slide_down": "Glisser vers le Bas", 11 | "zoom_out": "Zoom Avant", 12 | "zoom_in": "Zoom Arrière" 13 | } -------------------------------------------------------------------------------- /templates/layouts/component.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default.hbs 3 | --- 4 |
5 | 6 |
7 |

{{demo.title}} #

8 | {{#if demo.source}} 9 | 10 | Source: {{demo.source.name}} 11 | 12 | {{/if}} 13 |
14 | 15 | {{!-- Ye Olde Ckomponent' 16 | ================================== --}} 17 | {{> body }} 18 | 19 |
-------------------------------------------------------------------------------- /templates/includes/footer.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/helpers/helper-repeat.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Duplicate the content in the encapsulated block n times. 3 | * @param {Number} n [Number of times to duplicate content.] 4 | * @example 5 | * {{#repeat '10'}} 6 | * {{> button }} 7 | * {{/repeat}} 8 | */ 9 | module.exports.register = function(Handlebars, options) { 10 | Handlebars.registerHelper('repeat', function(n, context) { 11 | var times = ''; 12 | for (var i = 0; i < n; ++i) { 13 | times += context.fn(this); 14 | } 15 | return times; 16 | }); 17 | }; -------------------------------------------------------------------------------- /button-050/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right" 4 | }, 5 | "expand-left": { 6 | "label": "Expand Left" 7 | }, 8 | "expand-up": { 9 | "label": "Expand Up" 10 | }, 11 | "expand-down": { 12 | "label": "Expand Down" 13 | }, 14 | "slide-left": { 15 | "label": "Slide Left" 16 | }, 17 | "slide-right": { 18 | "label": "Slide Right" 19 | }, 20 | "slide-up": { 21 | "label": "Slide Up" 22 | }, 23 | "slide-down": { 24 | "label": "Slide Down" 25 | }, 26 | "zoom-out": { 27 | "label": "Zoom Out" 28 | }, 29 | "zoom-in": { 30 | "label": "Zoom in" 31 | } 32 | } -------------------------------------------------------------------------------- /button-020/README.md: -------------------------------------------------------------------------------- 1 | # Buttons Example #2 2 | 3 | > Basic example, with component externalized. 4 | 5 | ### index.hbs 6 | 7 | * `button` component is externalized to a `buttons.hbs`. 8 | * Demo page, `index.hbs`, lists out each button modifier as a separate "include". 9 | * [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. 10 | * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. 11 | * Extraneous information about the demo is also embedded in the HTML with the component examples. -------------------------------------------------------------------------------- /button-021/README.md: -------------------------------------------------------------------------------- 1 | # Buttons Example #2 2 | 3 | > Basic example, with component externalized. 4 | 5 | ### index.hbs 6 | 7 | * `button` component is externalized to a `buttons.hbs`. 8 | * Demo page, `index.hbs`, lists out each button modifier as a separate "include". 9 | * [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. 10 | * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. 11 | * Extraneous information about the demo is also embedded in the HTML with the component examples. -------------------------------------------------------------------------------- /templates/includes/header.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{#if title}}{{title}}{{else}}Button Examples{{/if}} 3 | 4 | 5 | 6 | 7 | {{#if styles}}{{/if}} 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /button-000/README.md: -------------------------------------------------------------------------------- 1 | # Buttons Example #001 2 | 3 | > Basic example, with component listed multiple times, wrapped with a layout. 4 | 5 | ## demo 6 | ### markup 7 | 8 | ### data 9 | 10 | ## component 11 | ### markup 12 | 13 | ### data 14 | 15 | 16 | 17 | ### index.hbs 18 | 19 | * All demo markup for the component is constrained to a single page. 20 | * [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. 21 | * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. 22 | * Extraneous information about the demo is also embedded in the HTML with the component examples. -------------------------------------------------------------------------------- /button-010/README.md: -------------------------------------------------------------------------------- 1 | # Buttons Example #010 2 | 3 | > Basic example, with component listed multiple times, wrapped with a layout. 4 | 5 | ## demo 6 | ### markup 7 | 8 | ### data 9 | 10 | ## component 11 | ### markup 12 | 13 | ### data 14 | 15 | 16 | 17 | ### index.hbs 18 | 19 | * All demo markup for the component is constrained to a single page. 20 | * [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. 21 | * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. 22 | * Extraneous information about the demo is also embedded in the HTML with the component examples. -------------------------------------------------------------------------------- /_demo/assets/js/buttons.js: -------------------------------------------------------------------------------- 1 | var Buttons = { 2 | 3 | init: function() { 4 | 5 | this.bindUIActions(); 6 | 7 | }, 8 | 9 | bindUIActions: function() { 10 | 11 | $('.effeckt-button').on( 'click', function(){ 12 | Buttons.showLoader(this); 13 | }); 14 | 15 | }, 16 | 17 | showLoader: function(el) { 18 | 19 | var button = $(el), 20 | resetTimeout; 21 | 22 | if(button.attr( 'data-loading' )){ 23 | 24 | button.removeAttr( 'data-loading' ); 25 | 26 | } else { 27 | 28 | button.attr( 'data-loading', true ); 29 | 30 | } 31 | 32 | clearTimeout( resetTimeout ); 33 | resetTimeout = setTimeout( function() { 34 | button.removeAttr( 'data-loading' ); 35 | }, 2000 ); 36 | 37 | } 38 | 39 | }; 40 | 41 | Buttons.init(); 42 | -------------------------------------------------------------------------------- /button-040/button.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | ] -------------------------------------------------------------------------------- /_demo/assets/js/demo.js: -------------------------------------------------------------------------------- 1 | var EffecktDemos = { 2 | 3 | init: function() { 4 | 5 | $(window).load(function() { 6 | $(".no-transitions").removeClass("no-transitions"); 7 | EffecktDemos.transitionEndEventName = EffecktDemos.transitionEndEventNames[Modernizr.prefixed('transition')]; 8 | EffecktDemos.animationEndEventName = EffecktDemos.animationEndEventNames[Modernizr.prefixed('animation')]; 9 | }); 10 | }, 11 | 12 | animationEndEventNames: { 13 | 'WebkitAnimation' : 'webkitAnimationEnd', 14 | 'OAnimation' : 'oAnimationEnd', 15 | 'msAnimation' : 'MSAnimationEnd', 16 | 'animation' : 'animationend' 17 | }, 18 | 19 | transitionEndEventNames: { 20 | 'WebkitTransition' : 'webkitTransitionEnd', 21 | 'OTransition' : 'oTransitionEnd', 22 | 'msTransition' : 'MSTransitionEnd', 23 | 'transition' : 'transitionend' 24 | }, 25 | 26 | } 27 | 28 | EffecktDemos.init(); 29 | -------------------------------------------------------------------------------- /button-020/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-021/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-030/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-060/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-070/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-080/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-090/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-100/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "expand-right": { 3 | "label": "Expand Right", 4 | "modifier": "expand-right" 5 | }, 6 | "expand-left": { 7 | "label": "Expand Left", 8 | "modifier": "expand-left" 9 | }, 10 | "expand-up": { 11 | "label": "Expand Up", 12 | "modifier": "expand-up" 13 | }, 14 | "expand-down": { 15 | "label": "Expand Down", 16 | "modifier": "expand-down" 17 | }, 18 | "slide-left": { 19 | "label": "Slide Left", 20 | "modifier": "slide-left" 21 | }, 22 | "slide-right": { 23 | "label": "Slide Right", 24 | "modifier": "slide-right" 25 | }, 26 | "slide-up": { 27 | "label": "Slide Up", 28 | "modifier": "slide-up" 29 | }, 30 | "slide-down": { 31 | "label": "Slide Down", 32 | "modifier": "slide-down" 33 | }, 34 | "zoom-out": { 35 | "label": "Zoom Out", 36 | "modifier": "zoom-out" 37 | }, 38 | "zoom-in": { 39 | "label": "Zoom in", 40 | "modifier": "zoom-in" 41 | } 42 | } -------------------------------------------------------------------------------- /button-030/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | --- 4 | {{#repeat '10'}} 5 |
6 | {{> button button.expand-right }} 7 |
8 | 9 |
10 | {{> button button.expand-left }} 11 |
12 | 13 |
14 | {{> button button.expand-up }} 15 |
16 | 17 |
18 | {{> button button.expand-down }} 19 |
20 | 21 |
22 | {{> button button.slide-left }} 23 |
24 | 25 |
26 | {{> button button.slide-right }} 27 |
28 | 29 |
30 | {{> button button.slide-up }} 31 |
32 | 33 |
34 | {{> button button.slide-down }} 35 |
36 | 37 |
38 | {{> button button.zoom-out }} 39 |
40 | 41 |
42 | {{> button button.zoom-in }} 43 |
44 | {{/repeat}} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "buttons", 3 | "description": "How many ways are there to build a button with Assemble? Many.", 4 | "version": "0.1.2", 5 | "homepage": "https://github.com/assemble/buttons", 6 | "author": { 7 | "name": "Jon Schlinkert", 8 | "url": "http://github.com/assemble/" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/assemble/buttons.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/assemble/buttons/issues" 16 | }, 17 | "engines": { 18 | "node": ">=0.10" 19 | }, 20 | "scripts": { 21 | "test": "grunt assemble" 22 | }, 23 | "devDependencies": { 24 | "assemble": "~0.4.4", 25 | "grunt": "~0.4.1", 26 | "grunt-contrib-clean": "~0.4.1", 27 | "lodash": "~1.3.1", 28 | "js-beautify": "~1.4.0" 29 | }, 30 | "licenses": [ 31 | { 32 | "type": "MIT", 33 | "url": "https://github.com/assemble/buttons/blob/master/LICENSE-MIT" 34 | } 35 | ], 36 | "keywords": [ 37 | "assemble", 38 | "upstage", 39 | "button", 40 | "buttons", 41 | "templates" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Jon Schlinkert 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /button-021/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | demo: 4 | title: "Example 2: Topcoat Buttons + Effeckt.css" 5 | component: buttons 6 | modifier: effeckt-demo-buttons 7 | source: 8 | name: Hakim El Hattab 9 | url: http://lab.hakim.se/effeckt/ 10 | --- 11 | {{!-- buttons --}} 12 |
13 | {{> button button.expand-right }} 14 |
15 | 16 |
17 | {{> button button.expand-left }} 18 |
19 | 20 |
21 | {{> button button.expand-up }} 22 |
23 | 24 |
25 | {{> button button.expand-down }} 26 |
27 | 28 |
29 | {{> button button.slide-left }} 30 |
31 | 32 |
33 | {{> button button.slide-right }} 34 |
35 | 36 |
37 | {{> button button.slide-up }} 38 |
39 | 40 |
41 | {{> button button.slide-down }} 42 |
43 | 44 |
45 | {{> button button.zoom-out }} 46 |
47 | 48 |
49 | {{> button button.zoom-in }} 50 |
51 | -------------------------------------------------------------------------------- /button-011/index.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | {{!-- demo metadata --}} 4 | 5 |
6 |

Example 1: Topcoat Buttons + Effeckt.css 7 | # 8 |

9 | 10 | Source: 11 | Hakim El Hattab 12 | 13 |
14 | 15 | {{!-- button component --}} 16 | 17 |
18 | {{> button-expand-right }} 19 |
20 |
21 | {{> button-expand-left }} 22 |
23 |
24 | {{> button-expand-up }} 25 |
26 |
27 | {{> button-expand-down }} 28 |
29 |
30 | {{> button-slide-right }} 31 |
32 |
33 | {{> button-slide-left }} 34 |
35 |
36 | {{> button-slide-up }} 37 |
38 |
39 | {{> button-slide-down }} 40 |
41 |
42 | {{> button-zoom-in }} 43 |
44 |
45 | {{> button-zoom-out }} 46 |
47 |
-------------------------------------------------------------------------------- /button-020/index.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | {{!-- demo metadata --}} 4 |
5 |

Example 2: Topcoat Buttons + Effeckt.css #

6 | 7 | Source: Hakim El Hattab 8 | 9 |
10 | 11 | {{!-- buttons --}} 12 |
13 | {{> button button.expand-right }} 14 |
15 | 16 |
17 | {{> button button.expand-left }} 18 |
19 | 20 |
21 | {{> button button.expand-up }} 22 |
23 | 24 |
25 | {{> button button.expand-down }} 26 |
27 | 28 |
29 | {{> button button.slide-left }} 30 |
31 | 32 |
33 | {{> button button.slide-right }} 34 |
35 | 36 |
37 | {{> button button.slide-up }} 38 |
39 | 40 |
41 | {{> button button.slide-down }} 42 |
43 | 44 |
45 | {{> button button.zoom-out }} 46 |
47 | 48 |
49 | {{> button button.zoom-in }} 50 |
51 | 52 |
53 | -------------------------------------------------------------------------------- /_demo/assets/js/list-items.js: -------------------------------------------------------------------------------- 1 | var ListItems = { 2 | 3 | init: function() { 4 | 5 | this.bindUIActions(); 6 | 7 | }, 8 | 9 | bindUIActions: function() { 10 | 11 | $(".effeckt-list-wrap button.add").on("click", function() { 12 | ListItems.addListItem(this); 13 | }); 14 | 15 | $(".effeckt-list-wrap button.remove").on("click", function() { 16 | ListItems.removeListItem(this); 17 | }); 18 | 19 | $("button.remove").hide(); 20 | }, 21 | 22 | addListItem: function(el) { 23 | 24 | var insertPoint = $(el).parent().find("li:nth-child(3)"); 25 | $(el).parent().find("button.remove").show(); 26 | 27 | $("
  • ", { 28 | 'text': "new item", 29 | 'class': "topcoat-list__item new-item" 30 | }).insertAfter(insertPoint); 31 | 32 | }, 33 | 34 | removeListItem: function(el) { 35 | 36 | var $parent = $(el).parent(); 37 | var type = $parent.find("ul").attr("data-type"); 38 | 39 | var elToRemove = $parent.find("li.new-item").last(); 40 | elToRemove.on(EffecktDemos.animationEndEventName + ' ' + EffecktDemos.transitionEndEventName , function () { 41 | elToRemove.remove(); 42 | }); 43 | 44 | elToRemove.toggleClass("remove-item new-item"); 45 | if (!$parent.find("li.new-item").length) { 46 | $parent.find("button.remove").hide(); 47 | } 48 | 49 | } 50 | 51 | }; 52 | 53 | ListItems.init(); 54 | -------------------------------------------------------------------------------- /_demo/assets/js/page-transitions.js: -------------------------------------------------------------------------------- 1 | //To Do: Add a better way to handle resetting transitions 2 | var EffecktPageTransitions = { 3 | 4 | mainPage: $('#page-wrap'), 5 | secondaryPage: $('#effeckt-page-transition'), 6 | isAnimating: false, 7 | 8 | init: function() { 9 | 10 | this.bindUIActions(); 11 | 12 | }, 13 | 14 | bindUIActions: function() { 15 | 16 | $('.page-transition-button').on('click',function(){ 17 | var transitionIn = $(this).data('transition-in'), 18 | transitionOut = $(this).data('transition-out'); 19 | EffecktPageTransitions.transitionPage( transitionIn, transitionOut ); 20 | }); 21 | 22 | $('.page-transition-reset-button').on('click',function(){ 23 | EffecktPageTransitions.resetTransition(); 24 | }); 25 | 26 | }, 27 | 28 | transitionPage: function(transitionIn,transitionOut) { 29 | 30 | if(EffecktPageTransitions.isAnimating){ 31 | return false; 32 | } 33 | EffecktPageTransitions.isAnimating = true; 34 | 35 | EffecktPageTransitions.mainPage.addClass(transitionOut); 36 | EffecktPageTransitions.secondaryPage.addClass(transitionIn + ' effeckt-page-transition-animating'); 37 | 38 | }, 39 | resetTransition: function() { 40 | EffecktPageTransitions.isAnimating = false; 41 | EffecktPageTransitions.mainPage.removeClass().addClass('page-wrap'); 42 | EffecktPageTransitions.secondaryPage.removeClass().addClass('effeckt-page-transition'); 43 | } 44 | 45 | }; 46 | 47 | EffecktPageTransitions.init(); 48 | -------------------------------------------------------------------------------- /_demo/assets/js/off-screen-nav.js: -------------------------------------------------------------------------------- 1 | var EffecktOffScreenNav = { 2 | 3 | nav: $("#effeckt-off-screen-nav"), 4 | closeButton: $("#effeckt-off-screen-nav-close"), 5 | 6 | init: function() { 7 | 8 | this.bindUIActions(); 9 | 10 | }, 11 | 12 | bindUIActions: function() { 13 | 14 | $(".off-screen-nav-button, #effeckt-off-screen-nav-close").on("click", function() { 15 | var type = $(this).data("effeckt"); 16 | var threedee = $(this).data("threedee"); 17 | EffecktOffScreenNav.toggleNav(type, threedee); 18 | }); 19 | 20 | }, 21 | 22 | toggleNav: function(type, threedee) { 23 | 24 | // Show 25 | if (!EffecktOffScreenNav.nav.hasClass("effeckt-off-screen-nav-show")) { 26 | 27 | EffecktOffScreenNav.nav.addClass(type); 28 | EffecktOffScreenNav.closeButton.data("effeckt", type); 29 | 30 | if (threedee) { 31 | $("html").addClass("md-perspective"); 32 | } 33 | 34 | setTimeout(function() { 35 | EffecktOffScreenNav.nav.addClass("effeckt-off-screen-nav-show"); 36 | }, 500); 37 | 38 | // Hide 39 | } else { 40 | 41 | EffecktOffScreenNav.nav.removeClass("effeckt-off-screen-nav-show"); 42 | 43 | setTimeout(function() { 44 | 45 | EffecktOffScreenNav.nav.removeClass(EffecktOffScreenNav.closeButton.data("effeckt")); 46 | 47 | // WEIRD BUG 48 | // Have to trigger redraw or it sometimes leaves 49 | // behind a black box (Chrome 27.0.1453.116) 50 | EffecktOffScreenNav.nav.hide(); 51 | var blah = EffecktOffScreenNav.nav.width(); 52 | EffecktOffScreenNav.nav.show(); 53 | 54 | $("html").removeClass("md-perspective"); 55 | 56 | }, 500); 57 | 58 | } 59 | 60 | } 61 | 62 | }; 63 | 64 | EffecktOffScreenNav.init(); 65 | -------------------------------------------------------------------------------- /button-011/README.md: -------------------------------------------------------------------------------- 1 | # Buttons Example #011 2 | 3 | > Each button style has its own include dedicated include. 4 | 5 | In the scope of this example: 6 | * Our markup stays relatively simple and consistent across button modifiers 7 | * We use `` tags for all modifiers, no `` tags or `` tags 8 | * CSS modifier classes and button text are the only points of change across button variants. 9 | 10 | ## demo 11 | ### markup 12 | * Our demo markup is included in the same template as our button components. 13 | * All demo markup for the component is constrained to a single page. 14 | * [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. 15 | 16 | As important as the demo information is, having extraneous information about the demo embedded in the same template as our actual component might be distracting during development. Really, the primary focus should be our buttons. We should look for a way to externalize info about the demo. 17 | 18 | ### data 19 | _NA_ 20 | 21 | ## component 22 | ### markup 23 | * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. 24 | * A total of 10 button includes were created, one for each modifier. 25 | 26 | There is little advantage in repeating the same markup over and over again, we should try to look for ways to consolidate these partials into a single file. Considering this is just a button, 10 partials is a lot of "shelf space" to take up in a project. Since buttons will probably be amongst the simplest of components in your projects imagine how much this might compound with a more complicated and varied components. 27 | 28 | ### data 29 | _NA_ 30 | 31 | 32 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-zoom-in.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-zoom-in.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-slide-up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-zoom-out.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-slide-up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-zoom-out.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-expand-up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-slide-down.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-slide-left.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-expand-up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-slide-down.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-slide-left.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-expand-down.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-expand-left.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-expand-right.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-080/button-01-slide-right.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-expand-down.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-expand-left.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-expand-right.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_demo/button-081/button-02-slide-right.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /templates/helpers/helper-prettify.js: -------------------------------------------------------------------------------- 1 | /** 2 | * {{prettify}} by Jon Schlinkert 3 | * http://github.com/jonschlinkert 4 | * Copyright (c) 2013 Jon Schlinkert 5 | * MIT License 6 | */ 7 | 8 | var _ = require('lodash'); 9 | 10 | module.exports.register = function(Handlebars, options) { 11 | var prettify = require('js-beautify').html; 12 | var assembleOptions = options; 13 | 14 | /** 15 | * Prettify HTML output 16 | * @example: 17 | * {{#prettify indent="2"}} 18 | * {{> body }} 19 | * {{/prettify}} 20 | */ 21 | Handlebars.registerHelper('prettify', function (options) { 22 | var hash = _.extend({}, assembleOptions.prettify, options.hash); 23 | var content = prettifyHTML(options.fn(this), hash); 24 | 25 | // Reduce multiple newlines to a single newline 26 | if(assembleOptions.prettify.condense === true) { 27 | content = content.replace(/(\n|\r){2,}/g, '\n'); 28 | } 29 | // Add a single newline above code comments. 30 | if(assembleOptions.prettify.newlines === true) { 31 | content = content.replace(/(\s* 23 | 24 | {{#repeat number.expandright}} 25 |
    26 | {{> button button.expand-right }} 27 |
    28 | {{/repeat}} 29 | 30 |
    31 | 32 | {{#repeat number.expandleft}} 33 |
    34 | {{> button button.expand-left }} 35 |
    36 | {{/repeat}} 37 | 38 |
    39 | 40 | {{#repeat number.expandup}} 41 |
    42 | {{> button button.expand-up }} 43 |
    44 | {{/repeat}} 45 | 46 |
    47 | 48 | {{#repeat number.expanddown}} 49 |
    50 | {{> button button.expand-down }} 51 |
    52 | {{/repeat}} 53 | 54 |
    55 | 56 | {{#repeat number.slideleft}} 57 |
    58 | {{> button button.slide-left }} 59 |
    60 | {{/repeat}} 61 | 62 |
    63 | 64 | {{#repeat number.slideright}} 65 |
    66 | {{> button button.slide-right }} 67 |
    68 | {{/repeat}} 69 | 70 |
    71 | 72 | {{#repeat number.slideup}} 73 |
    74 | {{> button button.slide-up }} 75 |
    76 | {{/repeat}} 77 | 78 |
    79 | 80 | {{#repeat number.slidedown}} 81 |
    82 | {{> button button.slide-down }} 83 |
    84 | {{/repeat}} 85 | 86 |
    87 | 88 | {{#repeat number.zoomout}} 89 |
    90 | {{> button button.zoom-out }} 91 |
    92 | {{/repeat}} 93 | 94 |
    95 | 96 | {{#repeat number.zoomin}} 97 |
    98 | {{> button button.zoom-in }} 99 |
    100 | {{/repeat}} 101 | 102 | -------------------------------------------------------------------------------- /button-070/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | 4 | # Example of using underscore templates 5 | # to externalize the config for the helpers. 6 | # The valuse are set in the Gruntfile, and 7 | # then passed into the context of the repeat 8 | # helper in the page. 9 | number: 10 | expandright: "<%= repeat.expandright %>" 11 | expandleft : "<%= repeat.expandleft %>" 12 | expandup : "<%= repeat.expandup %>" 13 | expanddown : "<%= repeat.expanddown %>" 14 | slideleft : "<%= repeat.slideleft %>" 15 | slideright : "<%= repeat.slideright %>" 16 | slideup : "<%= repeat.slideup %>" 17 | slidedown : "<%= repeat.slidedown %>" 18 | zoomout : "<%= repeat.zoomout %>" 19 | zoomin : "<%= repeat.zoomin %>" 20 | --- 21 | 22 | 23 | 24 | {{#repeat number.expandright}} 25 |
    26 | {{> button button.expand-right }} 27 |
    28 | {{/repeat}} 29 | 30 |
    31 | 32 | {{#repeat number.expandleft}} 33 |
    34 | {{> button button.expand-left }} 35 |
    36 | {{/repeat}} 37 | 38 |
    39 | 40 | {{#repeat number.expandup}} 41 |
    42 | {{> button button.expand-up }} 43 |
    44 | {{/repeat}} 45 | 46 |
    47 | 48 | {{#repeat number.expanddown}} 49 |
    50 | {{> button button.expand-down }} 51 |
    52 | {{/repeat}} 53 | 54 |
    55 | 56 | {{#repeat number.slideleft}} 57 |
    58 | {{> button button.slide-left }} 59 |
    60 | {{/repeat}} 61 | 62 |
    63 | 64 | {{#repeat number.slideright}} 65 |
    66 | {{> button button.slide-right }} 67 |
    68 | {{/repeat}} 69 | 70 |
    71 | 72 | {{#repeat number.slideup}} 73 |
    74 | {{> button button.slide-up }} 75 |
    76 | {{/repeat}} 77 | 78 |
    79 | 80 | {{#repeat number.slidedown}} 81 |
    82 | {{> button button.slide-down }} 83 |
    84 | {{/repeat}} 85 | 86 |
    87 | 88 | {{#repeat number.zoomout}} 89 |
    90 | {{> button button.zoom-out }} 91 |
    92 | {{/repeat}} 93 | 94 |
    95 | 96 | {{#repeat number.zoomin}} 97 |
    98 | {{> button button.zoom-in }} 99 |
    100 | {{/repeat}} 101 | 102 | -------------------------------------------------------------------------------- /button-080/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | 4 | # Example of using underscore templates 5 | # to externalize the config for the helpers. 6 | # The valuse are set in the Gruntfile, and 7 | # then passed into the context of the repeat 8 | # helper in the page. 9 | number: 10 | expandright: "<%= repeat.expandright %>" 11 | expandleft : "<%= repeat.expandleft %>" 12 | expandup : "<%= repeat.expandup %>" 13 | expanddown : "<%= repeat.expanddown %>" 14 | slideleft : "<%= repeat.slideleft %>" 15 | slideright : "<%= repeat.slideright %>" 16 | slideup : "<%= repeat.slideup %>" 17 | slidedown : "<%= repeat.slidedown %>" 18 | zoomout : "<%= repeat.zoomout %>" 19 | zoomin : "<%= repeat.zoomin %>" 20 | --- 21 | 22 | 23 | 24 | {{#repeat number.expandright}} 25 |
    26 | {{> button button.expand-right }} 27 |
    28 | {{/repeat}} 29 | 30 |
    31 | 32 | {{#repeat number.expandleft}} 33 |
    34 | {{> button button.expand-left }} 35 |
    36 | {{/repeat}} 37 | 38 |
    39 | 40 | {{#repeat number.expandup}} 41 |
    42 | {{> button button.expand-up }} 43 |
    44 | {{/repeat}} 45 | 46 |
    47 | 48 | {{#repeat number.expanddown}} 49 |
    50 | {{> button button.expand-down }} 51 |
    52 | {{/repeat}} 53 | 54 |
    55 | 56 | {{#repeat number.slideleft}} 57 |
    58 | {{> button button.slide-left }} 59 |
    60 | {{/repeat}} 61 | 62 |
    63 | 64 | {{#repeat number.slideright}} 65 |
    66 | {{> button button.slide-right }} 67 |
    68 | {{/repeat}} 69 | 70 |
    71 | 72 | {{#repeat number.slideup}} 73 |
    74 | {{> button button.slide-up }} 75 |
    76 | {{/repeat}} 77 | 78 |
    79 | 80 | {{#repeat number.slidedown}} 81 |
    82 | {{> button button.slide-down }} 83 |
    84 | {{/repeat}} 85 | 86 |
    87 | 88 | {{#repeat number.zoomout}} 89 |
    90 | {{> button button.zoom-out }} 91 |
    92 | {{/repeat}} 93 | 94 |
    95 | 96 | {{#repeat number.zoomin}} 97 |
    98 | {{> button button.zoom-in }} 99 |
    100 | {{/repeat}} 101 | 102 | -------------------------------------------------------------------------------- /button-090/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | 4 | # Example of using underscore templates 5 | # to externalize the config for the helpers. 6 | # The valuse are set in the Gruntfile, and 7 | # then passed into the context of the repeat 8 | # helper in the page. 9 | number: 10 | expandright: "<%= repeat.expandright %>" 11 | expandleft : "<%= repeat.expandleft %>" 12 | expandup : "<%= repeat.expandup %>" 13 | expanddown : "<%= repeat.expanddown %>" 14 | slideleft : "<%= repeat.slideleft %>" 15 | slideright : "<%= repeat.slideright %>" 16 | slideup : "<%= repeat.slideup %>" 17 | slidedown : "<%= repeat.slidedown %>" 18 | zoomout : "<%= repeat.zoomout %>" 19 | zoomin : "<%= repeat.zoomin %>" 20 | --- 21 | 22 | 23 | 24 | {{#repeat number.expandright}} 25 |
    26 | {{> button button.expand-right }} 27 |
    28 | {{/repeat}} 29 | 30 |
    31 | 32 | {{#repeat number.expandleft}} 33 |
    34 | {{> button button.expand-left }} 35 |
    36 | {{/repeat}} 37 | 38 |
    39 | 40 | {{#repeat number.expandup}} 41 |
    42 | {{> button button.expand-up }} 43 |
    44 | {{/repeat}} 45 | 46 |
    47 | 48 | {{#repeat number.expanddown}} 49 |
    50 | {{> button button.expand-down }} 51 |
    52 | {{/repeat}} 53 | 54 |
    55 | 56 | {{#repeat number.slideleft}} 57 |
    58 | {{> button button.slide-left }} 59 |
    60 | {{/repeat}} 61 | 62 |
    63 | 64 | {{#repeat number.slideright}} 65 |
    66 | {{> button button.slide-right }} 67 |
    68 | {{/repeat}} 69 | 70 |
    71 | 72 | {{#repeat number.slideup}} 73 |
    74 | {{> button button.slide-up }} 75 |
    76 | {{/repeat}} 77 | 78 |
    79 | 80 | {{#repeat number.slidedown}} 81 |
    82 | {{> button button.slide-down }} 83 |
    84 | {{/repeat}} 85 | 86 |
    87 | 88 | {{#repeat number.zoomout}} 89 |
    90 | {{> button button.zoom-out }} 91 |
    92 | {{/repeat}} 93 | 94 |
    95 | 96 | {{#repeat number.zoomin}} 97 |
    98 | {{> button button.zoom-in }} 99 |
    100 | {{/repeat}} 101 | 102 | -------------------------------------------------------------------------------- /button-100/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component.hbs 3 | 4 | # Example of using underscore templates 5 | # to externalize the config for the helpers. 6 | # The valuse are set in the Gruntfile, and 7 | # then passed into the context of the repeat 8 | # helper in the page. 9 | number: 10 | expandright: "<%= repeat.expandright %>" 11 | expandleft : "<%= repeat.expandleft %>" 12 | expandup : "<%= repeat.expandup %>" 13 | expanddown : "<%= repeat.expanddown %>" 14 | slideleft : "<%= repeat.slideleft %>" 15 | slideright : "<%= repeat.slideright %>" 16 | slideup : "<%= repeat.slideup %>" 17 | slidedown : "<%= repeat.slidedown %>" 18 | zoomout : "<%= repeat.zoomout %>" 19 | zoomin : "<%= repeat.zoomin %>" 20 | --- 21 | 22 | 23 | 24 | {{#repeat number.expandright}} 25 |
    26 | {{> button button.expand-right }} 27 |
    28 | {{/repeat}} 29 | 30 |
    31 | 32 | {{#repeat number.expandleft}} 33 |
    34 | {{> button button.expand-left }} 35 |
    36 | {{/repeat}} 37 | 38 |
    39 | 40 | {{#repeat number.expandup}} 41 |
    42 | {{> button button.expand-up }} 43 |
    44 | {{/repeat}} 45 | 46 |
    47 | 48 | {{#repeat number.expanddown}} 49 |
    50 | {{> button button.expand-down }} 51 |
    52 | {{/repeat}} 53 | 54 |
    55 | 56 | {{#repeat number.slideleft}} 57 |
    58 | {{> button button.slide-left }} 59 |
    60 | {{/repeat}} 61 | 62 |
    63 | 64 | {{#repeat number.slideright}} 65 |
    66 | {{> button button.slide-right }} 67 |
    68 | {{/repeat}} 69 | 70 |
    71 | 72 | {{#repeat number.slideup}} 73 |
    74 | {{> button button.slide-up }} 75 |
    76 | {{/repeat}} 77 | 78 |
    79 | 80 | {{#repeat number.slidedown}} 81 |
    82 | {{> button button.slide-down }} 83 |
    84 | {{/repeat}} 85 | 86 |
    87 | 88 | {{#repeat number.zoomout}} 89 |
    90 | {{> button button.zoom-out }} 91 |
    92 | {{/repeat}} 93 | 94 |
    95 | 96 | {{#repeat number.zoomin}} 97 |
    98 | {{> button button.zoom-in }} 99 |
    100 | {{/repeat}} 101 | 102 | -------------------------------------------------------------------------------- /button-i18n/index-en.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Example 18n: Topcoat Buttons + Effeckt.css + i18n" 3 | language: en 4 | --- 5 |
    6 | 7 | {{!-- demo metadata --}} 8 |
    9 |

    {{title}} 10 | # 11 |

    12 | 13 | {{#i18n "source"}}{{/i18n}} 14 | Hakim El Hattab 15 | 16 |
    17 | 18 | {{!-- buttons --}} 19 |
    20 | 24 |
    25 |
    26 | 30 |
    31 |
    32 | 36 |
    37 |
    38 | 42 |
    43 |
    44 | 48 |
    49 |
    50 | 54 |
    55 |
    56 | 60 |
    61 |
    62 | 66 |
    67 |
    68 | 72 |
    73 |
    74 | 78 |
    79 |
    -------------------------------------------------------------------------------- /button-i18n/index-fr.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Exemple 18n: Boutons Topcoat + Effeckt.css + i18n" 3 | language: fr 4 | --- 5 |
    6 | 7 | {{!-- demo metadata --}} 8 |
    9 |

    {{title}} 10 | # 11 |

    12 | 13 | {{#i18n "source"}}{{/i18n}} 14 | Hakim El Hattab 15 | 16 |
    17 | 18 | {{!-- buttons --}} 19 |
    20 | 24 |
    25 |
    26 | 30 |
    31 |
    32 | 36 |
    37 |
    38 | 42 |
    43 |
    44 | 48 |
    49 |
    50 | 54 |
    55 |
    56 | 60 |
    61 |
    62 | 66 |
    67 |
    68 | 72 |
    73 |
    74 | 78 |
    79 |
    -------------------------------------------------------------------------------- /button-i18n/index-pt.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Exemplo i18n: botões Topcoat + Effeckt.css + i18n" 3 | language: pt 4 | --- 5 |
    6 | 7 | {{!-- demo metadata --}} 8 |
    9 |

    {{title}} 10 | # 11 |

    12 | 13 | {{#i18n "source"}}{{/i18n}} 14 | Hakim El Hattab 15 | 16 |
    17 | 18 | {{!-- buttons --}} 19 |
    20 | 24 |
    25 |
    26 | 30 |
    31 |
    32 | 36 |
    37 |
    38 | 42 |
    43 |
    44 | 48 |
    49 |
    50 | 54 |
    55 |
    56 | 60 |
    61 |
    62 | 66 |
    67 |
    68 | 72 |
    73 |
    74 | 78 |
    79 |
    -------------------------------------------------------------------------------- /_demo/assets/js/modals.js: -------------------------------------------------------------------------------- 1 | /** 2 | * modalEffects.js v1.1.0 3 | * http://www.codrops.com 4 | * 5 | * Rewritten for effeckts project 6 | * 7 | * Licensed under the MIT license. 8 | * http://www.opensource.org/licenses/mit-license.php 9 | * 10 | * Copyright 2013, Codrops 11 | * http://www.codrops.com 12 | */ 13 | var Modals = { 14 | 15 | overlay: $('#effeckt-overlay'), 16 | modalWrap: $("#effeckt-modal-wrap"), 17 | modal: $("#effeckt-modal"), 18 | modalStyle: "", 19 | 20 | init: function() { 21 | 22 | this.bindUIActions(); 23 | 24 | }, 25 | 26 | bindUIActions: function() { 27 | 28 | $(".modal2-button").on("click", function() { 29 | Modals.openModal(this); 30 | }); 31 | 32 | $(".effeckt-modal-close").on("click", function() { 33 | Modals.closeModal(this); 34 | }); 35 | 36 | $(".effeckt-overlay").on("click", function() { 37 | Modals.closeModal(); 38 | }); 39 | 40 | $(window).on("keyup", function(e) { 41 | if ( e.keyCode === 27 ) Modals.closeModal(); 42 | }); 43 | 44 | }, 45 | 46 | openModal: function(el) { 47 | 48 | var button = $(el); 49 | 50 | Modals.modalWrap.show(); 51 | 52 | Modals.modalStyle = "md-effect-" + button.data("modal-type").replace(/[^0-9]/g, ''); 53 | 54 | Modals.modalWrap.addClass(Modals.modalStyle); 55 | if (button.data("needs-perspective")) { 56 | setTimeout(function () { 57 | $("html").addClass("md-perspective"); 58 | }, 50); 59 | } 60 | if (button.data("hide-class")) { 61 | Modals.modalWrap.data("hide-class",true); 62 | } 63 | Modals.modalWrap.data("hide-class", button.data("hide-class")); 64 | 65 | var evt = EffecktDemos.animationEndEventName + ' ' + EffecktDemos.transitionEndEventName; 66 | Modals.overlay.on(evt, function () { 67 | Modals.modalWrap.addClass("effeckt-show"); 68 | Modals.overlay.off(evt); 69 | }); 70 | 71 | Modals.showOverlay(); 72 | 73 | }, 74 | 75 | closeModal: function(el) { 76 | var evt = EffecktDemos.animationEndEventName + ' ' + EffecktDemos.transitionEndEventName; 77 | 78 | Modals.modalWrap.on(evt, function () { 79 | Modals.modalWrap.removeClass("effeckt-show effeckt-hide " + Modals.modalStyle); 80 | $("html").removeClass("md-perspective"); 81 | Modals.modalWrap.hide().off(evt); 82 | }); 83 | 84 | Modals.hideOverlay(); 85 | //Not the cleanest way 86 | Modals.modalWrap.removeClass("effeckt-show"); 87 | 88 | if( Modals.modalWrap.data("hide-class") ){ 89 | Modals.modalWrap.addClass("effeckt-hide"); 90 | } 91 | }, 92 | 93 | showOverlay: function() { 94 | Modals.overlay.addClass("effeckt-show"); 95 | }, 96 | 97 | hideOverlay: function() { 98 | Modals.overlay.removeClass("effeckt-show"); 99 | } 100 | 101 | }; 102 | 103 | Modals.init(); 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Buttons 2 | 3 | > How many ways are there to assemble a button? 4 | 5 | This project is an exercise in separation of concerns regarding structure, style, content and data. The primary goal is to clearly demonstrate how to construct UI components, from simple to advanced, using only buttons as the example. 6 | 7 | ## Conventions 8 | 9 | For the purposes of this project let's agree that: 10 | 11 | * **component** refers to a user interface abstraction, such as a navbar, modal dialog, or (as with the main attraction of this project) a button. 12 | * **style** refers to CSS, including pre-processors (here we use LESS, possibly SASS). 13 | * **structure** refers to HTML, including templates (here we use Handlebars templates). 14 | * **content** refers to any audial (sound), visual (video or images) or textual content that can be experienced directly by the user on a website or web application. 15 | * **data**, as distinguished from "content", refers to any data that is used for configuration and will not be directly experienced by the user. So while "Click Me!" would be considered the "content" of a button, any "modifier classes" of the button stored in JSON or YAML would be considered "data". To be pragmatic, sometimes "data" and "content" are clumped together, but we try to differentiate when it makes sense. 16 | 17 | 18 | ## Approach 19 | 20 | ### Separation of concerns 21 | 22 | As a rule of thumb, each example in the project demonstrates a different approach to separating concerns between content, structure and style, and in general each example will build upon the last in order to demonstrate: 23 | 24 | * increasing levels of complexity 25 | * progressively higher levels of abstraction 26 | * when applicable, different approaches or conventions for accomplishing the same goal, allowing you to decide what is or isn't "idiomatic" as it relates to your own projects 27 | 28 | Not all examples explicitly focus on "separation of concerns" as the sole purpose of the example. Some examples show how to leverage JavaScript helpers alongside advanced templates, some offer alternatives for maintaining metadata about a component, while others are simply intended to help non-programmers get started or to give experienced programmers ideas. 29 | 30 | ### Flow 31 | 32 | In general, the examples progress from "basic" to "advanced", beginning with [button-000](button-000), which should be more approachable for designers who have very little to no programming experience, eventually building up to more "complex" examples that might appeal to more experienced programmers. 33 | 34 | Also, since the project is expressly intended to be instructive, by necessity some of the examples _should not be idiomatic_. Furthermore, no judgement is made concerning how much abstraction is necessary, good, bad, idiomatic or otherwise. The driving assumption being that _it is equally instructive to see examples of code that is, say, more abstracted than it should be, as it is to see shining examples of perfection_. Especially when the user has the larger perspective of seeing multiple approaches for solving the same or similar problems. 35 | 36 | In other words, this project will give you examples but the opinions will be left to you. 37 | 38 | 39 | ## Contributing 40 | 41 | Would you like to add an example? Please do! Just fork the project and do pull request. I only ask that you attempt to number the example appropriately, according to the relative level of complexity of the example. 42 | 43 | Also, in lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](http://gruntjs.com/). 44 | 45 | 46 | ## Author 47 | 48 | **[Jon Schlinkert](https://github.com/jonschlinkert)** 49 | 50 | + [http://twitter.com/jonschlinkert](http://twitter.com/jonschlinkert) 51 | + [http://github.com/jonschlinkert](http://github.com/jonschlinkert) 52 | 53 | 54 | ## Release History 55 | 56 | * 2013-08-14   v0.1.0   Generated by the [Yeoman Generator](https://github.com/assemble/generator-assemble) for [Assemble](http://assemble.io). First commit. 57 | 58 | 59 | ## License 60 | Copyright (c) 2013 Jon Schlinkert, and the authors of examples utilized herein. 61 | 62 | Licensed under the [MIT license](LICENSE-MIT). 63 | 64 | -------------------------------------------------------------------------------- /button-000/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 1: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-000/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 1: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-010/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 1: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-011/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 1: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-020/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 2: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-021/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 2: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-070/button-7-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 7-1: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-i18n/index-en.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 18n: Topcoat Buttons + Effeckt.css + i18n 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 18n: Topcoat Buttons + Effeckt.css + i18n 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-040/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
    18 |
    19 |
    20 |

    Example 4: Topcoat Buttons + Effeckt.css 21 | # 22 |

    23 | 24 | Source: 25 | Hakim El Hattab 26 | 27 |
    28 |
    29 | 33 |
    34 |
    35 | 39 |
    40 |
    41 | 45 |
    46 |
    47 | 51 |
    52 |
    53 | 57 |
    58 |
    59 | 63 |
    64 |
    65 | 69 |
    70 |
    71 | 75 |
    76 |
    77 | 81 |
    82 |
    83 | 87 |
    88 |
    89 |
    90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /_demo/button-041/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
    18 |
    19 |
    20 |

    Example 4: Topcoat Buttons + Effeckt.css 21 | # 22 |

    23 | 24 | Source: 25 | Hakim El Hattab 26 | 27 |
    28 |
    29 | 33 |
    34 |
    35 | 39 |
    40 |
    41 | 45 |
    46 |
    47 | 51 |
    52 |
    53 | 57 |
    58 |
    59 | 63 |
    64 |
    65 | 69 |
    70 |
    71 | 75 |
    76 |
    77 | 81 |
    82 |
    83 | 87 |
    88 |
    89 |
    90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /_demo/button-i18n/index-pt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exemplo i18n: botões Topcoat + Effeckt.css + i18n 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Exemplo i18n: botões Topcoat + Effeckt.css + i18n 20 | # 21 |

    22 | 23 | Fonte: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-i18n/index-fr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exemple 18n: Boutons Topcoat + Effeckt.css + i18n 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Exemple 18n: Boutons Topcoat + Effeckt.css + i18n 20 | # 21 |

    22 | 23 | Source : 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /_demo/button-050/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 5: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 |

    Expand Right buttons

    29 | 33 |
    34 |
    35 |

    Expand Left buttons

    36 | 40 |
    41 |
    42 |

    Expand Up buttons

    43 | 47 |
    48 |
    49 |

    Expand Down buttons

    50 | 54 |
    55 |
    56 |

    Slide Left buttons

    57 | 61 |
    62 |
    63 |

    Slide Right buttons

    64 | 68 |
    69 |
    70 |

    Slide Up buttons

    71 | 75 |
    76 |
    77 |

    Slide Down buttons

    78 | 82 |
    83 |
    84 |

    Zoom Out buttons

    85 | 89 |
    90 |
    91 |

    Zoom In buttons

    92 | 96 |
    97 |
    98 |
    99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /_demo/assets/font/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | 5 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * button-component 3 | * https://github.com/upstage/button-component 4 | * Copyright (c) 2013 Jon Schlinkert 5 | * Licensed under the MIT license. 6 | */ 7 | 8 | 'use strict'; 9 | 10 | module.exports = function(grunt) { 11 | 12 | 13 | // Project configuration. 14 | grunt.initConfig({ 15 | benchmarks: grunt.file.readJSON('data/benchmarks.json'), 16 | 17 | // Values for repeat helper, see example #5. 18 | repeat: { 19 | expandright: 50, 20 | expandleft: 70, 21 | expandup: 80, 22 | expanddown: 50, 23 | slideleft: 25, 24 | slideright: 50, 25 | slideup: 25, 26 | slidedown: 200, 27 | zoomout: 100, 28 | zoomin: 25 29 | }, 30 | 31 | assemble: { 32 | options: { 33 | flatten: true, 34 | prettify: { 35 | indent: 2, 36 | condense: true, 37 | newlines: true 38 | }, 39 | assets: '_demo/assets', 40 | helpers: 'templates/helpers/*.js', 41 | partials: 'templates/includes/*.hbs', 42 | layoutdir: 'templates/layouts', 43 | layout: 'default.hbs', 44 | }, 45 | button000: { 46 | files: {'_demo/button-000/': ['button-000/index.html']}, 47 | options: {layout: 'none'}, // override task-level layout 48 | }, 49 | button010: { 50 | files: {'_demo/button-010/': ['button-010/index.hbs']} 51 | }, 52 | button011: { 53 | files: {'_demo/button-011/': ['button-011/index.hbs']}, 54 | options: {partials: 'button-011/includes/*.hbs'} 55 | }, 56 | button020: { 57 | files: {'_demo/button-020/': ['button-020/index.hbs']}, 58 | options: { 59 | partials: 'button-020/button.hbs', 60 | data: 'button-020/*.json' 61 | } 62 | }, 63 | button021: { 64 | files: {'_demo/button-021/': ['button-021/index.hbs']}, 65 | options: { 66 | partials: 'button-021/button.hbs', 67 | data: 'button-021/*.json' 68 | } 69 | }, 70 | button030: { 71 | files: {'_demo/button-030/': ['button-030/index.hbs']}, 72 | options: { 73 | partials: 'button-030/button.hbs', 74 | data: 'button-030/*.json' 75 | } 76 | }, 77 | button040: { 78 | files: {'_demo/button-040/': ['button-040/index.hbs']}, 79 | options: { 80 | partials: 'button-040/button.hbs', 81 | data: 'button-040/*.json', 82 | styles: 'button-040/styles.css' 83 | } 84 | }, 85 | button041: { 86 | files: {'_demo/button-041/': ['button-041/index.hbs']}, 87 | options: { 88 | partials: 'button-041/button.hbs', 89 | data: 'button-041/*.json', 90 | styles: 'button-041/styles.css' 91 | } 92 | }, 93 | button050: { 94 | files: {'_demo/button-050/': ['button-050/index.hbs']}, 95 | options: { 96 | partials: 'button-050/button.hbs', 97 | data: 'button-050/*.json' 98 | } 99 | }, 100 | button060: { 101 | files: {'_demo/button-060/': ['button-060/index.hbs']}, 102 | options: { 103 | partials: 'button-060/button.hbs', 104 | data: 'button-060/*.json' 105 | } 106 | }, 107 | // Pages collection, array format. 108 | button070: { 109 | files: {'_demo/button-070/': ['button-070/index.hbs']}, 110 | options: { 111 | layout: 'component.hbs', 112 | pages: '<%= benchmarks.pages.one %>', 113 | partials: 'button-070/button.hbs', 114 | data: ['button-070/button.json', 'benchmarks.json'], 115 | } 116 | }, 117 | // Pages collection, array format. 118 | button080: { 119 | files: {'_demo/button-080/': ['button-080/index.hbs']}, 120 | options: { 121 | layout: 'component.hbs', 122 | pages: '<%= benchmarks.pages.two %>', 123 | partials: 'button-080/button.hbs', 124 | data: 'button-080/*.json', 125 | } 126 | }, 127 | // Pages collection, object format. 128 | button081: { 129 | files: {'_demo/button-081/': ['button-080/index.hbs']}, 130 | options: { 131 | layout: 'component.hbs', 132 | pages: '<%= benchmarks.pages.three %>', 133 | partials: 'button-080/button.hbs', 134 | data: 'button-080/*.json', 135 | } 136 | }, 137 | button090: { 138 | files: {'_demo/button-090/': ['button-090/index.hbs']}, 139 | options: { 140 | layout: 'component.hbs', 141 | pages: '<%= benchmarks.pages.four %>', 142 | partials: 'button-090/button.hbs', 143 | data: 'button-090/*.json', 144 | } 145 | }, 146 | buttoni18n: { 147 | files: {'_demo/button-i18n/': ['button-i18n/index-*.hbs']}, 148 | options: { 149 | data: 'button-i18n/**/*.json' 150 | } 151 | }, 152 | }, 153 | // Before creating new files, remove files from previous build. 154 | clean: ['_demo/**/*.html'] 155 | 156 | }); 157 | 158 | // Load npm plugins to provide necessary tasks. 159 | grunt.loadNpmTasks('assemble'); 160 | grunt.loadNpmTasks('grunt-contrib-clean'); 161 | 162 | // Default task to be run. 163 | grunt.registerTask('default', ['clean', 'assemble']); 164 | 165 | }; 166 | -------------------------------------------------------------------------------- /_demo/button-070/button-7-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 7-2: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 | 92 |
    93 |
    94 | 98 |
    99 |
    100 | 104 |
    105 |
    106 | 110 |
    111 |
    112 | 116 |
    117 |
    118 |
    119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /_demo/button-070/button-7-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 7-3: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 | 92 |
    93 |
    94 | 98 |
    99 |
    100 | 104 |
    105 |
    106 | 110 |
    111 |
    112 | 116 |
    117 |
    118 |
    119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /data/benchmarks.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": { 3 | "one": [ 4 | { 5 | "filename": "button-7-1.html", 6 | "data": { 7 | "demo": { 8 | "title": "Example 7-1: Topcoat Buttons + Effeckt.css", 9 | "component": "buttons", 10 | "modifier": "effeckt-demo-buttons", 11 | "source": { 12 | "name": "Hakim El Hattab", 13 | "url": "http://lab.hakim.se/effeckt/" 14 | } 15 | } 16 | }, 17 | "content": "\n{{#each button}}
    {{> button }}
    {{/each}}" 18 | }, 19 | { 20 | "filename": "button-7-2.html", 21 | "data": { 22 | "demo": { 23 | "title": "Example 7-2: Topcoat Buttons + Effeckt.css", 24 | "component": "buttons", 25 | "modifier": "effeckt-demo-buttons", 26 | "source": { 27 | "name": "Hakim El Hattab", 28 | "url": "http://lab.hakim.se/effeckt/" 29 | } 30 | } 31 | }, 32 | "content": "\n{{#repeat 15}}
    {{> button button.expand-right }}
    {{/repeat}}" 33 | }, 34 | { 35 | "filename": "button-7-3.html", 36 | "data": { 37 | "demo": { 38 | "title": "Example 7-3: Topcoat Buttons + Effeckt.css", 39 | "component": "buttons", 40 | "modifier": "effeckt-demo-buttons", 41 | "source": { 42 | "name": "Hakim El Hattab", 43 | "url": "http://lab.hakim.se/effeckt/" 44 | } 45 | } 46 | }, 47 | "content": "\n{{#repeat 15}}
    {{> button button.expand-right }}
    {{/repeat}}" 48 | } 49 | ], 50 | "two": [ 51 | { 52 | "filename": "button-01-expand-right.html", 53 | "content": "\n
    {{> button button.expand-right }}
    " 54 | }, 55 | { 56 | "filename": "button-01-expand-left.html", 57 | "content": "\n
    {{> button button.expand-left }}
    " 58 | }, 59 | { 60 | "filename": "button-01-expand-up.html", 61 | "content": "\n
    {{> button button.expand-up }}
    " 62 | }, 63 | { 64 | "filename": "button-01-expand-down.html", 65 | "content": "\n
    {{> button button.expand-down }}
    " 66 | }, 67 | { 68 | "filename": "button-01-slide-left.html", 69 | "content": "\n
    {{> button button.slide-left }}
    " 70 | }, 71 | { 72 | "filename": "button-01-slide-right.html", 73 | "content": "\n
    {{> button button.slide-right }}
    " 74 | }, 75 | { 76 | "filename": "button-01-slide-up.html", 77 | "content": "\n
    {{> button button.slide-up }}
    " 78 | }, 79 | { 80 | "filename": "button-01-slide-down.html", 81 | "content": "\n
    {{> button button.slide-down }}
    " 82 | }, 83 | { 84 | "filename": "button-01-zoom-out.html", 85 | "content": "\n
    {{> button button.zoom-out }}
    " 86 | }, 87 | { 88 | "filename": "button-01-zoom-in.html", 89 | "content": "\n
    {{> button button.zoom-in }}
    " 90 | } 91 | ], 92 | "three": { 93 | "button-02-expand-right.html": { 94 | "content": "\n
    {{> button button.expand-right }}
    " 95 | }, 96 | "button-02-expand-left.html": { 97 | "content": "\n
    {{> button button.expand-left }}
    " 98 | }, 99 | "button-02-expand-up.html": { 100 | "content": "\n
    {{> button button.expand-up }}
    " 101 | }, 102 | "button-02-expand-down.html": { 103 | "content": "\n
    {{> button button.expand-down }}
    " 104 | }, 105 | "button-02-slide-left.html": { 106 | "content": "\n
    {{> button button.slide-left }}
    " 107 | }, 108 | "button-02-slide-right.html": { 109 | "content": "\n
    {{> button button.slide-right }}
    " 110 | }, 111 | "button-02-slide-up.html": { 112 | "content": "\n
    {{> button button.slide-up }}
    " 113 | }, 114 | "button-02-slide-down.html": { 115 | "content": "\n
    {{> button button.slide-down }}
    " 116 | }, 117 | "button-02-zoom-out.html": { 118 | "content": "\n
    {{> button button.zoom-out }}
    " 119 | }, 120 | "button-02-zoom-in.html": { 121 | "content": "\n
    {{> button button.zoom-in }}
    " 122 | } 123 | }, 124 | "four": [ 125 | { 126 | "filename": "button-expandright.html", 127 | "content": "\n{{#repeat <%= repeat.expandright %>}}
    {{> button button.expand-right }}
    {{/repeat}}" 128 | }, 129 | { 130 | "filename": "button-expandleft.html", 131 | "content": "\n{{#repeat <%= repeat.expandleft %>}}
    {{> button button.expand-left }}
    {{/repeat}}" 132 | }, 133 | { 134 | "filename": "button-expandup.html", 135 | "content": "\n{{#repeat <%= repeat.expandup %>}}
    {{> button button.expand-up }}
    {{/repeat}}" 136 | }, 137 | { 138 | "filename": "button-expanddown.html", 139 | "content": "\n{{#repeat <%= repeat.expanddown %>}}
    {{> button button.expand-down }}
    {{/repeat}}" 140 | }, 141 | { 142 | "filename": "button-slideleft.html", 143 | "content": "\n{{#repeat <%= repeat.slideleft %>}}
    {{> button button.slide-left }}
    {{/repeat}}" 144 | }, 145 | { 146 | "filename": "button-slideright.html", 147 | "content": "\n{{#repeat <%= repeat.slideright %>}}
    {{> button button.slide-right }}
    {{/repeat}}" 148 | }, 149 | { 150 | "filename": "button-slideup.html", 151 | "content": "\n{{#repeat <%= repeat.slideup %>}}
    {{> button button.slide-up }}
    {{/repeat}}" 152 | }, 153 | { 154 | "filename": "button-slidedown.html", 155 | "content": "\n{{#repeat <%= repeat.slidedown %>}}
    {{> button button.slide-down }}
    {{/repeat}}" 156 | }, 157 | { 158 | "filename": "button-zoomout.html", 159 | "content": "\n{{#repeat <%= repeat.zoomout %>}}
    {{> button button.zoom-out }}
    {{/repeat}}" 160 | }, 161 | { 162 | "filename": "button-zoomin.html", 163 | "content": "\n{{#repeat <%= repeat.zoomin %>}}
    {{> button button.zoom-in }}
    {{/repeat}}" 164 | } 165 | ] 166 | } 167 | } -------------------------------------------------------------------------------- /_demo/button-090/button-zoomin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 | 92 |
    93 |
    94 | 98 |
    99 |
    100 | 104 |
    105 |
    106 | 110 |
    111 |
    112 | 116 |
    117 |
    118 | 122 |
    123 |
    124 | 128 |
    129 |
    130 | 134 |
    135 |
    136 | 140 |
    141 |
    142 | 146 |
    147 |
    148 | 152 |
    153 |
    154 | 158 |
    159 |
    160 | 164 |
    165 |
    166 | 170 |
    171 |
    172 | 176 |
    177 |
    178 |
    179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /_demo/button-090/button-slideup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |

    Example 8: Topcoat Buttons + Effeckt.css 20 | # 21 |

    22 | 23 | Source: 24 | Hakim El Hattab 25 | 26 |
    27 |
    28 | 32 |
    33 |
    34 | 38 |
    39 |
    40 | 44 |
    45 |
    46 | 50 |
    51 |
    52 | 56 |
    57 |
    58 | 62 |
    63 |
    64 | 68 |
    69 |
    70 | 74 |
    75 |
    76 | 80 |
    81 |
    82 | 86 |
    87 |
    88 | 92 |
    93 |
    94 | 98 |
    99 |
    100 | 104 |
    105 |
    106 | 110 |
    111 |
    112 | 116 |
    117 |
    118 | 122 |
    123 |
    124 | 128 |
    129 |
    130 | 134 |
    135 |
    136 | 140 |
    141 |
    142 | 146 |
    147 |
    148 | 152 |
    153 |
    154 | 158 |
    159 |
    160 | 164 |
    165 |
    166 | 170 |
    171 |
    172 | 176 |
    177 |
    178 |
    179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 193 | 194 | 195 | --------------------------------------------------------------------------------