zurb-foundation 2.2.1.2 → 3.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. data/.gitignore +17 -2
  2. data/Capfile +5 -0
  3. data/Gemfile +1 -1
  4. data/LICENSE +22 -0
  5. data/README.md +87 -0
  6. data/Rakefile +1 -0
  7. data/config/deploy.rb +42 -0
  8. data/foundation.gemspec +17 -21
  9. data/index.html +138 -0
  10. data/lib/foundation/engine.rb +2 -2
  11. data/lib/foundation/sass_script_functions.rb +29 -0
  12. data/lib/foundation/version.rb +1 -2
  13. data/lib/zurb-foundation.rb +6 -3
  14. data/stylesheets/_foundation.scss +14 -0
  15. data/stylesheets/foundation/_base.scss +6 -0
  16. data/stylesheets/foundation/_mixins.scss +46 -0
  17. data/stylesheets/foundation/_modular-scale.sass +332 -0
  18. data/stylesheets/foundation/_semantic-grid.scss +67 -0
  19. data/stylesheets/foundation/_settings.scss +71 -0
  20. data/stylesheets/foundation/app.scss +26 -0
  21. data/stylesheets/foundation/buttons.scss +175 -0
  22. data/stylesheets/foundation/forms.scss +130 -0
  23. data/stylesheets/foundation/globals.scss +34 -0
  24. data/stylesheets/foundation/grid.scss +132 -0
  25. data/stylesheets/foundation/ie.scss +16 -0
  26. data/stylesheets/foundation/mobile.scss +32 -0
  27. data/stylesheets/foundation/navbar.scss +107 -0
  28. data/stylesheets/foundation/offcanvas.scss +57 -0
  29. data/{vendor/assets/stylesheets/foundation/orbit.css.scss → stylesheets/foundation/orbit.scss} +68 -68
  30. data/stylesheets/foundation/reveal.scss +54 -0
  31. data/stylesheets/foundation/tabs.scss +89 -0
  32. data/stylesheets/foundation/typography.scss +83 -0
  33. data/stylesheets/foundation/ui.scss +352 -0
  34. data/templates/project/.gitignore +44 -0
  35. data/templates/project/MIT-LICENSE.txt +20 -0
  36. data/templates/project/humans.txt +8 -0
  37. data/templates/project/index.html +133 -0
  38. data/templates/project/manifest.rb +51 -0
  39. data/templates/project/robots.txt +4 -0
  40. data/templates/project/sass/_settings.scss +48 -0
  41. data/templates/project/sass/app.scss +20 -0
  42. data/templates/project/sass/ie.scss +4 -0
  43. data/templates/project/stylesheets/app.css +0 -0
  44. data/templates/project/stylesheets/ie.css +0 -0
  45. data/test.html +758 -0
  46. data/type.html +153 -0
  47. data/vendor/assets/images/foundation/orbit/left-arrow-small.png +0 -0
  48. data/vendor/assets/images/foundation/orbit/right-arrow-small.png +0 -0
  49. data/vendor/assets/images/foundation/orbit/right-arrow.png +0 -0
  50. data/vendor/assets/javascripts/foundation/app.js +92 -71
  51. data/vendor/assets/javascripts/foundation/index.js +8 -7
  52. data/vendor/assets/javascripts/foundation/jquery.customforms.js +74 -73
  53. data/vendor/assets/javascripts/foundation/jquery.min.js +4 -0
  54. data/vendor/assets/javascripts/foundation/jquery.offcanvas.js +50 -0
  55. data/vendor/assets/javascripts/foundation/jquery.orbit-1.4.0.js +103 -101
  56. data/vendor/assets/javascripts/foundation/jquery.placeholder.min.js +0 -1
  57. data/vendor/assets/javascripts/foundation/jquery.reveal.js +39 -15
  58. data/vendor/assets/javascripts/foundation/jquery.tooltips.js +96 -90
  59. data/vendor/assets/javascripts/foundation/modernizr.foundation.js +3 -4
  60. metadata +101 -46
  61. data/README.markdown +0 -163
  62. data/build.rb +0 -49
  63. data/lib/foundation/generators/USAGE +0 -15
  64. data/lib/foundation/generators/install_generator.rb +0 -27
  65. data/lib/foundation/generators/layout_generator.rb +0 -28
  66. data/lib/foundation/generators/templates/application.css +0 -5
  67. data/lib/foundation/generators/templates/application.html.erb +0 -31
  68. data/lib/foundation/generators/templates/application.html.haml +0 -30
  69. data/lib/foundation/generators/templates/application.html.slim +0 -30
  70. data/lib/foundation/generators/templates/application.js +0 -4
  71. data/vendor/assets/images/foundation/misc/button-gloss.png +0 -0
  72. data/vendor/assets/images/foundation/misc/button-overlay.png +0 -0
  73. data/vendor/assets/images/foundation/misc/custom-form-sprites.png +0 -0
  74. data/vendor/assets/images/foundation/misc/input-bg-outset.png +0 -0
  75. data/vendor/assets/images/foundation/misc/input-bg.png +0 -0
  76. data/vendor/assets/images/foundation/misc/modal-gloss.png +0 -0
  77. data/vendor/assets/images/foundation/misc/table-sorter.png +0 -0
  78. data/vendor/assets/stylesheets/foundation/forms.css.scss +0 -134
  79. data/vendor/assets/stylesheets/foundation/globals.css.scss +0 -139
  80. data/vendor/assets/stylesheets/foundation/grid.css.scss +0 -129
  81. data/vendor/assets/stylesheets/foundation/ie.css.scss +0 -13
  82. data/vendor/assets/stylesheets/foundation/index.css +0 -10
  83. data/vendor/assets/stylesheets/foundation/mobile.css.scss +0 -222
  84. data/vendor/assets/stylesheets/foundation/reveal.css.scss +0 -100
  85. data/vendor/assets/stylesheets/foundation/typography.css.scss +0 -63
  86. data/vendor/assets/stylesheets/foundation/ui.css.scss +0 -418
data/templates/project/.gitignore ADDED
@@ -0,0 +1,44 @@
1
+ # Numerous always-ignore extensions
2
+ *.diff
3
+ *.err
4
+ *.orig
5
+ *.log
6
+ *.rej
7
+ *.swo
8
+ *.swp
9
+ *.vi
10
+ *~
11
+ *.sass-cache
12
+
13
+ # OS or Editor folders
14
+ .DS_Store
15
+ Thumbs.db
16
+ .cache
17
+ .project
18
+ .settings
19
+ .tmproj
20
+ *.esproj
21
+ nbproject
22
+ *.sublime-project
23
+ *.sublime-workspace
24
+
25
+ # Dreamweaver added files
26
+ _notes
27
+ dwsync.xml
28
+
29
+ # Komodo
30
+ *.komodoproject
31
+ .komodotools
32
+
33
+ # Folders to ignore
34
+ .hg
35
+ .svn
36
+ .CVS
37
+ intermediate
38
+ publish
39
+ .idea
40
+
41
+ # build script local files
42
+ build/buildinfo.properties
43
+ build/config/buildinfo.properties
44
+ marketing/files/foundation-download.zip
data/templates/project/MIT-LICENSE.txt ADDED
@@ -0,0 +1,20 @@
1
+ Copyright (c) 2011 ZURB, http://www.zurb.com/
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/templates/project/humans.txt ADDED
@@ -0,0 +1,8 @@
1
+ /* Foundation was made by ZURB, an interaction design and design strategy firm in Campbell, CA */
2
+ /* zurb.com */
3
+ /* humanstxt.org */
4
+
5
+ /* SITE */
6
+ Standards: HTML5, CSS3
7
+ Components: jQuery, Orbit, Reveal
8
+ Software: Coda, Textmate, Git
data/templates/project/index.html ADDED
@@ -0,0 +1,133 @@
1
+ <!DOCTYPE html>
2
+
3
+ <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
4
+ <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
5
+ <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
6
+ <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
7
+ <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
8
+ <head>
9
+ <meta charset="utf-8" />
10
+
11
+ <!-- Set the viewport width to device width for mobile -->
12
+ <meta name="viewport" content="width=device-width" />
13
+
14
+ <title>Welcome to Foundation</title>
15
+
16
+ <!-- Included CSS Files -->
17
+ <link rel="stylesheet" href="stylesheets/app.css">
18
+
19
+ <script src="javascripts/foundation/modernizr.foundation.js"></script>
20
+
21
+ <!-- IE Fix for HTML5 Tags -->
22
+ <!--[if lt IE 9]>
23
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
24
+ <![endif]-->
25
+
26
+ </head>
27
+ <body>
28
+
29
+ <div class="row">
30
+ <div class="twelve columns">
31
+ <h2>Welcome to Foundation</h2>
32
+ <p>This is version 3.0 released on June 29, 2012</p>
33
+ <hr />
34
+ </div>
35
+ </div>
36
+
37
+ <div class="row">
38
+ <div class="eight columns">
39
+ <h3>The Grid</h3>
40
+
41
+ <!-- Grid Example -->
42
+ <div class="row">
43
+ <div class="twelve columns">
44
+ <div class="panel">
45
+ <p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="row">
50
+ <div class="six columns">
51
+ <div class="panel">
52
+ <p>Six columns</p>
53
+ </div>
54
+ </div>
55
+ <div class="six columns">
56
+ <div class="panel">
57
+ <p>Six columns</p>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <div class="row">
62
+ <div class="four columns">
63
+ <div class="panel">
64
+ <p>Four columns</p>
65
+ </div>
66
+ </div>
67
+ <div class="four columns">
68
+ <div class="panel">
69
+ <p>Four columns</p>
70
+ </div>
71
+ </div>
72
+ <div class="four columns">
73
+ <div class="panel">
74
+ <p>Four columns</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <h3>Tabs</h3>
80
+ <dl class="tabs">
81
+ <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
82
+ <dd><a href="#simple2">Simple Tab 2</a></dd>
83
+ <dd><a href="#simple3">Simple Tab 3</a></dd>
84
+ </dl>
85
+
86
+ <ul class="tabs-content">
87
+ <li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
88
+ <li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
89
+ <li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
90
+ </ul>
91
+
92
+ <h3>Buttons</h3>
93
+
94
+ <div class="row">
95
+ <div class="six columns">
96
+ <p><a href="#" class="small button">Small Button</a></p>
97
+ <p><a href="#" class="button">Medium Button</a></p>
98
+ <p><a href="#" class="large button">Large Button</a></p>
99
+ </div>
100
+ <div class="six columns">
101
+ <p><a href="#" class="small alert button">Small Alert Button</a></p>
102
+ <p><a href="#" class="success button">Medium Success Button</a></p>
103
+ <p><a href="#" class="large secondary button">Large Secondary Button</a></p>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="four columns">
109
+ <h4>Getting Started</h4>
110
+ <p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
111
+
112
+ <h4>Other Resources</h4>
113
+ <p>Once you've exhausted the fun in this document, you should check out:</p>
114
+ <ul class="disc">
115
+ <li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
116
+ <li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
117
+ <li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
118
+ </ul>
119
+ </div>
120
+ </div>
121
+
122
+
123
+ <!-- Included JS Files -->
124
+ <script src="javascripts/jquery.min.js"></script>
125
+ <script src="javascripts/foundation/jquery.reveal.js"></script>
126
+ <script src="javascripts/foundation/jquery.orbit-1.4.0.js"></script>
127
+ <script src="javascripts/foundation/jquery.customforms.js"></script>
128
+ <script src="javascripts/foundation/jquery.placeholder.min.js"></script>
129
+ <script src="javascripts/foundation/jquery.tooltips.js"></script>
130
+ <script src="javascripts/app.js"></script>
131
+
132
+ </body>
133
+ </html>
data/templates/project/manifest.rb ADDED
@@ -0,0 +1,51 @@
1
+ description 'Foundation Compass Gem'
2
+
3
+ # Sass Files
4
+ stylesheet 'sass/app.scss', :to => 'app.scss', :media => "screen, projector, print"
5
+ stylesheet 'sass/ie.scss', :to => 'ie.scss', :condition => "IE lt 9"
6
+ stylesheet 'sass/_settings.scss', :to => '_settings.scss'
7
+
8
+ # Relative asset paths
9
+ js_path = "/../../vendor/assets/javascripts/foundation"
10
+ images_path = "/../../vendor/assets/images/foundation"
11
+
12
+ # Javascripts
13
+ javascript "#{js_path}/jquery.min.js", :to => "jquery.min.js"
14
+ javascript "#{js_path}/modernizr.foundation.js", :to => "foundation/modernizr.foundation.js"
15
+ javascript "#{js_path}/jquery.customforms.js", :to => "foundation/jquery.customforms.js"
16
+ javascript "#{js_path}/jquery.reveal.js", :to => "foundation/jquery.reveal.js"
17
+ javascript "#{js_path}/jquery.orbit-1.4.0.js", :to => "foundation/jquery.orbit-1.4.0.js"
18
+ javascript "#{js_path}/jquery.tooltips.js", :to => "foundation/jquery.tooltips.js"
19
+ javascript "#{js_path}/jquery.placeholder.min.js", :to => "foundation/jquery.placeholder.min.js"
20
+ javascript "#{js_path}/app.js", :to => "app.js"
21
+
22
+ # Make sure you list all the project template files here in the manifest.
23
+ html 'index.html'
24
+ file 'humans.txt'
25
+ file 'robots.txt'
26
+ file 'MIT-LICENSE.txt'
27
+
28
+ # Image Files
29
+ image "#{images_path}/orbit/bullets.jpg", :to => "foundation/orbit/bullets.jpg"
30
+ image "#{images_path}/orbit/left-arrow.png", :to => "foundation/orbit/left-arrow.png"
31
+ image "#{images_path}/orbit/left-arrow-small.png", :to => "foundation/orbit/left-arrow-small.png"
32
+ image "#{images_path}/orbit/loading.gif", :to => "foundation/orbit/loading.gif"
33
+ image "#{images_path}/orbit/mask-black.png", :to => "foundation/orbit/mask-black.png"
34
+ image "#{images_path}/orbit/pause-black.png", :to => "foundation/orbit/pause-black.png"
35
+ image "#{images_path}/orbit/right-arrow.png", :to => "foundation/orbit/right-arrow.png"
36
+ image "#{images_path}/orbit/right-arrow-small.png", :to => "foundation/orbit/right-arrow-small.png"
37
+ image "#{images_path}/orbit/rotator-black.png", :to => "foundation/orbit/rotator-black.png"
38
+ image "#{images_path}/orbit/timer-black.png", :to => "foundation/orbit/timer-black.png"
39
+
40
+
41
+ help %Q{
42
+
43
+ If you need help, email us at foundation@zurb.com or visit foundation.zurb.com"
44
+
45
+ }
46
+
47
+ welcome_message %Q{
48
+
49
+ w00t! You're using ZURB Foundation, now go forth and rock 'n roll!
50
+
51
+ }
data/templates/project/robots.txt ADDED
@@ -0,0 +1,4 @@
1
+ # www.robotstxt.org/
2
+ # www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
3
+
4
+ User-agent: *
data/templates/project/sass/_settings.scss ADDED
@@ -0,0 +1,48 @@
1
+ // Settings file containing Foundation defaults
2
+
3
+ // Grid Settings
4
+
5
+ // $rowWidth: 1000px;
6
+ // $columnGutter: 30px;
7
+ // $totalColumns: 12;
8
+ // $mobileTotalColumns: 4;
9
+
10
+ // Colors Settings
11
+
12
+ // $mainColor: #2ba6cb;
13
+ // $secondaryColor: #e9e9e9;
14
+ // $alertColor: #c60f13;
15
+ // $successColor: #5da423;
16
+ // $txtColor: #222;
17
+ // $highlightColor: #ffff99;
18
+ // $black: #000;
19
+ // $white: #fff;
20
+ // $shinyEdge: rgba(#fff, .5);
21
+ // $darkEdge: rgba(#000, .2);
22
+
23
+ // Button Settings
24
+
25
+ // $buttonRadius: 3px;
26
+ // $btnBase: 10px;
27
+
28
+ // $tinyBtnBase: $btnBase - 5;
29
+ // $smallBtnBase: $btnBase - 3;
30
+ // $largeBtnBase: $btnBase + 5;
31
+
32
+ // Form Settings
33
+
34
+ // $formSpacing: 12px;
35
+
36
+ // Tab Settings
37
+
38
+ // $tabHeight: 40px;
39
+
40
+ // Nav Bar Settings
41
+
42
+ // $navBarHeight: 40px;
43
+ // $navFlyoutBaseWidth: 250px;
44
+
45
+ // Modular Scale
46
+ // $ratio: $golden;
47
+ // $base-size: 14px 44px;
48
+
data/templates/project/sass/app.scss ADDED
@@ -0,0 +1,20 @@
1
+ /* Artfully masterminded by ZURB */
2
+ @import "settings";
3
+ @import "foundation";
4
+
5
+ // Import Each Specific Piece for SASS
6
+ // @import "foundation/base";
7
+ // @import "foundation/globals";
8
+ // @import "foundation/typography";
9
+ // @import "foundation/grid";
10
+ // @import "foundation/ui";
11
+ // @import "foundation/buttons";
12
+ // @import "foundation/tabs";
13
+ // @import "foundation/navbar";
14
+ // @import "foundation/forms";
15
+ // @import "foundation/orbit";
16
+ // @import "foundation/reveal";
17
+ // @import "foundation/ie";
18
+ // @import "foundation/app";
19
+
20
+
data/templates/project/sass/ie.scss ADDED
@@ -0,0 +1,4 @@
1
+ // IE styles
2
+ //----------------------------------------------
3
+ //
4
+ // IE specific styles less than IE9. We hate IE.
data/templates/project/stylesheets/app.css ADDED
File without changes
data/templates/project/stylesheets/ie.css ADDED
File without changes
data/test.html ADDED
@@ -0,0 +1,758 @@
1
+ <!DOCTYPE html>
2
+
3
+ <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
4
+ <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
5
+ <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
6
+ <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
7
+ <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
8
+ <head>
9
+ <meta charset="utf-8" />
10
+
11
+ <!-- Set the viewport width to device width for mobile -->
12
+ <meta name="viewport" content="width=device-width" />
13
+
14
+ <title>Welcome to Foundation</title>
15
+
16
+ <!-- Included CSS Files -->
17
+ <link rel="stylesheet" href="marketing/stylesheets/index.css">
18
+
19
+ <!--[if lt IE 9]>
20
+ <link rel="stylesheet" href="marketing/stylesheets/ie.css">
21
+ <![endif]-->
22
+
23
+ <script src="vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
24
+
25
+ <!-- IE Fix for HTML5 Tags -->
26
+ <!--[if lt IE 9]>
27
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
28
+ <![endif]-->
29
+ <style type="text/css">
30
+
31
+ .display-grid .row { background: #eee; margin-bottom: 8px; }
32
+ .display-grid .column, .display-grid .columns { background: #ddd; }
33
+
34
+ </style>
35
+ </head>
36
+ <body>
37
+
38
+ <!-- container -->
39
+ <div class="container">
40
+
41
+ <div class="row">
42
+ <div class="twelve columns">
43
+ <h2>Foundation Testbed</h2>
44
+ <p>This page includes <span class="keystroke">keystroke</span> common elements and weird edge cases so we can test the crap out of stuff. It will probably change in each release to test new elements.</p>
45
+ <hr />
46
+ </div>
47
+ </div>
48
+
49
+ <div class="row">
50
+ <div class="twelve columns">
51
+ <ul class="nav-bar">
52
+ <li class="active"><a href="#" class="main">Nav Item 1</a></li>
53
+ <li class="has-flyout">
54
+ <a href="#">Nav Item 2</a>
55
+ <a href="#" class="flyout-toggle"><span> </span></a>
56
+ <ul class="flyout">
57
+ <li><a href="#">Sub Nav Item 1</a></li>
58
+ <li><a href="#">Sub Nav Item 2</a></li>
59
+ <li><a href="#">Sub Nav 3</a></li>
60
+ <li><a href="#">Sub Nav 4</a></li>
61
+ <li><a href="#">Sub Nav Item 5</a></li>
62
+ </ul>
63
+ </li>
64
+ <li class="has-flyout">
65
+ <a href="#">Nav Item 3</a>
66
+ <a href="#" class="flyout-toggle"><span> </span></a>
67
+ <div class="flyout">
68
+ <div class="row">
69
+ <div class="twelve columns">
70
+ <h5>Medium Example (400px)</h5>
71
+ <div class="row">
72
+ <div class="six columns">
73
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
74
+ </div>
75
+ <div class="six columns">
76
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </li>
82
+ <li class="has-flyout hide-on-tablets">
83
+ <a href="#">Nav Item 4</a>
84
+ <a href="#" class="flyout-toggle"><span> </span></a>
85
+ <div class="flyout large right">
86
+ <div class="row">
87
+ <div class="twelve columns">
88
+ <h5>Large Example (600px)</h5>
89
+ <div class="row">
90
+ <div class="four columns">
91
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
92
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
93
+ </div>
94
+ <div class="four columns">
95
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
96
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
97
+ </div>
98
+ <div class="four columns">
99
+ <img src="http://placehold.it/200x250" />
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </li>
105
+ </ul>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="row">
110
+ <div class="eight columns">
111
+
112
+ <div class="button-bar">
113
+ <ul class="button-group">
114
+ <li><a href="#" class="secondary button">Button 1</a></li>
115
+ <li><a href="#" class="secondary button">Button 2</a></li>
116
+ <li><a href="#" class="secondary button">Button 3</a></li>
117
+ </ul>
118
+
119
+ <ul class="button-group">
120
+ <li><a href="#" class="secondary button">Button 1</a></li>
121
+ <li><a href="#" class="secondary button">Button 2</a></li>
122
+ <li><a href="#" class="secondary button">Button 3</a></li>
123
+ </ul>
124
+ </div>
125
+
126
+ <ul class="button-group radius">
127
+ <li><a href="#" class="button radius">Button 1</a></li>
128
+ <li><a href="#" class="button radius">Button 2</a></li>
129
+ <li><a href="#" class="button radius">Button 3</a></li>
130
+ </ul>
131
+
132
+ <ul class="button-group rounded">
133
+ <li><a href="#" class="button radius">Button 1</a></li>
134
+ <li><a href="#" class="button radius">Button 2</a></li>
135
+ <li><a href="#" class="button radius">Button 3</a></li>
136
+ </ul>
137
+
138
+ <ul class="button-group even three-up">
139
+ <li><a href="#" class="small button">Button 1</a></li>
140
+ <li><a href="#" class="small button">Button 2</a></li>
141
+ <li><a href="#" class="small button">Button 3</a></li>
142
+ </ul>
143
+
144
+ <div href="#" class="large button dropdown">
145
+ Dropdown Button
146
+ <ul>
147
+ <li><a href="#">Dropdown Item</a></li>
148
+ <li><a href="#">Another Dropdown Item</a></li>
149
+ <li class="divider"></li>
150
+ <li><a href="#">Last Item</a></li>
151
+ </ul>
152
+ </div>
153
+
154
+ <div href="#" class="large alert button split dropdown">
155
+ <a href="#">Split Button</a>
156
+ <span></span>
157
+ <ul>
158
+ <li><a href="#">Dropdown Item</a></li>
159
+ <li><a href="#">Another Dropdown Item</a></li>
160
+ <li class="divider"></li>
161
+ <li><a href="#">Last Item</a></li>
162
+ </ul>
163
+ </div>
164
+ <br><br>
165
+ <div href="#" class="button dropdown">
166
+ Dropdown Button
167
+ <ul>
168
+ <li><a href="#">Dropdown Item</a></li>
169
+ <li><a href="#">Another Dropdown Item</a></li>
170
+ <li class="divider"></li>
171
+ <li><a href="#">Last Item</a></li>
172
+ </ul>
173
+ </div>
174
+
175
+ <div href="#" class="alert button split dropdown">
176
+ <a href="#">Split Button</a>
177
+ <span></span>
178
+ <ul>
179
+ <li><a href="#">Dropdown Item</a></li>
180
+ <li><a href="#">Another Dropdown Item</a></li>
181
+ <li class="divider"></li>
182
+ <li><a href="#">Last Item</a></li>
183
+ </ul>
184
+ </div>
185
+ <br><br>
186
+ <div href="#" class="small button dropdown">
187
+ Dropdown Button
188
+ <ul>
189
+ <li><a href="#">Dropdown Item</a></li>
190
+ <li><a href="#">Another Dropdown Item</a></li>
191
+ <li class="divider"></li>
192
+ <li><a href="#">Last Item</a></li>
193
+ </ul>
194
+ </div>
195
+
196
+ <div href="#" class="small alert button split dropdown">
197
+ <a href="#">Split Button</a>
198
+ <span></span>
199
+ <ul>
200
+ <li><a href="#">Dropdown Item</a></li>
201
+ <li><a href="#">Another Dropdown Item</a></li>
202
+ <li class="divider"></li>
203
+ <li><a href="#">Last Item</a></li>
204
+ </ul>
205
+ </div>
206
+ <br><br>
207
+ <div href="#" class="tiny button dropdown">
208
+ Dropdown Button
209
+ <ul>
210
+ <li><a href="#">Dropdown Item</a></li>
211
+ <li><a href="#">Another Dropdown Item</a></li>
212
+ <li class="divider"></li>
213
+ <li><a href="#">Last Item</a></li>
214
+ </ul>
215
+ </div>
216
+
217
+ <div href="#" class="tiny alert button split dropdown">
218
+ <a href="#">Split Button</a>
219
+ <span></span>
220
+ <ul>
221
+ <li><a href="#">Dropdown Item</a></li>
222
+ <li><a href="#">Another Dropdown Item</a></li>
223
+ <li class="divider"></li>
224
+ <li><a href="#">Last Item</a></li>
225
+ </ul>
226
+ </div>
227
+
228
+ <p class="show-for-xlarge">This is a <strong>very large</strong> display.</p>
229
+ <p class="show-for-large">This is a <strong>large</strong> display.</p>
230
+ <p class="show-for-medium">This is a <strong>medium (tablet)</strong> display.</p>
231
+ <p class="show-for-small">This is a <strong>small (phone)</strong> display.</p>
232
+
233
+ <p class="hide-for-xlarge">This is <strong>not</strong> a <strong>very large</strong> display.</p>
234
+ <p class="hide-for-large">This is <strong>not</strong> a <strong>large</strong> display.</p>
235
+ <p class="hide-for-medium">This is <strong>not</strong> a <strong>medium (tablet)</strong> display.</p>
236
+ <p class="hide-for-small">This is <strong>not</strong> a <strong>small (phone)</strong> display.</p>
237
+
238
+ <p class="hide-for-touch">This is <strong>not</strong> a <strong>touch-enabled</strong> device.</p>
239
+ <p class="show-for-touch">This is a <strong>touch-enabled</strong> device.</p>
240
+
241
+ <p class="show-for-landscape">This is <strong>landscape</strong> orientation.</p>
242
+ <p class="hide-for-landscape">This is <strong>not landscape</strong> orientation.</p>
243
+
244
+ <p class="show-for-portrait">This is <strong>portrait</strong> orientation.</p>
245
+ <p class="hide-for-portrait">This is <strong>not portrait</strong> orientation.</p>
246
+
247
+ <h3>The Grid</h3>
248
+
249
+ <div class="display-grid">
250
+ <div class="row">
251
+ <div class="four columns">
252
+ .four.columns
253
+ </div>
254
+ <div class="four columns">
255
+ .four.columns
256
+ </div>
257
+ <div class="four columns">
258
+ .four.columns
259
+ </div>
260
+ </div>
261
+ <div class="row">
262
+ <div class="three columns">
263
+ .three.columns
264
+ </div>
265
+ <div class="six columns">
266
+ .six.columns
267
+ </div>
268
+ <div class="three columns">
269
+ .three.columns
270
+ </div>
271
+ </div>
272
+ <div class="row">
273
+ <div class="two columns">
274
+ .two.columns
275
+ </div>
276
+ <div class="eight columns">
277
+ .eight.columns
278
+ </div>
279
+ <div class="two columns">
280
+ .two.columns
281
+ </div>
282
+ </div>
283
+ <div class="row">
284
+ <div class="one columns">
285
+ .one
286
+ </div>
287
+ <div class="eleven columns">
288
+ .eleven.columns
289
+ </div>
290
+ </div>
291
+ <div class="row">
292
+ <div class="two columns">
293
+ .two.columns
294
+ </div>
295
+ <div class="ten columns">
296
+ .ten.columns
297
+ </div>
298
+ </div>
299
+ <div class="row">
300
+ <div class="three columns">
301
+ .three.columns
302
+ </div>
303
+ <div class="nine columns">
304
+ .nine.columns
305
+ </div>
306
+ </div>
307
+ <div class="row">
308
+ <div class="four columns">
309
+ .four.columns
310
+ </div>
311
+ <div class="eight columns">
312
+ .eight.columns
313
+ </div>
314
+ </div>
315
+ <div class="row">
316
+ <div class="five columns">
317
+ .five
318
+ </div>
319
+ <div class="seven columns">
320
+ .seven.columns
321
+ </div>
322
+ </div>
323
+ <div class="row">
324
+ <div class="six columns">
325
+ .six.columns
326
+ </div>
327
+ <div class="six columns">
328
+ .six.columns
329
+ </div>
330
+ </div>
331
+ <div class="row">
332
+ <div class="seven columns">
333
+ .seven.columns
334
+ </div>
335
+ <div class="five columns">
336
+ .five.columns
337
+ </div>
338
+ </div>
339
+ <div class="row">
340
+ <div class="eight columns">
341
+ .eight.columns
342
+ </div>
343
+ <div class="four columns">
344
+ .four.columns
345
+ </div>
346
+ </div>
347
+ <div class="row">
348
+ <div class="nine columns">
349
+ .nine.columns
350
+ </div>
351
+ <div class="three columns">
352
+ .three.columns
353
+ </div>
354
+ </div>
355
+ <div class="row">
356
+ <div class="ten columns">
357
+ .ten.columns
358
+ </div>
359
+ <div class="two columns">
360
+ .two.columns
361
+ </div>
362
+ </div>
363
+ <div class="row">
364
+ <div class="eleven columns">
365
+ .eleven.columns
366
+ </div>
367
+ <div class="one columns">
368
+ .one
369
+ </div>
370
+ </div>
371
+ <div class="row">
372
+ <div class="twelve columns">
373
+ .twelve.columns
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <h3>Tabs</h3>
379
+ <dl class="pill tabs contained">
380
+ <dd class="active"><a href="#simple1">Complex Form Content</a></dd>
381
+ <dd><a href="#simple2">Modal Dialog Call</a></dd>
382
+ <dd><a href="#simple3">UI Elements</a></dd>
383
+ </dl>
384
+
385
+ <ul class="tabs-content contained">
386
+ <li class="active" id="simple1Tab">
387
+ <form>
388
+ <label>Label</label>
389
+ <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
390
+
391
+ <p>This is a paragraph with an inline select element.
392
+ <select>
393
+ <option>Option 1</option>
394
+ </select>
395
+ </p>
396
+
397
+ <input type="submit" class="primary button" value="Submit Input" />
398
+ </form>
399
+
400
+ <form class="nice">
401
+ <label>Nice Form Label</label>
402
+ <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
403
+
404
+ <p>This is a paragraph with an inline select element.
405
+ <select>
406
+ <option>Option 1</option>
407
+ </select>
408
+ </p>
409
+
410
+ <input type="submit" class="nice primary button" value="Submit Input" />
411
+ </form>
412
+
413
+ <form class="custom">
414
+ <label>Custom Form Label</label>
415
+ <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
416
+
417
+ <p>This is a paragraph with an inline select element.
418
+ <select class="small">
419
+ <option></option>
420
+ <option>Option 1</option>
421
+ <option>Option 2</option>
422
+ <option>Option 3</option>
423
+ <option>Option 4</option>
424
+ <option>Option 5</option>
425
+ <option>Option 6</option>
426
+ </select>
427
+ </p>
428
+
429
+ <p>This is a paragraph with an inline select element.
430
+ <select>
431
+ <option>Option 1</option>
432
+ <option>Option 2</option>
433
+ <option>Option 3</option>
434
+ <option>Option 4</option>
435
+ <option>Option 5</option>
436
+ <option>Option 6</option>
437
+ </select>
438
+ </p>
439
+
440
+ <input type="submit" class="nice primary button" value="Submit Input" />
441
+ </form>
442
+
443
+ </li>
444
+ <li id="simple2Tab">
445
+ <p>This button calls a modal from within the tabs.</p>
446
+ <a href="#" data-reveal-id="testModal" class="nice primary button">Fire Reveal Modal</a>
447
+
448
+ <form class="custom">
449
+ <label>Custom Form Label</label>
450
+ <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
451
+
452
+ <p>This is a paragraph with an inline select element.
453
+ <select class="small">
454
+ <option></option>
455
+ <option>Option 1</option>
456
+ <option>Option 2</option>
457
+ <option>Option 3</option>
458
+ <option>Option 4</option>
459
+ <option>Option 5</option>
460
+ <option>Option 6</option>
461
+ </select>
462
+ </p>
463
+
464
+ <p>This is a paragraph with an inline select element.
465
+ <select>
466
+ <option>Option 1</option>
467
+ <option>Option 2</option>
468
+ <option>Option 3</option>
469
+ <option>Option 4</option>
470
+ <option>Option 5</option>
471
+ <option>Option 6</option>
472
+ </select>
473
+ </p>
474
+
475
+ <input type="submit" class="nice primary button" value="Submit Input" />
476
+ </form>
477
+ </li>
478
+ <li id="simple3Tab">
479
+ <div class="alert-box success">
480
+ This is a success alert (div.alert-box.success).
481
+ <a href="" class="close">&times;</a>
482
+ </div>
483
+
484
+ <p>
485
+ <span class="primary radius label">Added 01/19</span> This <span class="has-tip bottom" id="interestingTip" data-width="210" title="Some small explanation or tidbit that would live within the tooltip. Should only work for simple text tips.">paragraph</span> has an inline label to let you know that it was added on January 19, 2012 courtesy of Thomas Klemm. Thanks man!
486
+ </p>
487
+
488
+ <ul class="pagination">
489
+ <li class="unavailable"><a href="">&laquo;</a></li>
490
+ <li class="current"><a href="">1</a></li>
491
+ <li><a href="">2</a></li>
492
+ <li><a href="">3</a></li>
493
+ <li><a href="">4</a></li>
494
+ <li class="unavailable"><a href="">&hellip;</a></li>
495
+ <li><a href="">12</a></li>
496
+ <li><a href="">13</a></li>
497
+ <li><a href="">&raquo;</a></li>
498
+ </ul>
499
+ </li>
500
+ </ul>
501
+
502
+ <h3>Buttons</h3>
503
+ <div class="row">
504
+ <div class="six columns">
505
+ <p><a href="#" class="tiny secondary button">Tiny Secondary Button</a></p>
506
+ <p><a href="#" class="small primary button">Small Primary Button</a></p>
507
+ <p><a href="#" class="alert button">Medium Alert Button</a></p>
508
+ <p><a href="#" class="large success button">Large Success Button</a></p>
509
+ </div>
510
+ <div class="six columns">
511
+ <p><a href="#" class="nice radius tiny secondary button">Tiny Secondary Button</a></p>
512
+ <p><a href="#" class="nice radius small primary button">Nice Primary Button</a></p>
513
+ <p><a href="#" class="nice radius alert button">Nice Alert Button</a></p>
514
+ <p><a href="#" class="nice radius large success button">Nice Success Button</a></p>
515
+ </div>
516
+ </div>
517
+
518
+ <h3>Reveal</h3>
519
+ <div class="row">
520
+ <div class="six columns">
521
+ <h6>Data Attributes</h6>
522
+ <p>
523
+ <a href="#" class="tiny primary button" data-reveal-id="testModal">Default</a>
524
+ <a href="#" class="tiny primary button" data-reveal-id="testModal" data-animation="fade">Fade</a>
525
+ <a href="#" class="tiny primary button" data-reveal-id="testModal" data-animation="none">None</a>
526
+ </p>
527
+ <h6>JavaScript</h6>
528
+ <p>
529
+ <a href="#" id="fireReveal" class="tiny primary button">Default</a>
530
+ <a href="#" id="fireRevealFade" class="tiny primary button">Fade</a>
531
+ <a href="#" id="fireRevealNone" class="tiny primary button">None</a>
532
+ </p>
533
+ </div>
534
+ </div>
535
+
536
+ <h3>Disabled Forms</h3>
537
+ <form class="custom">
538
+
539
+ <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display: none; "> Radio Button 1</label>
540
+ <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display: none; "> Radio Button 2</label>
541
+ <label for="radio3"><input name="radio1" disabled="DISABLED" type="radio" id="radio3" style="display: none; "> Radio Button 3</label>
542
+
543
+ <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none; "> Label for Checkbox</label>
544
+ <label for="checkbox2"><input type="checkbox" id="checkbox2" checked="" style="display: none; "> Label for Checkbox</label>
545
+ <label for="checkbox3"><input type="checkbox" disabled="DISABLED" checked="" id="checkbox3" style="display: none; "> Label for Checkbox</label>
546
+
547
+ <h3>Forms</h3>
548
+
549
+ <form>
550
+ <div class="row">
551
+ <div class="two columns">
552
+ <label class="right">Street</label>
553
+ </div>
554
+ <div class="ten columns">
555
+ <input type="text" placeholder="123 Main St." />
556
+ </div>
557
+ </div>
558
+ <div class="row">
559
+ <div class="two columns">
560
+ <label class="right">City, ZIP</label>
561
+ </div>
562
+ <div class="eight columns">
563
+ <input type="text" placeholder="Campbell" />
564
+ </div>
565
+ <div class="two columns">
566
+ <select>
567
+ <option>CA</option>
568
+ </select>
569
+ </div>
570
+ </div>
571
+ </form>
572
+
573
+ <form>
574
+ <label>This is a label.</label>
575
+ <input type="text" placeholder="Standard Input" />
576
+
577
+ <label>This is another label.</label>
578
+ <input type="text" class="twelve" placeholder="Large input" />
579
+
580
+ <label>Address</label>
581
+ <input type="text" class="twelve" placeholder="Street" />
582
+ <div class="row">
583
+ <div class="six columns">
584
+ <div class="row collapse">
585
+ <div class="nine columns">
586
+ <input type="text" />
587
+ </div>
588
+ <div class="three columns">
589
+ <a href="#" class="button postfix">Go!</a>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ <div class="three columns">
594
+ <div class="row collapse">
595
+ <div class="eight columns">
596
+ <input type="text" />
597
+ </div>
598
+ <div class="four columns">
599
+ <span class="postfix">.com</span>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ <div class="three columns">
604
+ <div class="row collapse">
605
+ <div class="two columns">
606
+ <span class="prefix">@</span>
607
+ </div>
608
+ <div class="ten columns">
609
+ <input type="text" />
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <fieldset>
616
+
617
+ <legend>Fieldset Name</legend>
618
+
619
+ <label>This is a label.</label>
620
+ <input type="text" placeholder="Standard Input" />
621
+
622
+ <label>This is another label.</label>
623
+ <input type="text" class="twelve" placeholder="Large input" />
624
+
625
+ <label>Address</label>
626
+ <input type="text" class="twelve" />
627
+ <input type="text" class="six" />
628
+ <input type="text" class="three" />
629
+ <input type="text" class="three" />
630
+
631
+ </fieldset>
632
+
633
+ </form>
634
+
635
+
636
+ <h3>Disabled Forms</h3>
637
+ <form class="custom">
638
+ <p>
639
+ <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display: none; "> Radio Button 1</label>
640
+ <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display: none; "> Radio Button 2</label>
641
+ <label for="radio3"><input name="radio1" disabled="DISABLED" type="radio" id="radio3" style="display: none; "> Radio Button 3</label>
642
+ </p>
643
+
644
+ <p>
645
+ <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none; "> Label for Checkbox</label>
646
+ <label for="checkbox2"><input type="checkbox" id="checkbox2" checked="" style="display: none; "> Label for Checkbox</label>
647
+ <label for="checkbox3"><input type="checkbox" disabled="DISABLED" checked="" id="checkbox3" style="display: none; "> Label for Checkbox</label>
648
+ </p>
649
+
650
+
651
+
652
+ <p>This is a paragraph with an inline select element.
653
+
654
+ <select disabled="DISABLED">
655
+ <option>Option 1</option>
656
+ <option>Option 2</option>
657
+ <option>Option 3</option>
658
+ <option>Option 4</option>
659
+ <option>Option 5</option>
660
+ <option>Option 6</option>
661
+ </select>
662
+ </p>
663
+ </form>
664
+
665
+ </div>
666
+
667
+ <div class="four columns">
668
+
669
+ <dl class="sub-nav">
670
+ <dt>Filter:</dt>
671
+ <dd class="active"><a href="#">All</a></dd>
672
+ <dd><a href="#">Active</a></dd>
673
+ <dd><a href="#">Pending</a></dd>
674
+ </dl>
675
+
676
+ <h4>Other Resources</h4>
677
+ <p>Once you've exhausted the fun in this document, you should check out:</p>
678
+ <ul class="disc">
679
+ <li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
680
+ <li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
681
+ <li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
682
+ </ul>
683
+
684
+ <p><a href="#" class="tiny secondary button">Tiny secondary Button</a></p>
685
+
686
+ <ul class="block-grid three-up">
687
+ <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
688
+ <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
689
+ <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
690
+ <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
691
+ <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
692
+ </ul>
693
+ </div>
694
+ </div>
695
+
696
+ </div>
697
+ <!-- container -->
698
+
699
+
700
+
701
+ <div id="testModal" class="reveal-modal expand">
702
+ <h2>Awesome. I have it.</h2>
703
+ <p class="lead">Your couch. It's mine.</p>
704
+ <form class="nice custom">
705
+ <label>Custom Form Label</label>
706
+ <input type="text" class="expand" placeholder="input.expand" />
707
+
708
+ <p>This is a paragraph with an inline select element.
709
+ <select>
710
+ <option>Option 1</option>
711
+ <option>Option 2</option>
712
+ <option>Option 3</option>
713
+ <option>Option 4</option>
714
+ <option>Option 5</option>
715
+ <option>Option 6</option>
716
+ <option>Option 7</option>
717
+ </select>
718
+ </p>
719
+
720
+ <input type="submit" class="nice primary button" value="Submit Input" />
721
+ </form>
722
+ <a class="close-reveal-modal">&#215;</a>
723
+ </div>
724
+
725
+
726
+ <!-- Included JS Files -->
727
+ <script src="js/jquery.min.js"></script>
728
+ <!-- Combine and Compress These JS Files -->
729
+ <script src="js/jquery.reveal.js"></script>
730
+ <script src="js/jquery.orbit-1.4.0.js"></script>
731
+ <script src="js/jquery.customforms.js"></script>
732
+ <script src="js/jquery.placeholder.min.js"></script>
733
+ <script src="js/jquery.tooltips.js"></script>
734
+ <!-- End Combine and Compress These JS Files -->
735
+ <script src="js/app.js"></script>
736
+
737
+ <script>
738
+ $('#testModal').bind('reveal:open reveal:opened reveal:close reveal:closed', function (event) {
739
+ console.log(event);
740
+ });
741
+
742
+ $('#fireReveal').click(function (event) {
743
+ event.preventDefault();
744
+ $('#testModal').reveal();
745
+ });
746
+
747
+ $('#fireRevealFade').click(function (event) {
748
+ event.preventDefault();
749
+ $('#testModal').reveal({animation: 'fade'});
750
+ });
751
+
752
+ $('#fireRevealNone').click(function (event) {
753
+ event.preventDefault();
754
+ $('#testModal').reveal({animation: 'none'});
755
+ });
756
+ </script>
757
+ </body>
758
+ </html>