<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Slider: Non-zero Start Value</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Slider: Non-zero Start Value</h1>
- <p>Slider should be at left, since the initialStart is 50 and the scale is 50-100. (top: broken, bottom: expected)</p>
+
<p>Slider should be at left, since the initialStart is 50 and the scale is 50-100. (top: broken, bottom: expected)</p>
- <div class="slider" id="slider1" data-slider
- data-initial-start="50"
- data-start="50" data-end="100">
- <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" id="slider1" data-slider
+ data-initial-start="50"
+ data-start="50" data-end="100">
+ <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
+ <span class="slider-fill" data-slider-fill></span>
+ <input type="hidden">
+ </div>
- <hr>
+ <hr>
- <p>Slider should cover 100%, since the initialStart is 50 and the scale is 50-100 (top: broken, bottom: expected)</p>
- <div class="slider" id="slider2" data-slider
- data-double-sided
- data-initial-start="50" data-initial-end="100"
- data-start="50" data-end="100">
- <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>
- <input type="hidden">
- <input type="hidden">
+ <p>Slider should cover 100%, since the initialStart is 50 and the scale is 50-100 (top: broken, bottom: expected)</p>
+ <div class="slider" id="slider2" data-slider
+ data-double-sided
+ data-initial-start="50" data-initial-end="100"
+ data-start="50" data-end="100">
+ <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>
+ <input type="hidden">
+ <input type="hidden">
+ </div>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Tooltips: Explicit Positioning Content - no offsets</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Tooltips: Explicit Positioning Content - no offsets</h1>
- <p>These tooltips test various positioning and alignments. Valid
- positions are left/right/top/bottom. Valid alignments are
- left/right/top/bottom/center. Left align means left sides should line up.
- Right align means right sides should line up. Center align means centers should line up.
- </p>
+
<p>These tooltips test various positioning and alignments. Valid
+ positions are left/right/top/bottom. Valid alignments are
+ left/right/top/bottom/center. Left align means left sides should line up.
+ Right align means right sides should line up. Center align means centers should line up.
+ </p>
- <h4>Top and Bottom positioned</h4>
- <div class="row small-up-1 medium-up-3">
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left">
- Bottom Left
- </button>
- </div>
+ <h4>Top and Bottom positioned</h4>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left">
+ Bottom Left
+ </button>
+ </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center">
- Bottom Center
- </button>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center">
+ Bottom Center
+ </button>
+ </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right">
- Bottom Right
- </button>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right">
+ Bottom Right
+ </button>
+ </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left">
- Top Left
- </button>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left">
+ Top Left
+ </button>
+ </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center">
- Top Center
- </button>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center">
+ Top Center
+ </button>
+ </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right">
- Top Right
- </button>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right">
+ Top Right
+ </button>
+ </div>
+ </div>
- <h4>Left and Right Positioned</h4>
- <div class="row small-up-1 medium-up-2">
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top">
- Right Top
- </button>
- </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top">
- Left Top
- </button>
- </div>
+ <h4>Left and Right Positioned</h4>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top">
+ Right Top
+ </button>
+ </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center">
- Right Center
- </button>
- </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center">
- Left Center
- </button>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top">
+ Left Top
+ </button>
+ </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom">
- Right Bottom
- </button>
- </div>
- <div class="column">
- <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom">
- Left Bottom
- </button>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center">
+ Right Center
+ </button>
+ </div>
+
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center">
+ Left Center
+ </button>
+ </div>
+
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom">
+ Right Bottom
+ </button>
+ </div>
+
+ <div class="cell medium-4">
+ <button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom">
+ Left Bottom
+ </button>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Top Bar: Stacking</h1>
-
- <p>By default, a top bar stacks on the small breakpoint (< 640px).</p>
-
- <div class="top-bar">
- <div class="top-bar-left">
- <p><strong>Left</strong></p>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Top Bar: Stacking</h1>
+
+ <p>By default, a top bar stacks on the small breakpoint (< 640px).</p>
+
+ <div class="top-bar">
+ <div class="top-bar-left">
+ <p><strong>Left</strong></p>
+ </div>
+ <div class="top-bar-right">
+ <p><strong>Right</strong></p>
+ </div>
</div>
- <div class="top-bar-right">
- <p><strong>Right</strong></p>
- </div>
- </div>
- <hr>
+ <hr>
- <p>This top bar should stack on <em>medium and down</em>.</p>
+
<p>This top bar should stack on <em>medium and down</em>.</p>
- <div class="top-bar stacked-for-medium">
- <div class="top-bar-left">
- <p><strong>Left</strong></p>
+ <div class="top-bar stacked-for-medium">
+ <div class="top-bar-left">
+ <p><strong>Left</strong></p>
+ </div>
+ <div class="top-bar-right">
+ <p><strong>Right</strong></p>
+ </div>
</div>
- <div class="top-bar-right">
- <p><strong>Right</strong></p>
- </div>
- </div>
- <hr>
+ <hr>
- <p>This top bar should stack on <em>large and down</em>.</p>
+
<p>This top bar should stack on <em>large and down</em>.</p>
- <div class="top-bar stacked-for-large">
- <div class="top-bar-left">
- <p><strong>Left</strong></p>
- </div>
- <div class="top-bar-right">
- <p><strong>Right</strong></p>
+ <div class="top-bar stacked-for-large">
+ <div class="top-bar-left">
+ <p><strong>Left</strong></p>
+ </div>
+ <div class="top-bar-right">
+ <p><strong>Right</strong></p>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Triggers: Contained</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Triggers: Contained</h1>
- <p>This callout has a trigger inside of it with an id. Triggering it should toggle the type</p>
+
<p>This callout has a trigger inside of it with an id. Triggering it should toggle the type</p>
- <div id="callout1" class="callout" data-toggler=".primary">
- <p>You can toggle this</p>
- <button type="button" class="button" data-toggle="callout1">
- DO IT
- </button>
- </div>
+
<div id="callout1" class="callout" data-toggler=".primary">
+
<p>You can toggle this</p>
+ <button type="button" class="button" data-toggle="callout1">
+ DO IT
+ </button>
+ </div>
- <p>This callout has a trigger inside of it WITHOUT an id. Triggering it should also toggle the type</p>
+
<p>This callout has a trigger inside of it WITHOUT an id. Triggering it should also toggle the type</p>
- <div class="callout" data-toggler=".primary">
- <p>You can toggle this</p>
- <button type="button" class="button" data-toggle>
- DO IT
- </button>
+ <div class="callout" data-toggler=".primary">
+ <p>You can toggle this</p>
+ <button type="button" class="button" data-toggle>
+ DO IT
+ </button>
+ </div>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Triggers: Programmatic</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Triggers: Programmatic</h1>
- <p>This callout uses a close button with <code>data-close</code>. Clicking it should close the callout.</p>
+
<p>This callout uses a close button with <code>data-close</code>. Clicking it should close the callout.</p>
- <div class="callout" data-closable>
- <p>You can so totally close this!</p>
- <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- </div>
+
<div class="callout" data-closable>
+
<p>You can so totally close this!</p>
+ <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
- <p>This callout uses a close button with a manual event handler that uses jQuery's <code>.trigger()</code> function.</p>
+
<p>This callout uses a close button with a manual event handler that uses jQuery's <code>.trigger()</code> function.</p>
- <div class="callout" data-closable id="testCallout">
- <p>You can so totally close this!</p>
- <button class="close-button" aria-label="Dismiss alert" type="button" id="testButton">
- <span aria-hidden="true">×</span>
- </button>
+ <div class="callout" data-closable id="testCallout">
+ <p>You can so totally close this!</p>
+ <button class="close-button" aria-label="Dismiss alert" type="button" id="testButton">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Typography Helpers: Responsive Alignment Classes</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Typography Helpers: Responsive Alignment Classes</h1>
- <div class="row">
- <div class="column text-center medium-text-left">
- <p>This text should be left-aligned on medium screens and up, and center-aligned on small screens.</p>
+ <div class="grid-x">
+ <div class="cell text-center medium-text-left">
+ <p>This text should be left-aligned on medium screens and up, and center-aligned on small screens.</p>
+ </div>
+ </div>
</div>
</div>
</div>
</style>
<body>
- <div class="row columns text-center">
- <div class="about">
- This is a first visual overview on the current Foundation 6 settings with respect to a vertical rhythm.
- </div>
- </div>
- </div>
- <div class="row">
-
- <div class="small-3 columns">
- <h2 class="with-lines">Normal Text</h2>
- <p class="with-lines">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
- <h3>Small Text</h2>
- <small>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.
- </small>
-
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell text-center">
+ <div class="about"> This is a first visual overview on the current Foundation 6 settings with respect to a vertical rhythm. </div>
+ </div>
</div>
-
-
- <div class="small-5 columns">
-
- <h1>Header 1</h1>
- <h2>Header 2</h2>
- <h3>Header 3</h3>
- <h4>Header 4</h4>
- <h5>Header 5</h5>
- <h6>Header 6</h6>
-
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
-
- <ul>
- <li>List item</li>
- <li>List item</li>
- <li>List item
+ <div class="grid-x grid-padding-x">
+ <div class="small-3 cell">
+ <h2 class="with-lines">Normal Text</h2>
+ <p class="with-lines"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
+ <h3>Small Text</h2> <small> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. </small>
+ </div>
+ <div class="small-5 cell">
+ <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3>
+ <h4>Header 4</h4>
+ <h5>Header 5</h5>
+ <h6>Header 6</h6>
+ <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
<ul>
- <li>Nested list item</li>
- <li>Nested list item</li>
- <li>Nested list item</li>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item
+ <ul>
+ <li>Nested list item</li>
+ <li>Nested list item</li>
+ <li>Nested list item</li>
+ </ul>
+ </li>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item</li>
</ul>
- </li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
-
- </div>
- <div class="small-4 columns">
- <h5>Other Stuff</h5>
- <h6>Buttons</h6>
- <a class="tiny button" href="#">So Tiny</a>
- <a class="small button" href="#">So Small</a>
- <a class="button" href="#">So Basic</a>
- <a class="large button" href="#">So Large</a>
- <a class="expanded button" href="#">Such Expand</a>
- <a class="small expanded button" href="#">Wow, Small Expand</a>
- <h6>Form elements</h6>
- <form>
- <label>Input Label
- <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText">
- </label>
- <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
- <label>
- How many puppies?
- <input type="number" value="100">
- </label>
- <label>
- What books did you read over summer break?
- <textarea placeholder="None"></textarea>
- </label>
- <label>Select Menu
- <select>
- <option value="husker">Husker</option>
- <option value="starbuck">Starbuck</option>
- <option value="hotdog">Hot Dog</option>
- <option value="apollo">Apollo</option>
- </select>
- </label>
- <div class="row columns">
- <fieldset>
- <legend>Choose Your Favorite</legend>
- <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
- <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
- <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
- </fieldset>
- </div>
- <div class="row columns">
- <fieldset>
- <legend>Check these out</legend>
- <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
- <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
- <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
- </fieldset>
</div>
- <div class="row">
- <div class="small-3 columns">
- <label for="middle-label" class="text-right middle">Label</label>
- </div>
- <div class="small-9 columns">
- <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
- </div>
+ <div class="small-4 cell">
+ <h5>Other Stuff</h5>
+ <h6>Buttons</h6> <a class="tiny button" href="#">So Tiny</a> <a class="small button" href="#">So Small</a> <a class="button" href="#">So Basic</a> <a class="large button" href="#">So Large</a> <a class="expanded button" href="#">Such Expand</a> <a class="small expanded button" href="#">Wow, Small Expand</a>
+ <h6>Form elements</h6>
+ <form>
+ <label>Input Label
+ <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText"> </label>
+ <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
+ <label> How many puppies?
+ <input type="number" value="100"> </label>
+ <label> What books did you read over summer break?
+ <textarea placeholder="None"></textarea>
+ </label>
+ <label>Select Menu
+ <select>
+ <option value="husker">Husker</option>
+ <option value="starbuck">Starbuck</option>
+ <option value="hotdog">Hot Dog</option>
+ <option value="apollo">Apollo</option>
+ </select>
+ </label>
+ <div class="row columns">
+ <fieldset>
+ <legend>Choose Your Favorite</legend>
+ <input type="radio" name="pokemon" value="Red" id="pokemonRed" required>
+ <label for="pokemonRed">Red</label>
+ <input type="radio" name="pokemon" value="Blue" id="pokemonBlue">
+ <label for="pokemonBlue">Blue</label>
+ <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow">
+ <label for="pokemonYellow">Yellow</label>
+ </fieldset>
+ </div>
+ <div class="row columns">
+ <fieldset>
+ <legend>Check these out</legend>
+ <input id="checkbox1" type="checkbox">
+ <label for="checkbox1">Checkbox 1</label>
+ <input id="checkbox2" type="checkbox">
+ <label for="checkbox2">Checkbox 2</label>
+ <input id="checkbox3" type="checkbox">
+ <label for="checkbox3">Checkbox 3</label>
+ </fieldset>
+ </div>
+ <div class="row">
+ <div class="small-3 columns">
+ <label for="middle-label" class="text-right middle">Label</label>
+ </div>
+ <div class="small-9 columns">
+ <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input"> </div>
+ </div>
+ <div class="input-group"> <span class="input-group-label">$</span>
+ <input class="input-group-field" type="url"> <a class="input-group-button button">Submit</a> </div>
+ </form>
</div>
- <div class="input-group">
- <span class="input-group-label">$</span>
- <input class="input-group-field" type="url">
- <a class="input-group-button button">Submit</a>
- </div>
- </form>
-
</div>
</div>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
