zurb-foundation 3.0.5 → 3.0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. data/README.md +4 -0
  2. data/config/assets.yml +58 -0
  3. data/foundation.gemspec +1 -0
  4. data/index.html +1 -1
  5. data/lib/foundation/version.rb +1 -1
  6. data/lib/zurb-foundation.rb +4 -5
  7. data/public/assets/foundation.js +11 -0
  8. data/public/assets/jquery.js +23 -0
  9. data/stylesheets/foundation/_mixins.scss +1 -1
  10. data/stylesheets/foundation/_semantic-grid.scss +9 -5
  11. data/stylesheets/foundation/_settings.scss +6 -0
  12. data/stylesheets/foundation/buttons.scss +35 -8
  13. data/stylesheets/foundation/forms.scss +3 -3
  14. data/stylesheets/foundation/globals.scss +1 -3
  15. data/stylesheets/foundation/grid.scss +10 -7
  16. data/stylesheets/foundation/navbar.scss +1 -1
  17. data/stylesheets/foundation/reveal.scss +1 -1
  18. data/stylesheets/foundation/typography.scss +25 -11
  19. data/stylesheets/foundation/ui.scss +48 -4
  20. data/templates/project/index.html +23 -9
  21. data/templates/project/manifest.rb +32 -20
  22. data/templates/project/sass/_settings.scss +2 -0
  23. data/templates/project/sass/app.scss +1 -0
  24. data/templates/project/sass/{foundation-style → foundation}/buttons.scss +0 -0
  25. data/templates/project/sass/{foundation-style → foundation}/forms.scss +0 -0
  26. data/templates/project/sass/{foundation-style → foundation}/globals.scss +0 -0
  27. data/templates/project/sass/{foundation-style → foundation}/grid.scss +0 -0
  28. data/templates/project/sass/{foundation-style → foundation}/navbar.scss +0 -0
  29. data/templates/project/sass/{foundation-style → foundation}/orbit.scss +0 -0
  30. data/templates/project/sass/{foundation-style → foundation}/reveal.scss +0 -0
  31. data/templates/project/sass/{foundation-style → foundation}/tabs.scss +0 -0
  32. data/templates/project/sass/{foundation-style → foundation}/typography.scss +0 -0
  33. data/templates/project/sass/{foundation-style → foundation}/ui.scss +0 -0
  34. data/test.html +152 -686
  35. data/test2.html +320 -0
  36. data/vendor/assets/javascripts/foundation/app.js +19 -123
  37. data/vendor/assets/javascripts/foundation/index.js +11 -5
  38. data/vendor/assets/javascripts/foundation/jquery.foundation.accordion.js +15 -0
  39. data/vendor/assets/javascripts/foundation/jquery.foundation.alerts.js +19 -0
  40. data/vendor/assets/javascripts/foundation/jquery.foundation.buttons.js +45 -0
  41. data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +481 -0
  42. data/vendor/assets/javascripts/foundation/jquery.foundation.navigation.js +30 -0
  43. data/vendor/assets/javascripts/foundation/{jquery.orbit-1.4.0.js → jquery.foundation.orbit.js} +3 -3
  44. data/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js +773 -0
  45. data/vendor/assets/javascripts/foundation/jquery.foundation.tabs.js +36 -0
  46. data/vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js +183 -0
  47. data/vendor/assets/javascripts/foundation/jquery.js +9404 -0
  48. data/vendor/assets/javascripts/foundation/jquery.placeholder.js +157 -0
  49. data/vendor/assets/javascripts/foundation/modernizr.foundation.js +3 -3
  50. metadata +45 -21
  51. data/templates/project/stylesheets/app.css +0 -0
  52. data/vendor/assets/javascripts/foundation/jquery.customforms.js +0 -258
  53. data/vendor/assets/javascripts/foundation/jquery.min.js +0 -4
  54. data/vendor/assets/javascripts/foundation/jquery.placeholder.min.js +0 -2
  55. data/vendor/assets/javascripts/foundation/jquery.reveal.js +0 -178
  56. data/vendor/assets/javascripts/foundation/jquery.tooltips.js +0 -166
data/templates/project/index.html CHANGED
@@ -39,7 +39,7 @@
39
39
  <div class="row">
40
40
  <div class="twelve columns">
41
41
  <h2>Welcome to Foundation</h2>
42
- <p>This is version 3.0 released on June 29, 2012</p>
42
+ <p>This is version 3.0.6 released on July 20, 2012</p>
43
43
  <hr />
44
44
  </div>
45
45
  </div>
@@ -128,16 +128,30 @@
128
128
  </ul>
129
129
  </div>
130
130
  </div>
131
-
132
-
133
- <!-- Included JS Files -->
131
+
132
+ <!-- Included JS Files (Uncompressed) -->
133
+ <!--
134
+ <script src="jquery.js"></script>
135
+ <script src="javascripts/foundation/modernizr.foundation.js"></script>
136
+ <script src="javascripts/foundation/jquery.placeholder.js"></script>
137
+ <script src="javascripts/foundation/jquery.foundation.alerts.js"></script>
138
+ <script src="javascripts/foundation/jquery.foundation.accordion.js"></script>
139
+ <script src="javascripts/foundation/jquery.foundation.buttons.js"></script>
140
+ <script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>
141
+ <script src="javascripts/foundation/jquery.foundation.forms.js"></script>
142
+ <script src="javascripts/foundation/jquery.foundation.tabs.js"></script>
143
+ <script src="javascripts/foundation/jquery.foundation.navigation.js"></script>
144
+ <script src="javascripts/foundation/jquery.foundation.reveal.js"></script>
145
+ <script src="javascripts/foundation/jquery.foundation.orbit.js"></script>
146
+ -->
147
+
148
+ <!-- Included JS Files (Compressed) -->
134
149
  <script src="javascripts/jquery.min.js"></script>
135
- <script src="javascripts/foundation/jquery.reveal.js"></script>
136
- <script src="javascripts/foundation/jquery.orbit-1.4.0.js"></script>
137
- <script src="javascripts/foundation/jquery.customforms.js"></script>
138
- <script src="javascripts/foundation/jquery.placeholder.min.js"></script>
139
- <script src="javascripts/foundation/jquery.tooltips.js"></script>
150
+ <script src="javascripts/foundation.min.js"></script>
151
+
152
+ <!-- Application Javascript, safe to override -->
140
153
  <script src="javascripts/app.js"></script>
154
+
141
155
 
142
156
  </body>
143
157
  </html>
data/templates/project/manifest.rb CHANGED
@@ -2,34 +2,46 @@ description 'Foundation Compass Gem'
2
2
 
3
3
  # Sass Files
4
4
  stylesheet 'sass/_settings.scss', :to => '_settings.scss'
5
- stylesheet 'sass/foundation-style/globals.scss', :to => 'foundation-style/globals.scss', :media => "screen, projector, print"
6
- stylesheet 'sass/foundation-style/typography.scss', :to => 'foundation-style/typography.scss', :media => "screen, projector, print"
7
- stylesheet 'sass/foundation-style/grid.scss', :to => 'foundation-style/grid.scss', :media => "screen, projector, print"
8
- stylesheet 'sass/foundation-style/ui.scss', :to => 'foundation-style/ui.scss', :media => "screen, projector, print"
9
- stylesheet 'sass/foundation-style/buttons.scss', :to => 'foundation-style/buttons.scss', :media => "screen, projector, print"
10
- stylesheet 'sass/foundation-style/tabs.scss', :to => 'foundation-style/tabs.scss', :media => "screen, projector, print"
11
- stylesheet 'sass/foundation-style/navbar.scss', :to => 'foundation-style/navbar.scss', :media => "screen, projector, print"
12
- stylesheet 'sass/foundation-style/forms.scss', :to => 'foundation-style/forms.scss', :media => "screen, projector, print"
13
- stylesheet 'sass/foundation-style/orbit.scss', :to => 'foundation-style/orbit.scss', :media => "screen, projector, print"
14
- stylesheet 'sass/foundation-style/reveal.scss', :to => 'foundation-style/reveal.scss', :media => "screen, projector, print"
5
+ stylesheet 'sass/foundation/globals.scss', :to => 'foundation-style/globals.scss', :media => "screen, projector, print"
6
+ stylesheet 'sass/foundation/typography.scss', :to => 'foundation-style/typography.scss', :media => "screen, projector, print"
7
+ stylesheet 'sass/foundation/grid.scss', :to => 'foundation-style/grid.scss', :media => "screen, projector, print"
8
+ stylesheet 'sass/foundation/ui.scss', :to => 'foundation-style/ui.scss', :media => "screen, projector, print"
9
+ stylesheet 'sass/foundation/buttons.scss', :to => 'foundation-style/buttons.scss', :media => "screen, projector, print"
10
+ stylesheet 'sass/foundation/tabs.scss', :to => 'foundation-style/tabs.scss', :media => "screen, projector, print"
11
+ stylesheet 'sass/foundation/navbar.scss', :to => 'foundation-style/navbar.scss', :media => "screen, projector, print"
12
+ stylesheet 'sass/foundation/forms.scss', :to => 'foundation-style/forms.scss', :media => "screen, projector, print"
13
+ stylesheet 'sass/foundation/orbit.scss', :to => 'foundation-style/orbit.scss', :media => "screen, projector, print"
14
+ stylesheet 'sass/foundation/reveal.scss', :to => 'foundation-style/reveal.scss', :media => "screen, projector, print"
15
15
  stylesheet 'sass/app.scss', :to => 'app.scss', :media => "screen, projector, print"
16
16
 
17
17
  # Relative asset paths
18
18
  js_path = "/../../vendor/assets/javascripts/foundation"
19
+ compressed_js_path = "/../../public/assets"
19
20
  images_path = "/../../vendor/assets/images/foundation"
20
21
 
21
- # Javascripts
22
- javascript "#{js_path}/jquery.min.js", :to => "jquery.min.js"
23
- javascript "#{js_path}/modernizr.foundation.js", :to => "foundation/modernizr.foundation.js"
24
- javascript "#{js_path}/jquery.customforms.js", :to => "foundation/jquery.customforms.js"
25
- javascript "#{js_path}/jquery.reveal.js", :to => "foundation/jquery.reveal.js"
26
- javascript "#{js_path}/jquery.orbit-1.4.0.js", :to => "foundation/jquery.orbit-1.4.0.js"
27
- javascript "#{js_path}/jquery.tooltips.js", :to => "foundation/jquery.tooltips.js"
28
- javascript "#{js_path}/jquery.placeholder.min.js", :to => "foundation/jquery.placeholder.min.js"
29
- javascript "#{js_path}/app.js", :to => "app.js"
22
+ # Compressed Javascripts
23
+ javascript "#{compressed_js_path}/jquery.js", :to => "jquery.min.js"
24
+ javascript "#{compressed_js_path}/foundation.js", :to => "foundation.min.js"
25
+
26
+ # Uncompressed Javascripts
27
+ javascript "#{js_path}/jquery.js", :to => "jquery.js"
28
+ javascript "#{js_path}/modernizr.foundation.js", :to => "foundation/modernizr.foundation.js"
29
+ javascript "#{js_path}/jquery.placeholder.js", :to => "foundation/jquery.placeholder.js"
30
+ javascript "#{js_path}/jquery.foundation.alerts.js", :to => "foundation/jquery.foundation.alerts.js"
31
+ javascript "#{js_path}/jquery.foundation.accordion.js", :to => "foundation/jquery.foundation.accordion.js"
32
+ javascript "#{js_path}/jquery.foundation.buttons.js", :to => "foundation/jquery.foundation.buttons.js"
33
+ javascript "#{js_path}/jquery.foundation.tooltips.js", :to => "foundation/jquery.foundation.tooltips.js"
34
+ javascript "#{js_path}/jquery.foundation.forms.js", :to => "foundation/jquery.foundation.forms.js"
35
+ javascript "#{js_path}/jquery.foundation.tabs.js", :to => "foundation/jquery.foundation.tabs.js"
36
+ javascript "#{js_path}/jquery.foundation.navigation.js", :to => "foundation/jquery.foundation.navigation.js"
37
+ javascript "#{js_path}/jquery.foundation.reveal.js", :to => "foundation/jquery.foundation.reveal.js"
38
+ javascript "#{js_path}/jquery.foundation.orbit.js", :to => "foundation/jquery.foundation.orbit.js"
39
+
40
+ # Customizable Javascript
41
+ javascript "#{js_path}/app.js", :to => "app.js"
30
42
 
31
43
  # Make sure you list all the project template files here in the manifest.
32
- html 'index.html'
44
+ html 'index.html', :erb => true
33
45
  file 'humans.txt'
34
46
  file 'robots.txt'
35
47
  file 'MIT-LICENSE.txt'
data/templates/project/sass/_settings.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import "foundation/modular-scale";
2
+
1
3
  // Settings file containing Foundation defaults
2
4
 
3
5
  // Grid Settings
data/templates/project/sass/app.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @import "foundation/base";
1
2
  /* --------------------------------------------------
2
3
  Table of Contents
3
4
  -----------------------------------------------------
data/test.html CHANGED
@@ -32,151 +32,129 @@
32
32
  </head>
33
33
  <body>
34
34
 
35
- <!-- container -->
36
- <div class="container">
37
-
38
- <div class="row">
39
- <div class="twelve columns">
40
- <h2>Foundation Testbed</h2>
41
- <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>
42
- <hr />
43
- </div>
44
- </div>
45
-
46
- <div class="row">
47
- <div class="twelve columns">
48
- <ul class="nav-bar">
49
- <li class="active"><a href="#" class="main">Nav Item 1</a></li>
50
- <li class="has-flyout">
51
- <a href="#">Nav Item 2</a>
52
- <a href="#" class="flyout-toggle"><span> </span></a>
53
- <ul class="flyout">
54
- <li><a href="#">Sub Nav Item 1</a></li>
55
- <li><a href="#">Sub Nav Item 2</a></li>
56
- <li><a href="#">Sub Nav 3</a></li>
57
- <li><a href="#">Sub Nav 4</a></li>
58
- <li><a href="#">Sub Nav Item 5</a></li>
35
+
36
+ <div class="row">
37
+ <div class="eight columns">
38
+ <h4>Visibility Classes</h4>
39
+ <p>Foundation 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.</p>
40
+
41
+ <h5>Screen Size</h5>
42
+ <p>The following text should describe the device you're using:
43
+ <strong class="show-for-xlarge">You are on a very large screen.</strong>
44
+ <strong class="show-for-large">You are on a large screen.</strong>
45
+ <strong class="show-for-large-up">You are on a large or very large screen.</strong>
46
+ <strong class="show-for-medium">You are on a medium screen.</strong>
47
+ <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
48
+ <strong class="show-for-small">You are on a small screen, like a smartphone.</strong>
49
+ </p>
50
+
51
+ <p>This example uses the opposite rules, so the following text should inversely describe the device you're using:
52
+ <strong class="hide-for-xlarge">You are not on a very large screen.</strong>
53
+ <strong class="hide-for-large">You are not on a large screen.</strong>
54
+ <strong class="hide-for-large-up">You are not on a large or very large screen.</strong>
55
+ <strong class="hide-for-medium-down">You are not on a medium or small screen.</strong>
56
+ <strong class="hide-for-medium">You are not on a medium screen.</strong>
57
+ <strong class="hide-for-small">You are not on a small screen.</strong>
58
+ </p>
59
+
60
+ <h5>Orientation Detection</h5>
61
+ <p>The following text should describe the device you're using:
62
+ <strong class="show-for-landscape">You are in landscape orientation.</strong>
63
+ <strong class="show-for-portrait">You are in portrait orientation.</strong>
64
+ </p>
65
+
66
+ <h5>Touch Detection</h5>
67
+ <p>The following text should describe the device you're using:
68
+ <strong class="show-for-touch">You are on a touch-enabled device.</strong>
69
+ <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
70
+ </p>
71
+
72
+
73
+ <h4>Accordion</h4>
74
+
75
+ <ul class="accordion">
76
+ <li class="active">
77
+ <div class="title">
78
+ <h5>Accordion Panel 1</h5>
79
+ </div>
80
+ <div class="content">
81
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
82
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
83
+ </div>
84
+ </li>
85
+ <li>
86
+ <div class="title">
87
+ <h5>Accordion Panel 2</h5>
88
+ </div>
89
+ <div class="content">
90
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
91
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
92
+ </div>
93
+ </li>
94
+ <li>
95
+ <div class="title">
96
+ <h5>Accordion Panel 3</h5>
97
+ </div>
98
+ <div class="content">
99
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
100
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
101
+ </div>
102
+ </li>
103
+ </ul>
104
+
105
+
106
+ <ul class="radius button-group">
107
+ <li>
108
+ <input type="submit" value="Save" class="medium secondary button" />
109
+ </li>
110
+ <li>
111
+ <input type="submit" value="Publish" class="medium success button" />
112
+ </li>
113
+ </ul>
114
+
115
+ <p>
116
+ <input type="submit" value="Publish" class="medium success button" />
117
+ <a href="" class="success button">Publish</a>
118
+ </p>
119
+
120
+ <p>
121
+ <a href="" class="disabled button">Publish</a> <a href="" class="disabled success button">Publish</a> <a href="" class="disabled alert button">Publish</a> <a href="" class="disabled secondary button">Publish</a>
122
+ </p>
123
+
124
+ <ul class="radius button-group">
125
+ <li>
126
+ <a href="" class="button">Save</a>
127
+ </li>
128
+ <li>
129
+ <a href="" class="button">Publish</a>
130
+ </li>
131
+ <li>
132
+ <div href="#" class="button split dropdown">
133
+ <a href="#">Split Button</a>
134
+ <span></span>
135
+ <ul>
136
+ <li><a href="#">Dropdown Item</a></li>
137
+ <li><a href="#">Another Dropdown Item</a></li>
138
+ <li class="divider"></li>
139
+ <li><a href="#">Last Item</a></li>
59
140
  </ul>
60
- </li>
61
- <li class="has-flyout">
62
- <a href="#">Nav Item 3</a>
63
- <a href="#" class="flyout-toggle"><span> </span></a>
64
- <div class="flyout">
65
- <div class="row">
66
- <div class="twelve columns">
67
- <h5>Medium Example (400px)</h5>
68
- <div class="row">
69
- <div class="six columns">
70
- <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>
71
- </div>
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>
76
- </div>
77
- </div>
78
- </li>
79
- <li class="has-flyout hide-on-tablets">
80
- <a href="#">Nav Item 4</a>
81
- <a href="#" class="flyout-toggle"><span> </span></a>
82
- <div class="flyout large right">
83
- <div class="row">
84
- <div class="twelve columns">
85
- <h5>Large Example (600px)</h5>
86
- <div class="row">
87
- <div class="four columns">
88
- <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>
89
- <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>
90
- </div>
91
- <div class="four columns">
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
- <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>
94
- </div>
95
- <div class="four columns">
96
- <img src="http://placehold.it/200x250" />
97
- </div>
98
- </div>
99
- </div>
100
- </div>
101
- </li>
102
- </ul>
103
- </div>
104
- </div>
105
-
106
- <div class="row">
107
- <div class="eight columns">
108
-
109
- <div id="orbitTest">
110
- <div><a href="http://www.zurb.com"><img src="marketing/images/orbit-demo/demo1.jpg" /></a></div>
111
- <div><a href="http://www.zurb.com"><img src="marketing/images/orbit-demo/demo2.jpg" /></a></div>
112
- <div><a href="http://www.zurb.com"><img src="marketing/images/orbit-demo/demo3.jpg" /></a></div>
113
- </div>
114
-
115
-
116
- <div class="button-bar">
117
- <ul class="button-group">
118
- <li><a href="#" class="secondary button">Button 1</a></li>
119
- <li><a href="#" class="secondary button">Button 2</a></li>
120
- <li><a href="#" class="secondary button">Button 3</a></li>
121
- </ul>
122
-
123
- <ul class="button-group">
124
- <li><a href="#" class="secondary button">Button 1</a></li>
125
- <li><a href="#" class="secondary button">Button 2</a></li>
126
- <li><a href="#" class="secondary button">Button 3</a></li>
127
- </ul>
128
- </div>
129
-
130
- <ul class="button-group radius">
131
- <li><a href="#" class="button radius">Button 1</a></li>
132
- <li><a href="#" class="button radius">Button 2</a></li>
133
- <li><a href="#" class="button radius">Button 3</a></li>
134
- </ul>
135
-
136
- <ul class="button-group rounded">
137
- <li><a href="#" class="button radius">Button 1</a></li>
138
- <li><a href="#" class="button radius">Button 2</a></li>
139
- <li><a href="#" class="button radius">Button 3</a></li>
140
- </ul>
141
-
142
- <ul class="button-group even three-up">
143
- <li><a href="#" class="small button">Button 1</a></li>
144
- <li><a href="#" class="small button">Button 2</a></li>
145
- <li><a href="#" class="small button">Button 3</a></li>
146
- </ul>
147
-
148
- <div href="#" class="large button dropdown up">
149
- Dropdown Button
150
- <ul>
151
- <li><a href="#">Dropdown Item</a></li>
152
- <li><a href="#">Another Dropdown Item</a></li>
153
- <li class="divider"></li>
154
- <li><a href="#">Last Item</a></li>
155
- </ul>
156
- </div>
157
-
158
- <div href="#" class="large alert button split dropdown">
159
- <a href="#">Split Button</a>
160
- <span></span>
161
- <ul>
162
- <li><a href="#">Dropdown Item</a></li>
163
- <li><a href="#">Another Dropdown Item</a></li>
164
- <li class="divider"></li>
165
- <li><a href="#">Last Item</a></li>
166
- </ul>
167
- </div>
168
- <br><br>
169
- <div href="#" class="button dropdown">
170
- Dropdown Button
171
- <ul>
172
- <li><a href="#">Dropdown Item</a></li>
173
- <li><a href="#">Another Dropdown Item</a></li>
174
- <li class="divider"></li>
175
- <li><a href="#">Last Item</a></li>
176
- </ul>
177
- </div>
178
-
179
- <div href="#" class="alert button split dropdown">
141
+ </div>
142
+ </li>
143
+ <li>
144
+ <div href="#" class="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
+ </li>
154
+ </ul>
155
+
156
+ <p>
157
+ <div href="#" class="large secondary button split dropdown">
180
158
  <a href="#">Split Button</a>
181
159
  <span></span>
182
160
  <ul>
@@ -186,554 +164,42 @@
186
164
  <li><a href="#">Last Item</a></li>
187
165
  </ul>
188
166
  </div>
189
- <br><br>
190
- <div href="#" class="small button dropdown">
191
- Dropdown Button
192
- <ul>
193
- <li><a href="#">Dropdown Item</a></li>
194
- <li><a href="#">Another Dropdown Item</a></li>
195
- <li class="divider"></li>
196
- <li><a href="#">Last Item</a></li>
197
- </ul>
198
- </div>
199
-
200
- <div href="#" class="small alert button split dropdown">
201
- <a href="#">Split Button</a>
202
- <span></span>
203
- <ul>
204
- <li><a href="#">Dropdown Item</a></li>
205
- <li><a href="#">Another Dropdown Item</a></li>
206
- <li class="divider"></li>
207
- <li><a href="#">Last Item</a></li>
208
- </ul>
167
+ </p>
168
+
169
+ </div>
170
+
171
+ <div class="four columns">
172
+ <div class="row">
173
+ <div class="six columns">
174
+ <img src="http://placehold.it/200x200" />
209
175
  </div>
210
- <br><br>
211
- <div href="#" class="tiny button dropdown">
212
- Dropdown Button
213
- <ul>
214
- <li><a href="#">Dropdown Item</a></li>
215
- <li><a href="#">Another Dropdown Item</a></li>
216
- <li class="divider"></li>
217
- <li><a href="#">Last Item</a></li>
218
- </ul>
176
+ <div class="six columns">
177
+ <img src="http://placehold.it/200x200" />
219
178
  </div>
220
-
221
- <div href="#" class="tiny alert button split dropdown">
222
- <a href="#">Split Button</a>
223
- <span></span>
224
- <ul>
225
- <li><a href="#">Dropdown Item</a></li>
226
- <li><a href="#">Another Dropdown Item</a></li>
227
- <li class="divider"></li>
228
- <li><a href="#">Last Item</a></li>
229
- </ul>
230
- </div>
231
-
232
- <p class="show-for-xlarge">This is a <strong>very large</strong> display.</p>
233
- <p class="show-for-large">This is a <strong>large</strong> display.</p>
234
- <p class="show-for-medium">This is a <strong>medium (tablet)</strong> display.</p>
235
- <p class="show-for-small">This is a <strong>small (phone)</strong> display.</p>
236
-
237
- <p class="hide-for-xlarge">This is <strong>not</strong> a <strong>very large</strong> display.</p>
238
- <p class="hide-for-large">This is <strong>not</strong> a <strong>large</strong> display.</p>
239
- <p class="hide-for-medium">This is <strong>not</strong> a <strong>medium (tablet)</strong> display.</p>
240
- <p class="hide-for-small">This is <strong>not</strong> a <strong>small (phone)</strong> display.</p>
241
-
242
- <p class="hide-for-touch">This is <strong>not</strong> a <strong>touch-enabled</strong> device.</p>
243
- <p class="show-for-touch">This is a <strong>touch-enabled</strong> device.</p>
244
-
245
- <p class="show-for-landscape">This is <strong>landscape</strong> orientation.</p>
246
- <p class="hide-for-landscape">This is <strong>not landscape</strong> orientation.</p>
247
-
248
- <p class="show-for-portrait">This is <strong>portrait</strong> orientation.</p>
249
- <p class="hide-for-portrait">This is <strong>not portrait</strong> orientation.</p>
250
-
251
- <h3>The Grid</h3>
252
-
253
- <div class="display-grid">
254
- <div class="row">
255
- <div class="four columns">
256
- .four.columns
257
- </div>
258
- <div class="four columns">
259
- .four.columns
260
- </div>
261
- <div class="four columns">
262
- .four.columns
263
- </div>
264
- </div>
265
- <div class="row">
266
- <div class="three columns">
267
- .three.columns
268
- </div>
269
- <div class="six columns">
270
- .six.columns
271
- </div>
272
- <div class="three columns">
273
- .three.columns
274
- </div>
275
- </div>
276
- <div class="row">
277
- <div class="two columns">
278
- .two.columns
279
- </div>
280
- <div class="eight columns">
281
- .eight.columns
282
- </div>
283
- <div class="two columns">
284
- .two.columns
285
- </div>
286
- </div>
287
- <div class="row">
288
- <div class="one columns">
289
- .one
290
- </div>
291
- <div class="eleven columns">
292
- .eleven.columns
293
- </div>
294
- </div>
295
- <div class="row">
296
- <div class="two columns">
297
- .two.columns
298
- </div>
299
- <div class="ten columns">
300
- .ten.columns
301
- </div>
302
- </div>
303
- <div class="row">
304
- <div class="three columns">
305
- .three.columns
306
- </div>
307
- <div class="nine columns">
308
- .nine.columns
309
- </div>
310
- </div>
311
- <div class="row">
312
- <div class="four columns">
313
- .four.columns
314
- </div>
315
- <div class="eight columns">
316
- .eight.columns
317
- </div>
318
- </div>
319
- <div class="row">
320
- <div class="five columns">
321
- .five
322
- </div>
323
- <div class="seven columns">
324
- .seven.columns
325
- </div>
326
- </div>
327
- <div class="row">
328
- <div class="six columns">
329
- .six.columns
330
- </div>
331
- <div class="six columns">
332
- .six.columns
333
- </div>
334
- </div>
335
- <div class="row">
336
- <div class="seven columns">
337
- .seven.columns
338
- </div>
339
- <div class="five columns">
340
- .five.columns
341
- </div>
342
- </div>
343
- <div class="row">
344
- <div class="eight columns">
345
- .eight.columns
346
- </div>
347
- <div class="four columns">
348
- .four.columns
349
- </div>
350
- </div>
351
- <div class="row">
352
- <div class="nine columns">
353
- .nine.columns
354
- </div>
355
- <div class="three columns">
356
- .three.columns
357
- </div>
358
- </div>
359
- <div class="row">
360
- <div class="ten columns">
361
- .ten.columns
362
- </div>
363
- <div class="two columns">
364
- .two.columns
365
- </div>
366
- </div>
367
- <div class="row">
368
- <div class="eleven columns">
369
- .eleven.columns
370
- </div>
371
- <div class="one columns">
372
- .one
373
- </div>
374
- </div>
375
- <div class="row">
376
- <div class="twelve columns">
377
- .twelve.columns
378
- </div>
379
- </div>
380
- </div>
381
-
382
- <h3>Tabs</h3>
383
- <dl class="pill tabs contained">
384
- <dd class="active"><a href="#simple1">Complex Form Content</a></dd>
385
- <dd><a href="#simple2">Modal Dialog Call</a></dd>
386
- <dd><a href="#simple3">UI Elements</a></dd>
387
- </dl>
388
-
389
- <ul class="tabs-content contained">
390
- <li class="active" id="simple1Tab">
391
- <form>
392
- <label>Label</label>
393
- <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
394
-
395
- <p>This is a paragraph with an inline select element.
396
- <select>
397
- <option>Option 1</option>
398
- </select>
399
- </p>
400
-
401
- <input type="submit" class="primary button" value="Submit Input" />
402
- </form>
403
-
404
- <form class="nice">
405
- <label>Nice Form Label</label>
406
- <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
407
-
408
- <p>This is a paragraph with an inline select element.
409
- <select>
410
- <option>Option 1</option>
411
- </select>
412
- </p>
413
-
414
- <input type="submit" class="nice primary button" value="Submit Input" />
415
- </form>
416
-
417
- <form class="custom">
418
- <label>Custom Form Label</label>
419
- <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
420
-
421
- <p>This is a paragraph with an inline select element.
422
- <select class="small">
423
- <option></option>
424
- <option>Option 1</option>
425
- <option>Option 2</option>
426
- <option>Option 3</option>
427
- <option>Option 4</option>
428
- <option>Option 5</option>
429
- <option>Option 6</option>
430
- </select>
431
- </p>
432
-
433
- <p>This is a paragraph with an inline select element.
434
- <select>
435
- <option>Option 1</option>
436
- <option>Option 2</option>
437
- <option>Option 3</option>
438
- <option>Option 4</option>
439
- <option>Option 5</option>
440
- <option>Option 6</option>
441
- </select>
442
- </p>
443
-
444
- <input type="submit" class="nice primary button" value="Submit Input" />
445
- </form>
446
-
447
- </li>
448
- <li id="simple2Tab">
449
- <p>This button calls a modal from within the tabs.</p>
450
- <a href="#" data-reveal-id="testModal" class="nice primary button">Fire Reveal Modal</a>
451
-
452
- <form class="custom">
453
- <label>Custom Form Label</label>
454
- <input type="text" class="input-text expand" placeholder="input.input-text.expand" />
455
-
456
- <p>This is a paragraph with an inline select element.
457
- <select class="small">
458
- <option></option>
459
- <option>Option 1</option>
460
- <option>Option 2</option>
461
- <option>Option 3</option>
462
- <option>Option 4</option>
463
- <option>Option 5</option>
464
- <option>Option 6</option>
465
- </select>
466
- </p>
467
-
468
- <p>This is a paragraph with an inline select element.
469
- <select>
470
- <option>Option 1</option>
471
- <option>Option 2</option>
472
- <option>Option 3</option>
473
- <option>Option 4</option>
474
- <option>Option 5</option>
475
- <option>Option 6</option>
476
- </select>
477
- </p>
478
-
479
- <input type="submit" class="nice primary button" value="Submit Input" />
480
- </form>
481
- </li>
482
- <li id="simple3Tab">
483
- <div class="alert-box success">
484
- This is a success alert (div.alert-box.success).
485
- <a href="" class="close">&times;</a>
486
- </div>
487
-
488
- <p>
489
- <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!
490
- </p>
491
-
492
- <ul class="pagination">
493
- <li class="unavailable"><a href="">&laquo;</a></li>
494
- <li class="current"><a href="">1</a></li>
495
- <li><a href="">2</a></li>
496
- <li><a href="">3</a></li>
497
- <li><a href="">4</a></li>
498
- <li class="unavailable"><a href="">&hellip;</a></li>
499
- <li><a href="">12</a></li>
500
- <li><a href="">13</a></li>
501
- <li><a href="">&raquo;</a></li>
502
- </ul>
503
- </li>
504
- </ul>
505
-
506
- <h3>Buttons</h3>
507
- <div class="row">
508
- <div class="six columns">
509
- <p><a href="#" class="tiny secondary button">Tiny Secondary Button</a></p>
510
- <p><a href="#" class="small primary button">Small Primary Button</a></p>
511
- <p><a href="#" class="alert button">Medium Alert Button</a></p>
512
- <p><a href="#" class="large success button">Large Success Button</a></p>
513
- </div>
514
- <div class="six columns">
515
- <p><a href="#" class="nice radius tiny secondary button">Tiny Secondary Button</a></p>
516
- <p><a href="#" class="nice radius small primary button">Nice Primary Button</a></p>
517
- <p><a href="#" class="nice radius alert button">Nice Alert Button</a></p>
518
- <p><a href="#" class="nice radius large success button">Nice Success Button</a></p>
519
- </div>
520
- </div>
521
-
522
- <h3>Reveal</h3>
523
- <div class="row">
524
- <div class="six columns">
525
- <h6>Data Attributes</h6>
526
- <p>
527
- <a href="#" class="tiny primary button" data-reveal-id="testModal">Default</a>
528
- <a href="#" class="tiny primary button" data-reveal-id="testModal" data-animation="fade">Fade</a>
529
- <a href="#" class="tiny primary button" data-reveal-id="testModal" data-animation="none">None</a>
530
- </p>
531
- <h6>JavaScript</h6>
532
- <p>
533
- <a href="#" id="fireReveal" class="tiny primary button">Default</a>
534
- <a href="#" id="fireRevealFade" class="tiny primary button">Fade</a>
535
- <a href="#" id="fireRevealNone" class="tiny primary button">None</a>
536
- </p>
537
- </div>
538
- </div>
539
-
540
- <h3>Disabled Forms</h3>
541
- <form class="custom">
542
-
543
- <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display: none; "> Radio Button 1</label>
544
- <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display: none; "> Radio Button 2</label>
545
- <label for="radio3"><input name="radio1" disabled="DISABLED" type="radio" id="radio3" style="display: none; "> Radio Button 3</label>
546
-
547
- <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none; "> Label for Checkbox</label>
548
- <label for="checkbox2"><input type="checkbox" id="checkbox2" checked="" style="display: none; "> Label for Checkbox</label>
549
- <label for="checkbox3"><input type="checkbox" disabled="DISABLED" checked="" id="checkbox3" style="display: none; "> Label for Checkbox</label>
550
-
551
- <h3>Forms</h3>
552
-
553
- <form>
554
- <div class="row">
555
- <div class="two columns">
556
- <label class="right">Street</label>
557
- </div>
558
- <div class="ten columns">
559
- <input type="text" placeholder="123 Main St." />
560
- </div>
561
- </div>
562
- <div class="row">
563
- <div class="two columns">
564
- <label class="right">City, ZIP</label>
565
- </div>
566
- <div class="eight columns">
567
- <input type="text" placeholder="Campbell" />
568
- </div>
569
- <div class="two columns">
570
- <select>
571
- <option>CA</option>
572
- </select>
573
- </div>
574
- </div>
575
- </form>
576
-
577
- <form>
578
- <label>This is a label.</label>
579
- <input type="text" placeholder="Standard Input" />
580
-
581
- <label>This is another label.</label>
582
- <input type="text" class="twelve" placeholder="Large input" />
583
-
584
- <label>Address</label>
585
- <input type="text" class="twelve" placeholder="Street" />
586
- <div class="row">
587
- <div class="six columns">
588
- <div class="row collapse">
589
- <div class="nine columns">
590
- <input type="text" />
591
- </div>
592
- <div class="three columns">
593
- <a href="#" class="button postfix">Go!</a>
594
- </div>
595
- </div>
596
- </div>
597
- <div class="three columns">
598
- <div class="row collapse">
599
- <div class="eight columns">
600
- <input type="text" />
601
- </div>
602
- <div class="four columns">
603
- <span class="postfix">.com</span>
604
- </div>
605
- </div>
606
- </div>
607
- <div class="three columns">
608
- <div class="row collapse">
609
- <div class="two columns">
610
- <span class="prefix">@</span>
611
- </div>
612
- <div class="ten columns">
613
- <input type="text" />
614
- </div>
615
- </div>
616
- </div>
617
- </div>
618
-
619
- <fieldset>
620
-
621
- <legend>Fieldset Name</legend>
622
-
623
- <label>This is a label.</label>
624
- <input type="text" placeholder="Standard Input" />
625
-
626
- <label>This is another label.</label>
627
- <input type="text" class="twelve" placeholder="Large input" />
628
-
629
- <label>Address</label>
630
- <input type="text" class="twelve" />
631
- <input type="text" class="six" />
632
- <input type="text" class="three" />
633
- <input type="text" class="three" />
634
-
635
- </fieldset>
636
-
637
- </form>
638
-
639
-
640
- <h3>Disabled Forms</h3>
641
- <form class="custom">
642
- <p>
643
- <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display: none; "> Radio Button 1</label>
644
- <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display: none; "> Radio Button 2</label>
645
- <label for="radio3"><input name="radio1" disabled="DISABLED" type="radio" id="radio3" style="display: none; "> Radio Button 3</label>
646
- </p>
647
-
648
- <p>
649
- <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none; "> Label for Checkbox</label>
650
- <label for="checkbox2"><input type="checkbox" id="checkbox2" checked="" style="display: none; "> Label for Checkbox</label>
651
- <label for="checkbox3"><input type="checkbox" disabled="DISABLED" checked="" id="checkbox3" style="display: none; "> Label for Checkbox</label>
652
- </p>
653
-
654
-
655
-
656
- <p>This is a paragraph with an inline select element.
657
-
658
- <select disabled="DISABLED">
659
- <option>Option 1</option>
660
- <option>Option 2</option>
661
- <option>Option 3</option>
662
- <option>Option 4</option>
663
- <option>Option 5</option>
664
- <option>Option 6</option>
665
- </select>
666
- </p>
667
- </form>
668
-
669
- </div>
670
-
671
- <div class="four columns">
672
-
673
- <dl class="sub-nav">
674
- <dt>Filter:</dt>
675
- <dd class="active"><a href="#">All</a></dd>
676
- <dd><a href="#">Active</a></dd>
677
- <dd><a href="#">Pending</a></dd>
678
- </dl>
679
-
680
- <h4>Other Resources</h4>
681
- <p>Once you've exhausted the fun in this document, you should check out:</p>
682
- <ul class="disc">
683
- <li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
684
- <li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
685
- <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>
686
- </ul>
687
-
688
- <p><a href="#" class="tiny secondary button">Tiny secondary Button</a></p>
689
-
690
- <ul class="block-grid three-up">
691
- <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
692
- <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
693
- <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
694
- <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
695
- <li><img src="http://placehold.it/400x300" alt="placeholder" /></li>
696
- </ul>
697
- </div>
698
- </div>
699
-
700
- </div>
701
- <!-- container -->
702
-
703
-
704
-
705
- <div id="testModal" class="reveal-modal expand">
706
- <h2>Awesome. I have it.</h2>
707
- <p class="lead">Your couch. It's mine.</p>
708
- <form class="nice custom">
709
- <label>Custom Form Label</label>
710
- <input type="text" class="expand" placeholder="input.expand" />
711
-
712
- <p>This is a paragraph with an inline select element.
713
- <select>
714
- <option>Option 1</option>
715
- <option>Option 2</option>
716
- <option>Option 3</option>
717
- <option>Option 4</option>
718
- <option>Option 5</option>
719
- <option>Option 6</option>
720
- <option>Option 7</option>
721
- </select>
722
- </p>
723
-
724
- <input type="submit" class="nice primary button" value="Submit Input" />
725
- </form>
726
- <a class="close-reveal-modal">&#215;</a>
179
+ </div>
180
+
181
+ <ul class="block-grid two-up">
182
+ <li><img src="http://placehold.it/200x200" /></li>
183
+ <li><img src="http://placehold.it/200x200" /></li>
184
+ </ul>
185
+ </div>
727
186
  </div>
187
+
188
+
728
189
 
729
190
 
730
191
  <!-- Included JS Files -->
731
- <script src="vendor/assets/javascripts/foundation/jquery.min.js"></script>
732
- <script src="vendor/assets/javascripts/foundation/jquery.reveal.js"></script>
733
- <script src="vendor/assets/javascripts/foundation/jquery.orbit-1.4.0.js"></script>
734
- <script src="vendor/assets/javascripts/foundation/jquery.customforms.js"></script>
735
- <script src="vendor/assets/javascripts/foundation/jquery.placeholder.min.js"></script>
736
- <script src="vendor/assets/javascripts/foundation/jquery.tooltips.js"></script>
192
+ <script src="vendor/assets/javascripts/foundation/jquery.js"></script>
193
+ <script src="vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
194
+
195
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
196
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
197
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
198
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
199
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
200
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
201
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
202
+ <script src="vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
737
203
  <script src="vendor/assets/javascripts/foundation/app.js"></script>
738
204
 
739
205
  <script>