zurb-foundation 4.0.2 → 4.0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.md +12 -0
- data/Gemfile.lock +1 -1
- data/docs/_sidebar-components.html.erb +2 -2
- data/docs/_sidebar.html.erb +2 -2
- data/docs/_zurb-jobs.html.erb +2 -2
- data/docs/compile.rb +24 -33
- data/docs/components/block-grid.html.erb +3 -0
- data/docs/components/dropdown.html.erb +1 -1
- data/docs/components/grid.html.erb +1 -1
- data/docs/components/joyride.html.erb +1 -1
- data/docs/components/reveal.html.erb +24 -23
- data/docs/components/section.html.erb +126 -17
- data/docs/controller.rb +9 -7
- data/docs/faq.html.erb +1 -1
- data/docs/index.html.erb +28 -30
- data/docs/javascript.html.erb +4 -4
- data/docs/rails.html.erb +1 -1
- data/docs/support.html.erb +64 -56
- data/js/foundation/foundation.dropdown.js +1 -1
- data/js/foundation/foundation.reveal.js +10 -8
- data/js/foundation/foundation.section.js +5 -2
- data/js/foundation/foundation.topbar.js +1 -1
- data/lib/foundation/version.rb +1 -1
- data/scss/foundation/_foundation-global.scss +2 -0
- data/scss/foundation/components/_block-grid.scss +18 -15
- data/scss/foundation/components/_button-groups.scss +1 -1
- data/scss/foundation/components/_custom-forms.scss +1 -0
- data/scss/foundation/components/_keystrokes.scss +1 -1
- data/scss/foundation/components/_reveal.scss +1 -1
- data/scss/foundation/components/_section.scss +1 -1
- data/scss/foundation/components/_top-bar.scss +7 -5
- data/scss/foundation/components/_type.scss +14 -6
- data/templates/project/index.html +3 -2
- data/templates/project/scss/_settings.scss +981 -0
- data/templates/project/scss/app.scss +35 -35
- metadata +4 -4
data/docs/faq.html.erb
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
<div class="panel">
|
|
44
44
|
<h3>What's Changed Recently?</h3>
|
|
45
45
|
<h5 class="subheader">Foundation is the most advanced front-end framework in existence. We've ditched IE7 so that we can do more awesome things and push the web to where it needs to be. Take a look at our changelog to know what's recently been changed or updated.</h5>
|
|
46
|
-
<a class="button" href="support.
|
|
46
|
+
<a class="button" href="support.html">Browser Support »</a> <a class="secondary button" href="changelog.html">See the Version Changelog »</a>
|
|
47
47
|
</div>
|
|
48
48
|
|
|
49
49
|
</div>
|
data/docs/index.html.erb
CHANGED
|
@@ -7,6 +7,23 @@
|
|
|
7
7
|
<h5 class="subheader">Whether you are using Scss or CSS, we've made it easy to start a project so that you can help take over the world one responsive site at a time.</h5>
|
|
8
8
|
<p>Foundation is developed in <a href="http://www.sass-lang.com">Sass</a>, which is powerful CSS pre-processor that helps you write cleaner, more organized, CSS that you can more easily maintain over time without the typical headaches of vanilla CSS. On top of our minimal styling, we've written powerful Javascript plugins that will make useful interactions easier to implement across screen sizes.</p>
|
|
9
9
|
|
|
10
|
+
<div class="" style="font-size: 14px;">
|
|
11
|
+
<p><strong>Looking for Foundation 3?</strong><br>
|
|
12
|
+
We're still supporting Foundation 3 for those who don't want to take the leap into the future with us. You can view the docs, download a package or visit the Github page.</p>
|
|
13
|
+
<ul class="button-group">
|
|
14
|
+
<li><a class="small button secondary" style="margin-bottom: 0;" href="../download-f3.php">Download</a></li>
|
|
15
|
+
<li><a class="small button secondary" style="margin-bottom: 0;" href="../old-docs/f3">Docs</a></li>
|
|
16
|
+
<li><a class="small button secondary" style="margin-bottom: 0;" href="https://github.com/zurb/foundation/tree/3-2-stable">Github</a></li>
|
|
17
|
+
</ul>
|
|
18
|
+
|
|
19
|
+
<hr>
|
|
20
|
+
|
|
21
|
+
<p><strong>Ready to Move to 4?</strong><br>
|
|
22
|
+
We've got you covered with a migration guide that explains the differences.</p>
|
|
23
|
+
|
|
24
|
+
<a class="small button secondary" href="../migration.php">Migration Guide</a>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
10
27
|
<hr>
|
|
11
28
|
|
|
12
29
|
<h3>What comes with Foundation?</h3>
|
|
@@ -120,7 +137,7 @@
|
|
|
120
137
|
<div class="large-4 columns">
|
|
121
138
|
<dl>
|
|
122
139
|
<dt><h5>css</h5></dt>
|
|
123
|
-
<dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use.
|
|
140
|
+
<dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use. You can add <code>app.css</code> or any other stylesheet to use for custom styles that will sit on top of the Foundation core as overrides.</dd>
|
|
124
141
|
</dl>
|
|
125
142
|
</div>
|
|
126
143
|
<div class="large-4 columns">
|
|
@@ -163,8 +180,8 @@
|
|
|
163
180
|
<div class="panel">
|
|
164
181
|
<h6 class="subheader"><strong>Using the Gem?</strong> You'll see a couple extra pieces in your project upon creation. These are:</h6>
|
|
165
182
|
<dl>
|
|
166
|
-
<dt>
|
|
167
|
-
<dd>Your main style folder is named <strong>
|
|
183
|
+
<dt>scss/</dt>
|
|
184
|
+
<dd>Your main style folder is named <strong>scss/</strong> and contains <code>app.scss</code> (which has the foundation gem import and commented portions you can pick and choose.) and <code>normalize.scss</code>. Override the Foundation styles within your app.scss file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Foundation.</dd>
|
|
168
185
|
<dt></i>config.rb</dt>
|
|
169
186
|
<dd>This file is used by <a href="http://compass-style.org">Compass</a> to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.</dd>
|
|
170
187
|
</dl>
|
|
@@ -178,7 +195,6 @@
|
|
|
178
195
|
<h5 class="subheader">Our markup structure is straight forward and gives you the flexibility you need to create to your hearts desires. Here's an example page that includes the basics:</h5>
|
|
179
196
|
|
|
180
197
|
<%= code_example '
|
|
181
|
-
|
|
182
198
|
<!DOCTYPE html>
|
|
183
199
|
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
184
200
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
@@ -189,7 +205,6 @@
|
|
|
189
205
|
<title>Foundation 4</title>
|
|
190
206
|
|
|
191
207
|
<link rel="stylesheet" href="css/normalize.css" />
|
|
192
|
-
<link rel="stylesheet" href="css/foundation.css" />
|
|
193
208
|
<link rel="stylesheet" href="css/app.css" />
|
|
194
209
|
|
|
195
210
|
<script src="js/vendor/custom.modernizr.js"></script>
|
|
@@ -204,36 +219,23 @@
|
|
|
204
219
|
(\'__proto__\' in {} ? \'js/vendor/zepto\' : \'js/vendor/jquery\') +
|
|
205
220
|
\'.js><\/script>\')
|
|
206
221
|
</script>
|
|
207
|
-
|
|
222
|
+
<script src="js/foundation/foundation.js"></script>
|
|
208
223
|
<script src="js/foundation/foundation.alerts.js"></script>
|
|
209
|
-
|
|
210
224
|
<script src="js/foundation/foundation.clearing.js"></script>
|
|
211
|
-
|
|
212
225
|
<script src="js/foundation/foundation.cookie.js"></script>
|
|
213
|
-
|
|
214
226
|
<script src="js/foundation/foundation.dropdown.js"></script>
|
|
215
|
-
|
|
216
227
|
<script src="js/foundation/foundation.forms.js"></script>
|
|
217
|
-
|
|
218
228
|
<script src="js/foundation/foundation.joyride.js"></script>
|
|
219
|
-
|
|
220
|
-
<script src="js/foundation/foundation.js"></script>
|
|
221
|
-
|
|
222
229
|
<script src="js/foundation/foundation.magellan.js"></script>
|
|
223
|
-
|
|
224
230
|
<script src="js/foundation/foundation.orbit.js"></script>
|
|
225
|
-
|
|
226
231
|
<script src="js/foundation/foundation.placeholder.js"></script>
|
|
227
|
-
|
|
228
232
|
<script src="js/foundation/foundation.reveal.js"></script>
|
|
229
|
-
|
|
230
233
|
<script src="js/foundation/foundation.section.js"></script>
|
|
231
|
-
|
|
232
234
|
<script src="js/foundation/foundation.tooltips.js"></script>
|
|
233
|
-
|
|
234
235
|
<script src="js/foundation/foundation.topbar.js"></script>
|
|
235
|
-
|
|
236
|
-
|
|
236
|
+
<script>
|
|
237
|
+
$(document).foundation();
|
|
238
|
+
</script>
|
|
237
239
|
</body>
|
|
238
240
|
</html>
|
|
239
241
|
|
|
@@ -255,19 +257,15 @@
|
|
|
255
257
|
<dt><h5>CSS & Modernizr</h5></dt>
|
|
256
258
|
<dd>The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.</dd>
|
|
257
259
|
<dt>CSS</dt>
|
|
258
|
-
<dd>We include <code>foundation.min.css</code> and <code>foundation.css</code>. The difference here is whether or not you want minified code or not (link whichever you want, but not both)
|
|
259
|
-
<dt>Modernizr</dt>
|
|
260
|
-
<dd>We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.</dd>
|
|
260
|
+
<dd>We include <code>foundation.min.css</code> and <code>foundation.css</code>. The difference here is whether or not you want minified code or not (link whichever you want, but not both).</dd>
|
|
261
261
|
</dl>
|
|
262
262
|
</div>
|
|
263
263
|
<div class="large-4 columns">
|
|
264
264
|
<dl>
|
|
265
|
+
<dt>Modernizr</dt>
|
|
266
|
+
<dd>We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.</dd>
|
|
265
267
|
<dt><h5>Javascripts</h5></dt>
|
|
266
268
|
<dd>Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.</dd>
|
|
267
|
-
<dt>jQuery</dt>
|
|
268
|
-
<dd>We stay as close as possible to the latest version of jQuery at all times. jQuery needs to be included before any Foundation JS.</dd>
|
|
269
|
-
<dt>Foundation JS</dt>
|
|
270
|
-
<dd>We include <code>foundation.min.js</code> by default, which includes all the available plugins. If you want to customize, we have every individual plugin commented for you to quickly pick and choose.</dd>
|
|
271
269
|
</dl>
|
|
272
270
|
</div>
|
|
273
271
|
</div>
|
|
@@ -277,7 +275,7 @@
|
|
|
277
275
|
<div class="panel">
|
|
278
276
|
<h3>Get going!</h3>
|
|
279
277
|
<h5 class="subheader">Now that you understand the gist of what Foundation is and how it works, it's time to start a project! We've got two different ways for you to build projects with Foundation, a Compass Gem using Scss or a with plain CSS.</h5>
|
|
280
|
-
<a href="
|
|
278
|
+
<a href="./sass.html" class="button">Using the Gem</a></li>
|
|
281
279
|
<a href="http://foundation.zurb.com/migration.php" class="button secondary">Quickstart with CSS</a></li>
|
|
282
280
|
</div>
|
|
283
281
|
|
data/docs/javascript.html.erb
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<div class="row">
|
|
7
7
|
<div class="large-12 columns">
|
|
8
8
|
<h2><%= @page_title %></h2>
|
|
9
|
-
<h4 class="subheader">Foundation 4 streamlines the implementation of the
|
|
9
|
+
<h4 class="subheader">Foundation 4 streamlines the implementation of the Foundation plugins by combining them all into a single plugin under the <code>$.fn.foundation()</code> Zepto/jQuery namespace.</h4>
|
|
10
10
|
<hr>
|
|
11
11
|
|
|
12
12
|
<h2>Installation</h2>
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<script>
|
|
27
27
|
document.write('<script src=/js/vendor/'
|
|
28
28
|
+ ('__proto__' in {} ? 'zepto' : 'jquery')
|
|
29
|
-
+ '.js
|
|
29
|
+
+ '.js><\\\/script>');
|
|
30
30
|
</script>
|
|
31
31
|
", :html %>
|
|
32
32
|
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
|
|
60
60
|
<h2>Configuration</h2>
|
|
61
61
|
|
|
62
|
-
<p>Foundation accepts a myriad of options for initialization. By default, calling <code>$('#scope').foundation();</code> will
|
|
62
|
+
<p>Foundation accepts a myriad of options for initialization. By default, calling <code>$('#scope').foundation();</code> will initialize all available plugins on the page. Alternatively, you can pass individual plugins along with configuration options and a callback. This will allow you to select specific plugins to start on your page, even if their source is included. You can take a look at the call here:</p>
|
|
63
63
|
|
|
64
64
|
<%= code_example "
|
|
65
65
|
$(document).foundation('section', {deep_linking: true}, function (response) {
|
|
@@ -107,7 +107,7 @@ $(document)
|
|
|
107
107
|
|
|
108
108
|
<h2>Calling Internal Methods</h2>
|
|
109
109
|
|
|
110
|
-
<p>Foundation 4 JavaScript allows you call call internal plugin methods by passing the method name as the second argument. This is necessary for plugins like Joyride, since they are not
|
|
110
|
+
<p>Foundation 4 JavaScript allows you call call internal plugin methods by passing the method name as the second argument. This is necessary for plugins like Joyride, since they are not initialized on page load by default.</p>
|
|
111
111
|
|
|
112
112
|
<p>This will fire the <code>start</code> method on Joyride:</p>
|
|
113
113
|
|
data/docs/rails.html.erb
CHANGED
|
@@ -24,7 +24,7 @@ end
|
|
|
24
24
|
|
|
25
25
|
<p>Then run <code>bundle install</code> to finish installing Foundation.</p>
|
|
26
26
|
|
|
27
|
-
<div class="
|
|
27
|
+
<div class="panel">
|
|
28
28
|
<p><strong>NOTE:</strong> Make sure that your restart your server after running <code>bundle install</code>. Otherwise the asset pipeline may not recognize the new Foundation files.</p>
|
|
29
29
|
</div>
|
|
30
30
|
|
data/docs/support.html.erb
CHANGED
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
.row.support:nth-child(2n) { background: #f4f4f4; }
|
|
5
5
|
|
|
6
6
|
.support .win { color: #4ea600; font-weight: bold; }
|
|
7
|
+
.support .meh { color: #888; font-weight: bold; }
|
|
7
8
|
.support .fail { color: #cc0000; font-weight: bold; }
|
|
8
9
|
|
|
10
|
+
.tooltip { font-size: 14px; }
|
|
9
11
|
</style>
|
|
10
12
|
|
|
11
13
|
<div class="row">
|
|
@@ -22,93 +24,99 @@
|
|
|
22
24
|
<p>We go to great lengths to ensure that Foundation works as expected on a variety of common browsers and devices. Given how forward-facing Foundation is there are some aesthetic properties which are not supported in older browsers (border radii, box shadows, etc), but the core elements are reliable across the board.</p>
|
|
23
25
|
|
|
24
26
|
<div class="row support">
|
|
25
|
-
<div class="
|
|
26
|
-
<div class="
|
|
27
|
-
<div class="
|
|
28
|
-
<div class="
|
|
27
|
+
<div class="small-3 columns"><h5>Browser/OS</h5></div>
|
|
28
|
+
<div class="small-3 columns"><h5>The Grid</h5></div>
|
|
29
|
+
<div class="small-3 columns"><h5>Layout/UI</h5></div>
|
|
30
|
+
<div class="small-3 columns"><h5>JS</h5></div>
|
|
29
31
|
</div>
|
|
30
32
|
<div class="row support">
|
|
31
|
-
<div class="
|
|
32
|
-
<div class="
|
|
33
|
-
<div class="
|
|
34
|
-
<div class="
|
|
33
|
+
<div class="small-3 columns">Chrome</div>
|
|
34
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
35
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
36
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
35
37
|
</div>
|
|
36
38
|
<div class="row support">
|
|
37
|
-
<div class="
|
|
38
|
-
<div class="
|
|
39
|
-
<div class="
|
|
40
|
-
<div class="
|
|
39
|
+
<div class="small-3 columns">Firefox</div>
|
|
40
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
41
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
42
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
41
43
|
</div>
|
|
42
44
|
<div class="row support">
|
|
43
|
-
<div class="
|
|
44
|
-
<div class="
|
|
45
|
-
<div class="
|
|
46
|
-
<div class="
|
|
45
|
+
<div class="small-3 columns">Safari</div>
|
|
46
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
47
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
48
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
47
49
|
</div>
|
|
48
50
|
<div class="row support">
|
|
49
|
-
<div class="
|
|
50
|
-
<div class="
|
|
51
|
-
<div class="
|
|
52
|
-
<div class="
|
|
51
|
+
<div class="small-3 columns">IE10</div>
|
|
52
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
53
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
54
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
53
55
|
</div>
|
|
54
56
|
<div class="row support">
|
|
55
|
-
<div class="
|
|
56
|
-
<div class="
|
|
57
|
-
<div class="
|
|
58
|
-
<div class="
|
|
57
|
+
<div class="small-3 columns">IE9</div>
|
|
58
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
59
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
60
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
59
61
|
</div>
|
|
60
62
|
<div class="row support">
|
|
61
|
-
<div class="
|
|
62
|
-
<div class="
|
|
63
|
-
<div class="
|
|
64
|
-
<div class="
|
|
63
|
+
<div class="small-3 columns">IE8</div>
|
|
64
|
+
<div class="small-3 columns"><span data-tooltip class="meh has-tip tip-top" data-width="200" title="The grid is within a media query so IE8 gets the mobile layouts. If you need a full grid for IE8, see below for a link to a gist that will help out immensely.">●</span></div>
|
|
65
|
+
<div class="small-3 columns"><span data-tooltip class="meh has-tip tip-top" title="90% of our UI elements will work perfectly in IE8. There are a few cases, like radio switches, where we make sure IE8 just gets normal UI elements instead of custom ones." data-width="200">●</span></div>
|
|
66
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
65
67
|
</div>
|
|
66
68
|
<div class="row support">
|
|
67
|
-
<div class="
|
|
68
|
-
<div class="
|
|
69
|
-
<div class="
|
|
70
|
-
<div class="
|
|
69
|
+
<div class="small-3 columns">IE7</div>
|
|
70
|
+
<div class="small-3 columns"><span class="fail">✗</span></div>
|
|
71
|
+
<div class="small-3 columns"><span data-tooltip title="While we don't officially IE7, but our UI styles should work for the most part" class="meh has-tip tip-top" data-width="200">●</span></div>
|
|
72
|
+
<div class="small-3 columns"><span data-tooltip title="While we don't officially IE7, but our JS works for the most part. Clearing and tooltips have some issues with style and position." class="meh has-tip tip-top" data-width="200">●</span></div>
|
|
71
73
|
</div>
|
|
72
74
|
|
|
73
75
|
<div class="row support">
|
|
74
|
-
<div class="
|
|
75
|
-
<div class="
|
|
76
|
-
<div class="
|
|
77
|
-
<div class="
|
|
76
|
+
<div class="small-3 columns">iOS (iPhone)</div>
|
|
77
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
78
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
79
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
78
80
|
</div>
|
|
79
81
|
<div class="row support">
|
|
80
|
-
<div class="
|
|
81
|
-
<div class="
|
|
82
|
-
<div class="
|
|
83
|
-
<div class="
|
|
82
|
+
<div class="small-3 columns">iOS (iPad)</div>
|
|
83
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
84
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
85
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
84
86
|
</div>
|
|
85
87
|
<div class="row support">
|
|
86
|
-
<div class="
|
|
87
|
-
<div class="
|
|
88
|
-
<div class="
|
|
89
|
-
<div class="
|
|
88
|
+
<div class="small-3 columns">Android 2, 4 (Phone)</div>
|
|
89
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
90
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
91
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
90
92
|
</div>
|
|
91
93
|
<div class="row support">
|
|
92
|
-
<div class="
|
|
93
|
-
<div class="
|
|
94
|
-
<div class="
|
|
95
|
-
<div class="
|
|
94
|
+
<div class="small-3 columns">Android 2, 4 (Tablet)</div>
|
|
95
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
96
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
97
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
96
98
|
</div>
|
|
97
99
|
<div class="row support">
|
|
98
|
-
<div class="
|
|
99
|
-
<div class="
|
|
100
|
-
<div class="
|
|
101
|
-
<div class="
|
|
100
|
+
<div class="small-3 columns">Windows Phone 7+</div>
|
|
101
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
102
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
103
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
102
104
|
</div>
|
|
103
105
|
<div class="row support">
|
|
104
|
-
<div class="
|
|
105
|
-
<div class="
|
|
106
|
-
<div class="
|
|
107
|
-
<div class="
|
|
106
|
+
<div class="small-3 columns">Surface</div>
|
|
107
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
108
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
109
|
+
<div class="small-3 columns"><span class="win">✓</span></div>
|
|
108
110
|
</div>
|
|
109
111
|
|
|
110
112
|
<hr>
|
|
111
113
|
|
|
114
|
+
<h5>Want IE8 Grid Support?</h5>
|
|
115
|
+
<p>We know it can be hard to get clients to ditch support for IE8. We're hoping with the auto-update to IE10 release from Microsoft, we won't need to worry about it anymore. Until then, here's a gist with a grid grid that will work in IE8, just like it did in Foundation 3.</p>
|
|
116
|
+
<a class="small button" href="https://gist.github.com/zurbchris/5068210">Foundation IE8 Grid</a>
|
|
117
|
+
|
|
118
|
+
<hr>
|
|
119
|
+
|
|
112
120
|
<h5>Upgrading from Foundation 3.x?</h5>
|
|
113
121
|
<p>We've written a comprehensive <a href="http://foundation.zurb.com/migration.php">Migration Guide</a> to help you update your code for an existing or work in progress project.</p>
|
|
114
122
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
Foundation.libs.reveal = {
|
|
7
7
|
name: 'reveal',
|
|
8
8
|
|
|
9
|
-
version : '4.0.
|
|
9
|
+
version : '4.0.3',
|
|
10
10
|
|
|
11
11
|
locked : false,
|
|
12
12
|
|
|
@@ -81,14 +81,17 @@
|
|
|
81
81
|
var modal = $('#' + target.data('reveal-id')),
|
|
82
82
|
open_modal = $('.reveal-modal.open');
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
if (!modal.data('css-top')) {
|
|
85
|
+
modal.data('css-top', parseInt(modal.css('top'), 10))
|
|
86
|
+
.data('offset', this.cache_offset(modal));
|
|
87
|
+
}
|
|
85
88
|
|
|
86
89
|
modal.trigger('open');
|
|
87
90
|
|
|
88
91
|
if (open_modal.length < 1) {
|
|
89
92
|
this.toggle_bg(modal);
|
|
90
93
|
}
|
|
91
|
-
|
|
94
|
+
|
|
92
95
|
this.toggle_modals(open_modal, modal);
|
|
93
96
|
},
|
|
94
97
|
|
|
@@ -139,9 +142,9 @@
|
|
|
139
142
|
// is modal
|
|
140
143
|
if (css) {
|
|
141
144
|
if (/pop/i.test(this.settings.animation)) {
|
|
142
|
-
css.top = $(window).scrollTop() -
|
|
145
|
+
css.top = $(window).scrollTop() - el.data('offset') + 'px';
|
|
143
146
|
var end_css = {
|
|
144
|
-
top: $(window).scrollTop() +
|
|
147
|
+
top: $(window).scrollTop() + el.data('css-top') + 'px',
|
|
145
148
|
opacity: 1
|
|
146
149
|
}
|
|
147
150
|
|
|
@@ -186,8 +189,7 @@
|
|
|
186
189
|
if (css) {
|
|
187
190
|
if (/pop/i.test(this.settings.animation)) {
|
|
188
191
|
var end_css = {
|
|
189
|
-
|
|
190
|
-
// top: $(window).scrollTop() - this.offset + 'px',
|
|
192
|
+
top: - $(window).scrollTop() - el.data('offset') + 'px',
|
|
191
193
|
opacity: 0
|
|
192
194
|
};
|
|
193
195
|
|
|
@@ -232,7 +234,7 @@
|
|
|
232
234
|
if (iframe.length > 0) {
|
|
233
235
|
iframe.attr('data-src', iframe[0].src);
|
|
234
236
|
iframe.attr('src', 'about:blank');
|
|
235
|
-
video.fadeOut(100).hide();
|
|
237
|
+
video.fadeOut(100).hide();
|
|
236
238
|
}
|
|
237
239
|
},
|
|
238
240
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
Foundation.libs.section = {
|
|
7
7
|
name: 'section',
|
|
8
8
|
|
|
9
|
-
version : '4.0.
|
|
9
|
+
version : '4.0.3',
|
|
10
10
|
|
|
11
11
|
settings : {
|
|
12
12
|
deep_linking: false,
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
|
|
131
131
|
set_active_from_hash : function () {
|
|
132
132
|
var hash = window.location.hash.substring(1),
|
|
133
|
-
sections = $('[data-section]')
|
|
133
|
+
sections = $('[data-section]'),
|
|
134
134
|
self = this;
|
|
135
135
|
|
|
136
136
|
sections.each(function () {
|
|
@@ -168,6 +168,9 @@
|
|
|
168
168
|
if ($('html').hasClass('lt-ie9')) {
|
|
169
169
|
return true;
|
|
170
170
|
}
|
|
171
|
+
if ($('html').hasClass('ie8compat')) {
|
|
172
|
+
return true;
|
|
173
|
+
}
|
|
171
174
|
return $(this.scope).width() < 768;
|
|
172
175
|
},
|
|
173
176
|
|