zurb-foundation 3.0.7 → 3.0.8.rc1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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');
|