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
data/test/tabs.html
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
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 Tabs 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 Tabs Testing</h2>
|
|
31
|
+
<hr />
|
|
32
|
+
<dl class="sub-nav">
|
|
33
|
+
<dt>Go to:</dt>
|
|
34
|
+
<dd><a href="#simple-tabs">Simple Tabs</a></dd>
|
|
35
|
+
<dd><a href="#tab-sizing">Tab Sizing</a></dd>
|
|
36
|
+
<dd><a href="#contained-tabs">Contained Tabs</a></dd>
|
|
37
|
+
<dd><a href="#pill-style-tables">Pill-Style Tabs</a></dd>
|
|
38
|
+
<dd><a href="#vertical-tabs">Vertical Tabs</a></dd>
|
|
39
|
+
<dd><a href="#mobile-tabs">Mobile Tabs</a></dd>
|
|
40
|
+
|
|
41
|
+
</dl>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- Test Foundation Components Here -->
|
|
46
|
+
<div class="row">
|
|
47
|
+
<div class="twelve columns">
|
|
48
|
+
<h3>Tabs</h3>
|
|
49
|
+
<h4 class="subheader">Tabs are very versatile both as organization and navigational constructs. With the base Foundation package, tabs in the markup specified below are already hooked up — no extra work required.</h4>
|
|
50
|
+
|
|
51
|
+
<br>
|
|
52
|
+
|
|
53
|
+
<div class="row">
|
|
54
|
+
<div class="four columns">
|
|
55
|
+
<a name="simple-tabs"></a>
|
|
56
|
+
<h4>Simple Tabs</h4>
|
|
57
|
+
<p>Tabs are made of <strong>two objects:</strong> a <code>dl</code> object containing the tabs themselves, and a <code>ul</code> object containing the tab content.</p>
|
|
58
|
+
</div>
|
|
59
|
+
<br>
|
|
60
|
+
<div class="eight columns">
|
|
61
|
+
<dl class="tabs">
|
|
62
|
+
<dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
|
|
63
|
+
<dd><a href="#simple2">Simple Tab 2</a></dd>
|
|
64
|
+
<dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
|
|
65
|
+
</dl>
|
|
66
|
+
<ul class="tabs-content">
|
|
67
|
+
<li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
|
|
68
|
+
<li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
|
|
69
|
+
<li id="simple3Tab">This is simple tab 3's content. It's only okay.</li>
|
|
70
|
+
</ul>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<br><br>
|
|
75
|
+
|
|
76
|
+
<div class="row">
|
|
77
|
+
<div class="four columns">
|
|
78
|
+
<a name="tab-sizing"></a>
|
|
79
|
+
<h4>Tab Sizing</h4>
|
|
80
|
+
<p>If you want your tabs to run the full width of their container evenly, you can add class of <code>.two-up</code>, <code>.three-up</code>, <code>.four-up</code>, and <code>.five-up</code> to them.</p>
|
|
81
|
+
</div>
|
|
82
|
+
<br>
|
|
83
|
+
<div class="eight columns">
|
|
84
|
+
<dl class="tabs three-up">
|
|
85
|
+
<dd class="active"><a href="#evenTab1">Even Tab 1</a></dd>
|
|
86
|
+
<dd><a href="#evenTab2">Even Tab 2</a></dd>
|
|
87
|
+
<dd><a href="#evenTab3">Even Tab 3</a></dd>
|
|
88
|
+
</dl>
|
|
89
|
+
|
|
90
|
+
<dl class="tabs five-up">
|
|
91
|
+
<dd class="active"><a href="#evenTab4">Tab 4</a></dd>
|
|
92
|
+
<dd><a href="#evenTab5">Tab 5</a></dd>
|
|
93
|
+
<dd><a href="#evenTab6">Tab 6</a></dd>
|
|
94
|
+
<dd><a href="#evenTab7">Tab 7</a></dd>
|
|
95
|
+
<dd><a href="#evenTab8">Tab 8</a></dd>
|
|
96
|
+
</dl>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<br><br>
|
|
101
|
+
|
|
102
|
+
<div class="row">
|
|
103
|
+
<div class="four columns">
|
|
104
|
+
<a name="contained-tabs"></a>
|
|
105
|
+
<h4>Contained Tabs</h4>
|
|
106
|
+
<p>Contained tabs have a simple added class of "contained" on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs. You can still use standard column sizes inside a tab element.</p>
|
|
107
|
+
</div>
|
|
108
|
+
<br>
|
|
109
|
+
<div class="eight columns">
|
|
110
|
+
<dl class="tabs contained">
|
|
111
|
+
<dt>Title 1</dt>
|
|
112
|
+
<dd class="active"><a href="#simpleContained1">Simple Tab 1</a></dd>
|
|
113
|
+
<dd class="hide-for-small"><a href="#simpleContained2">Simple Tab 2</a></dd>
|
|
114
|
+
<dt class="hide-for-small">Title 1</dt>
|
|
115
|
+
<dd class="hide-for-small"><a href="#simpleContained3">Simple Tab 3</a></dd>
|
|
116
|
+
</dl>
|
|
117
|
+
<ul class="tabs-content contained">
|
|
118
|
+
<li class="active" id="simpleContained1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
|
|
119
|
+
<li id="simpleContained2Tab">This is simple tab 2's content. Now you see it!</li>
|
|
120
|
+
<li id="simpleContained3Tab">This is simple tab 3's content. It's only okay.</li>
|
|
121
|
+
</ul>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<br><br>
|
|
126
|
+
|
|
127
|
+
<div class="row">
|
|
128
|
+
<div class="four columns">
|
|
129
|
+
<a name="pill-style-tabs"></a>
|
|
130
|
+
<h4>Pill-Style Tabs</h4>
|
|
131
|
+
<p>If you need an alternate view for tabs (especially for filters, or similar), you can use pill-style tabs. They look like this:</p>
|
|
132
|
+
</div>
|
|
133
|
+
<br>
|
|
134
|
+
<div class="eight columns">
|
|
135
|
+
<dl class="tabs pill">
|
|
136
|
+
<dd class="active"><a href="#pillTab1">Pill Tab 1</a></dd>
|
|
137
|
+
<dd><a href="#pillTab2">Pill Tab 2</a></dd>
|
|
138
|
+
<dd class="hide-for-small"><a href="#pillTab3">Pill Tab 3</a></dd>
|
|
139
|
+
</dl>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div class="row">
|
|
144
|
+
<div class="four columns">
|
|
145
|
+
<a name="vertical-tabs"></a>
|
|
146
|
+
<h4>Vertical Tabs</h4>
|
|
147
|
+
<p>You can also use tabs in a vertical configuration by adding a class of 'vertical' to the <code>dl</code> element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.</p>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="eight columns">
|
|
150
|
+
<dl class="vertical tabs">
|
|
151
|
+
<dd class="active"><a href="#vertical1">Vertical Tab 1</a></dd>
|
|
152
|
+
<dd><a href="#vertical2">Vertical Tab 2</a></dd>
|
|
153
|
+
<dd><a href="#vertical3">Vertical Tab 3</a></dd>
|
|
154
|
+
</dl>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
<a name="mobile-tabs"></a>
|
|
160
|
+
<h4>Mobile Tabs</h4>
|
|
161
|
+
<p>If you want a standard, horizontal tab group to act vertical on small devices, adding a class of "mobile" to a standard (not vertical) tab group will switch them to full width nav bars on small screens.</p>
|
|
162
|
+
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<!-- Included JS Files -->
|
|
167
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
168
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
169
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
170
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
171
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
172
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
173
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
174
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
175
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
176
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
177
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
178
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
179
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
180
|
+
<script type="text/javascript">
|
|
181
|
+
// Page-Specific JavaScript Goes Here
|
|
182
|
+
</script>
|
|
183
|
+
</body>
|
|
184
|
+
</html>
|
data/test/template.html
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
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 PAGE 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 PAGE Testing</h2>
|
|
31
|
+
<hr />
|
|
32
|
+
<dl class="sub-nav">
|
|
33
|
+
<dt>Go to:</dt>
|
|
34
|
+
<dd><a href="#basic-grid">Basic Grid</a></dd>
|
|
35
|
+
</dl>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<!-- Test Foundation Components Here -->
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<!-- Included JS Files -->
|
|
43
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
44
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
45
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
46
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
47
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
48
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
49
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
50
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
51
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
52
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
53
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
54
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
55
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
56
|
+
<script type="text/javascript">
|
|
57
|
+
// Page-Specific JavaScript Goes Here
|
|
58
|
+
</script>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
data/test/type.html
ADDED
|
@@ -0,0 +1,194 @@
|
|
|
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 Typography 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 Typography Testing</h2>
|
|
31
|
+
<hr />
|
|
32
|
+
<dl class="sub-nav">
|
|
33
|
+
<dt>Go to:</dt>
|
|
34
|
+
<dd><a href="#headers">Headers</a></dd>
|
|
35
|
+
<dd><a href="#links">Links</a></dd>
|
|
36
|
+
<dd><a href="#lists">Lists</a></dd>
|
|
37
|
+
<dd><a href="#blockquotes">Blockquotes</a></dd>
|
|
38
|
+
</dl>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<!-- Test Foundation Components Here -->
|
|
43
|
+
<div class="row">
|
|
44
|
+
<div class="twelve columns">
|
|
45
|
+
|
|
46
|
+
<h3>Typography</h3>
|
|
47
|
+
<h4 class="subheader">Foundation 3 uses a modular scale to generate typography. That means a great, logical vertical rhythm for every design.</h4>
|
|
48
|
+
|
|
49
|
+
<div class="row">
|
|
50
|
+
<div class="four columns">
|
|
51
|
+
<a name="headers"></a>
|
|
52
|
+
<h4>General Typography</h4>
|
|
53
|
+
<p>These are the basic elements of typography and rhythm in Foundation 3.</p>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="eight columns">
|
|
56
|
+
<h1>h1. This is a very large header.</h1>
|
|
57
|
+
<h2>h2. This is a large header.</h2>
|
|
58
|
+
<h3>h3. This is a medium header.</h3>
|
|
59
|
+
<h4>h4. This is a moderate header.</h4>
|
|
60
|
+
<h5>h5. This is small header.</h5>
|
|
61
|
+
<h6>h6. This is very small header.</h6>
|
|
62
|
+
|
|
63
|
+
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, let's see… did you know that there are storms occurring on Jupiter that are larger than the Earth? That's pretty cool.</p>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<br><br>
|
|
68
|
+
|
|
69
|
+
<div class="row">
|
|
70
|
+
<div class="four columns">
|
|
71
|
+
<h4>Header Styles</h4>
|
|
72
|
+
<p>Optional Subheader Styles</p>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="eight columns">
|
|
75
|
+
<h2>This is a very large main header.</h2>
|
|
76
|
+
<h4 class="subheader">This is a smaller subheader.</h4>
|
|
77
|
+
|
|
78
|
+
<h3>This is a large header. <small>This is a small segment of that header.</small></h3>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<br><br>
|
|
83
|
+
|
|
84
|
+
<div class="row">
|
|
85
|
+
<div class="four columns">
|
|
86
|
+
<a name="links"></a>
|
|
87
|
+
<h4>Links</h4>
|
|
88
|
+
<p>Links are very standard, and the color is preset.</p>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="eight columns">
|
|
91
|
+
<h2><a href="#">This is a header link.</a></h2>
|
|
92
|
+
<h3><a href="#">This is a header link.</a></h3>
|
|
93
|
+
<h4><a href="#">This is a header link.</a></h4>
|
|
94
|
+
<h5><a href="#">This is a header link.</a></h5>
|
|
95
|
+
<p><a href="#">This is a standard inline paragraph link.</a></p>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<br><br>
|
|
100
|
+
|
|
101
|
+
<div class="row">
|
|
102
|
+
<div class="four columns">
|
|
103
|
+
<a name="lists"></a>
|
|
104
|
+
<h4>Lists</h4>
|
|
105
|
+
<p>Lists are helpful for, well, lists of things.</p>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="eight columns">
|
|
108
|
+
<h6>ul.disc</h6>
|
|
109
|
+
<ul class="disc">
|
|
110
|
+
<li>List item with a much longer description or more content.</li>
|
|
111
|
+
<li>List item</li>
|
|
112
|
+
<li>List item
|
|
113
|
+
<ul>
|
|
114
|
+
<li>Nested List Item</li>
|
|
115
|
+
<li>Nested List Item</li>
|
|
116
|
+
<li>Nested List Item</li>
|
|
117
|
+
</ul>
|
|
118
|
+
</li>
|
|
119
|
+
<li>List item</li>
|
|
120
|
+
<li>List item</li>
|
|
121
|
+
<li>List item</li>
|
|
122
|
+
</ul>
|
|
123
|
+
<br>
|
|
124
|
+
<h6>ul.circle</h6>
|
|
125
|
+
<ul class="circle">
|
|
126
|
+
<li>List item with a much longer description or more content.</li>
|
|
127
|
+
<li>List item</li>
|
|
128
|
+
<li>List item
|
|
129
|
+
<ul>
|
|
130
|
+
<li>Nested List Item</li>
|
|
131
|
+
<li>Nested List Item</li>
|
|
132
|
+
<li>Nested List Item</li>
|
|
133
|
+
</ul>
|
|
134
|
+
</li>
|
|
135
|
+
<li>List item</li>
|
|
136
|
+
<li>List item</li>
|
|
137
|
+
<li>List item</li>
|
|
138
|
+
</ul>
|
|
139
|
+
<br>
|
|
140
|
+
<h6>ul.square</h6>
|
|
141
|
+
<ul class="square">
|
|
142
|
+
<li>List item with a much longer description or more content.</li>
|
|
143
|
+
<li>List item</li>
|
|
144
|
+
<li>List item
|
|
145
|
+
<ul>
|
|
146
|
+
<li>Nested List Item</li>
|
|
147
|
+
<li>Nested List Item</li>
|
|
148
|
+
<li>Nested List Item</li>
|
|
149
|
+
</ul>
|
|
150
|
+
</li>
|
|
151
|
+
<li>List item</li>
|
|
152
|
+
<li>List item</li>
|
|
153
|
+
<li>List item</li>
|
|
154
|
+
</ul>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<br><br>
|
|
159
|
+
|
|
160
|
+
<div class="row">
|
|
161
|
+
<div class="four columns">
|
|
162
|
+
<a name="blockquotes"></a>
|
|
163
|
+
<h4>Blockquotes</h4>
|
|
164
|
+
<p>Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.</p>
|
|
165
|
+
</div>
|
|
166
|
+
<br>
|
|
167
|
+
<div class="eight columns">
|
|
168
|
+
<blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<!-- Included JS Files -->
|
|
177
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
178
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
179
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
180
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
181
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
182
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
183
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
184
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
185
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
186
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
187
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
188
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
189
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
190
|
+
<script type="text/javascript">
|
|
191
|
+
// Page-Specific JavaScript Goes Here
|
|
192
|
+
</script>
|
|
193
|
+
</body>
|
|
194
|
+
</html>
|
|
@@ -6,16 +6,17 @@
|
|
|
6
6
|
$(document).foundationAccordion();
|
|
7
7
|
$(document).foundationNavigation();
|
|
8
8
|
$(document).foundationCustomForms();
|
|
9
|
+
$(document).foundationMediaQueryViewer();
|
|
9
10
|
$(document).foundationTabs({callback:$.foundation.customForms.appendCustomMarkup});
|
|
10
11
|
|
|
11
12
|
$(document).tooltips();
|
|
12
13
|
$('input, textarea').placeholder();
|
|
13
14
|
|
|
14
15
|
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
|
|
15
|
-
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: '
|
|
16
|
-
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: '
|
|
17
|
-
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: '
|
|
18
|
-
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: '
|
|
16
|
+
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
|
|
17
|
+
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
|
|
18
|
+
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
|
|
19
|
+
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});
|
|
19
20
|
});
|
|
20
21
|
|
|
21
22
|
})(jQuery);
|
|
@@ -8,8 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
$('.button.dropdown > ul', this).addClass('no-hover');
|
|
10
10
|
|
|
11
|
-
$('.button.dropdown', this).on('click.fndtn', function (e) {
|
|
12
|
-
|
|
11
|
+
$('.button.dropdown, .button.dropdown.split span', this).on('click.fndtn', function (e) {
|
|
12
|
+
// Stops further propagation of the event up the DOM tree when clicked on the button.
|
|
13
|
+
// Events fired by its descendants are not being blocked.
|
|
14
|
+
if (e.target === this) {
|
|
15
|
+
e.stopPropagation();
|
|
16
|
+
}
|
|
13
17
|
});
|
|
14
18
|
$('.button.dropdown.split span', this).on('click.fndtn', function (e) {
|
|
15
19
|
e.preventDefault();
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
// Update the current element with the option value.
|
|
259
259
|
//
|
|
260
260
|
if ($currentSelect) {
|
|
261
|
-
$currentSelect.html( this.
|
|
261
|
+
$currentSelect.html( $( this ).html() );
|
|
262
262
|
}
|
|
263
263
|
|
|
264
264
|
}
|
|
@@ -389,25 +389,25 @@
|
|
|
389
389
|
}
|
|
390
390
|
};
|
|
391
391
|
|
|
392
|
-
$('form.custom span.custom.checkbox'
|
|
392
|
+
$(document).on('click', 'form.custom span.custom.checkbox', function (event) {
|
|
393
393
|
event.preventDefault();
|
|
394
394
|
event.stopPropagation();
|
|
395
395
|
|
|
396
396
|
toggleCheckbox($(this));
|
|
397
397
|
});
|
|
398
398
|
|
|
399
|
-
$('form.custom span.custom.radio'
|
|
399
|
+
$(document).on('click', 'form.custom span.custom.radio', function (event) {
|
|
400
400
|
event.preventDefault();
|
|
401
401
|
event.stopPropagation();
|
|
402
402
|
|
|
403
403
|
toggleRadio($(this));
|
|
404
404
|
});
|
|
405
405
|
|
|
406
|
-
$(
|
|
406
|
+
$(document).on('change', 'form.custom select[data-customforms!=disabled]', function (event) {
|
|
407
407
|
refreshCustomSelect($(this));
|
|
408
408
|
});
|
|
409
409
|
|
|
410
|
-
$(
|
|
410
|
+
$(document).on('click', 'form.custom label', function (event) {
|
|
411
411
|
var $associatedElement = $('#' + $(this).attr('for')),
|
|
412
412
|
$customCheckbox,
|
|
413
413
|
$customRadio;
|
|
@@ -424,7 +424,7 @@
|
|
|
424
424
|
}
|
|
425
425
|
});
|
|
426
426
|
|
|
427
|
-
$('form.custom div.custom.dropdown a.current, form.custom div.custom.dropdown a.selector'
|
|
427
|
+
$(document).on('click', 'form.custom div.custom.dropdown a.current, form.custom div.custom.dropdown a.selector', function (event) {
|
|
428
428
|
var $this = $(this),
|
|
429
429
|
$dropdown = $this.closest('div.custom.dropdown'),
|
|
430
430
|
$select = $dropdown.prev();
|
|
@@ -447,7 +447,7 @@
|
|
|
447
447
|
}
|
|
448
448
|
});
|
|
449
449
|
|
|
450
|
-
$('form.custom div.custom.dropdown li'
|
|
450
|
+
$(document).on('click', 'form.custom div.custom.dropdown li', function (event) {
|
|
451
451
|
var $this = $(this),
|
|
452
452
|
$customDropdown = $this.closest('div.custom.dropdown'),
|
|
453
453
|
$select = $customDropdown.prev(),
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
(function ($) {
|
|
2
|
+
|
|
3
|
+
$.fn.foundationMediaQueryViewer = function (options) {
|
|
4
|
+
|
|
5
|
+
var settings = $.extend(options,{toggleKey:77}); // Press 'M'
|
|
6
|
+
|
|
7
|
+
$(document).keyup(function(e) {
|
|
8
|
+
var $mqViewer = $('#fqv');
|
|
9
|
+
|
|
10
|
+
if (e.keyCode == settings.toggleKey) {
|
|
11
|
+
if ($mqViewer.length > 0) {
|
|
12
|
+
$mqViewer.remove();
|
|
13
|
+
} else {
|
|
14
|
+
$('body').prepend('<div id="fqv" style="position:fixed;top:4px;left:4px;z-index:999;color:#fff;"><p style="font-size:12px;background:rgba(0,0,0,0.75);padding:5px;margin-bottom:1px;line-height:1.2;"><span class="left">Media:</span> <span style="font-weight:bold;" class="show-for-xlarge">Extra Large</span><span style="font-weight:bold;" class="show-for-large">Large</span><span style="font-weight:bold;" class="show-for-medium">Medium</span><span style="font-weight:bold;" class="show-for-small">Small</span><span style="font-weight:bold;" class="show-for-landscape">Landscape</span><span style="font-weight:bold;" class="show-for-portrait">Portrait</span><span style="font-weight:bold;" class="show-for-touch">Touch</span></p></div>');
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
})(jQuery);
|
|
@@ -246,7 +246,8 @@
|
|
|
246
246
|
this.$rotator.css({
|
|
247
247
|
"-webkit-transform": degreeCSS,
|
|
248
248
|
"-moz-transform": degreeCSS,
|
|
249
|
-
"-o-transform": degreeCSS
|
|
249
|
+
"-o-transform": degreeCSS,
|
|
250
|
+
"-ms-transform": degreeCSS
|
|
250
251
|
});
|
|
251
252
|
if(this.degrees > 180) {
|
|
252
253
|
this.$rotator.addClass('move');
|