]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Use pull request #11060 from ocularrhythm/patch-8 for v6.5.0
authorAaron Arney <ocularrhythm@users.noreply.github.com>
Sat, 16 Jun 2018 07:28:00 +0000 (09:28 +0200)
committerNicolas Coden <nicolas@ncoden.fr>
Sat, 16 Jun 2018 07:28:00 +0000 (09:28 +0200)
d14a8f036 Replace single with double quote in code example
20ace7ccb style: replace single quote by double quotes in docs HTML attributes

Co-Authored-By: Nicolas Coden <nicolas@ncoden.fr>
Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
12 files changed:
docs/assets/partials/sticky-nav.html
docs/pages/accordion.md
docs/pages/forms.md
docs/pages/javascript-utilities.md
docs/pages/kitchen-sink.md
docs/pages/reveal.md
docs/pages/starter-projects.md
docs/pages/switch.md
docs/partials/footer-contact.html
test/visual/abide/hidden_and_ignored_fields.html
test/visual/sticky/height-transition.html
test/visual/xy-grid/frame-grid.html

index 5474a46a8dd25508747c1865d5dde0cfbaa9de07..4fb4b4fa23d1858f4c8bd4bcf0308eb1cf88f238 100644 (file)
   </div>
 
 
-  <div class='column row' id='root'>
-    <h3 class='text-center'>Creating a sticky Nav Menu with Title Bar, DropdownMenu, and Sticky!</h3>
-    <div class='callout primary'>
-      <p class='lead'>It's important to note that sticky requires a bit of developer input to work properly. To create a sticky nav bar like this one, set the nav container width to 100%. It's also important to set the minimum top-anchor point to 1px, otherwise it'll never stick!</p>
+  <div class="column row" id="root">
+    <h3 class="text-center">Creating a sticky Nav Menu with Title Bar, DropdownMenu, and Sticky!</h3>
+    <div class="callout primary">
+      <p class="lead">It's important to note that sticky requires a bit of developer input to work properly. To create a sticky nav bar like this one, set the nav container width to 100%. It's also important to set the minimum top-anchor point to 1px, otherwise it'll never stick!</p>
       <p>Here we're also having a bit of fun with transitions using event triggers from the sticky plugin. When the nav bar becomes sticky, it emits <code>sticky.zf.stuckto:top</code>, which we're listening to. Then we're adding a class to reduce the height and top padding of our nav bar.</p>
     </div>
     <p>
index a46f52bd17520ace778f39f6d1a1849f7b087f51..e24ad7ecf36043417d902cd413b3f30a4ab76855 100644 (file)
@@ -91,7 +91,7 @@ By default, only one pane of an accordion can be open at a time. This can be cha
 </ul>
 ```
 
-<ul class="accordion" data-accordion data-multi-expand='true'>
+<ul class="accordion" data-accordion data-multi-expand="true">
   <li class="accordion-item is-active" data-accordion-item>
     <a href="#" class="accordion-title">Accordion 1</a>
     <div class="accordion-content" data-tab-content >
@@ -132,7 +132,7 @@ By default, at least one pane in an accordion must be open. This can be changed
 </ul>
 ```
 
-<ul class="accordion" data-accordion data-allow-all-closed='true'>
+<ul class="accordion" data-accordion data-allow-all-closed="true">
   <li class="accordion-item is-active" data-accordion-item>
     <a href="#" class="accordion-title">Accordion 1</a>
     <div class="accordion-content" data-tab-content >
index 6ab7561acea3972857de2aeddb41c597eebd0a7e..211966a7289ae03b1210a408ca401e9ee2898d85 100644 (file)
@@ -334,7 +334,7 @@ Custom inputs with labels or help text need the attributes `aria-labelledby` and
 
 ```html
 <label id="ageLabel">Age</label>
-<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" data-slider data-initial-start='50' data-end='200'>
+<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" data-slider data-initial-start="50" data-end="200">
   <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
   <span class="slider-fill" data-slider-fill></span>
   <input type="hidden">
index 70d5c6be8347b5e2361abcc3249125111ffd2c97..5020fd7f281bf201b5b4d0f83ee388972684f4ee 100644 (file)
@@ -156,12 +156,12 @@ $('selector').spotSwipe().on('swipeleft', handleLeftSwipe);
 
 Provides a number of event listeners and triggers your script can hook into. Most are self-explanatory, and used in many Foundation plugins.
 ```html
-<button data-open='someId'>I open something!</button>
-<button data-close='someId'>I close something!</button>
-<button data-toggle='someId'>I toggle something!</button>
+<button data-open="someId">I open something!</button>
+<button data-close="someId">I close something!</button>
+<button data-toggle="someId">I toggle something!</button>
 ```
 ```js
-// Add the data-open/close/toggle='idOfElement' tag to your markup.
+// Add the data-open/close/toggle="idOfElement" tag to your markup.
 // When a click event is triggered on that element, these are the non-bubbling events directed at your element.
 // If you don't use an `id` selector, an event will be triggered that bubbles up to window.
 $('selector').on('open.zf.trigger', handleOpen);
@@ -171,8 +171,8 @@ $('selector').on('toggle.zf.trigger', handleToggle);
 Besides these useful click triggers, there are also other listeners for you to tap into. Need to know when the window has been resized, but only when it's done resizing? How about a debounced scroll event? Add this markup and JavaScript and you're good to go!
 
 ```html
-<div data-scroll='someId'>...</div>
-<div data-resize='someId'>...</div>
+<div data-scroll="someId">...</div>
+<div data-resize="someId">...</div>
 ```
 ```js
 $('#someId').on('scrollme.zf.trigger', handleScroll);
index 7d501da5315e32d619ea3939022fe0175730002a..0377d21e1ad5530bc0658db9880fcf05099b89a6 100644 (file)
@@ -381,19 +381,19 @@ description: Everything but.
       <li><a href="#0">Item 1A Loooong</a></li>
       <li>
         <a href='#0'> Item 1 sub</a>
-        <ul class='menu'>
+        <ul class="menu">
           <li><a href='#0'>Item 1 subA</a></li>
           <li><a href='#0'>Item 1 subB</a></li>
           <li>
             <a href='#0'> Item 1 sub</a>
-            <ul class='menu'>
+            <ul class="menu">
               <li><a href='#0'>Item 1 subA</a></li>
               <li><a href='#0'>Item 1 subB</a></li>
             </ul>
           </li>
           <li>
             <a href='#0'> Item 1 sub</a>
-            <ul class='menu'>
+            <ul class="menu">
               <li><a href='#0'>Item 1 subA</a></li>
             </ul>
           </li>
@@ -970,19 +970,19 @@ description: Everything but.
 </div>
 
 ```html_example
-<div class="slider" data-slider data-initial-start='50' data-end='200'>
+<div class="slider" data-slider data-initial-start="50" data-end="200">
   <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
   <span class="slider-fill" data-slider-fill></span>
   <input type="hidden">
 </div>
 
-<div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
+<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
   <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
   <span class="slider-fill" data-slider-fill></span>
   <input type="hidden">
 </div>
 
-<div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
+<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
   <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
   <span class="slider-fill" data-slider-fill></span>
   <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
@@ -1219,7 +1219,7 @@ description: Everything but.
 </div>
 
 ```html_example
-<p>The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.</p>
+<p>The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex=1 title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.</p>
 ```
 
 ---
index 481b3799fa66e3bcb8d9f7f74d7b351906af213b..b33d9e36b45ca8b7c10e5a0971945e4e9817d552 100644 (file)
@@ -212,7 +212,7 @@ To use animations from the Motion UI library, include the <code>data-animation-i
 
 <div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
   <h1>Whoa, I'm dizzy!</h1>
-  <p class='lead'>There are many options for animating modals, check out the Motion UI library to see them all</p>
+  <p class="lead">There are many options for animating modals, check out the Motion UI library to see them all</p>
   <button class="close-button" data-close aria-label="Close reveal" type="button">
     <span aria-hidden="true">&times;</span>
   </button>
index 196953a0930a6f899f28777dbf11436cefe54fe8..a766070061d0ea8f8d36aafb9d1024f99054e7d7 100644 (file)
@@ -42,7 +42,7 @@ Your project will be recompiled every time you save a Sass file in `dist/.
 ## ZURB Template
 
 <div class="responsive-embed widescreen mb1">
-  <iframe id="zurb-template-starter" data-linkable-video='3Uj74uJ3GSQ' width="500" height="315" src="https://www.youtube.com/embed/3Uj74uJ3GSQ?enablejsapi=1" enablejsapi="1" frameborder="0" allowfullscreen ></iframe>
+  <iframe id="zurb-template-starter" data-linkable-video="3Uj74uJ3GSQ" width="500" height="315" src="https://www.youtube.com/embed/3Uj74uJ3GSQ?enablejsapi=1" enablejsapi="1" frameborder="0" allowfullscreen ></iframe>
   <a id="docs-mobile-video-link" class="docs-mobile-video" target="_blank" href="https://www.youtube.com/watch?v=3Uj74uJ3GSQ"></a>
 </div>
 
index 0a18d325eb70afc224c3baca13b2e8823df6062c..22a1ffea2111c5631a78a3030dd1e6b262eb0dfc 100644 (file)
@@ -15,7 +15,7 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
   <p>Inside the switch label is screen reader-only text, which uses the <code>.show-for-sr</code> class to visually mask the text.</p>
 </div>
 
-<div class='primary callout'>
+<div class="primary callout">
   <p>Inspecting the value of the underlying input should be done by evaluating the <code>checked</code> property of said input.</p>
 </div>
 
index 2dd927f398d8dbc305dc4eee92f79e5383fdfdd0..5fe8c4400b6a2a6e85592b3b99e20e36d533c756 100644 (file)
         <div class="row">
           <div class="small-12 column">
             <label for="fieldName">Name</label>
-            <input id="fieldName" type='text' class="getinfo" required maxlength='40' name='name' />
+            <input id="fieldName" type="text" class="getinfo" required maxlength="40" name="name" />
           </div>
           <div class="small-12 medium-6 column">
             <label for="fieldCompany">Company</label>
-            <input id="fieldCompany" type='text' class="getinfo" required maxlength='40' name='Company' />
+            <input id="fieldCompany" type="text" class="getinfo" required maxlength="40" name="Company" />
           </div>
           <div class="small-12 medium-6 column">
             <label for="fieldEmail">Email Address</label>
-            <input id="fieldEmail" type='email' class="getinfo" required maxlength='100' name='email' />
+            <input id="fieldEmail" type="email" class="getinfo" required maxlength="100" name="email" />
           </div>
           <div class="small-12 column">
             <label for="fieldText">Ask us about our upcoming trainings</label>
index 4517cb3c6f317bc1a88ea15a92e8890ec898ddac..7426b871a9633a2c46cc9e2a8541317764aad541 100644 (file)
@@ -19,7 +19,7 @@
 
           <form data-abide novalidate>
             <input required type="text" placeholder="Required - try submitting without a value">
-            <span class='form-error'>This field is required</span>
+            <span class="form-error">This field is required</span>
             <input type="hidden" value="foo">
             <button type="submit" class="button">Submit</button>
             <button type="reset" class="button">Reset</button>
           <form data-abide novalidate>
             <div class="row column">
               <input required type="text" placeholder="Required">
-              <span class='form-error'>This field is required</span>
+              <span class="form-error">This field is required</span>
             </div>
             <div class="row column">
               <input required id="ignoreAfter" type="text" placeholder="Ignored">
-              <span class='form-error'>You should never see this error!</span>
+              <span class="form-error">You should never see this error!</span>
             </div>
             <button type="submit" class="button">Submit</button>
             <button type="reset" class="button">Reset</button>
index d0b69528f9492359b4a196de7fbcbf61cee9d552..11e15fffab61020342c3abef9dd42fcce992bd4e 100644 (file)
       </div>
     </div>
   </div>
-    <div class='column row'>
+    <div class="column row">
     <h3>Sticky navbar height transition</h3>
     <p>The content should follow the nav-bar resizing without red flashing (sticky-container background)</p>
     </div>
index fdb9aebeb9635058327b9447414aa293c9d98255..ce72ed83779a3d5d92357ece97e816b527cefa59 100644 (file)
@@ -34,7 +34,7 @@
             A medium 4 cell
           </div>
           <div class="cell medium-4 medium-cell-block">
-            <p class='wide' >A medium 4 cell block... on medium this content should overflow and let you horizontally scroll across... one might use this for an array of options</p>
+            <p class="wide" >A medium 4 cell block... on medium this content should overflow and let you horizontally scroll across... one might use this for an array of options</p>
           </div>
           <div class="cell medium-4">
             A medium 4 cell