Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adds more examples, removes prettify layout
- Loading branch information
1 parent
887e05f
commit 9615741
Showing
29 changed files
with
507 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Button Examples</title> | ||
| <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0"> | ||
| <link rel="stylesheet" href="../assets/css/demo.autoprefixed.css"> | ||
| <link rel="stylesheet" href="../assets/css/effeckt.autoprefixed.css"> | ||
| <link rel="stylesheet" href="../assets/css/topcoat-mobile-dark.autoprefixed.css"> | ||
| <link rel="stylesheet" href="../../button-041/styles.css"> | ||
|
|
||
| <!-- Vendor Libs --> | ||
| <script src="../assets/js/jquery.min.js"></script> | ||
| <script src="../assets/js/modernizr.js"></script> | ||
| </head> | ||
| <body> | ||
| <div class="page-wrap no-transitions" id="page-wrap"> | ||
| <div class="effeckt effeckt-demo-buttons group"> | ||
| <header> | ||
| <h2>Example 4: Topcoat Buttons + Effeckt.css | ||
| <a href="buttons.html">#</a> | ||
| </h2> | ||
| <span class="source"> | ||
| Source: | ||
| <a href="http://lab.hakim.se/effeckt/">Hakim El Hattab</a> | ||
| </span> | ||
| </header> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button expand-right topcoat-button"> | ||
| <span class="label">Expand Right</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button expand-left topcoat-button"> | ||
| <span class="label">Expand Left</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button expand-up topcoat-button"> | ||
| <span class="label">Expand Up</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button expand-down topcoat-button"> | ||
| <span class="label">Expand Down</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button slide-left topcoat-button"> | ||
| <span class="label">Slide Left</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button slide-right topcoat-button"> | ||
| <span class="label">Slide Right</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button slide-up topcoat-button"> | ||
| <span class="label">Slide Up</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button slide-down topcoat-button"> | ||
| <span class="label">Slide Down</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button zoom-out topcoat-button"> | ||
| <span class="label">Zoom Out</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| <div class="button-demo-wrap"> | ||
| <button class="effeckt-button zoom-in topcoat-button"> | ||
| <span class="label">Zoom In</span> | ||
| <span class="spinner"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Demo --> | ||
| <script src="../assets/js/demo.js"></script> | ||
|
|
||
| <!-- Libs --> | ||
| <script src="../assets/js/modals.js"></script> | ||
| <script src="../assets/js/buttons.js"></script> | ||
| <script src="../assets/js/list-items.js"></script> | ||
| <script src="../assets/js/off-screen-nav.js"></script> | ||
| <script src="../assets/js/page-transitions.js"></script> | ||
| <script src="../assets/js/list-scroll.js"></script> | ||
| <script> | ||
| stroll.bind('.effeckt-demo-list-scroll ul'); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # Buttons Example #001 | ||
|
|
||
| > Basic example, with component listed multiple times, wrapped with a layout. | ||
| ## demo | ||
| ### markup | ||
|
|
||
| ### data | ||
|
|
||
| ## component | ||
| ### markup | ||
|
|
||
| ### data | ||
|
|
||
|
|
||
|
|
||
| ### index.hbs | ||
|
|
||
| * All demo markup for the component is constrained to a single page. | ||
| * [layout](), `default.hbs`, is used to "wrap" the demo page with a common head and footer. This layout is defined in the Gruntfile, in Assemble's task-level options. | ||
| * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. | ||
| * Extraneous information about the demo is also embedded in the HTML with the component examples. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # Buttons Example #010 | ||
|
|
||
| > Basic example, with component listed multiple times, wrapped with a layout. | ||
| ## demo | ||
| ### markup | ||
|
|
||
| ### data | ||
|
|
||
| ## component | ||
| ### markup | ||
|
|
||
| ### data | ||
|
|
||
|
|
||
|
|
||
| ### index.hbs | ||
|
|
||
| * All demo markup for the component is constrained to a single page. | ||
| * [layout](), `default.hbs`, is used to "wrap" the demo page with a common head and footer. This layout is defined in the Gruntfile, in Assemble's task-level options. | ||
| * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. | ||
| * Extraneous information about the demo is also embedded in the HTML with the component examples. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| # Buttons Example #2 | ||
|
|
||
| > Basic example, with component externalized. | ||
| ### index.hbs | ||
|
|
||
| * `button` component is externalized to a `buttons.hbs`. | ||
| * Demo page, `index.hbs`, lists out each button modifier as a separate "include". | ||
| * [layout](), `default.hbs`, is used to "wrap" the demo page with a common head and footer. This layout is defined in the Gruntfile, in Assemble's task-level options. | ||
| * Each `button` "modifier" is listed in full, versus externalizing the modifiers into "includes" or partial views. | ||
| * Extraneous information about the demo is also embedded in the HTML with the component examples. |
Oops, something went wrong.