mirror of
https://github.com/pure-css/pure.git
synced 2024-11-07 21:34:24 +00:00
Clean manual tests by formatting the HTML and making it valid
This commit is contained in:
Eric Ferraiuolo
parent
14d767c603
commit
44b5be0a46
@ -1,8 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Button Manual Tests</title>
|
||||
<link rel="stylesheet" href="../../../../build/pure-min.css">
|
||||
<meta charset="utf-8">
|
||||
<title>Buttons Tests</title>
|
||||
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/buttons.css">
|
||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css">
|
||||
|
||||
@ -48,7 +51,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Test Button Styles</h1>
|
||||
<h1>Buttons Tests</h1>
|
||||
|
||||
<h2>Regular Buttons</h2>
|
||||
<p>
|
||||
@ -89,7 +92,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="pure-button pure-button-wedding" href="#">
|
||||
<button class="pure-button pure-button-wedding">
|
||||
<i class="icon-film"></i>
|
||||
Start Playing Movie
|
||||
</button>
|
||||
|
||||
@ -1,334 +1,346 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="viewport" content="width = device-width">
|
||||
<title>Forms CSS Manual Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/grids-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/forms-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Forms Tests</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #333;
|
||||
font-size:1.2em;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/grids.css">
|
||||
<link rel="stylesheet" href="../../../../build/buttons.css">
|
||||
<link rel="stylesheet" href="../../../../build/forms.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h1>Forms Tests</h1>
|
||||
|
||||
<h2>Default Form</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<fieldset>
|
||||
<legend>A default inline form.</legend>
|
||||
<input type="text" placeholder="Email">
|
||||
<input type="password" placeholder="Password">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="pure-button">Sign in</button>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>A default inline form.</legend>
|
||||
|
||||
<input type="text" placeholder="Email">
|
||||
<input type="password" placeholder="Password">
|
||||
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
|
||||
<button type="submit" class="pure-button">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Multi-Column Form (with YUI Grids)</h2>
|
||||
|
||||
<p>
|
||||
Multi-column forms such as the one below can be created by pulling down YUI Grids.
|
||||
</p>
|
||||
<h2>Multi-Column Form with Grids</h2>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
|
||||
<div class='pure-g-r'>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
</div>
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-3">
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<label>State</label>
|
||||
<select class="pure-input-medium">
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='pure-u-1-3'>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
|
||||
<div class='pure-u-1-3'>
|
||||
<label>State</label>
|
||||
<select class='pure-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='pure-button'>Submit</button>
|
||||
<button type="reset" class='pure-button'>Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<button type="submit" class="pure-button">Submit</button>
|
||||
<button type="reset" class="pure-button">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Stacked Form</h2>
|
||||
|
||||
<p>
|
||||
Apply stacked label styling to any form by applying the <code>pure-form-stacked</code> classname.
|
||||
</p>
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
<aside class='pure-help-inline'>This is a required field.</aside>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
<aside class='pure-form-message'>This is another required field.</aside>
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
|
||||
<label>State</label>
|
||||
<select class='pure-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='pure-button notice'>Submit</button>
|
||||
<button type="reset" class='pure-button'>Reset</button>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
|
||||
<h2>Aligned Form</h2>
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
<aside class="pure-help-inline">This is a required field.</aside>
|
||||
|
||||
<p>Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.</p>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
<aside class="pure-form-message">This is another required field.</aside>
|
||||
|
||||
<form class="pure-form pure-form-aligned">
|
||||
<fieldset>
|
||||
<div class="pure-control-group">
|
||||
<label>Username</label>
|
||||
<input type="text" placeholder="Username">
|
||||
<aside class='pure-form-message-inline'>This is a <code>pure-form-message-inline</code> field.</aside>
|
||||
</div>
|
||||
<label>State</label>
|
||||
<select class="pure-input-medium">
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Password</label>
|
||||
<input type="password" placeholder="Password">
|
||||
<aside class='pure-help-inline'>This is a <code>pure-help-inline</code> field. Deprecated.</aside>
|
||||
</div>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Email Address</label>
|
||||
<input type="text" placeholder="Email Address">
|
||||
</div>
|
||||
<div class="pure-control-group">
|
||||
<label>Here's a button</label>
|
||||
<input type="button" value="Button" class="pure-button">
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Supercalifragilistic Label</label>
|
||||
<input type="text" placeholder="Enter something here...">
|
||||
</div>
|
||||
|
||||
<div class="pure-controls">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> Remember Me
|
||||
</label>
|
||||
<button type="submit" class="pure-button">Submit</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Grouped Inputs</h2>
|
||||
|
||||
<p>Grouped inputs are great for grouping small sets of text-based input elements. They work well for sign-up forms, and look natural on mobile devices.</p>
|
||||
|
||||
<form class="pure-form">
|
||||
<fieldset class='pure-group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Username'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Password'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Email'>
|
||||
</fieldset>
|
||||
<fieldset class='pure-group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Another Group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='More Stuff'>
|
||||
<button type="submit" class="pure-button pure-input-1-3">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Input Sizing</h2>
|
||||
|
||||
<p>You can take advantage of YUI Grids and the <code>pure-input-block</code> class to create fluid width inputs in practically any size that you want.</p>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br/>
|
||||
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br/>
|
||||
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br/>
|
||||
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br/>
|
||||
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/>
|
||||
</form>
|
||||
|
||||
<div class="pure-g sizing">
|
||||
<form class="pure-form">
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
<div class="pure-u-3-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pure-u-1-8">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<input class="v" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pure-u-1-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Invalid Inputs</h2>
|
||||
<p>Add the required attribute to any form control.</p>
|
||||
<form class="pure-form">
|
||||
<input type="email" placeholder="Requires an email" required>
|
||||
</form>
|
||||
|
||||
<h2>Disabled Inputs</h2>
|
||||
<p>Add the disabled attribute to any form control.</p>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." value="Foo bar baz" disabled>
|
||||
</form>
|
||||
|
||||
<h2>Readonly Inputs</h2>
|
||||
<p>Add the readonly attribute to any form control.</p>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" id="readonlyInput" type="text" placeholder="Readonly input here..." value="Foo bar baz" readonly>
|
||||
</form>
|
||||
|
||||
<h2>Rounded Form</h2>
|
||||
<p>Add the pure-input-rounded classname to any form control.</p>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<label>Subject</label>
|
||||
<input type="text" class="pure-input-rounded" placeholder="Subject" />
|
||||
<label>Message</label>
|
||||
<textarea class="pure-input-rounded" rows="5" cols="40" placeholder="Message..."></textarea>
|
||||
<button type="submit" class="pure-button pure-input-rounded">Search</button>
|
||||
<input type="reset" class="pure-button pure-input-rounded" value="Reset" />
|
||||
<button type="submit" class="pure-button notice">Submit</button>
|
||||
<button type="reset" class="pure-button">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Selects</h2>
|
||||
<form class="pure-form">
|
||||
<select class='pure-input-medium'>
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
<h2>Aligned Form</h2>
|
||||
|
||||
<form class="pure-form pure-form-aligned">
|
||||
<fieldset>
|
||||
<div class="pure-control-group">
|
||||
<label>Username</label>
|
||||
<input type="text" placeholder="Username">
|
||||
<aside class="pure-form-message-inline">This is a <code>pure-form-message-inline</code> field.</aside>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Password</label>
|
||||
<input type="password" placeholder="Password">
|
||||
<aside class="pure-help-inline">This is a <code>pure-help-inline</code> field. Deprecated.</aside>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Email Address</label>
|
||||
<input type="text" placeholder="Email Address">
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Here's a button</label>
|
||||
<input type="button" value="Button" class="pure-button">
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Supercalifragilistic Label</label>
|
||||
<input type="text" placeholder="Enter something here...">
|
||||
</div>
|
||||
|
||||
<div class="pure-controls">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> Remember Me
|
||||
</label>
|
||||
|
||||
<button type="submit" class="pure-button">Submit</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<select multiple="multiple" class="pure-input-large">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
</form>
|
||||
<h2>Grouped Inputs</h2>
|
||||
|
||||
<h2>Checkboxes and Radios</h2>
|
||||
<form class="pure-form">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox" value="">
|
||||
Here's option one.
|
||||
</label>
|
||||
<form class="pure-form">
|
||||
<fieldset class="pure-group">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Username">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Password">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Email">
|
||||
</fieldset>
|
||||
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Here's a radio button. You can choose this one..
|
||||
</label>
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
..Or this one!
|
||||
</label>
|
||||
</form>
|
||||
<fieldset class="pure-group">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Another Group">
|
||||
<input type="text" class="pure-input-1-3" placeholder="More Stuff">
|
||||
<button type="submit" class="pure-button pure-input-1-3">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Help text</h2>
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<label>Last Name</label>
|
||||
<input type="text" />
|
||||
<aside class="pure-form-message">Block help text</aside>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class= "pure-g-r">
|
||||
<div class= "pure-u-1">
|
||||
<form class="pure-form">
|
||||
<a class="pure-button pure-button-primary">Anchor</a>
|
||||
<button class="pure-button pure-button-primary">Button</button>
|
||||
<input type="submit" class="pure-button pure-button-primary" value="Submit" />
|
||||
<input type="button" class="pure-button pure-button-primary" value="Input Button" />
|
||||
<input type="reset" class="pure-button pure-button-primary" value="Reset" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Input Sizing</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br/>
|
||||
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br/>
|
||||
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br/>
|
||||
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br/>
|
||||
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/>
|
||||
</form>
|
||||
|
||||
|
||||
<form class="pure-form">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-3-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-8">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-8">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Invalid Inputs</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input type="email" placeholder="Requires an email" required>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Disabled Inputs</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" type="text" placeholder="Disabled input here..." value="Foo bar baz" disabled>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Readonly Inputs</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" type="text" placeholder="Readonly input here..." value="Foo bar baz" readonly>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Rounded Form</h2>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<label>Subject</label>
|
||||
<input type="text" class="pure-input-rounded" placeholder="Subject" />
|
||||
|
||||
<label>Message</label>
|
||||
<textarea class="pure-input-rounded" rows="5" cols="40" placeholder="Message..."></textarea>
|
||||
|
||||
<button type="submit" class="pure-button pure-input-rounded">Search</button>
|
||||
<input type="reset" class="pure-button pure-input-rounded" value="Reset" />
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Selects</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<select class="pure-input-medium">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
|
||||
<select multiple="multiple" class="pure-input-large">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Checkboxes and Radios</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox" value="">
|
||||
Here's option one.
|
||||
</label>
|
||||
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Here's a radio button. You can choose this one...
|
||||
</label>
|
||||
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
...Or this one!
|
||||
</label>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Help text</h2>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<label>Last Name</label>
|
||||
<input type="text" />
|
||||
<aside class="pure-form-message">Block help text</aside>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Buttons</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<a class="pure-button pure-button-primary">Anchor</a>
|
||||
<button class="pure-button pure-button-primary">Button</button>
|
||||
<input type="submit" class="pure-button pure-button-primary" value="Submit" />
|
||||
<input type="button" class="pure-button pure-button-primary" value="Input Button" />
|
||||
<input type="reset" class="pure-button pure-button-primary" value="Reset" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Responsive Grids Test</title>
|
||||
<title>Responsive Grids Tests</title>
|
||||
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/grids.css">
|
||||
@ -24,7 +24,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Base Grid</h1>
|
||||
<h1>Grids Tests</h1>
|
||||
|
||||
<h2>Base Grid</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
@ -267,7 +269,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Responsive Grid</h1>
|
||||
<h2>Responsive Grid</h2>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-2">
|
||||
@ -510,22 +512,22 @@
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Images Grid</h1>
|
||||
<h2>Images Grid</h2>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-3">
|
||||
<img src="http://lorempixel.com/800/300/">
|
||||
<img src="http://lorempixel.com/800/300/" alt="Test image.">
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<img src="http://lorempixel.com/800/300/">
|
||||
<img src="http://lorempixel.com/800/300/" alt="Test image.">
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<img src="http://lorempixel.com/800/300/">
|
||||
<img src="http://lorempixel.com/800/300/" alt="Test image.">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Nested Grid</h1>
|
||||
<h2>Nested Grid</h2>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<div class="pure-u-1-2">
|
||||
@ -562,7 +564,7 @@
|
||||
</div>
|
||||
|
||||
<div class="serif">
|
||||
<h1>Custom Font and Grids</h1>
|
||||
<h2>Custom Font and Grids</h2>
|
||||
<p>
|
||||
Grids with a serif font stack.
|
||||
</p>
|
||||
|
||||
@ -1,202 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="viewport" content="width = device-width">
|
||||
<title>Menus CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/menus-min.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Menus Tests</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding:0 30px;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
color:#2B474F;
|
||||
margin:50px 0 20px 0;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#menu-1 {
|
||||
width:120px;
|
||||
}
|
||||
|
||||
#vertical-menu1, #vertical-menu2, #vertical-menu3 {
|
||||
width:40%;
|
||||
}
|
||||
|
||||
#vertical-menu3 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.pure-menu {
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/buttons.css">
|
||||
<link rel="stylesheet" href="../../../../build/menus.css">
|
||||
</head>
|
||||
<body class="pure-skin-sam">
|
||||
|
||||
<div class="header y-u-1">
|
||||
<body>
|
||||
<h1>Menus Tests</h1>
|
||||
|
||||
<h1 class="pure-u-1">Pure Menus CSS</h1>
|
||||
<h2 class="pure-u">Simple styling for HTML List elements as menus.</h2>
|
||||
<h2>Horizontal Menu</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h2>Horizontal Menu</h2>
|
||||
|
||||
<p>
|
||||
You can mark the active menu element by adding the <code>.pure-menu-selected</code> class to the list item.
|
||||
</p>
|
||||
|
||||
<div class="pure-menu pure-menu-open pure-menu-horizontal">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Vertical Menu</h2>
|
||||
|
||||
<div id="vertical-menu1" class="pure-menu pure-menu-open">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<ul>
|
||||
<li class="pure-menu-selected"><a href="#">Home</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li class="pure-menu-heading">Yahoo! Sites</li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="vertical-menu1" class="pure-menu pure-menu-open">
|
||||
<ul>
|
||||
<li class="pure-menu-heading">Site Title</li>
|
||||
<li class="pure-menu-selected"><a href="#">Home</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li class="pure-menu-heading">Yahoo! Sites</li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Add Dropdowns to Menus</h2>
|
||||
|
||||
<p>
|
||||
Adding dropdowns to menus requires the use of JavaScript. The <code>Y.Menu</code> module adds dropdown functionality and the ability to create JavaScript menus. It uses <code>csslist</code> to style these menus, so they look identical.
|
||||
</p>
|
||||
|
||||
|
||||
<div id="horizontal-menu">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<ul id="std-menu-items">
|
||||
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-separator"></li>
|
||||
<li>
|
||||
<a href="#">Other</a>
|
||||
<ul>
|
||||
<li class="pure-menu-heading">More from Yahoo!</li>
|
||||
<li class="pure-menu-separator"></li>
|
||||
<li><a href="#">Autos</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Answers</a></li>
|
||||
<li>
|
||||
<a href="#">Even More</a>
|
||||
<ul>
|
||||
<li><a href="#">Horoscopes</a></li>
|
||||
<li><a href="#">Games</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
<li><a href="#">OMG</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Fixed Menus</h2>
|
||||
|
||||
<p>
|
||||
Fixed menus can be created by adding the <code>pure-menu-fixed</code> class name to the wrapper. This will fix a menu to the top of the page.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="pure-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
|
||||
</p>
|
||||
|
||||
<div id="fixed-menu" class="pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<ul>
|
||||
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Paginator</h2>
|
||||
|
||||
<ul class="pure-paginator">
|
||||
<li><a class="pure-button prev" href="#">«</a></li>
|
||||
<li><a class="pure-button" href="#">1</a></li>
|
||||
<li><a class="pure-button pure-button-active" href="#">2</a></li>
|
||||
<li><a class="pure-button" href="#">3</a></li>
|
||||
<li><a class="pure-button" href="#">4</a></li>
|
||||
<li><a class="pure-button" href="#">5</a></li>
|
||||
<li><a class="pure-button next" href="#">»</a></li>
|
||||
<div class="pure-menu pure-menu-open pure-menu-horizontal">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
|
||||
|
||||
<h2>Vertical Menu</h2>
|
||||
|
||||
<div class="pure-menu pure-menu-open">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<ul>
|
||||
<li class="pure-menu-selected"><a href="#">Home</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li class="pure-menu-heading">Yahoo! Sites</li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pure-menu pure-menu-open">
|
||||
<ul>
|
||||
<li class="pure-menu-heading">Site Title</li>
|
||||
<li class="pure-menu-selected"><a href="#">Home</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li class="pure-menu-heading">Yahoo! Sites</li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Add Dropdowns to Menus</h2>
|
||||
|
||||
<p>
|
||||
Adding dropdowns to menus requires the use of JavaScript. The <code>Y.Menu</code> module adds dropdown functionality and the ability to create JavaScript menus. It uses <code>csslist</code> to style these menus, so they look identical.
|
||||
</p>
|
||||
|
||||
<div id="horizontal-menu">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<ul id="std-menu-items">
|
||||
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="pure-menu-separator"></li>
|
||||
<li>
|
||||
<a href="#">Other</a>
|
||||
<ul>
|
||||
<li class="pure-menu-heading">More from Yahoo!</li>
|
||||
<li class="pure-menu-separator"></li>
|
||||
<li><a href="#">Autos</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Answers</a></li>
|
||||
<li>
|
||||
<a href="#">Even More</a>
|
||||
<ul>
|
||||
<li><a href="#">Horoscopes</a></li>
|
||||
<li><a href="#">Games</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
<li><a href="#">OMG</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Fixed Menus</h2>
|
||||
|
||||
<p>
|
||||
Fixed menus can be created by adding the <code>pure-menu-fixed</code> class name to the wrapper. This will fix a menu to the top of the page.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="pure-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
|
||||
</p>
|
||||
|
||||
<div id="fixed-menu" class="pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<ul>
|
||||
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Paginator</h2>
|
||||
|
||||
<ul class="pure-paginator">
|
||||
<li><a class="pure-button prev" href="#">«</a></li>
|
||||
<li><a class="pure-button" href="#">1</a></li>
|
||||
<li><a class="pure-button pure-button-active" href="#">2</a></li>
|
||||
<li><a class="pure-button" href="#">3</a></li>
|
||||
<li><a class="pure-button" href="#">4</a></li>
|
||||
<li><a class="pure-button" href="#">5</a></li>
|
||||
<li><a class="pure-button next" href="#">»</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
|
||||
<script>
|
||||
var Y = YUI({
|
||||
fetchCSS: false,
|
||||
classNamePrefix: 'pure'
|
||||
}).use('gallery-sm-menu', 'event-tap', 'node-base', function (Y) {
|
||||
var Y = YUI({
|
||||
fetchCSS: false,
|
||||
classNamePrefix: 'pure'
|
||||
}).use('gallery-sm-menu', 'event-tap', 'node-base', function (Y) {
|
||||
|
||||
//Y.config.classNamePrefix = 'pure';
|
||||
var horizontalMenu = new Y.Menu({
|
||||
container : '#horizontal-menu',
|
||||
sourceNode : '#std-menu-items',
|
||||
orientation : 'horizontal',
|
||||
hideOnOutsideClick: false
|
||||
});
|
||||
|
||||
horizontalMenu.render();
|
||||
horizontalMenu.show();
|
||||
|
||||
Y.one('#showFixedMenuBtn').on('tap', function (e) {
|
||||
Y.one('#fixed-menu').toggleClass('pure-menu-open');
|
||||
});
|
||||
|
||||
var horizontalMenu = new Y.Menu({
|
||||
container: '#horizontal-menu',
|
||||
sourceNode: '#std-menu-items',
|
||||
orientation: 'horizontal',
|
||||
hideOnOutsideClick: false
|
||||
});
|
||||
|
||||
horizontalMenu.render();
|
||||
horizontalMenu.show();
|
||||
|
||||
|
||||
Y.one('#showFixedMenuBtn').on('tap', function (e) {
|
||||
var fixedMenu = Y.one('#fixed-menu');
|
||||
fixedMenu.toggleClass('pure-menu-open');
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,251 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/tables-min.css">
|
||||
<style>
|
||||
<meta charset="utf-8">
|
||||
<title>Tables Tests</title>
|
||||
|
||||
table {
|
||||
width:480px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/tables.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="intro">
|
||||
<h1>Pure Table CSS</h1>
|
||||
<h2>
|
||||
Simple CSS for HTML Tables
|
||||
</h2>
|
||||
</div>
|
||||
<h1>Tables Tests</h1>
|
||||
|
||||
<h2>Default Table</h2>
|
||||
<h2>Default Table</h2>
|
||||
|
||||
<p>Add the <code>pure-table</code> classname to a table to style an HTML table This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.</p>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Bordered Table</h2>
|
||||
<p>To add horizontal and vertical borders to all cells, add the <code>pure-table-bordered</code> classname to the <code>table</code> element.</p>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Bordered Table</h2>
|
||||
|
||||
<h2>Table with Horizontal Borders</h2>
|
||||
<p>If you prefer to just have horizontal lines, add the <code>pure-table-horizontal</code> classname to the <code>table</code> element.</p>
|
||||
<table class="pure-table pure-table-horizontal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Striped Table</h2>
|
||||
<p>Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>pure-table-odd</code> class name to every other <code>tr</code> element changes the background of the row and creates a zebra-styled effect.</p>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Table with Horizontal Borders</h2>
|
||||
|
||||
<table class="pure-table pure-table-horizontal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Striped Table</h2>
|
||||
|
||||
<h3>Nth Child Selector Styling</h3>
|
||||
<p>Here's a striped table that's zebra-styled using <code>nth-child</code> selectors.</p>
|
||||
<table class="pure-table pure-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="pure-table-odd">
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr class="pure-table-odd">
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr class="pure-table-odd">
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr class="pure-table-odd">
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Nth Child Selector Styling</h3>
|
||||
|
||||
<table class="pure-table pure-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user