Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: migrate docs examples to xy-grid #11034

Merged
merged 2 commits into from
Mar 24, 2018
Merged

docs: migrate docs examples to xy-grid #11034

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de70238
chore: migrate docs to use xy-grid in examples
colin-marshall Mar 10, 2018
be9d53f
Merge branch 'master' into docs/update-equalizer-grid-examples
colin-marshall Mar 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 98 additions & 84 deletions docs/pages/abide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,87 +26,97 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>
<div class="row">
<div class="small-12 columns">
<label>Number Required
<input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
<span class="form-error">
Yo, you had better fill this out, it's required.
</span>
</label>
<p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
</div>
<div class="small-12 columns">
<label>Password Required
<input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
<span class="form-error">
I'm required!
</span>
</label>
<p class="help-text" id="exampleHelpText">Enter a password please.</p>
</div>
<div class="small-12 columns">
<label>Re-enter Password
<input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
<span class="form-error">
Hey, passwords are supposed to match!
</span>
</label>
<p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-12">
<label>Number Required
<input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
<span class="form-error">
Yo, you had better fill this out, it's required.
</span>
</label>
<p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
</div>
<div class="cell small-12">
<label>Password Required
<input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
<span class="form-error">
I'm required!
</span>
</label>
<p class="help-text" id="exampleHelpText">Enter a password please.</p>
</div>
<div class="cell small-12">
<label>Re-enter Password
<input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
<span class="form-error">
Hey, passwords are supposed to match!
</span>
</label>
<p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
<input type="text" placeholder="https://foundation.zurb.com" pattern="url">
</label>
</div>
<div class="large-6 columns">
<label>Website Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL or a Domain.
<input type="text" placeholder="https://zurb.com or zurb.com" pattern="website">
</label>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell large-6">
<label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
<input type="text" placeholder="https://foundation.zurb.com" pattern="url">
</label>
</div>
<div class="cell large-6">
<label>Website Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL or a Domain.
<input type="text" placeholder="https://zurb.com or zurb.com" pattern="website">
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>European Cars, Choose One, it can't be the blank option.
<select id="select" required>
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</label>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell large-6">
<label>European Cars, Choose One, it can't be the blank option.
<select id="select" required>
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</label>
</div>
<fieldset class="cell large-6">
<legend>Check these out</legend>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox" required><label for="checkbox2">Checkbox 2</label>
<input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
</fieldset>
</div>
<fieldset class="large-6 columns">
<legend>Check these out</legend>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox" required><label for="checkbox2">Checkbox 2</label>
<input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
</fieldset>
</div>
<div class="row">
<fieldset class="large-6 columns">
<legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
<input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
<input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
<input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>
</fieldset>
<fieldset class="large-6 columns">
<legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
<input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
</fieldset>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<fieldset class="cell large-6">
<legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
<input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
<input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
<input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>
</fieldset>
<fieldset class="cell large-6">
<legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
<input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
</fieldset>
</div>
</div>
<div class="row">
<fieldset class="large-6 columns">
<button class="button" type="submit" value="Submit">Submit</button>
</fieldset>
<fieldset class="large-6 columns">
<button class="button" type="reset" value="Reset">Reset</button>
</fieldset>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<fieldset class="cell large-6">
<button class="button" type="submit" value="Submit">Submit</button>
</fieldset>
<fieldset class="cell large-6">
<button class="button" type="reset" value="Reset">Reset</button>
</fieldset>
</div>
</div>
</form>
```
Expand Down Expand Up @@ -194,31 +204,35 @@ When the Form Errors cannot be placed next to its field, like in an Input Group,

```html
<form data-abide>
<div class="small-12 columns">
<div class="grid-x grid-margin-x">
<div class="cell small-12">
<label>Nothing Required!
<input type="text" placeholder="Use me, or don't" aria-describedby="exampleHelpTex" data-abide-ignore>
</label>
<p class="help-text" id="exampleHelpTex">This input is ignored by Abide using `data-abide-ignore`</p>
</div>
<div class="small-12 columns">
<div class="cell small-12">
<label>Disabled!
<input type="text" placeholder="Disabled input" aria-describedby="exampleHelpTex" disabled>
</label>
<p class="help-text" id="exampleHelpTex">This input is ignored by Abide using `disabled`</p>
</div>
<div class="small-12 columns">
<div class="cell small-12">
<label>Hidden!
<input type="hidden" placeholder="Hidden input" aria-describedby="exampleHelpTex" >
</label>
<p class="help-text" id="exampleHelpTex">This input is ignored by Abide using `type="hidden"`</p>
</div>
<div class="row">
<fieldset class="large-6 columns">
<button class="button" type="submit" value="Submit">Submit</button>
</fieldset>
<fieldset class="large-6 columns">
<button class="button" type="reset" value="Reset">Reset</button>
</fieldset>
</div>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<fieldset class="cell small-12">
<button class="button" type="submit" value="Submit">Submit</button>
</fieldset>
<fieldset class="cell small-12">
<button class="button" type="reset" value="Reset">Reset</button>
</fieldset>
</div>
</div>
</form>
```
Expand Down
18 changes: 9 additions & 9 deletions docs/pages/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,16 +110,16 @@ Images play nicely with cards. Simply include one outside of the `.card-section`
</div>
```

<div class="row small-up-3">
<div class="column">
<div class="grid-x grid-margin-x small-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<p>This is a simple card with an image.</p>
</div>
</div>
</div>
<div class="column">
<div class="cell">
<div class="card">
<div class="card-section">
<img src="assets/img/generic/rectangle-1.jpg">
Expand All @@ -140,8 +140,8 @@ Images play nicely with cards. Simply include one outside of the `.card-section`
</div>
```

<div class="row small-up-3">
<div class="column">
<div class="grid-x grid-margin-x small-up-3">
<div class="cell">
<div class="card">
<div class="card-section">
<p>Images work just fine below the content too!</p>
Expand Down Expand Up @@ -197,8 +197,8 @@ You can either set the width of cards with custom css or add them into the Found
</div>
</div>
</div>
<div class="row small-up-2 medium-up-3">
<div class="column">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
Expand All @@ -207,7 +207,7 @@ You can either set the width of cards with custom css or add them into the Found
</div>
</div>
</div>
<div class="column">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
Expand All @@ -216,7 +216,7 @@ You can either set the width of cards with custom css or add them into the Found
</div>
</div>
</div>
<div class="column">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
Expand Down
Loading