<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
- <img src= "assets/img/square-1.jpg">
+ <img src= "assets/img/generic/square-1.jpg">
</div>
</div>
<div class="medium-4 columns">
</div>
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
- <img src= "assets/img/rectangle-1.jpg">
+ <img src= "assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
Okay, it's not *really* a float, but you can add the `.float-center` class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or `auto` width.
```html_example
-<img src="assets/img/voyager.jpg" class="float-center">
+<img src="assets/img/generic/voyager.jpg" class="float-center">
```
<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
- <img src= "assets/img/square-1.jpg">
+ <img src= "assets/img/generic/square-1.jpg">
</div>
</div>
<div class="medium-4 columns">
</div>
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
- <img src= "assets/img/rectangle-1.jpg">
+ <img src= "assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
</div>
<div class="columns small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-anchor="example1">
- <img class="thumbnail" src="assets/img/rectangle-3.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
</div>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2">
<p>two</p>
- <img class="thumbnail" src="assets/img/rectangle-7.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3">
<p>three</p>
</div>
<div class="tabs-panel" id="panel4">
<p>four</p>
- <img class="thumbnail" src="assets/img/rectangle-2.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5">
<p>five</p>
</div>
<div class="tabs-panel" id="panel6">
<p>six</p>
- <img class="thumbnail" src="assets/img/rectangle-8.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
```
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
- <img src= "assets/img/avatar-1.jpg">
+ <img src= "assets/img/media-object/avatar-1.jpg">
</div>
</div>
<div class="media-object-section">
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
- <img src= "assets/img/avatar-1.jpg">
+ <img src= "assets/img/media-object/avatar-1.jpg">
</div>
</div>
<div class="media-object-section main-section">
<div class="media-object">
<div class="media-object-section middle">
<div class="thumbnail">
- <img src= "assets/img/avatar-2.jpg">
+ <img src= "assets/img/media-object/avatar-2.jpg">
</div>
</div>
<div class="media-object-section">
</div>
<div class="media-object-section bottom">
<div class="thumbnail">
- <img src= "assets/img/avatar-3.jpg">
+ <img src= "assets/img/media-object/avatar-3.jpg">
</div>
</div>
</div>
<div class="media-object">
<div class="media-object-section align-self-center">
<div class="thumbnail">
- <img src= "assets/img/avatar-2.jpg">
+ <img src= "assets/img/media-object/avatar-2.jpg">
</div>
</div>
<div class="media-object-section main-section">
</div>
<div class="media-object-section align-self-bottom">
<div class="thumbnail">
- <img src= "assets/img/avatar-3.jpg">
+ <img src= "assets/img/media-object/avatar-3.jpg">
</div>
</div>
</div>
<div class="media-object stack-for-small">
<div class="media-object-section">
<div class="thumbnail">
- <img src= "assets/img/rectangle-1.jpg">
+ <img src= "assets/img/generic/rectangle-1.jpg">
</div>
</div>
<div class="media-object-section">
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
- <img src= "assets/img/avatar-1.jpg">
+ <img src= "assets/img/media-object/avatar-1.jpg">
</div>
</div>
<div class="media-object-section">
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
- <img src= "assets/img/avatar-2.jpg">
+ <img src= "assets/img/media-object/avatar-2.jpg">
</div>
</div>
<div class="media-object-section">
<option value="spin-out-ccw">spin-out-ccw</option>
</optgroup>
</select>
- <img src="assets/img/voyager.jpg" class="docs-transition-demo">
+ <img src="assets/img/generic/voyager.jpg" class="docs-transition-demo">
</div>
---
<button type="button" class="button" data-docs-example-series>Play Animation</button>
<div class="row" id="series-example">
<div class="small-4 columns">
- <img class="thumbnail" src= "assets/img/square-1.jpg" id="series-example-1">
+ <img class="thumbnail" src= "assets/img/generic/square-1.jpg" id="series-example-1">
</div>
<div class="small-4 columns">
- <img class="thumbnail" src= "assets/img/square-2.jpg" id="series-example-2">
+ <img class="thumbnail" src= "assets/img/generic/square-2.jpg" id="series-example-2">
</div>
<div class="small-4 columns">
- <img class="thumbnail" src= "assets/img/square-3.jpg" id="series-example-3">
+ <img class="thumbnail" src= "assets/img/generic/square-3.jpg" id="series-example-3">
</div>
</div>
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>◀</button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</button>
<li class="is-active orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-1.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</li>
<li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-2.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</li>
<li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-3.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
<figcaption class="orbit-caption">Encapsulating</figcaption>
</li>
<li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-4.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
<figcaption class="orbit-caption">Outta This World</figcaption>
</li>
</ul>
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>◀</button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</button>
<li class="is-active orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-1.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</li>
<li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-2.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</li>
<li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-3.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
<figcaption class="orbit-caption">Encapsulating</figcaption>
</li>
<li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit-4.jpg" alt="Space">
+ <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
<figcaption class="orbit-caption">Outta This World</figcaption>
</li>
</ul>
## Compatibility
-<img src="assets/img/logo-sass.svg" alt="Sass logo" class="float-right" style="width: 150px; height: 150px; margin-left: 1rem;">
+<img src="assets/img/logos/sass-logo.svg" alt="Sass logo" class="float-right" style="width: 150px; height: 150px; margin-left: 1rem;">
**Foundation for Sites can be compiled with Ruby Sass and libsass.** We tend to stick to the latest versions of both compilers when possible. Our documentation and starter project are compiled with [node-sass](https://github.com/sass/node-sass), a Node port of libsass. We recommend these versions of either compiler:
```html
<div class="columns small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="0">
- <img class="thumbnail" src="assets/img/rectangle-3.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
<!-- This sticky element would stick to the window, with a marginTop of 0 -->
</div>
</div>
<div class="columns small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-anchor="#foo">
- <img class="thumbnail" src="assets/img/rectangle-3.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
<!-- This sticky element would stick to the window for the height of the element #foo, with a 1em marginTop -->
</div>
</div>
</div>
<div class="columns small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-anchor="example1">
- <img class="thumbnail" src="assets/img/rectangle-3.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
</div>
</div>
</div>
```html
<div class="columns small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="example2" data-btm-anchor="foo:bottom">
- <img class="thumbnail" src="assets/img/rectangle-5.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
</div>
</div>
```
</div>
<div class="columns small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="example2:top" data-btm-anchor="foo" data-stick-to="bottom">
- <img class="thumbnail" src="assets/img/rectangle-5.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
</div>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2">
<p>two</p>
- <img class="thumbnail" src="assets/img/rectangle-7.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3">
<p>three</p>
</div>
<div class="tabs-panel" id="panel4">
<p>four</p>
- <img class="thumbnail" src="assets/img/rectangle-2.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5">
<p>five</p>
</div>
<div class="tabs-panel" id="panel6">
<p>six</p>
- <img class="thumbnail" src="assets/img/rectangle-8.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel3v">
- <img class="thumbnail" src="assets/img/rectangle-3.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
</div>
<div class="tabs-panel" id="panel4v">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tabs-panel" id="panel6v">
- <img class="thumbnail" src="assets/img/rectangle-5.jpg">
+ <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
</div>
</div>
</div>
<nav class="marketing-topbar show-for-medium">
<ul class="menu">
- <li class="topbar-title"><a href="http://foundation.zurb.com/index.html"><img src="http://foundation.zurb.com/assets/img/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
+ <li class="topbar-title"><a href="http://foundation.zurb.com/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
</ul>
<ul class="dropdown menu" data-dropdown-menu data-click-open="false">