zurb-foundation 3.0.7 → 3.0.8.rc1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +2 -0
- data/CONTRIBUTING.md +43 -0
- data/Gemfile.lock +2 -27
- data/README.md +2 -2
- data/foundation.gemspec +1 -3
- data/index.html +12 -6
- data/lib/foundation/version.rb +1 -1
- data/lib/zurb-foundation.rb +11 -4
- data/{stylesheets → scss}/foundation/_settings.scss +17 -2
- data/{stylesheets → scss}/foundation/common/_base.scss +0 -0
- data/{stylesheets → scss}/foundation/common/_forms.scss +2 -2
- data/{stylesheets → scss}/foundation/common/_globals.scss +3 -0
- data/{stylesheets → scss}/foundation/common/_typography.scss +7 -5
- data/{stylesheets → scss}/foundation/components/_grid.scss +34 -19
- data/{stylesheets → scss}/foundation/components/modules/_all.scss +1 -1
- data/{stylesheets → scss}/foundation/components/modules/_buttons.scss +14 -12
- data/{stylesheets → scss}/foundation/components/modules/_navbar.scss +0 -0
- data/{stylesheets → scss}/foundation/components/modules/_offcanvas.scss +0 -0
- data/{stylesheets → scss}/foundation/components/modules/_orbit.scss +0 -0
- data/{stylesheets → scss}/foundation/components/modules/_reveal.scss +1 -0
- data/{stylesheets → scss}/foundation/components/modules/_tabs.scss +6 -4
- data/{stylesheets → scss}/foundation/components/modules/_ui.scss +19 -29
- data/{stylesheets → scss}/foundation/functions/_all.scss +0 -0
- data/{stylesheets → scss}/foundation/functions/_convert-number-to-word.scss +0 -0
- data/{stylesheets → scss}/foundation/functions/_grid-calc.scss +0 -0
- data/{stylesheets → scss}/foundation/functions/_modular-scale.sass +0 -0
- data/{stylesheets → scss}/foundation/mixins/_all.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_clearfix.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_css-triangle.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_font-size.scss +2 -0
- data/{stylesheets → scss}/foundation/mixins/_respond-to.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_semantic-grid.scss +28 -8
- data/{stylesheets → scss}/foundation.scss +2 -2
- data/templates/project/index.html +12 -12
- data/templates/project/manifest.rb +27 -42
- data/templates/project/{sass → scss}/_settings.scss +17 -0
- data/templates/project/{sass → scss}/app.scss +4 -4
- data/templates/upgrade/manifest.rb +39 -0
- data/test/buttons.html +184 -0
- data/test/config.rb +11 -0
- data/test/elements.html +339 -0
- data/test/forms.html +376 -0
- data/test/grid.html +560 -0
- data/test/images/orbit-demo/demo1.jpeg +0 -0
- data/test/images/orbit-demo/demo2.jpeg +0 -0
- data/test/images/orbit-demo/demo3.jpeg +0 -0
- data/test/images/orbit-demo/slider-background.jpeg +0 -0
- data/test/index.html +84 -0
- data/test/navigation.html +239 -0
- data/test/orbit.html +106 -0
- data/test/reveal.html +78 -0
- data/test/scss/_settings.scss +75 -0
- data/test/scss/styles.scss +2 -0
- data/test/tabs.html +184 -0
- data/test/template.html +60 -0
- data/test/type.html +194 -0
- data/vendor/assets/javascripts/foundation/app.js +5 -4
- data/vendor/assets/javascripts/foundation/index.js +1 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.buttons.js +6 -2
- data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +7 -7
- data/vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js +21 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js +2 -1
- metadata +73 -75
- data/config/assets.yml +0 -58
- data/public/assets/foundation.js +0 -11
- data/public/assets/jquery.js +0 -23
- data/test.html +0 -232
- data/test2.html +0 -320
- data/type.html +0 -134
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
3
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
6
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8" />
|
|
9
|
+
|
|
10
|
+
<!-- Set the viewport width to device width for mobile -->
|
|
11
|
+
<meta name="viewport" content="width=device-width" />
|
|
12
|
+
|
|
13
|
+
<title>Foundation Navigation Testing</title>
|
|
14
|
+
|
|
15
|
+
<!-- Included CSS Files -->
|
|
16
|
+
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
17
|
+
|
|
18
|
+
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
|
|
19
|
+
|
|
20
|
+
<!-- IE Fix for HTML5 Tags -->
|
|
21
|
+
<!--[if lt IE 9]>
|
|
22
|
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
23
|
+
<![endif]-->
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
|
|
27
|
+
<div class="row">
|
|
28
|
+
<div class="twelve columns">
|
|
29
|
+
<p><a href="index.html">« Back</a></p>
|
|
30
|
+
<h2>Foundation Navigation Testing</h2>
|
|
31
|
+
<hr />
|
|
32
|
+
<dl class="sub-nav">
|
|
33
|
+
<dt>Go to:</dt>
|
|
34
|
+
<dd><a href="#nav-bar">Nav Bar</a></dd>
|
|
35
|
+
<dd><a href="#vertical-nav">Vertical Nav</a></dd>
|
|
36
|
+
<dd><a href="#side-nav">Side Nav</a></dd>
|
|
37
|
+
<dd><a href="#sub-nav">Sub Nav</a></dd>
|
|
38
|
+
<dd><a href="#pagination">Pagination</a></dd>
|
|
39
|
+
</dl>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- Test Foundation Components Here -->
|
|
44
|
+
<div class="row">
|
|
45
|
+
<div class="twelve columns">
|
|
46
|
+
<h3>Navigation</h3>
|
|
47
|
+
<h4 class="subheader">Direct users around in style. There are navigation options for a number of situations, and everything is designed to work cross-device.</h4>
|
|
48
|
+
|
|
49
|
+
<br>
|
|
50
|
+
|
|
51
|
+
<div class="row">
|
|
52
|
+
<div class="four columns">
|
|
53
|
+
<a name="nav-bar"></a>
|
|
54
|
+
<h4>Nav Bar</h4>
|
|
55
|
+
<p>The default top nav bar for Foundation includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content).</p>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="eight columns">
|
|
58
|
+
<ul class="nav-bar">
|
|
59
|
+
<li class="active"><a href="#">Nav Item 1</a></li>
|
|
60
|
+
<li class="has-flyout">
|
|
61
|
+
<a href="#">Nav Item 2</a>
|
|
62
|
+
<a href="#" class="flyout-toggle"><span> </span></a>
|
|
63
|
+
<ul class="flyout">
|
|
64
|
+
<li><a href="#">Sub Nav Item 1</a></li>
|
|
65
|
+
<li><a href="#">Sub Nav Item 2</a></li>
|
|
66
|
+
<li><a href="#">Sub Nav 3</a></li>
|
|
67
|
+
<li><a href="#">Sub Nav 4</a></li>
|
|
68
|
+
<li><a href="#">Sub Nav Item 5</a></li>
|
|
69
|
+
</ul>
|
|
70
|
+
</li>
|
|
71
|
+
<li class="has-flyout">
|
|
72
|
+
<a href="#">Nav Item 3</a>
|
|
73
|
+
<a href="#" class="flyout-toggle"><span> </span></a>
|
|
74
|
+
<div class="flyout">
|
|
75
|
+
<h5>Regular Dropdown</h5>
|
|
76
|
+
<div class="row">
|
|
77
|
+
<div class="six columns">
|
|
78
|
+
<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>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="six columns">
|
|
81
|
+
<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>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</li>
|
|
86
|
+
<li class="has-flyout">
|
|
87
|
+
<a href="#">Nav Item 4</a>
|
|
88
|
+
<a href="#" class="flyout-toggle"><span> </span></a>
|
|
89
|
+
<div class="flyout large right">
|
|
90
|
+
<h5>Large Dropdown</h5>
|
|
91
|
+
<div class="row">
|
|
92
|
+
<div class="four columns">
|
|
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
|
+
<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>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="four columns">
|
|
97
|
+
<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>
|
|
98
|
+
<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>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="four columns">
|
|
101
|
+
<img src="http://placehold.it/200x250" />
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</li>
|
|
106
|
+
</ul>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<br><br>
|
|
111
|
+
|
|
112
|
+
<div class="row">
|
|
113
|
+
<div class="four columns">
|
|
114
|
+
<a name="vertical-nav"></a>
|
|
115
|
+
<h4>Vertical Nav</h4>
|
|
116
|
+
<p>The same nav bar seen above, with the same structure, can be made a vertical nav bar that still supports flyout content by adding a class of <code>.vertical</code> to the element.</p>
|
|
117
|
+
</div>
|
|
118
|
+
<br>
|
|
119
|
+
<div class="five columns end">
|
|
120
|
+
<ul class="nav-bar vertical">
|
|
121
|
+
<li class="active"><a href="#">Nav Item 1</a></li>
|
|
122
|
+
<li class="has-flyout">
|
|
123
|
+
<a href="#">Nav Item 2</a>
|
|
124
|
+
<a href="#" class="flyout-toggle"><span> </span></a>
|
|
125
|
+
<ul class="flyout">
|
|
126
|
+
<li><a href="#">Sub Nav Item 1</a></li>
|
|
127
|
+
<li><a href="#">Sub Nav Item 2</a></li>
|
|
128
|
+
<li><a href="#">Sub Nav 3</a></li>
|
|
129
|
+
<li><a href="#">Sub Nav 4</a></li>
|
|
130
|
+
<li><a href="#">Sub Nav Item 5</a></li>
|
|
131
|
+
</ul>
|
|
132
|
+
</li>
|
|
133
|
+
<li class="has-flyout">
|
|
134
|
+
<a href="#">Nav Item 3</a>
|
|
135
|
+
<a href="#" class="flyout-toggle"><span> </span></a>
|
|
136
|
+
<div class="flyout">
|
|
137
|
+
<h5>Regular Dropdown</h5>
|
|
138
|
+
<div class="row">
|
|
139
|
+
<div class="six columns">
|
|
140
|
+
<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>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="six columns">
|
|
143
|
+
<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>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</li>
|
|
148
|
+
<li>
|
|
149
|
+
<a href="#">Nav Item 4</a>
|
|
150
|
+
</li>
|
|
151
|
+
</ul>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<br>
|
|
156
|
+
|
|
157
|
+
<div class="row">
|
|
158
|
+
<div class="four columns">
|
|
159
|
+
<a name="side-nav"></a>
|
|
160
|
+
<h4>Side Nav</h4>
|
|
161
|
+
<p>Side nav, like you'll see on the Foundation main site, is useful for sections either of a site or of the page.</p>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="four columns end">
|
|
164
|
+
<ul class="side-nav">
|
|
165
|
+
<li class="active"><a href="#">Link 1</a></li>
|
|
166
|
+
<li><a href="#">Link 2</a></li>
|
|
167
|
+
<li class="divider"></li>
|
|
168
|
+
<li><a href="#">Link 3</a></li>
|
|
169
|
+
<li><a href="#">Link 4</a></li>
|
|
170
|
+
</ul>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<br>
|
|
175
|
+
|
|
176
|
+
<div class="row">
|
|
177
|
+
<div class="four columns">
|
|
178
|
+
<a name="sub-nav"></a>
|
|
179
|
+
<h4>Sub Nav</h4>
|
|
180
|
+
<p>This simple subnav is great for moving between different states of a page.</p>
|
|
181
|
+
</div>
|
|
182
|
+
<br>
|
|
183
|
+
<div class="eight columns">
|
|
184
|
+
<dl class="sub-nav">
|
|
185
|
+
<dt>Filter:</dt>
|
|
186
|
+
<dd class="active"><a href="#">All</a></dd>
|
|
187
|
+
<dd><a href="#">Active</a></dd>
|
|
188
|
+
<dd><a href="#">Pending</a></dd>
|
|
189
|
+
<dd><a href="#">Suspended</a></dd>
|
|
190
|
+
</dl>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<br>
|
|
195
|
+
|
|
196
|
+
<div class="row">
|
|
197
|
+
<div class="four columns">
|
|
198
|
+
<a name="pagination"></a>
|
|
199
|
+
<h4>Pagination</h4>
|
|
200
|
+
<p>Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long repetitive listings or content.</p>
|
|
201
|
+
</div>
|
|
202
|
+
<br>
|
|
203
|
+
<div class="eight columns">
|
|
204
|
+
<ul class="pagination">
|
|
205
|
+
<li class="arrow unavailable"><a href="">«</a></li>
|
|
206
|
+
<li class="current"><a href="">1</a></li>
|
|
207
|
+
<li><a href="">2</a></li>
|
|
208
|
+
<li><a href="">3</a></li>
|
|
209
|
+
<li><a href="">4</a></li>
|
|
210
|
+
<li class="unavailable"><a href="">…</a></li>
|
|
211
|
+
<li><a href="">12</a></li>
|
|
212
|
+
<li><a href="">13</a></li>
|
|
213
|
+
<li class="arrow"><a href="">»</a></li>
|
|
214
|
+
</ul>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<!-- Included JS Files -->
|
|
222
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
223
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
224
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
225
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
226
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
227
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
228
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
229
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
230
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
231
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
232
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
233
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
234
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
235
|
+
<script type="text/javascript">
|
|
236
|
+
// Page-Specific JavaScript Goes Here
|
|
237
|
+
</script>
|
|
238
|
+
</body>
|
|
239
|
+
</html>
|
data/test/orbit.html
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
3
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
6
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8" />
|
|
9
|
+
|
|
10
|
+
<!-- Set the viewport width to device width for mobile -->
|
|
11
|
+
<meta name="viewport" content="width=device-width" />
|
|
12
|
+
|
|
13
|
+
<title>Foundation Orbit Testing</title>
|
|
14
|
+
|
|
15
|
+
<!-- Included CSS Files -->
|
|
16
|
+
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
17
|
+
<style type="text/css">
|
|
18
|
+
#featuredContent > div {background-color:#f8f8f8; padding:20px;}
|
|
19
|
+
</style>
|
|
20
|
+
|
|
21
|
+
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
|
|
22
|
+
|
|
23
|
+
<!-- IE Fix for HTML5 Tags -->
|
|
24
|
+
<!--[if lt IE 9]>
|
|
25
|
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
26
|
+
<![endif]-->
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
|
|
30
|
+
<div class="row">
|
|
31
|
+
<div class="twelve columns">
|
|
32
|
+
<p><a href="index.html">« Back</a></p>
|
|
33
|
+
<h2>Foundation Orbit Testing</h2>
|
|
34
|
+
<hr />
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<!-- Test Foundation Components Here -->
|
|
39
|
+
<div class="row">
|
|
40
|
+
<div class="twelve columns">
|
|
41
|
+
<h3>Orbit</h3>
|
|
42
|
+
<h4 class="subheader">Orbit is an easy to use, powerful image slider built to be responsive, just like Foundation.</h4>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<div class="row">
|
|
46
|
+
<div class="four columns">
|
|
47
|
+
<h4>Image Slider</h4>
|
|
48
|
+
<p>This is an orbit slider that displays images.</p>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="eight columns">
|
|
51
|
+
<div id="featured">
|
|
52
|
+
<img src="images/orbit-demo/demo1.jpeg" />
|
|
53
|
+
<img src="images/orbit-demo/demo2.jpeg" />
|
|
54
|
+
<img src="images/orbit-demo/demo3.jpeg" />
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="row">
|
|
60
|
+
<div class="four columns">
|
|
61
|
+
<h4>Content Slider</h4>
|
|
62
|
+
<p>This is an orbit slider that displays content.</p>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="eight columns">
|
|
65
|
+
<div id="featuredContent">
|
|
66
|
+
<div>
|
|
67
|
+
<h4>This is a content slider.</h4>
|
|
68
|
+
<p>Each slide holds arbitrary content, like text or actions.</p>
|
|
69
|
+
</div>
|
|
70
|
+
<div>
|
|
71
|
+
<h4>We can include text and buttons, like this!</h4>
|
|
72
|
+
<p>We take no responsibility for what happens if you click this button.</p>
|
|
73
|
+
<p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
|
|
74
|
+
</div>
|
|
75
|
+
<div>
|
|
76
|
+
<h4>What? You didn't click it?</h4>
|
|
77
|
+
<p>We'll give you the benefit of the doubt. Maybe you did, and now you're back!</p>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- Included JS Files -->
|
|
86
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
87
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
88
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
89
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
90
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
91
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
92
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
93
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
94
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
95
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
96
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
97
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
98
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
99
|
+
<script type="text/javascript">
|
|
100
|
+
$(window).load(function(){
|
|
101
|
+
$("#featured").orbit();
|
|
102
|
+
$('#featuredContent').orbit({ fluid: '2x1' });
|
|
103
|
+
});
|
|
104
|
+
</script>
|
|
105
|
+
</body>
|
|
106
|
+
</html>
|
data/test/reveal.html
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
3
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
6
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8" />
|
|
9
|
+
|
|
10
|
+
<!-- Set the viewport width to device width for mobile -->
|
|
11
|
+
<meta name="viewport" content="width=device-width" />
|
|
12
|
+
|
|
13
|
+
<title>Foundation Reveal Testing</title>
|
|
14
|
+
|
|
15
|
+
<!-- Included CSS Files -->
|
|
16
|
+
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
17
|
+
|
|
18
|
+
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
|
|
19
|
+
|
|
20
|
+
<!-- IE Fix for HTML5 Tags -->
|
|
21
|
+
<!--[if lt IE 9]>
|
|
22
|
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
23
|
+
<![endif]-->
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
|
|
27
|
+
<div class="row">
|
|
28
|
+
<div class="twelve columns">
|
|
29
|
+
<p><a href="index.html">« Back</a></p>
|
|
30
|
+
<h2>Foundation Reveal Testing</h2>
|
|
31
|
+
<hr />
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<!-- Test Foundation Components Here -->
|
|
36
|
+
<div class="row">
|
|
37
|
+
<div class="twelve columns">
|
|
38
|
+
<h3>Reveal — Simple, Flexible Modal Dialogs</h3>
|
|
39
|
+
<h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.</h4>
|
|
40
|
+
|
|
41
|
+
<p><a href="#" data-reveal-id="exampleModal" class="radius button">Example Modal…</a></p>
|
|
42
|
+
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div id="exampleModal" class="reveal-modal">
|
|
47
|
+
<h2>This is a modal.</h2>
|
|
48
|
+
<p>Reveal makes these very easy to summon and dismiss. The close button is simple an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
|
|
49
|
+
<p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
|
|
50
|
+
<p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
|
|
51
|
+
<a class="close-reveal-modal">×</a>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div id="secondModal" class="reveal-modal">
|
|
55
|
+
<h2>This is a second modal.</h2>
|
|
56
|
+
<p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
|
|
57
|
+
<a class="close-reveal-modal">×</a>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<!-- Included JS Files -->
|
|
61
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
62
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
63
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
64
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
65
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
66
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
67
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
68
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
69
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
70
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
71
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
72
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
73
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
74
|
+
<script type="text/javascript">
|
|
75
|
+
// Page-Specific JavaScript Goes Here
|
|
76
|
+
</script>
|
|
77
|
+
</body>
|
|
78
|
+
</html>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
@import "foundation/functions/modular-scale";
|
|
2
|
+
|
|
3
|
+
// Settings file containing Foundation defaults
|
|
4
|
+
|
|
5
|
+
// Grid Settings
|
|
6
|
+
|
|
7
|
+
// $rowWidth: 1000px;
|
|
8
|
+
// $columnGutter: 30px;
|
|
9
|
+
// $totalColumns: 12;
|
|
10
|
+
// $mobileTotalColumns: 4;
|
|
11
|
+
|
|
12
|
+
// Colors Settings
|
|
13
|
+
|
|
14
|
+
// $mainColor: #2ba6cb;
|
|
15
|
+
// $secondaryColor: #e9e9e9;
|
|
16
|
+
// $alertColor: #c60f13;
|
|
17
|
+
// $successColor: #5da423;
|
|
18
|
+
// $txtColor: #222;
|
|
19
|
+
// $highlightColor: #ffff99;
|
|
20
|
+
// $black: #000;
|
|
21
|
+
// $white: #fff;
|
|
22
|
+
// $shinyEdge: rgba(#fff, .5);
|
|
23
|
+
// $darkEdge: rgba(#000, .2);
|
|
24
|
+
|
|
25
|
+
// Typography Settings
|
|
26
|
+
|
|
27
|
+
// $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
|
28
|
+
// $headerFontWeight: bold;
|
|
29
|
+
// $headerFontColor: #222;
|
|
30
|
+
// $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
|
31
|
+
// $bodyFontWeight: normal;
|
|
32
|
+
// $bodyFontColor: #222;
|
|
33
|
+
|
|
34
|
+
// Button Settings
|
|
35
|
+
|
|
36
|
+
// $buttonRadius: 3px;
|
|
37
|
+
// $btnBase: 10px;
|
|
38
|
+
|
|
39
|
+
// $tinyBtnBase: $btnBase - 5;
|
|
40
|
+
// $smallBtnBase: $btnBase - 3;
|
|
41
|
+
// $largeBtnBase: $btnBase + 5;
|
|
42
|
+
|
|
43
|
+
// Form Settings
|
|
44
|
+
|
|
45
|
+
// $formSpacing: 12px;
|
|
46
|
+
|
|
47
|
+
// Tab Settings
|
|
48
|
+
|
|
49
|
+
// $tabHeight: 40px;
|
|
50
|
+
|
|
51
|
+
// Nav Bar Settings
|
|
52
|
+
|
|
53
|
+
// $navBarHeight: 40px;
|
|
54
|
+
// $navFlyoutBaseWidth: 250px;
|
|
55
|
+
|
|
56
|
+
// Modular Scale
|
|
57
|
+
// $ratio: $golden;
|
|
58
|
+
// $base-size: 14px 44px;
|
|
59
|
+
|
|
60
|
+
// Tooltip Settings
|
|
61
|
+
// $hasTipBorderBottom: dotted 1px #ccc;
|
|
62
|
+
// $hasTipFontWeight: bold;
|
|
63
|
+
// $hasTipFontColor: #333;
|
|
64
|
+
// $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%);
|
|
65
|
+
// $hasTipFontColorHover: $mainColor;
|
|
66
|
+
// $tooltipBackgroundColor: #000;
|
|
67
|
+
// $tooltipBackgroundOpacity: 0.85;
|
|
68
|
+
// $tooltipFontSize: 12;
|
|
69
|
+
// $tooltipFontWeight: bold;
|
|
70
|
+
// $tooltipFontColor: #fff;
|
|
71
|
+
// $tapToCloseFontSize: 10;
|
|
72
|
+
// $tapToCloseFontWeight: normal;
|
|
73
|
+
// $tapToCloseFontColor: #888;
|
|
74
|
+
// $tooltipFontSizeScreenSmall: 14;
|
|
75
|
+
// $tooltipBackgroundOpacityScreenSmall: 0.85;
|