if(topic.length < 1) { topic = 'Foundation'; }
var header = 'Master ' + topic;
var body = 'Get up to speed FAST, learn straight from the experts who built Foundation.';
- var link = 'http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Struggling&utm_campaign=Docs%20To%20Intro';
+ var link = '//zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Struggling&utm_campaign=Docs%20To%20Intro';
var cta = 'Learn More';
var html = '<div class="ad-unit"><h3 class="ad-unit-title">' + header + '</h3>' +
position: relative;
padding: 1rem 0;
width:100%;
- background-image: url('http://zurb.com/university/assets/zurbwired2016-web-banner-a95e5d17264e3617a2ae4f34e84f973b.gif');
+ background-image: url('//zurb.com/university/assets/zurbwired2016-web-banner-a95e5d17264e3617a2ae4f34e84f973b.gif');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
</head>
<body>
- <!-- <a href="http://zurb.com/wired" id="notice">
+ <!-- <a href="//zurb.com/wired" id="notice">
<div class="info">
<div id="clockdiv" class="countdown">
<span class="timer-day days"></span>
<div class="docs-off-canvas-content off-canvas-content" data-off-canvas-content>
<div class="docs-sticky-top-bar">
<!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/university/foundation-intro" class="docs-banner course-banner">
+ <!-- <a href="//zurb.com/university/foundation-intro" class="docs-banner course-banner">
<div class="info">
<h5 class=""><strong>To master everything new in 6.4, along with the rest of Foundation register for our August 8th Webinar Class ›</strong></h5>
</div>
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : '//www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
cvv : /^([0-9]){3,4}$/,
-// http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
+// //www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,
// From CommonRegexJS (@talyssonoc)
### Resources
-- [WCAG 2.0 Guide](http://www.w3.org/TR/UNDERSTANDING-WCAG20/)
+- [WCAG 2.0 Guide](//www.w3.org/TR/UNDERSTANDING-WCAG20/)
- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
-- [w3.org Introduction to Accessibility](http://www.w3.org/WAI/intro/accessibility.php)
-- [Section 508 government requirements](http://www.section508.gov/)
-- [WebAIM certification and training](http://webaim.org/)
-- [Web Accessibility Checklist](http://a11yproject.com/checklist.html)
+- [w3.org Introduction to Accessibility](//www.w3.org/WAI/intro/accessibility.php)
+- [Section 508 government requirements](//www.section508.gov/)
+- [WebAIM certification and training](//webaim.org/)
+- [Web Accessibility Checklist](//a11yproject.com/checklist.html)
### Tools
- [Tenon accessibility checker](https://tenon.io/index.php)
-- [WAVE Chrome plugin - free accessibility checker](http://wave.webaim.org)
-- [Color Contrast Checker](http://webaim.org/resources/contrastchecker)
-- [ChromeVox screen reader plugin for Chrome](http://www.chromevox.com)
-- [JAWS screen reader for Windows](http://www.freedomscientific.com/Products/Blindness/Jaws)
-- [NVDA screen reader for Windows - Free](http://www.nvaccess.org/download/)
+- [WAVE Chrome plugin - free accessibility checker](//wave.webaim.org)
+- [Color Contrast Checker](//webaim.org/resources/contrastchecker)
+- [ChromeVox screen reader plugin for Chrome](//www.chromevox.com)
+- [JAWS screen reader for Windows](//www.freedomscientific.com/Products/Blindness/Jaws)
+- [NVDA screen reader for Windows - Free](//www.nvaccess.org/download/)
```html
<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
<li>
- <a href="http://foundation.zurb.com/">Zurb Foundation</a>
+ <a href="//foundation.zurb.com/">Zurb Foundation</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true" style="max-width: 250px">
<li>
- <a href="http://foundation.zurb.com/">Zurb Foundation</a>
+ <a href="//foundation.zurb.com/">Zurb Foundation</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
</li>
</ul>
```
-For example, <a target="_blank" href="#deeplink3">http://example.com/#deeplink3</a> will open the third accordion panel at page load. This example will open a new browser tab and scroll you to the open accordion panel.
+For example, <a target="_blank" href="#deeplink3">//example.com/#deeplink3</a> will open the third accordion panel at page load. This example will open a new browser tab and scroll you to the open accordion panel.
When linking directly to a accordion panel, it might not be obvious that the content appears within a accordion panel. An additional attribute `data-deep-link-smudge` rolls the page up slightly after deep linking (to a horizontal accordion) so that the accordion is at the top of the viewport.
<div class="warning callout">
<p>If your site is visited by search engines, then you should consider adding Schema.org structure data. This will allow your site to appear more attractive in search results. </p>
- <p>For more information, see <a href="https://developers.google.com/search/docs/data-types/breadcrumbs">Breadcrumbs - Google Developers</a>, <a href="http://schema.org/BreadcrumbList">BreadcrumbList - schema.org</a>.</p>
+ <p>For more information, see <a href="https://developers.google.com/search/docs/data-types/breadcrumbs">Breadcrumbs - Google Developers</a>, <a href="//schema.org/BreadcrumbList">BreadcrumbList - schema.org</a>.</p>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/JNvXam?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/JNvXam?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/dWeMwL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/dWeMwL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/KmRzEq?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/KmRzEq?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/bWMpXB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/bWMpXB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/bWMemL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/bWMemL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/GmdjKM?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/GmdjKM?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="callout training-callout">
<p>To help you get the most out of Foundation and create responsive websites and apps like us we’ve put together some unique online webinar training. Learn Foundation’s Grid, how to use and modify Foundation's UI components, Foundation’s JavaScript options and functions, and tons of tips and tricks we learned from major client projects.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Learn more about Foundation training →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Learn more about Foundation training →</a>
</div>
## Basics
</div>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/wdmZME?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/wdmZME?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/JNLVRb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/JNLVRb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
The text color for each button class is determined by either `$button-color` or `$button-color-alt`, whichever settings variable has more contrast.
<div class="primary callout">
- <p>The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](http://webaim.org/resources/contrastchecker/) when changing color variables. To give all buttons the same color text, set `$button-color` and `$button-color-alt` to the same value — but know that doing so may decrease accessibility.</p>
+ <p>The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](//webaim.org/resources/contrastchecker/) when changing color variables. To give all buttons the same color text, set `$button-color` and `$button-color-alt` to the same value — but know that doing so may decrease accessibility.</p>
</div>
---
</p>
<div class="docs-video-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/xdjVOp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/xdjVOp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/LymNyB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/LymNyB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</div>
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/PmeNOY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/PmeNOY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/WjyGVB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/WjyGVB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/JNZbGy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/JNZbGy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
Callouts can be sized using the `.small` and `.large` classes. These will affect the padding around content to be smaller and larger respectively.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/ybEVVe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/ybEVVe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<a class="" data-open-video="4:47"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
<div class="callout primary">
<p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
- <p>When using the <code>data-closable</code> attribute, you can optionally add <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>
+ <p>When using the <code>data-closable</code> attribute, you can optionally add <a href="//foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>
</div>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/eWKBBd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/eWKBBd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/PmabmL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/PmabmL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="callout training-callout">
<p>Become a master of the Foundation Grids to create complex layouts faster and with less code. The new XY Grid is the newest and most powerful version. Stay up-to-date with all the new features in Foundation 6.4 and learn how to migrate to the XY Grid with our online webinar training. You’ll also learn all the useful UI components and Foundation JavaScript to really crush your projects.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Get registered for an upcoming Foundation training →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Get registered for an upcoming Foundation training →</a>
</div>
The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.
## Browser support
-The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
+The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](//caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
<div class="callout warning">
<p>In Firefox 43+, images in flex columns may overflow their container. To fix this, add a defined <code>width</code> to any images inside a flex column, or use <code>width: 100%</code> for full-bleed images.</p>
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/dWmVax?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/dWmVax?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/XREzBv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/XREzBv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/pPLdYY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/pPLdYY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/aWYVgd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/aWYVgd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
To switch back to the expand behavior from a percentage or shrink behavior, use the classes `.medium-expand` or `.large-expand`. In the below example, the columns stack on small screens, and become even-width on large screens.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/vmRpBJ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/vmRpBJ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
We have a few shorthand classes for the above behavior. Use the `.[size]-unstack` classes to stack all columns in the row by default, and then unstack them on a larger screen size, making each one equal-width.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/xdWpER?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/xdWpER?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/mmxpGz?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/mmxpGz?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/BRrYQy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/BRrYQy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/pPLaPe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/pPLaPe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
The `.is-collapse-child` class removes negative margins from nested row under collapsed parent.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/pPLaWP?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/pPLaWP?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
Offsets work identically to the float grid, by applying `margin-left` to a column.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/mmxXpb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/mmxXpb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</div>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/PmRdOy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/PmRdOy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="callout training-callout">
<p>Learn the right way to tackle your project and at same time saving time and money. We offer in depth online webinars for you to gain the skills to become a Foundation front-end master.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Check out our upcoming training opportunities →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Check out our upcoming training opportunities →</a>
</div>
## Form Basics
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/wdmQrr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/wdmQrr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
In most desktop browsers, `<input type="number">` elements will have up/down controls inside them, which increment and decrement the number inside the field. These are called *spin buttons*. You can disable them by setting the `$input-number-spinners` Sass variable to `false`.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/WjzYJJ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/WjzYJJ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/rmdQrg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/rmdQrg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/XREyxv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/XREyxv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/Omvadz?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/Omvadz?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/XREyxv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/XREyxv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/wdmOqr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/wdmOqr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</div>
<div class="docs-video-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/eWMXex?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/eWMXex?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</div>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/rmdRqg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/rmdRqg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/NjYJZB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/NjYJZB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="callout training-callout">
<p>Become a master of the Foundation Grids to create complex layouts faster and with less code. The new XY Grid is the newest and most powerful version. Stay up-to-date with all the new features in Foundation 6.4 and learn how to migrate to the XY Grid with our online webinar training. You’ll also learn all the useful UI components and Foundation JavaScript to really crush your projects.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Get registered for an upcoming Foundation training →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Get registered for an upcoming Foundation training →</a>
</div>
</div>
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/ZKrdZz?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/ZKrdZz?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/oWEKXw?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/oWEKXw?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/vmdoxj?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/vmdoxj?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</div>
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/ZKrgop?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/ZKrgop?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/rmJXZy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/rmJXZy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/zwRgbE?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/zwRgbE?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs--codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/YVaKyg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/YVaKyg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of `.end` in order to override that behavior. Alternatively, you can set the `$grid-column-align-edge` variable to `false` to turn off this behavior entirely.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/dWmbpa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/dWmbpa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/xdWKqa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/xdWKqa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/zwWOpL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/zwWOpL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/QvmLmv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/QvmLmv?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/eWMOjK?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/eWMOjK?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="callout training-callout">
<p>The number one way to learn your way around Foundation and start mastering responsive web development is via the training courses offered by the ZURB team.</p>
- <a class="button" href="http://zurb.com/university/foundation-intro" target="_blank">Check out the next Foundation training →</a>
+ <a class="button" href="//zurb.com/university/foundation-intro" target="_blank">Check out the next Foundation training →</a>
</div>
With an easy to understand syntax and consistent structure, you'll learn your way around Foundation in no time!
<div class="accordion-content" data-tab-content>
- <a target="_blank" href="http://foundation.zurb.com/learn/get-your-team-on-a-solid-foundation.html">
+ <a target="_blank" href="//foundation.zurb.com/learn/get-your-team-on-a-solid-foundation.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i.ytimg.com/vi/kLgRITKjcWw/mqdefault.jpg" class="" height="" width="" alt="">
</div>
</a>
- <a target="_blank" href="http://foundation.zurb.com/learn/build-your-career-on-a-solid-foundation.html">
+ <a target="_blank" href="//foundation.zurb.com/learn/build-your-career-on-a-solid-foundation.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i.ytimg.com/vi/dZZk9Kz5j_0/mqdefault.jpg" class="" height="" width="" alt="">
<a href="#" class="accordion-title">Templates and Code Snippets</a>
<div class="accordion-content " data-tab-content>
- <a target="_blank" href="http://foundation.zurb.com/templates.html">
+ <a target="_blank" href="//foundation.zurb.com/templates.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-07.svg">
</div>
</a>
- <a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo">
+ <a target="_blank" href="//zurb.com/article/1469/foundation-building-blocks-over-100-compo">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="" style="height: 142px;">
</div>
</a>
- <a target="_blank" href="http://foundation.zurb.com/building-blocks/kits.html">
+ <a target="_blank" href="//foundation.zurb.com/building-blocks/kits.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://foundation.zurb.com/building-blocks/assets/img/kits/dashboard/dashboard-kit.jpg" style="height: 142px; width: 100%;">
<a href="#" class="accordion-title">Additional Resources</a>
<div class="accordion-content" data-tab-content>
- <a target="_blank" href="http://foundation.zurb.com/learn/zero-to-website-in-no-time-flat.html">
+ <a target="_blank" href="//foundation.zurb.com/learn/zero-to-website-in-no-time-flat.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i.ytimg.com/vi/KHMXOTbLAGE/mqdefault.jpg" class="" height="" width="" alt="">
</div>
</a>
- <a target="_blank" href="http://zurb.com/university/foundation-intro">
+ <a target="_blank" href="//zurb.com/university/foundation-intro">
<div class="grid-x grid-margin-x accordion-content-item accordion-course-callout">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/foundation-intro-class.jpg" style="height: 142px;">
<div class="cell medium-8">
<h5>Live Webinar: Introduction to Foundation 6</h5>
<p>Master Foundation ultra fast. The Foundation team will get you up to speed on everything you need to know to get the most out of Foundation 6.</p>
- <span href="http://zurb.com/university/foundation-intro" class="accordion-content-item-cta">Learn More</span>
+ <span href="//zurb.com/university/foundation-intro" class="accordion-content-item-cta">Learn More</span>
</div>
</div>
</a>
<a href="#" class="accordion-title">Latest Foundation Updates</a>
<div class="accordion-content" data-tab-content>
- <a target="_blank" href="http://zurb.com/blog/foundation-6-4-a-new-grid-javascript-upgrades-and-slick-new-prototyping-mode">
+ <a target="_blank" href="//zurb.com/blog/foundation-6-4-a-new-grid-javascript-upgrades-and-slick-new-prototyping-mode">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/vrvt9xMFjIE/maxresdefault.jpg" class="" height="" width="" alt="">
<a href="#" class="accordion-title">Building Blocks</a>
<div class="accordion-content" data-tab-content>
- <a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo">
+ <a target="_blank" href="//zurb.com/article/1469/foundation-building-blocks-over-100-compo">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
</a>
- <a target="_blank" href="http://foundation.zurb.com/building-blocks/how-to.html">
+ <a target="_blank" href="//foundation.zurb.com/building-blocks/how-to.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/adLpmsU9v2g/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
</a>
- <a target="_blank" href="http://jointswp.com/">
+ <a target="_blank" href="//jointswp.com/">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-3 accordion-content-item-thumbnail">
<img src="https://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png" class="" height="147" width="147" alt="" style="border: 0;">
<a href="#" class="accordion-title">Foundation Showcase</a>
<div class="accordion-content" data-tab-content>
- <a target="_blank" href="http://foundation.zurb.com/foundationturns5">
+ <a target="_blank" href="//foundation.zurb.com/foundationturns5">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/foundation-turns-5.png" class="" height="" width="" alt="">
</div>
</a>
- <a target="_blank" href="http://foundation.zurb.com/showcase/brands.html">
+ <a target="_blank" href="//foundation.zurb.com/showcase/brands.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/foundation-brands.png" class="" height="" width="" alt="">
</div>
</a>
- <a target="_blank" href="http://foundation.zurb.com/showcase/case-studies.html">
+ <a target="_blank" href="//foundation.zurb.com/showcase/case-studies.html">
<div class="grid-x grid-margin-x accordion-content-item">
<div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://foundation.zurb.com/assets/img/learn/case-studies/meundies-mockup1.jpg" class="" height="" width="" alt="">
If you aren't into Sass, we have a starter template with compiled CSS and JavaScript, as well as a starting `index.html` file for you to hack on. Just unzip and get coding!
</p>
<p class="text-center">
- <a href="http://foundation.zurb.com/sites/download" class="button">Download Foundation</a>
+ <a href="//foundation.zurb.com/sites/download" class="button">Download Foundation</a>
</p>
</div>
</div>
## Other Integrations
-The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our [resources page](http://foundation.zurb.com/sites/resources) to find even more ways to use Foundation.
+The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our [resources page](//foundation.zurb.com/sites/resources) to find even more ways to use Foundation.
## Keyboard
`js/foundation.util.keyboard.js`
-Another quite useful library, `Foundation.Keyboard` has several methods to make keyboard event interaction easier for all. Shout out to [Marius Olbertz](http://www.mariusolbertz.de) of Germany who conceived and coded this library.
+Another quite useful library, `Foundation.Keyboard` has several methods to make keyboard event interaction easier for all. Shout out to [Marius Olbertz](//www.mariusolbertz.de) of Germany who conceived and coded this library.
Ever wanted a handy list of common keycodes and the keys they represent? Use `Foundation.Keyboard.keys`. This is an object containing key/value pairs of the most frequently used keys in our framework.
Know that they all require `foundation.core.js` to be loaded *first*. Some plugins also require specific utility libraries that ship with Foundation—refer to a plugin's documentation to find out which plugins require what, and see the [JavaScript Utilities](javascript-utilities.html) page for more information.
<div class="callout warning">
- <p>Loading many individual files like this creates a lot of network overhead, especially for users on mobile networks. To keep your pages loading quick, we recommend using a tool like <a href="http://gruntjs.com">Grunt</a> or <a href="http://gulpjs.com">Gulp</a> to combine all of your JavaScript files into one.</p>
+ <p>Loading many individual files like this creates a lot of network overhead, especially for users on mobile networks. To keep your pages loading quick, we recommend using a tool like <a href="//gruntjs.com">Grunt</a> or <a href="//gulpjs.com">Gulp</a> to combine all of your JavaScript files into one.</p>
</div>
### Import in JavaScript
-By default, Foundation is exported as [UMD modules](http://bob.yexley.net/umd-javascript-that-runs-anywhere/). This means that Foundation and its plugins can be imported and used in any JavaScript environment.
+By default, Foundation is exported as [UMD modules](//bob.yexley.net/umd-javascript-that-runs-anywhere/). This means that Foundation and its plugins can be imported and used in any JavaScript environment.
For example with [ES6](https://github.com/lukehoban/es6features#readme) (the ESM format):
```js
const $dropdown = new Dropdown($('#mydropdown'));
```
-With [RequireJs](http://requirejs.org/) (the AMD format):
+With [RequireJs](//requirejs.org/) (the AMD format):
```js
define(['foundation'], function(Foundation) {
var $dropdown = new Foundation.Dropdown($('#mydropdown'));
<div class="docs-codepen-container" data-ks-codepen>
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/dWmVax?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/dWmVax?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
The text color for each label class is determined by either `$label-color` or `$label-color-alt`, whichever settings variable has more contrast.
<div class="primary callout">
- <p>The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](http://webaim.org/resources/contrastchecker/) when changing color variables. To give all labels the same color text, set `$label-color` and `$label-color-alt` to the same value — but know that doing so may decrease accessibility.</p>
+ <p>The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](//webaim.org/resources/contrastchecker/) when changing color variables. To give all labels the same color text, set `$label-color` and `$label-color-alt` to the same value — but know that doing so may decrease accessibility.</p>
</div>
---
## Icons
-An icon can be dropped into a label just fine. We're using the [Foundation icon font](http://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
+An icon can be dropped into a label just fine. We're using the [Foundation icon font](//zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/dWKrgb?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/NjzbEG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/NjzbEG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/aWKpOj" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/aWKpOj" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/JNZEKe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/JNZEKe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
By nesting a media object into the media-object-section section, you can easily indent it. This is great for comment strings.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/aWKpOj" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/aWKpOj" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="callout training-callout">
<p>Build better websites and apps, code cleaner, and become a better front-end developer with Foundation training. We're running two online webinar training sessions this month where we break down how to get the most out of Foundation and leap ahead skillwise.</p>
- <a href="http://zurb.com/university/courses" target="_blank"> Get registered →</a>
+ <a href="//zurb.com/university/courses" target="_blank"> Get registered →</a>
</div>
## Default Media Queries
<div class="callout training-callout">
<p>Navigation is one the most crucial part of your site. Be a navigation guru with our Foundation online webinar training. You’ll learn techniques for creating responsive navigations that work with any type of site. In addition to that you can learn tips and tricks and best practices for all of Foundation’s components.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
</div>
The menu is a flexible, all-purpose component for navigation. It replaces Foundation 5's inline list, side nav, sub nav, and icon bar, unifying them into one component.
<div class="callout training-callout">
<p>Off-canvas layouts are common and useful for mobile and desktop layouts. Be a navigation guru with our Foundation online webinar training. You’ll learn techniques for creating responsive navigations that work with any type of site. In addition to that you can learn tips and tricks and best practices for all of Foundation’s components.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
</div>
<div class="primary callout">
So putting it all together:
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/ZKjXvQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/ZKjXvQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
To create a click trigger that opens the panel, add the attribute `data-open` or `data-toggle` to any element. That element will then open or toggle the panel when clicked on. The value of the data attribute should be the ID of the off-canvas.
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/ZKjXvQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/ZKjXvQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
Foundation's Close component can be used inside the off-canvas to close it.
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/QvBQjo?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/QvBQjo?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<!-- Your menu or Off-canvas content goes here -->
</div>
<div class="off-canvas-content" data-off-canvas-content>
- <img src="http://placehold.it/300x300" class="" height="" width="" alt="">
+ <img src="//placehold.it/300x300" class="" height="" width="" alt="">
</div>
</div>
</div>
#### Off-Canvas (Putting it all together)
-For an example of off-canvas, checkout this top bar with off-canvas navigation and dropdowns for submenus building block: http://foundation.zurb.com/building-blocks/blocks/multilevel-offcanvas-menu.html
+For an example of off-canvas, checkout this top bar with off-canvas navigation and dropdowns for submenus building block: //foundation.zurb.com/building-blocks/blocks/multilevel-offcanvas-menu.html
---
Orbit doesn't automatically generate any HTML for you, giving you the flexibility to move around the various pieces of the plugin. Here's a complete example—we'll break down the individual pieces farther down.
<div class="callout alert">
- <p>Please note that apart from Javascript, <a href="
http://foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> is a dependency for Orbit to work properly. If in case, you don't want any animations within your Carousel, you can always <a href="#disabling-animation">disable</a> the animation.</p>
+ <p>Please note that apart from Javascript, <a href="//foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> is a dependency for Orbit to work properly. If in case, you don't want any animations within your Carousel, you can always <a href="#disabling-animation">disable</a> the animation.</p>
</div>
<p>
```
<!-- <div class="callout"><p>
- The new Orbit slider was designed to be a tool for rapid prototyping. While you are welcome to use it in production, if you want something more robust, we welcome you to try [Owl Carousel](http://owlgraphic.com/owlcarousel/).
+ The new Orbit slider was designed to be a tool for rapid prototyping. While you are welcome to use it in production, if you want something more robust, we welcome you to try [Owl Carousel](//owlgraphic.com/owlcarousel/).
</p>
<div class="callout alert">
<p>
If you've ever created a static site, maybe you had five pages that all shared the same header and footer. You create your first page, and then copy and paste the common elements to the next page. But now if you need to make a change to the header, the change has to be made across multiple files.
-Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the [Handlebars](http://handlebarsjs.com/) templating language—to streamline the process of creating static prototypes.
+Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the [Handlebars](//handlebarsjs.com/) templating language—to streamline the process of creating static prototypes.
Our [prototyping template](starter-projects.html) uses Panini, along with a host of other tools for processing Sass, JavaScript, and images, to make creating static prototypes easy. It's already been configured to utilize all of the features below, but if you want to learn the specifics of how to configure the library, head over to the [Panini GitHub page](https://github.com/zurb/panini).
Note that there's no `<html>` or `<body>` tags, and no header or footer. This code will be injected into the `{{> body}}` declaration when Panini assembles your pages.
-In the prototyping template, these finished files are compiled into a standalone folder called `dist` (short for "distribution"), which also includes your processed CSS, JavaScript, and images. This folder can easily be uploaded to any web server, or Notable's [Hosted Prototypes](http://zurb.com/notable/features/hosted) service.
+In the prototyping template, these finished files are compiled into a standalone folder called `dist` (short for "distribution"), which also includes your processed CSS, JavaScript, and images. This folder can easily be uploaded to any web server, or Notable's [Hosted Prototypes](//zurb.com/notable/features/hosted) service.
---
## Helpers
-Helpers are special functions that manipulate content on the page. In addition to [Handlebars's built-in helpers](http://handlebarsjs.com/builtin_helpers.html), Panini includes a few custom helpers and you can add your own.
+Helpers are special functions that manipulate content on the page. In addition to [Handlebars's built-in helpers](//handlebarsjs.com/builtin_helpers.html), Panini includes a few custom helpers and you can add your own.
### ifequal
Displays the HTML inside the helper if the two values are equal.
```handlebars
{{#markdown}}
# Heading 1
-Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
+Lorem ipsum [dolor sit amet](//html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
{{/markdown}}
```
Custom data can be added to your pages. This data can then be inserted into your HTML through Handlebars. There are two ways to add data to a project.
-To add variables to a specific page only, add it at the top of the page's HTML as a [Front Matter](http://jekyllrb.com/docs/frontmatter/) block. Let's say the below content is inside `src/pages/index.html`.
+To add variables to a specific page only, add it at the top of the page's HTML as a [Front Matter](//jekyllrb.com/docs/frontmatter/) block. Let's say the below content is inside `src/pages/index.html`.
```html
---
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/PmBqPB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/PmBqPB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/mmjJPL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/mmjJPL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/NjBqRm?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/NjBqRm?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
## Native Progress
-As an alternative to our custom progress bar style, you can also opt to use the native `<progress>` element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. [View `<progress>` element support.](http://caniuse.com/#feat=progress)
+As an alternative to our custom progress bar style, you can also opt to use the native `<progress>` element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. [View `<progress>` element support.](//caniuse.com/#feat=progress)
```html_example
<progress max="100" value="75"></progress>
## Native Meter
-For the *extra* adventurous developers out there, we also provide styles for the `<meter>` element. What's the difference? `<progress>` represents a value that changes over time, like storage capacity. `<meter>` represents a value that fluctuates around some optimum value. It also has *no* support in Internet Explorer, Mobile Safari, or Android 2. [View `<meter>` element support.](http://caniuse.com/#search=meter)
+For the *extra* adventurous developers out there, we also provide styles for the `<meter>` element. What's the difference? `<progress>` represents a value that changes over time, like storage capacity. `<meter>` represents a value that fluctuates around some optimum value. It also has *no* support in Internet Explorer, Mobile Safari, or Android 2. [View `<meter>` element support.](//caniuse.com/#search=meter)
If you're using the Sass version of Foundation, add this line to your main Sass file to export the `<meter>` CSS:
These `.radius`, `.rounded`, `.bordered` & `.shadow` classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.
<div class="primary callout">
- **Sass Tip**: You can use [Shadow](#shadow) mixin to create something like `shadow-hover-focus`. [Codepen example](http://codepen.io/IamManchanda/pen/XMRMwo)
+ **Sass Tip**: You can use [Shadow](#shadow) mixin to create something like `shadow-hover-focus`. [Codepen example](//codepen.io/IamManchanda/pen/XMRMwo)
</div>
<p>
<br>
<div class="alert callout">
<p>
- <strong>Bug(v6.3.1):</strong> There is a bug within <strong>drilldown-dropdown menu</strong> combo. If you set up a responsive menu with drilldown on small, then dropdown for medium up, and resize to small and then back to medium the dropdowns will not work. The bug can be reproduced <a href="http://codepen.io/IamManchanda/pen/mmGOgG?editors=1000">here</a> <br>
+ <strong>Bug(v6.3.1):</strong> There is a bug within <strong>drilldown-dropdown menu</strong> combo. If you set up a responsive menu with drilldown on small, then dropdown for medium up, and resize to small and then back to medium the dropdowns will not work. The bug can be reproduced <a href="//codepen.io/IamManchanda/pen/mmGOgG?editors=1000">here</a> <br>
<strong>Good News:</strong> The Bug will be fixed with the upcoming foundation release. If you are specifically using <strong>v6.3.1</strong>, we recommend to use this below patch to fix this.
</p>
</div>
<div class="callout training-callout">
<p>We hope you’re loving these free documentation videos! If you’d like to really accelerate your learning and master the world of front-end development, our Foundation online webinar training is the answer.</p>
- <a href="http://zurb.com/university/courses" target="_blank">See the upcoming Foundation trainings →</a>
+ <a href="//zurb.com/university/courses" target="_blank">See the upcoming Foundation trainings →</a>
</div>
## Basics
- **Urdu:** `ur`
- **Yiddish:** `yi`, `ji`
-View of a [full list of language codes](http://www.loc.gov/standards/iso639-2/php/code_list.php) on the website of the Library of Congress.
+View of a [full list of language codes](//www.loc.gov/standards/iso639-2/php/code_list.php) on the website of the Library of Congress.
---
## CSS Download
-If you use a CSS version of Foundation (the ones you can find on the [download page](http://foundation.zurb.com/sites/download)), you'll need to create a custom download that includes RTL CSS instead of LTR. Just select "Right-to-left" under the Text Direction section of the customizer.
+If you use a CSS version of Foundation (the ones you can find on the [download page](//foundation.zurb.com/sites/download)), you'll need to create a custom download that includes RTL CSS instead of LTR. Just select "Right-to-left" under the Text Direction section of the customizer.
---
<div class="callout training-callout">
<p>Get trained up on Foundation's Sass with our online webinar training. Sass allows you to write dramatically more efficient code. We'll go over things like how to install and start compiling Sass, nesting mixins and functions, and writing fully semantic CSS using Foundation mixins for insanely maintainable code.</p>
- <a href="http://zurb.com/university/advanced-foundation-training" target="_blank">Reserve your spot →</a>
+ <a href="//zurb.com/university/advanced-foundation-training" target="_blank">Reserve your spot →</a>
</div>
<div class="primary callout">
- <p>Not familiar with Sass? The [official tutorial](http://sass-lang.com/guide) on sass-lang.com is a great place to start.</p>
+ <p>Not familiar with Sass? The [official tutorial](//sass-lang.com/guide) on sass-lang.com is a great place to start.</p>
</div>
## Compatibility
## Native Range Slider
-In Foundation 6.2, we introduced styles for `<input type="range">`, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. [View browser support for the range input type.](http://caniuse.com/#feat=input-range)
+In Foundation 6.2, we introduced styles for `<input type="range">`, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. [View browser support for the range input type.](//caniuse.com/#feat=input-range)
<p>
<a class="" data-open-video="10:05"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
---
-Our project templates give you a solid... *Foundation* on which to start a new project. Both templates use the [Gulp](http://gulpjs.com) build system to automate the process of compiling Sass, processing JavaScript, copying files, and more.
+Our project templates give you a solid... *Foundation* on which to start a new project. Both templates use the [Gulp](//gulpjs.com) build system to automate the process of compiling Sass, processing JavaScript, copying files, and more.
## Basic Template
npm start
```
-Once compiled, you project is viewable at: <a class="button primary" href="http://localhost:8000" target="_blank">http://localhost:8000</a>
+Once compiled, you project is viewable at: <a class="button primary" href="//localhost:8000" target="_blank">//localhost:8000</a>
The biggest difference between this and the basic template is the folder structure. In the ZURB Template, your project has a `src/` folder which contains your source files, and a separate `dist/` folder with your finished website. As you work on your project, Gulp continuously updates your `dist/` folder with new versions of files. To compile a production build, run `npm run build`.
* **Page Compilation**
- The `src/` directory includes three folders used to create HTML pages: `pages/`, `layouts/`, and `partials/`. A flat file compiler called [Panini](panini.html) is used to process your project's various pages, inserting them into a common template, and injecting any HTML partials. This is done with a templating language called [Handlebars](http://handlebarsjs.com/).
+ The `src/` directory includes three folders used to create HTML pages: `pages/`, `layouts/`, and `partials/`. A flat file compiler called [Panini](panini.html) is used to process your project's various pages, inserting them into a common template, and injecting any HTML partials. This is done with a templating language called [Handlebars](//handlebarsjs.com/).
Panini has a dedicated page here in the docs that explains its various features. **[Learn more about Panini.](panini.html)**
* **Sass Compilation**
- Sass is compiled to CSS using [Libsass](http://sass-lang.com/libsass) (via [node-sass](https://github.com/sass/node-sass)). The main Sass file is under `src/assets/scss/app.scss`, and imports Foundation and Motion UI. Any new Sass partials you create should be in this folder as well.
+ Sass is compiled to CSS using [Libsass](//sass-lang.com/libsass) (via [node-sass](https://github.com/sass/node-sass)). The main Sass file is under `src/assets/scss/app.scss`, and imports Foundation and Motion UI. Any new Sass partials you create should be in this folder as well.
The CSS is output in the `nested` style, which is readable like normal CSS. A source map is also created, which can be read by developer tools such as the Chrome Web Inspector. When building for production, the CSS is also compressed with [clean-css](https://github.com/jakubpawlowicz/clean-css/issues), and pruned with [UnCSS](https://github.com/giakki/uncss). UnCSS scans the HTML of your pages and removes any CSS classes you didn't use.
A source map is created that maps back to the original files. By default, the bundled `app.js` is uncompressed. When building for production, the file is run through [UglifyJS](https://github.com/mishoo/UglifyJS) for compression.
The whole bundling process is handled by [webpack](https://webpack.js.org): it manages all assets and dependencies for you and compiles them into one single file. If you're unfamiliar with imports or module bundling, check out:
- * [What are ES6 imports](http://2ality.com/2014/09/es6-modules-final.html)
+ * [What are ES6 imports](//2ality.com/2014/09/es6-modules-final.html)
* [Beginner’s guide to webpack](https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460)
* [Beginner’s guide to JavaScript Modules](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc).
* **BrowserSync**
- The template creates a [BrowserSync](http://www.browsersync.io/) server, which is at `http://localhost:8000`. Load this URL to see your compiled templates. While the server is running, any time you save a file, any pages you have open will automatically refresh, allowing you to see changes in real-time as you work.
+ The template creates a [BrowserSync](//www.browsersync.io/) server, which is at `//localhost:8000`. Load this URL to see your compiled templates. While the server is running, any time you save a file, any pages you have open will automatically refresh, allowing you to see changes in real-time as you work.
* **Style Guide Creation**
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/zwaazZ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/zwaazZ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/xdzzgr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/xdzzgr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/MmBQag?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/MmBQag?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/EmpQPK?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/EmpQPK?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</div>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/vmadKp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/vmadKp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</div>
```
-For example, <a target="_blank" href="#panel3d">http://example.com/#panel3d</a> will open the third tab panel at page load. This example will open a new browser tab and scroll you to the open tab.
+For example, <a target="_blank" href="#panel3d">//example.com/#panel3d</a> will open the third tab panel at page load. This example will open a new browser tab and scroll you to the open tab.
When linking directly to a tab panel, it might not be obvious that the content appears within a tab panel. An additional attribute `data-deep-link-smudge` rolls the page up slightly after deep linking (to a horizontal tabset) so that the tabstrip is at the top of the viewport.
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/zwLxaY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/zwLxaY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/BRPyqx?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/BRPyqx?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/XRBJvm?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/XRBJvm?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</div>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/ZURBFoundation/pen/EmpaJP?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/ZURBFoundation/pen/EmpaJP?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="callout training-callout">
<p>Navigation is one the most crucial part of your site. Be a navigation guru with our Foundation online webinar training. You’ll learn techniques for creating responsive navigations that work with any type of site. In addition to that you can learn tips and tricks and best practices for all of Foundation’s components.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
</div>
## Basics
### Contrast
-The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. **The minimum recommended contrast ratio is 4.5:1.** There are no automated tools that can effectively check this for you, but if you aren't sure about a specific color combination, you can run it through one of many color contrast checkers, such as [WebAIM's color contrast checker](http://webaim.org/resources/contrastchecker/).
+The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. **The minimum recommended contrast ratio is 4.5:1.** There are no automated tools that can effectively check this for you, but if you aren't sure about a specific color combination, you can run it through one of many color contrast checkers, such as [WebAIM's color contrast checker](//webaim.org/resources/contrastchecker/).
Google Chrome's [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en) also includes a contrast checker. By selecting an element in the inspector, you can see if the contrast meets the minimum standards.
### More Resources
-- [WebAIM: Fonts](http://webaim.org/techniques/fonts/)
-- [WebAIM: Links and HyperText](http://webaim.org/techniques/hypertext/)
-- [WebAIM: Writing Clearly and Simply](http://webaim.org/techniques/semanticstructure/)
-- [WebAIM: Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
+- [WebAIM: Fonts](//webaim.org/techniques/fonts/)
+- [WebAIM: Links and HyperText](//webaim.org/techniques/hypertext/)
+- [WebAIM: Writing Clearly and Simply](//webaim.org/techniques/semanticstructure/)
+- [WebAIM: Color Contrast Checker](//webaim.org/resources/contrastchecker/)
---
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/QvBQOe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/QvBQOe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/vmadjr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/vmadjr?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/GmBQGY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/GmBQGY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/wdxyxb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/wdxyxb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="
http://codepen.io/IamManchanda/pen/XRBZxp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="//codepen.io/IamManchanda/pen/XRBZxp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
</div>
<div class="callout warning">
- <p>There are no classes to detect touchscreen devices, as both desktop and mobile browsers inconsistently report touch support. Learn more here: <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">You Can't Detect a Touchscreen</a></p>
+ <p>There are no classes to detect touchscreen devices, as both desktop and mobile browsers inconsistently report touch support. Learn more here: <a href="//www.stucox.com/blog/you-cant-detect-a-touchscreen/">You Can't Detect a Touchscreen</a></p>
</div>
## Show by Screen Size
<div class="callout training-callout">
<p>The XY Grid is a huge advancement in Grids. Stay up-to-date with all the new features in Foundation 6.4 with our online webinar training. You’ll come away knowing the ins and outs of the XY Grid to create complex layouts faster and with less code. Not to mention all the useful UI components and Foundation JavaScript you’ll learn. You’ll make your coworkers jealous.</p>
- <a href="http://zurb.com/university/foundation-intro" target="_blank">Don’t miss out on the upcoming Foundation trainings →</a>
+ <a href="//zurb.com/university/foundation-intro" target="_blank">Don’t miss out on the upcoming Foundation trainings →</a>
</div>
## XY Grid Basics
## Browser support
-The XY grid is supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View Flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the XY grid on projects that can live with purely cutting-edge browser support.
+The XY grid is supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View Flexbox browser support.](//caniuse.com/#feat=flexbox)) We recommend only using the XY grid on projects that can live with purely cutting-edge browser support.
---
<a href="#" class="accordion-title">Older Versions</a>
<div class="accordion-content" data-tab-content>
<ul class="docs-nav-subcategory">
- <li><a href="http://foundation.zurb.com/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="http://foundation.zurb.com/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="http://foundation.zurb.com/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="http://foundation.zurb.com/sites/docs/v/2.2.1/">Foundation 2</a></li>
+ <li><a href="//foundation.zurb.com/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
+ <li><a href="//foundation.zurb.com/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
+ <li><a href="//foundation.zurb.com/sites/docs/v/3.2.5/">Foundation 3</a></li>
+ <li><a href="//foundation.zurb.com/sites/docs/v/2.2.1/">Foundation 2</a></li>
</ul>
</div>
</li>
<div class="small-12 column text-center">
<h5 class="homepage-section-subtitle lighter hide-me">Register Today</h5>
<span class="homepage-section-subtitle-divider lighter small-centered hide-me"></span>
- <h1 class="homepage-section-title hide-me">Get all the answers in our <br><!-- August 8th --><a class="hyperlink" href="http://zurb.com/university/courses">Foundation Classes</a></h1>
+ <h1 class="homepage-section-title hide-me">Get all the answers in our <br><!-- August 8th --><a class="hyperlink" href="//zurb.com/university/courses">Foundation Classes</a></h1>
</div>
<div class="small-11 medium-10 large-9 column text-center small-centered">
<p class="homepage-section-desc hide-me">Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.</p>
<div class="footer-nav-center">
<ul class="footer-nav-menu">
<li class="footer-nav-menu-item">
- <a href="http://zurb.com/responsive">Showcase</a>
+ <a href="//zurb.com/responsive">Showcase</a>
</li>
<li class="footer-nav-menu-item">
- <a href="http://zurb.com/university/courses">Training</a>
+ <a href="//zurb.com/university/courses">Training</a>
</li>
<li class="footer-nav-menu-item">
- <a href="http://foundation.zurb.com/develop/getting-started.html">Building Blocks</a>
+ <a href="//foundation.zurb.com/develop/getting-started.html">Building Blocks</a>
</li>
<li class="footer-nav-menu-item">
- <a href="http://foundation.zurb.com/get-involved/support.html">Get Involved</a>
+ <a href="//foundation.zurb.com/get-involved/support.html">Get Involved</a>
</li>
<li class="footer-nav-menu-item">
- <a href="http://foundation.zurb.com/sites/docs/">Docs</a>
+ <a href="//foundation.zurb.com/sites/docs/">Docs</a>
</li>
</ul>
</div>
<!-- Info Banner For Announcements or Links -->
-<!-- <a href="http://zurb.com/university/foundation-intro" class="docs-banner course-banner">
+<!-- <a href="//zurb.com/university/foundation-intro" class="docs-banner course-banner">
<div class="info">
<h5 class=""><strong>To master everything new in 6.4, along with the rest of Foundation register for our Aug 8th Webinar Class ›</strong></h5>
</div>
<img class="hamburger-icon" alt="Menu icon" src="{{root}}assets/img/icons/menu-grey.png">
</button>
<div class="global-nav-title">
- <a class="zurb-logo" href="http://foundation.zurb.com/index.html">ZURB <strong>Foundation</strong></a>
+ <a class="zurb-logo" href="//foundation.zurb.com/index.html">ZURB <strong>Foundation</strong></a>
</div>
</div>
<nav class="global-nav show-for-smedium">
<div class="global-nav-title">
- <a class="zurb-logo" href="http://foundation.zurb.com/index.html">ZURB <strong>Foundation</strong></a>
+ <a class="zurb-logo" href="//foundation.zurb.com/index.html">ZURB <strong>Foundation</strong></a>
</div>
<ul class="dropdown menu right-side" data-dropdown-menu data-click-open="true">
<li class="menu-item">
- <a href="http://zurb.com/responsive">Showcase</a>
+ <a href="//zurb.com/responsive">Showcase</a>
<ul class="menu">
- <li><a href="http://zurb.com/responsive">Foundation Showcase</a></li>
- <li><a href="http://foundation.zurb.com/showcase/brands.html">Brands</a></li>
- <li><a href="http://foundation.zurb.com/showcase/case-studies.html">Case Studies</a></li>
- <li><a href="http://foundation.zurb.com/showcase/blog.html">Blog</a></li>
- <li><a href="http://foundation.zurb.com/showcase/buzz.html">Buzz</a></li>
- <li><a href="http://foundation.zurb.com/showcase/about.html">About Foundation</a></li>
+ <li><a href="//zurb.com/responsive">Foundation Showcase</a></li>
+ <li><a href="//foundation.zurb.com/showcase/brands.html">Brands</a></li>
+ <li><a href="//foundation.zurb.com/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="//foundation.zurb.com/showcase/blog.html">Blog</a></li>
+ <li><a href="//foundation.zurb.com/showcase/buzz.html">Buzz</a></li>
+ <li><a href="//foundation.zurb.com/showcase/about.html">About Foundation</a></li>
</ul>
</li>
<li class="menu-item">
- <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
+ <a href="//foundation.zurb.com/develop/getting-started.html">Develop</a>
<ul class="menu">
<li class="title">Frameworks</li>
- <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
- <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+ <li><a href="//foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+ <li><a href="//foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li class="divider"></li>
<li class="title">Develop</li>
- <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
- <li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
- <li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="//foundation.zurb.com/templates.html">HTML Templates</a></li>
+ <li><a href="//foundation.zurb.com/sites/resources.html">Resources</a></li>
+ <li><a href="//foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
</ul>
</li>
<li class="menu-item">
- <a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a>
+ <a href="//foundation.zurb.com/learn/tutorials.html">Tutorials</a>
<ul class="menu vertical">
- <li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
- <li><a href="http://zurb.com/university/lessons">Lessons</a></li>
- <li><a href="http://zurb.com/university/courses">Courses</a></li>
- <li><a href="http://zurb.com/university/training">Custom Training</a></li>
- <li><a href="http://foundation.zurb.com/learn/certification.html">Certification</a></li>
- <li><a href="http://foundation.zurb.com/learn/responsive-reading.html">Responsive Reading</a></li>
+ <li><a href="//foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="//zurb.com/university/lessons">Lessons</a></li>
+ <li><a href="//zurb.com/university/courses">Courses</a></li>
+ <li><a href="//zurb.com/university/training">Custom Training</a></li>
+ <li><a href="//foundation.zurb.com/learn/certification.html">Certification</a></li>
+ <li><a href="//foundation.zurb.com/learn/responsive-reading.html">Responsive Reading</a></li>
</ul>
</li>
<li class="menu-item">
- <a href="http://foundation.zurb.com/get-involved/support.html">Get Involved</a>
+ <a href="//foundation.zurb.com/get-involved/support.html">Get Involved</a>
<ul class="menu vertical">
- <li><a href="http://foundation.zurb.com/get-involved/support.html">Connect</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="http://foundation.zurb.com/forum/">Foundation Forum</a></li>
- <li><a href="http://foundation.zurb.com/learn/events.html">Events</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/faq.html">FAQs</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/contribute.html">Contribute</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/yetinauts.html">Yetinauts</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/partners.html">Partners</a></li>
- <li><a href="http://foundation.zurb.com/email-sponsorships.html">Sponsorships</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/support.html">Connect</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="//foundation.zurb.com/forum/">Foundation Forum</a></li>
+ <li><a href="//foundation.zurb.com/learn/events.html">Events</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/faq.html">FAQs</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/yetinauts.html">Yetinauts</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/partners.html">Partners</a></li>
+ <li><a href="//foundation.zurb.com/email-sponsorships.html">Sponsorships</a></li>
</ul>
</li>
<li class="menu-item">
- <a href="http://foundation.zurb.com/frameworks-docs.html">Docs</a>
+ <a href="//foundation.zurb.com/frameworks-docs.html">Docs</a>
<ul class="menu vertical">
- <li><a target="_blank" href="http://foundation.zurb.com/sites/docs/">Sites Docs</a></li>
- <li><a target="_blank" href="http://foundation.zurb.com/emails/docs">Emails Docs</a></li>
+ <li><a target="_blank" href="//foundation.zurb.com/sites/docs/">Sites Docs</a></li>
+ <li><a target="_blank" href="//foundation.zurb.com/emails/docs">Emails Docs</a></li>
</ul>
</li>
- <li class="menu-button"><a href="http://foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>
+ <li class="menu-button"><a href="//foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>
</ul>
</nav>
<div class="row newsletter-signup-inner">
<div class="medium-7 large-8 columns">
- <a href="http://foundation.zurb.com/learn/responsive-reading.html">
+ <a href="//foundation.zurb.com/learn/responsive-reading.html">
<h5 class="hide-for-medium-only">Download ZURB’s 17 Responsive Trends That Will Shape 2017</h5>
<p>Stay informed with amazing responsive trends each month from ZURB.</p>
</a>
</div>
<div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" href="http://foundation.zurb.com/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <a style="margin-bottom: 0;" href="//foundation.zurb.com/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
</div>
</div>
</div>
<ul class="mobile-ofc vertical menu">
<li>
- <a href="http://zurb.com/responsive">Showcase</a>
+ <a href="//zurb.com/responsive">Showcase</a>
<ul class="submenu menu vertical" data-submenu>
- <li><a href="http://zurb.com/responsive">Foundation Showcase</a></li>
- <li><a href="http://foundation.zurb.com/showcase/brands.html">Brands</a></li>
- <li><a href="http://foundation.zurb.com/showcase/case-studies.html">Case Studies</a></li>
- <li><a href="http://foundation.zurb.com/showcase/blog.html">Blog</a></li>
- <li><a href="http://foundation.zurb.com/showcase/buzz.html">Buzz</a></li>
- <li><a href="http://foundation.zurb.com/showcase/about.html">About Foundation</a></li>
+ <li><a href="//zurb.com/responsive">Foundation Showcase</a></li>
+ <li><a href="//foundation.zurb.com/showcase/brands.html">Brands</a></li>
+ <li><a href="//foundation.zurb.com/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="//foundation.zurb.com/showcase/blog.html">Blog</a></li>
+ <li><a href="//foundation.zurb.com/showcase/buzz.html">Buzz</a></li>
+ <li><a href="//foundation.zurb.com/showcase/about.html">About Foundation</a></li>
</ul>
</li>
<li>
- <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
+ <a href="//foundation.zurb.com/develop/getting-started.html">Develop</a>
<ul class="submenu menu vertical" data-submenu>
<li class="title">Frameworks</li>
- <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
- <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+ <li><a href="//foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+ <li><a href="//foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li class="divider"></li>
<li class="title">Develop</li>
- <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
- <li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
- <li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
+ <li><a href="//foundation.zurb.com/templates.html">HTML Templates</a></li>
+ <li><a href="//foundation.zurb.com/sites/resources.html">Resources</a></li>
+ <li><a href="//foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="//foundation.zurb.com/develop/contribute.html">Contribute</a></li>
</ul>
</li>
<li>
- <a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a>
+ <a href="//foundation.zurb.com/learn/tutorials.html">Tutorials</a>
<ul class="submenu menu vertical" data-submenu>
- <li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
- <li><a href="http://foundation.zurb.com/learn/classes.html">Classes</a></li>
- <li><a href="http://foundation.zurb.com/learn/custom-training.html">Custom Training</a></li>
- <li><a href="http://foundation.zurb.com/learn/certification.html">Certification</a></li>
- <li><a href="http://foundation.zurb.com/learn/responsive-reading.html">Responsive Reading</a></li>
+ <li><a href="//foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="//foundation.zurb.com/learn/classes.html">Classes</a></li>
+ <li><a href="//foundation.zurb.com/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="//foundation.zurb.com/learn/certification.html">Certification</a></li>
+ <li><a href="//foundation.zurb.com/learn/responsive-reading.html">Responsive Reading</a></li>
</ul>
</li>
<li>
- <a href="http://foundation.zurb.com/get-involved/support.html">Get Involved</a>
+ <a href="//foundation.zurb.com/get-involved/support.html">Get Involved</a>
<ul class="submenu menu vertical" data-submenu>
- <li><a href="http://foundation.zurb.com/get-involved/support.html">Connect</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="http://foundation.zurb.com/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="http://foundation.zurb.com/learn/events.html">Events</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/faq.html">FAQs</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/contribute.html">Contribute</a></li>
- <li><a href="http://foundation.zurb.com/get-involved/yetinauts.html">Yetinauts</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/support.html">Connect</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="//foundation.zurb.com/forum/sort/unanswered">Foundation Forum</a></li>
+ <li><a href="//foundation.zurb.com/learn/events.html">Events</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/faq.html">FAQs</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="//foundation.zurb.com/get-involved/yetinauts.html">Yetinauts</a></li>
</ul>
</li>
<li>
- <a href="http://foundation.zurb.com/frameworks-docs.html">Docs</a>
+ <a href="//foundation.zurb.com/frameworks-docs.html">Docs</a>
<ul class="submenu menu vertical" data-submenu>
- <li><a href="http://foundation.zurb.com/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
+ <li><a href="//foundation.zurb.com/docs/" target="_blank">Sites Docs</a></li>
+ <li><a href="//zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
</ul>
</li>
- <li><a href="http://foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>
+ <li><a href="//foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>
</ul>
</div>
type: old version
name: Foundation 2
description: Documentation for Foundation 2.2.1
- link: 'http://foundation.zurb.com/sites/docs/v/2.2.1/'
+ link: '//foundation.zurb.com/sites/docs/v/2.2.1/'
tags:
- old
- previous
type: old version
name: Foundation 3
description: Documentation for Foundation 3.2.5
- link: 'http://foundation.zurb.com/sites/docs/v/3.2.5/'
+ link: '//foundation.zurb.com/sites/docs/v/3.2.5/'
tags:
- old
- previous
type: old version
name: Foundation 4
description: Documentation for Foundation 4.3.2
- link: 'http://foundation.zurb.com/sites/docs/v/4.3.2/index.html'
+ link: '//foundation.zurb.com/sites/docs/v/4.3.2/index.html'
tags:
- old
- previous
type: old version
name: Foundation 5
description: Documentation for Foundation 5.5.3
- link: 'http://foundation.zurb.com/sites/docs/v/5.5.3/index.html'
+ link: '//foundation.zurb.com/sites/docs/v/5.5.3/index.html'
tags:
- old
- previous
projects / thirdparty / foundation / foundation-sites.git / commitdiff
