]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Organize images in the docs folder by category
authorGeoff Kimball <geoff@zurb.com>
Tue, 9 Feb 2016 19:09:29 +0000 (11:09 -0800)
committerGeoff Kimball <geoff@zurb.com>
Tue, 9 Feb 2016 19:09:29 +0000 (11:09 -0800)
34 files changed:
docs/assets/img/generic/rectangle-1.jpg [moved from docs/assets/img/rectangle-1.jpg with 100% similarity]
docs/assets/img/generic/rectangle-2.jpg [moved from docs/assets/img/rectangle-2.jpg with 100% similarity]
docs/assets/img/generic/rectangle-3.jpg [moved from docs/assets/img/rectangle-3.jpg with 100% similarity]
docs/assets/img/generic/rectangle-4.jpg [moved from docs/assets/img/rectangle-4.jpg with 100% similarity]
docs/assets/img/generic/rectangle-5.jpg [moved from docs/assets/img/rectangle-5.jpg with 100% similarity]
docs/assets/img/generic/rectangle-6.jpg [moved from docs/assets/img/rectangle-6.jpg with 100% similarity]
docs/assets/img/generic/rectangle-7.jpg [moved from docs/assets/img/rectangle-7.jpg with 100% similarity]
docs/assets/img/generic/rectangle-8.jpg [moved from docs/assets/img/rectangle-8.jpg with 100% similarity]
docs/assets/img/generic/square-1.jpg [moved from docs/assets/img/square-1.jpg with 100% similarity]
docs/assets/img/generic/square-2.jpg [moved from docs/assets/img/square-2.jpg with 100% similarity]
docs/assets/img/generic/square-3.jpg [moved from docs/assets/img/square-3.jpg with 100% similarity]
docs/assets/img/generic/square-4.jpg [moved from docs/assets/img/square-4.jpg with 100% similarity]
docs/assets/img/generic/square-5.jpg [moved from docs/assets/img/square-5.jpg with 100% similarity]
docs/assets/img/generic/square-6.jpg [moved from docs/assets/img/square-6.jpg with 100% similarity]
docs/assets/img/generic/voyager.jpg [moved from docs/assets/img/voyager.jpg with 100% similarity]
docs/assets/img/logos/sass-logo.svg [moved from docs/assets/img/logo-sass.svg with 100% similarity]
docs/assets/img/logos/zurb-logo.svg [moved from docs/assets/img/zurb-logo.svg with 100% similarity]
docs/assets/img/media-object/avatar-1.jpg [moved from docs/assets/img/avatar-1.jpg with 100% similarity]
docs/assets/img/media-object/avatar-2.jpg [moved from docs/assets/img/avatar-2.jpg with 100% similarity]
docs/assets/img/media-object/avatar-3.jpg [moved from docs/assets/img/avatar-3.jpg with 100% similarity]
docs/assets/img/orbit/01.jpg [moved from docs/assets/img/orbit-1.jpg with 100% similarity]
docs/assets/img/orbit/02.jpg [moved from docs/assets/img/orbit-2.jpg with 100% similarity]
docs/assets/img/orbit/03.jpg [moved from docs/assets/img/orbit-3.jpg with 100% similarity]
docs/assets/img/orbit/04.jpg [moved from docs/assets/img/orbit-4.jpg with 100% similarity]
docs/pages/equalizer.md
docs/pages/float-classes.md
docs/pages/kitchen-sink.md
docs/pages/media-object.md
docs/pages/motion-ui.md
docs/pages/orbit.md
docs/pages/sass.md
docs/pages/sticky.md
docs/pages/tabs.md
docs/partials/navigation.html

index 65c5e0fe3cd7ded0771d5152615224260be2ad7a..59438699fb9eb4129f3cb282772f0574677ce3f3 100644 (file)
@@ -12,7 +12,7 @@ To set up an Equalizer group, you need a container, which gets the attribute `da
 <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">
@@ -22,7 +22,7 @@ To set up an Equalizer group, you need a container, which gets the attribute `da
   </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>
index 4a58fd2280fe2b6ac22a44931218211faa283ac9..74b5c685fe7a744f1a6efd7bece884ba0792981c 100644 (file)
@@ -25,5 +25,5 @@ You can change the float behavior of an element by adding the `.float-left` or `
 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">
 ```
index 993bf999899b1207ba6a0a434fd5f47dc56722fb..7f850f4af84a782f9711b6e0f660daae8e921302 100644 (file)
@@ -374,7 +374,7 @@ description: Everything but.
 <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">
@@ -384,7 +384,7 @@ description: Everything but.
   </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>
@@ -854,7 +854,7 @@ description: Everything but.
     </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>
@@ -946,7 +946,7 @@ description: Everything but.
   </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>
@@ -954,7 +954,7 @@ description: Everything but.
   </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>
@@ -962,7 +962,7 @@ description: Everything but.
   </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>
 ```
index f4c8efb1692572b7fab978d4b3e6812fbe3812ac..57944723c10986f1412c8445fdca3016c764ed54 100644 (file)
@@ -13,7 +13,7 @@ A media object is a container with the class `.media-object`, and two or three s
 <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">
@@ -29,7 +29,7 @@ In flexbox mode, the class `.main-section` must be added to your center 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">
@@ -49,7 +49,7 @@ Each section aligns to the top by default, but individual sections can also be m
 <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">
@@ -59,7 +59,7 @@ Each section aligns to the top by default, but individual sections can also be m
   </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>
@@ -71,7 +71,7 @@ In flexbox mode, you can use the <a href="flex-classes.html">flexbox helper clas
 <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">
@@ -81,7 +81,7 @@ In flexbox mode, you can use the <a href="flex-classes.html">flexbox helper clas
   </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>
@@ -97,7 +97,7 @@ By adding the `.stack-for-small` class, you can make your media object responsiv
 <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">
@@ -117,7 +117,7 @@ By nesting a media object into the media-object-section section, you can easily
 <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">
@@ -127,7 +127,7 @@ By nesting a media object into the media-object-section section, you can easily
     <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">
index 3db3a2ffc3a264d8d3ab7f0a1a33645c44f5a793..7380bf59d5fff621183a8e538aeaf1512f310c2f 100644 (file)
@@ -127,7 +127,7 @@ Motion UI includes more than two dozen built-in transition classes. They can be
       <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>
 
 ---
@@ -155,13 +155,13 @@ You can use the same five transition effects to create CSS animations as well. T
 <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>
 
index ec6a3f8a29e4678f4a425e5c64f96f85f4d51daf..478ec2ea7d41c31892705ff4ee88420acd5880bb 100644 (file)
@@ -25,19 +25,19 @@ tags:
     <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
     <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</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>
@@ -103,19 +103,19 @@ tags:
     <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
     <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</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>
index a076ded5379e234443c14442765ab46404301b3f..d62896ed9b15ef621210a9de33a272e606eac2e6 100644 (file)
@@ -9,7 +9,7 @@ description: Foundation is written in Sass, which allows us to make the codebase
 
 ## 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:
 
index b01ebb894ce04af89e8cf96fe8295009cd07d506..f5753ae39ee424527c0593bd1fae8e790ac34eb4 100644 (file)
@@ -11,7 +11,7 @@ Add the `.sticky` class and `[data-sticky]` to an element to create something th
 ```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>
@@ -19,7 +19,7 @@ Add the `.sticky` class and `[data-sticky]` to an element to create something th
 
 <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>
@@ -44,7 +44,7 @@ Add the `.sticky` class and `[data-sticky]` to an element to create something th
     </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>
@@ -57,7 +57,7 @@ You can also use two anchors, if you please. Using `data-top-anchor="idOfSomethi
 ```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>
 ```
@@ -81,7 +81,7 @@ You can also use two anchors, if you please. Using `data-top-anchor="idOfSomethi
     </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>
index 7c2d4a073d9bfd9b0c2e5f8538f1d28462ee45f7..5ecc7f5a1558b6359fbb13deb3fd25df316ec23d 100644 (file)
@@ -47,7 +47,7 @@ Put it all together, and we get this:
   </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>
@@ -55,7 +55,7 @@ Put it all together, and we get this:
   </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>
@@ -63,7 +63,7 @@ Put it all together, and we get this:
   </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>
 
@@ -94,7 +94,7 @@ Add the `.vertical` class to a tabstrip to stack tabs vertically. You can also p
         <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>
@@ -103,7 +103,7 @@ Add the `.vertical` class to a tabstrip to stack tabs vertically. You can also 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>
index 08816219348358d01b3842f1770c12970da55d3f..c906031cfe53e2dfcae711e35f13b58fd334b245 100644 (file)
@@ -1,7 +1,7 @@
 <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">