library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Clean manual tests by formatting the HTML and making it valid

Browse Source
This commit is contained in:
Eric Ferraiuolo 2013-09-03 13:18:46 -04:00
parent 14d767c603
commit 44b5be0a46
5 changed files with 680 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/buttons/tests/manual/button.html
View File

@ -1,8 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Button Manual Tests</title> <meta charset="utf-8">
<link rel="stylesheet" href="../../../../build/pure-min.css"> <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.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css">
@ -48,7 +51,7 @@
</head> </head>
<body> <body>
<h1>Test Button Styles</h1> <h1>Buttons Tests</h1>
<h2>Regular Buttons</h2> <h2>Regular Buttons</h2>
<p> <p>
@ -89,7 +92,7 @@
</p> </p>
<p> <p>
<button class="pure-button pure-button-wedding" href="#"> <button class="pure-button pure-button-wedding">
<i class="icon-film"></i> <i class="icon-film"></i>
Start Playing Movie Start Playing Movie
</button> </button>

172
src/forms/tests/manual/forms.html
View File

@ -1,72 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset="utf-8">
<meta name="viewport" content="width = device-width"> <meta name="viewport" content="width=device-width">
<title>Forms CSS Manual Test</title> <title>Forms Tests</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">
<style> <link rel="stylesheet" href="../../../../build/base.css">
body { <link rel="stylesheet" href="../../../../build/grids.css">
color: #333; <link rel="stylesheet" href="../../../../build/buttons.css">
font-size:1.2em; <link rel="stylesheet" href="../../../../build/forms.css">
}
</style>
</head> </head>
<body> <body>
<div class="content"> <h1>Forms Tests</h1>
<h2>Default Form</h2> <h2>Default Form</h2>
<form class="pure-form"> <form class="pure-form">
<fieldset> <fieldset>
<legend>A default inline form.</legend> <legend>A default inline form.</legend>
<input type="text" placeholder="Email"> <input type="text" placeholder="Email">
<input type="password" placeholder="Password"> <input type="password" placeholder="Password">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
</label> </label>
<button type="submit" class="pure-button">Sign in</button> <button type="submit" class="pure-button">Sign in</button>
</fieldset> </fieldset>
</form> </form>
<h2>Multi-Column Form (with YUI Grids)</h2>
<p> <h2>Multi-Column Form with Grids</h2>
Multi-column forms such as the one below can be created by pulling down YUI Grids.
</p>
<form class="pure-form pure-form-stacked"> <form class="pure-form pure-form-stacked">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<div class='pure-g-r'> <div class="pure-g-r">
<div class='pure-u-1-3'> <div class="pure-u-1-3">
<label>First Name</label> <label>First Name</label>
<input type="text"> <input type="text">
</div> </div>
<div class='pure-u-1-3'> <div class="pure-u-1-3">
<label>Password</label> <label>Password</label>
<input type="password"> <input type="password">
</div> </div>
<div class='pure-u-1-3'> <div class="pure-u-1-3">
<label>E-Mail</label> <label>E-Mail</label>
<input type="email" required> <input type="email" required>
</div> </div>
<div class="pure-u-1-3">
<div class='pure-u-1-3'>
<label>City</label> <label>City</label>
<input type="text"> <input type="text">
</div> </div>
<div class="pure-u-1-3">
<div class='pure-u-1-3'>
<label>State</label> <label>State</label>
<select class='pure-input-medium'> <select class="pure-input-medium">
<option>AL</option> <option>AL</option>
<option>CA</option> <option>CA</option>
<option>IL</option> <option>IL</option>
@ -75,73 +67,77 @@
</select> </select>
</div> </div>
</div> </div>
<label class="pure-checkbox"> <label class="pure-checkbox">
<input type="checkbox"> I've read the terms and conditions <input type="checkbox"> I've read the terms and conditions
</label> </label>
<button type="submit" class='pure-button'>Submit</button>
<button type="reset" class='pure-button'>Reset</button> <button type="submit" class="pure-button">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</fieldset> </fieldset>
</form> </form>
<h2>Stacked Form</h2> <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"> <form class="pure-form pure-form-stacked">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<label>First Name</label> <label>First Name</label>
<input type="text"> <input type="text">
<label>Password</label> <label>Password</label>
<input type="password"> <input type="password">
<label>E-Mail</label> <label>E-Mail</label>
<input type="email" required> <input type="email" required>
<aside class='pure-help-inline'>This is a required field.</aside> <aside class="pure-help-inline">This is a required field.</aside>
<label>City</label> <label>City</label>
<input type="text"> <input type="text">
<aside class='pure-form-message'>This is another required field.</aside> <aside class="pure-form-message">This is another required field.</aside>
<label>State</label> <label>State</label>
<select class='pure-input-medium'> <select class="pure-input-medium">
<option>AL</option> <option>AL</option>
<option>CA</option> <option>CA</option>
<option>IL</option> <option>IL</option>
<option>MD</option> <option>MD</option>
<option>NY</option> <option>NY</option>
</select> </select>
<label class="pure-checkbox"> <label class="pure-checkbox">
<input type="checkbox"> I've read the terms and conditions <input type="checkbox"> I've read the terms and conditions
</label> </label>
<button type="submit" class='pure-button notice'>Submit</button>
<button type="reset" class='pure-button'>Reset</button>
<button type="submit" class="pure-button notice">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</fieldset> </fieldset>
</form> </form>
<h2>Aligned Form</h2>
<p>Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.</p> <h2>Aligned Form</h2>
<form class="pure-form pure-form-aligned"> <form class="pure-form pure-form-aligned">
<fieldset> <fieldset>
<div class="pure-control-group"> <div class="pure-control-group">
<label>Username</label> <label>Username</label>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
<aside class='pure-form-message-inline'>This is a <code>pure-form-message-inline</code> field.</aside> <aside class="pure-form-message-inline">This is a <code>pure-form-message-inline</code> field.</aside>
</div> </div>
<div class="pure-control-group"> <div class="pure-control-group">
<label>Password</label> <label>Password</label>
<input type="password" placeholder="Password"> <input type="password" placeholder="Password">
<aside class='pure-help-inline'>This is a <code>pure-help-inline</code> field. Deprecated.</aside> <aside class="pure-help-inline">This is a <code>pure-help-inline</code> field. Deprecated.</aside>
</div> </div>
<div class="pure-control-group"> <div class="pure-control-group">
<label>Email Address</label> <label>Email Address</label>
<input type="text" placeholder="Email Address"> <input type="text" placeholder="Email Address">
</div> </div>
<div class="pure-control-group"> <div class="pure-control-group">
<label>Here's a button</label> <label>Here's a button</label>
<input type="button" value="Button" class="pure-button"> <input type="button" value="Button" class="pure-button">
@ -156,35 +152,32 @@
<label class="pure-checkbox"> <label class="pure-checkbox">
<input type="checkbox"> Remember Me <input type="checkbox"> Remember Me
</label> </label>
<button type="submit" class="pure-button">Submit</button> <button type="submit" class="pure-button">Submit</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
<h2>Grouped Inputs</h2> <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"> <form class="pure-form">
<fieldset class='pure-group'> <fieldset class="pure-group">
<input type="text" class="pure-input-1-3" placeholder='Username'> <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="Password">
<input type="text" class="pure-input-1-3" placeholder='Email'> <input type="text" class="pure-input-1-3" placeholder="Email">
</fieldset> </fieldset>
<fieldset class='pure-group'>
<input type="text" class="pure-input-1-3" placeholder='Another Group'> <fieldset class="pure-group">
<input type="text" class="pure-input-1-3" placeholder='More Stuff'> <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> <button type="submit" class="pure-button pure-input-1-3">Sign in</button>
</fieldset> </fieldset>
</form> </form>
<h2>Input Sizing</h2> <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"> <form class="pure-form">
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br/> <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-2-3" type="text" placeholder=".pure-input-2-3"><br/>
@ -193,44 +186,55 @@
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/> <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/>
</form> </form>
<div class="pure-g sizing">
<form class="pure-form"> <form class="pure-form">
<div class="pure-g">
<div class="pure-u-1-4"> <div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div> </div>
<div class="pure-u-3-4"> <div class="pure-u-3-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4"> <input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
</div> </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-2"> <div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div> </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"> <div class="pure-u-1-8">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
</div> </div>
<div class="pure-u-1-8">
<input class="v" type="text" placeholder=".pure-u-1-8">
</div>
<div class="pure-u-1-4"> <div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div> </div>
<div class="pure-u-1-2"> <div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div> </div>
</div>
<div class="pure-g">
<div class="pure-u-1-5"> <div class="pure-u-1-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
</div> </div>
<div class="pure-u-2-5"> <div class="pure-u-2-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5"> <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div> </div>
<div class="pure-u-2-5"> <div class="pure-u-2-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5"> <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div> </div>
@ -238,43 +242,49 @@
<div class="pure-u-1"> <div class="pure-u-1">
<input class="pure-input-1" type="text" placeholder=".pure-u-1"> <input class="pure-input-1" type="text" placeholder=".pure-u-1">
</div> </div>
</form>
</div> </div>
</form>
<h2>Invalid Inputs</h2> <h2>Invalid Inputs</h2>
<p>Add the required attribute to any form control.</p>
<form class="pure-form"> <form class="pure-form">
<input type="email" placeholder="Requires an email" required> <input type="email" placeholder="Requires an email" required>
</form> </form>
<h2>Disabled Inputs</h2> <h2>Disabled Inputs</h2>
<p>Add the disabled attribute to any form control.</p>
<form class="pure-form"> <form class="pure-form">
<input class="pure-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." value="Foo bar baz" disabled> <input class="pure-input-xlarge" type="text" placeholder="Disabled input here..." value="Foo bar baz" disabled>
</form> </form>
<h2>Readonly Inputs</h2> <h2>Readonly Inputs</h2>
<p>Add the readonly attribute to any form control.</p>
<form class="pure-form"> <form class="pure-form">
<input class="pure-input-xlarge" id="readonlyInput" type="text" placeholder="Readonly input here..." value="Foo bar baz" readonly> <input class="pure-input-xlarge" type="text" placeholder="Readonly input here..." value="Foo bar baz" readonly>
</form> </form>
<h2>Rounded Form</h2> <h2>Rounded Form</h2>
<p>Add the pure-input-rounded classname to any form control.</p>
<form class="pure-form pure-form-stacked"> <form class="pure-form pure-form-stacked">
<label>Subject</label> <label>Subject</label>
<input type="text" class="pure-input-rounded" placeholder="Subject" /> <input type="text" class="pure-input-rounded" placeholder="Subject" />
<label>Message</label> <label>Message</label>
<textarea class="pure-input-rounded" rows="5" cols="40" placeholder="Message..."></textarea> <textarea class="pure-input-rounded" rows="5" cols="40" placeholder="Message..."></textarea>
<button type="submit" class="pure-button pure-input-rounded">Search</button> <button type="submit" class="pure-button pure-input-rounded">Search</button>
<input type="reset" class="pure-button pure-input-rounded" value="Reset" /> <input type="reset" class="pure-button pure-input-rounded" value="Reset" />
</form> </form>
<h2>Selects</h2> <h2>Selects</h2>
<form class="pure-form"> <form class="pure-form">
<select class='pure-input-medium'> <select class="pure-input-medium">
<option>Brazil</option> <option>Brazil</option>
<option>Canada</option> <option>Canada</option>
<option>United States</option> <option>United States</option>
@ -282,7 +292,6 @@
<option>Venezuela</option> <option>Venezuela</option>
</select> </select>
<select multiple="multiple" class="pure-input-large"> <select multiple="multiple" class="pure-input-large">
<option>Brazil</option> <option>Brazil</option>
<option>Canada</option> <option>Canada</option>
@ -292,7 +301,9 @@
</select> </select>
</form> </form>
<h2>Checkboxes and Radios</h2> <h2>Checkboxes and Radios</h2>
<form class="pure-form"> <form class="pure-form">
<label class="pure-checkbox"> <label class="pure-checkbox">
<input type="checkbox" value=""> <input type="checkbox" value="">
@ -301,15 +312,18 @@
<label class="pure-radio"> <label class="pure-radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Here's a radio button. You can choose this one.. Here's a radio button. You can choose this one...
</label> </label>
<label class="pure-radio"> <label class="pure-radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
..Or this one! ...Or this one!
</label> </label>
</form> </form>
<h2>Help text</h2> <h2>Help text</h2>
<form class="pure-form pure-form-stacked"> <form class="pure-form pure-form-stacked">
<fieldset> <fieldset>
<label>Last Name</label> <label>Last Name</label>
@ -317,10 +331,10 @@
<aside class="pure-form-message">Block help text</aside> <aside class="pure-form-message">Block help text</aside>
</fieldset> </fieldset>
</form> </form>
</div>
<div class= "pure-g-r">
<div class= "pure-u-1"> <h2>Buttons</h2>
<form class="pure-form"> <form class="pure-form">
<a class="pure-button pure-button-primary">Anchor</a> <a class="pure-button pure-button-primary">Anchor</a>
<button class="pure-button pure-button-primary">Button</button> <button class="pure-button pure-button-primary">Button</button>
@ -328,7 +342,5 @@
<input type="button" class="pure-button pure-button-primary" value="Input Button" /> <input type="button" class="pure-button pure-button-primary" value="Input Button" />
<input type="reset" class="pure-button pure-button-primary" value="Reset" /> <input type="reset" class="pure-button pure-button-primary" value="Reset" />
</form> </form>
</div>
</div>
</body> </body>
</html> </html>

20
src/grids/tests/manual/responsive.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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/base.css">
<link rel="stylesheet" href="../../../../build/grids.css"> <link rel="stylesheet" href="../../../../build/grids.css">
@ -24,7 +24,9 @@
</head> </head>
<body> <body>
<h1>Base Grid</h1> <h1>Grids Tests</h1>
<h2>Base Grid</h2>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1-2"> <div class="pure-u-1-2">
@ -267,7 +269,7 @@
</div> </div>
<h1>Responsive Grid</h1> <h2>Responsive Grid</h2>
<div class="pure-g-r"> <div class="pure-g-r">
<div class="pure-u-1-2"> <div class="pure-u-1-2">
@ -510,22 +512,22 @@
</div> </div>
<h1>Images Grid</h1> <h2>Images Grid</h2>
<div class="pure-g-r"> <div class="pure-g-r">
<div class="pure-u-1-3"> <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>
<div class="pure-u-1-3"> <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>
<div class="pure-u-1-3"> <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>
</div> </div>
<h1>Nested Grid</h1> <h2>Nested Grid</h2>
<div class="pure-g-r"> <div class="pure-g-r">
<div class="pure-u-1-2"> <div class="pure-u-1-2">
@ -562,7 +564,7 @@
</div> </div>
<div class="serif"> <div class="serif">
<h1>Custom Font and Grids</h1> <h2>Custom Font and Grids</h2>
<p> <p>
Grids with a serif font stack. Grids with a serif font stack.
</p> </p>

82
src/menus/tests/manual/menus.html
View File

@ -1,65 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset="utf-8">
<meta name="viewport" content="width = device-width"> <meta name="viewport" content="width=device-width">
<title>Menus CSS</title> <title>Menus Tests</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">
<style> <link rel="stylesheet" href="../../../../build/base.css">
body { <link rel="stylesheet" href="../../../../build/buttons.css">
font-family: sans-serif; <link rel="stylesheet" href="../../../../build/menus.css">
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>
</head> </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>
</div>
<div class="content">
<h2>Horizontal Menu</h2> <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"> <div class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="#" class="pure-menu-heading">Site Title</a> <a href="#" class="pure-menu-heading">Site Title</a>
<ul> <ul>
@ -74,7 +29,7 @@
<h2>Vertical Menu</h2> <h2>Vertical Menu</h2>
<div id="vertical-menu1" class="pure-menu pure-menu-open"> <div class="pure-menu pure-menu-open">
<a href="#" class="pure-menu-heading">Site Title</a> <a href="#" class="pure-menu-heading">Site Title</a>
<ul> <ul>
<li class="pure-menu-selected"><a href="#">Home</a></li> <li class="pure-menu-selected"><a href="#">Home</a></li>
@ -87,7 +42,7 @@
</ul> </ul>
</div> </div>
<div id="vertical-menu1" class="pure-menu pure-menu-open"> <div class="pure-menu pure-menu-open">
<ul> <ul>
<li class="pure-menu-heading">Site Title</li> <li class="pure-menu-heading">Site Title</li>
<li class="pure-menu-selected"><a href="#">Home</a></li> <li class="pure-menu-selected"><a href="#">Home</a></li>
@ -107,7 +62,6 @@
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. 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> </p>
<div id="horizontal-menu"> <div id="horizontal-menu">
<a href="#" class="pure-menu-heading">Site Title</a> <a href="#" class="pure-menu-heading">Site Title</a>
<ul id="std-menu-items"> <ul id="std-menu-items">
@ -170,30 +124,26 @@
<li><a class="pure-button next" href="#">&#187;</a></li> <li><a class="pure-button next" href="#">&#187;</a></li>
</ul> </ul>
</div>
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script> <script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
<script> <script>
var Y = YUI({ var Y = YUI({
fetchCSS: false, fetchCSS: false,
classNamePrefix: 'pure' classNamePrefix: 'pure'
}).use('gallery-sm-menu', 'event-tap', 'node-base', function (Y) { }).use('gallery-sm-menu', 'event-tap', 'node-base', function (Y) {
//Y.config.classNamePrefix = 'pure';
var horizontalMenu = new Y.Menu({ var horizontalMenu = new Y.Menu({
container: '#horizontal-menu', container : '#horizontal-menu',
sourceNode: '#std-menu-items', sourceNode : '#std-menu-items',
orientation: 'horizontal', orientation : 'horizontal',
hideOnOutsideClick: false hideOnOutsideClick: false
}); });
horizontalMenu.render(); horizontalMenu.render();
horizontalMenu.show(); horizontalMenu.show();
Y.one('#showFixedMenuBtn').on('tap', function (e) { Y.one('#showFixedMenuBtn').on('tap', function (e) {
var fixedMenu = Y.one('#fixed-menu'); Y.one('#fixed-menu').toggleClass('pure-menu-open');
fixedMenu.toggleClass('pure-menu-open');
}); });
}); });

40
src/tables/tests/manual/tables.html
View File

@ -1,27 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="../../../../build/tables-min.css"> <meta charset="utf-8">
<style> <title>Tables Tests</title>
table { <link rel="stylesheet" href="../../../../build/base.css">
width:480px; <link rel="stylesheet" href="../../../../build/tables.css">
}
</style>
</head> </head>
<body> <body>
<div class="intro"> <h1>Tables Tests</h1>
<h1>Pure Table CSS</h1>
<h2>
Simple CSS for HTML Tables
</h2>
</div>
<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"> <table class="pure-table">
<thead> <thead>
<tr> <tr>
@ -54,7 +45,7 @@
</table> </table>
<h2>Bordered Table</h2> <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"> <table class="pure-table pure-table-bordered">
<thead> <thead>
<tr> <tr>
@ -87,7 +78,7 @@
</table> </table>
<h2>Table with Horizontal Borders</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"> <table class="pure-table pure-table-horizontal">
<thead> <thead>
<tr> <tr>
@ -120,7 +111,7 @@
</table> </table>
<h2>Striped Table</h2> <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"> <table class="pure-table">
<thead> <thead>
<tr> <tr>
@ -131,7 +122,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class='pure-table-odd'> <tr class="pure-table-odd">
<td>1</td> <td>1</td>
<td>Honda</td> <td>Honda</td>
<td>Accord</td> <td>Accord</td>
@ -143,7 +134,7 @@
<td>Camry</td> <td>Camry</td>
<td>2012</td> <td>2012</td>
</tr> </tr>
<tr class='pure-table-odd'> <tr class="pure-table-odd">
<td>3</td> <td>3</td>
<td>Hyundai</td> <td>Hyundai</td>
<td>Elantra</td> <td>Elantra</td>
@ -155,7 +146,7 @@
<td>Focus</td> <td>Focus</td>
<td>2008</td> <td>2008</td>
</tr> </tr>
<tr class='pure-table-odd'> <tr class="pure-table-odd">
<td>5</td> <td>5</td>
<td>Nissan</td> <td>Nissan</td>
<td>Sentra</td> <td>Sentra</td>
@ -167,7 +158,7 @@
<td>M3</td> <td>M3</td>
<td>2009</td> <td>2009</td>
</tr> </tr>
<tr class='pure-table-odd'> <tr class="pure-table-odd">
<td>7</td> <td>7</td>
<td>Honda</td> <td>Honda</td>
<td>Civic</td> <td>Civic</td>
@ -182,10 +173,8 @@
</tbody> </tbody>
</table> </table>
<h3>Nth Child Selector Styling</h3> <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"> <table class="pure-table pure-table-striped">
<thead> <thead>
<tr> <tr>
@ -246,6 +235,5 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</body> </body>
</html> </html>