github/pure
1
Fork 0
mirror of https://github.com/pure-css/pure synced 2024-11-26 08:27:21 +01:00
Code Releases Activity

Rename CSS classname prefix to pure

Browse Source
This commit is contained in:
Eric Ferraiuolo 2013-05-16 13:33:57 -04:00
parent a19f09a17f
commit 681ca1a93e
21 changed files with 420 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
HISTORY.md
View File

@ -6,6 +6,8 @@ NEXT
* (!) Rename to Pure. * (!) Rename to Pure.
* (!) Rename CSS classname prefix to `pure`.
0.0.1 (2013-05-14) 0.0.1 (2013-05-14)
------------------ ------------------

2
src/base/README.md
View File

@ -14,4 +14,4 @@ Differences
Changes are minimal. Base uses Normalize v1.1.1. Changes are minimal. Base uses Normalize v1.1.1.
- Create a contextual normalize.css (normalize-context.css) toggled off a - Create a contextual normalize.css (normalize-context.css) toggled off a
parent classname: `.k`. parent classname: `.pure`.

4
src/buttons/css/buttons-core.css
View File

@ -1,4 +1,4 @@
.k-button { .pure-button {
/* Structure */ /* Structure */
display: inline-block; display: inline-block;
*display: inline; /*IE 6/7*/ *display: inline; /*IE 6/7*/
@ -16,7 +16,7 @@
/* Firefox: Get rid of the inner focus border */ /* Firefox: Get rid of the inner focus border */
.k-button::-moz-focus-inner{ .pure-button::-moz-focus-inner{
padding: 0; padding: 0;
border: 0; border: 0;
} }

32
src/buttons/css/buttons.css
View File

@ -1,4 +1,4 @@
.k-button { .pure-button {
font-size: 100%; font-size: 100%;
*font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/ *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
*overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */ *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
@ -21,8 +21,8 @@
} }
.k-button-hover, .pure-button-hover,
.k-button:hover { .pure-button:hover {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0);
@ -34,17 +34,17 @@
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05));
} }
.k-button-active, .pure-button-active,
.k-button:active { .pure-button:active {
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; -moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
} }
.k-button[disabled], .pure-button[disabled],
.k-button-disabled, .pure-button-disabled,
.k-button-disabled:hover, .pure-button-disabled:hover,
.k-button-disabled:active { .pure-button-disabled:active {
border: none; border: none;
background-image: none; background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
@ -56,26 +56,26 @@
box-shadow: none; box-shadow: none;
} }
.k-button-hidden { .pure-button-hidden {
display:none; display:none;
} }
/* Firefox: Get rid of the inner focus border */ /* Firefox: Get rid of the inner focus border */
.k-button::-moz-focus-inner{ .pure-button::-moz-focus-inner{
padding: 0; padding: 0;
border: 0; border: 0;
} }
/* Sam */ /* Sam */
.k-button-primary, .pure-button-primary,
.k-button-selected, .pure-button-selected,
a.k-button-primary, a.pure-button-primary,
a.k-button-selected { a.pure-button-selected {
background-color: rgb(0, 120, 231); background-color: rgb(0, 120, 231);
color: #fff; color: #fff;
} }
.k-button:-moz-focusring { .pure-button:-moz-focusring {
outline-color: rgba(0, 0, 0, 0.85); outline-color: rgba(0, 0, 0, 0.85);
} }

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

@ -17,7 +17,7 @@
color: blue; color: blue;
} }
.k-button-green { .pure-button-green {
text-transform: uppercase; text-transform: uppercase;
font-weight:bold; font-weight:bold;
color: white; color: white;
@ -27,7 +27,7 @@
text-shadow: 0 1px 1px rgb(22, 116, 29); text-shadow: 0 1px 1px rgb(22, 116, 29);
} }
.k-button-red { .pure-button-red {
background: red; background: red;
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
@ -38,19 +38,19 @@
} }
.k-button-yellow { .pure-button-yellow {
background: rgb(255, 236, 15); background: rgb(255, 236, 15);
color: rgb(146, 128, 32); color: rgb(146, 128, 32);
border: 1px solid rgb(201, 189, 52); border: 1px solid rgb(201, 189, 52);
text-shadow: -1px 1px 1px white; text-shadow: -1px 1px 1px white;
} }
.k-button-wedding:hover { .pure-button-wedding:hover {
background: #555; background: #555;
color: #eee; color: #eee;
} }
.k-button-wedding:active { .pure-button-wedding:active {
background: #222; background: #222;
color: #fff; color: #fff;
box-shadow: none; box-shadow: none;
@ -61,47 +61,47 @@
</head> </head>
<body> <body>
<h2>Regular Buttons</h2> <h2>Regular Buttons</h2>
<button class="k-button">A Regular Button</button> <button class="pure-button">A Regular Button</button>
<a class="k-button" href="#">An anchor Button</a> <a class="pure-button" href="#">An anchor Button</a>
<h2>Disabled Buttons</h2> <h2>Disabled Buttons</h2>
<button class="k-button k-button-disabled">A Regular Button</button> <button class="pure-button pure-button-disabled">A Regular Button</button>
<a class="k-button k-button-disabled" href="#">An anchor Button</a> <a class="pure-button pure-button-disabled" href="#">An anchor Button</a>
<h2>Active Buttons</h2> <h2>Active Buttons</h2>
<button class="k-button k-button-active">A Regular Button</button> <button class="pure-button pure-button-active">A Regular Button</button>
<a class="k-button k-button-active" href="#">An anchor Button</a> <a class="pure-button pure-button-active" href="#">An anchor Button</a>
<h2>Primary/Selected Buttons</h2> <h2>Primary/Selected Buttons</h2>
<button class="k-button k-button-primary">A Regular Button</button> <button class="pure-button pure-button-primary">A Regular Button</button>
<a class="k-button k-button-primary" href="#">An anchor Button</a> <a class="pure-button pure-button-primary" href="#">An anchor Button</a>
<h2>Customizing Buttons</h2> <h2>Customizing Buttons</h2>
<p> <p>
<button class="k-button k-button-green">A Custom Button</button> <button class="pure-button pure-button-green">A Custom Button</button>
<a class="k-button k-button-green" href="#">An anchor Button</a> <a class="pure-button pure-button-green" href="#">An anchor Button</a>
</p> </p>
<p> <p>
<button class="k-button k-button-red">Another custom Button</button> <button class="pure-button pure-button-red">Another custom Button</button>
<a class="k-button k-button-red" href="#">Custom Button</a> <a class="pure-button pure-button-red" href="#">Custom Button</a>
</p> </p>
<p> <p>
<button class="k-button k-button-yellow">Another custom Button</button> <button class="pure-button pure-button-yellow">Another custom Button</button>
<a class="k-button k-button-yellow" href="#">Custom Button</a> <a class="pure-button pure-button-yellow" href="#">Custom Button</a>
</p> </p>
<p> <p>
<button class="k-button k-button-wedding" href="#"> <button class="pure-button pure-button-wedding" href="#">
<i class="icon-film"></i> <i class="icon-film"></i>
Start Playing Movie Start Playing Movie
</button> </button>
<a class="k-button k-button-wedding" href="#"> <a class="pure-button pure-button-wedding" href="#">
<i class="icon-film"></i> <i class="icon-film"></i>
Start Playing Movie Start Playing Movie
</a> </a>

48
src/forms/css/forms-core.css
View File

@ -1,4 +1,4 @@
/* This page has Normalize.css form-specific style rules applied to a .k-form context */ /* This page has Normalize.css form-specific style rules applied to a .pure-form context */
/* ========== /* ==========
Forms Core Forms Core
@ -8,7 +8,7 @@
* Corrects margin displayed oddly in IE 6/7. * Corrects margin displayed oddly in IE 6/7.
*/ */
.k-form { .pure-form {
margin: 0; margin: 0;
} }
@ -16,7 +16,7 @@
* Define consistent border, margin, and padding. * Define consistent border, margin, and padding.
*/ */
.k-form fieldset { .pure-form fieldset {
border: 1px solid #c0c0c0; border: 1px solid #c0c0c0;
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
@ -28,7 +28,7 @@
* 3. Corrects alignment displayed oddly in IE 6/7. * 3. Corrects alignment displayed oddly in IE 6/7.
*/ */
.k-form legend { .pure-form legend {
border: 0; /* 1 */ border: 0; /* 1 */
padding: 0; padding: 0;
white-space: normal; /* 2 */ white-space: normal; /* 2 */
@ -42,10 +42,10 @@
* 3. Improves appearance and consistency in all browsers. * 3. Improves appearance and consistency in all browsers.
*/ */
.k-form button, .pure-form button,
.k-form input, .pure-form input,
.k-form select, .pure-form select,
.k-form textarea { .pure-form textarea {
font-size: 100%; /* 1 */ font-size: 100%; /* 1 */
margin: 0; /* 2 */ margin: 0; /* 2 */
vertical-align: baseline; /* 3 */ vertical-align: baseline; /* 3 */
@ -57,8 +57,8 @@
* the UA stylesheet. * the UA stylesheet.
*/ */
.k-form button, .pure-form button,
.k-form input { .pure-form input {
line-height: normal; line-height: normal;
} }
@ -72,10 +72,10 @@
* Known issue: inner spacing remains in IE 6. * Known issue: inner spacing remains in IE 6.
*/ */
.k-form button, .pure-form button,
.k-form input[type="button"], /* 1 */ .pure-form input[type="button"], /* 1 */
.k-form input[type="reset"], .pure-form input[type="reset"],
.k-form input[type="submit"] { .pure-form input[type="submit"] {
-webkit-appearance: button; /* 2 */ -webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */ cursor: pointer; /* 3 */
*overflow: visible; /* 4 */ *overflow: visible; /* 4 */
@ -85,8 +85,8 @@
* Re-set default cursor for disabled elements. * Re-set default cursor for disabled elements.
*/ */
.k-form button[disabled], .pure-form button[disabled],
.k-form input[disabled] { .pure-form input[disabled] {
cursor: default; cursor: default;
} }
@ -97,8 +97,8 @@
* Known issue: excess padding remains in IE 6. * Known issue: excess padding remains in IE 6.
*/ */
.k-form input[type="checkbox"], .pure-form input[type="checkbox"],
.k-form input[type="radio"] { .pure-form input[type="radio"] {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */ padding: 0; /* 2 */
*height: 13px; /* 3 */ *height: 13px; /* 3 */
@ -111,7 +111,7 @@
* (include `-moz` to future-proof). * (include `-moz` to future-proof).
*/ */
.k-form input[type="search"] { .pure-form input[type="search"] {
-webkit-appearance: textfield; /* 1 */ -webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */ -webkit-box-sizing: content-box; /* 2 */
@ -123,8 +123,8 @@
* on OS X. * on OS X.
*/ */
.k-form input[type="search"]::-webkit-search-cancel-button, .pure-form input[type="search"]::-webkit-search-cancel-button,
.k-form input[type="search"]::-webkit-search-decoration { .pure-form input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -132,8 +132,8 @@
* Removes inner padding and border in Firefox 3+. * Removes inner padding and border in Firefox 3+.
*/ */
.k-form button::-moz-focus-inner, .pure-form button::-moz-focus-inner,
.k-form input::-moz-focus-inner { .pure-form input::-moz-focus-inner {
border: 0; border: 0;
padding: 0; padding: 0;
} }
@ -143,7 +143,7 @@
* 2. Improves readability and alignment in all browsers. * 2. Improves readability and alignment in all browsers.
*/ */
.k-form textarea { .pure-form textarea {
overflow: auto; /* 1 */ overflow: auto; /* 1 */
vertical-align: top; /* 2 */ vertical-align: top; /* 2 */
} }

12
src/forms/css/forms-r.css
View File

@ -1,29 +1,29 @@
@media only screen and (max-width : 480px) { @media only screen and (max-width : 480px) {
.k-form button[type='submit'] { .pure-form button[type='submit'] {
margin: 0.7em 0 0; margin: 0.7em 0 0;
} }
.k-form input[type='text'], .k-form button, .k-form label { .pure-form input[type='text'], .pure-form button, .pure-form label {
margin-bottom: 0.3em; margin-bottom: 0.3em;
display: block; display: block;
} }
.k-group input[type='text'] { .pure-group input[type='text'] {
margin-bottom: 0; margin-bottom: 0;
} }
.k-form-aligned .k-control-group label { .pure-form-aligned .pure-control-group label {
margin-bottom: 0.3em; margin-bottom: 0.3em;
text-align: left; text-align: left;
display: block; display: block;
width: 100%; width: 100%;
} }
.k-form-aligned .k-controls { .pure-form-aligned .pure-controls {
margin: 1.5em 0 0 0; margin: 1.5em 0 0 0;
} }
.k-form .k-help-inline { .pure-form .pure-help-inline {
display: block; display: block;
font-size: 80%; font-size: 80%;
padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */ padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */

92
src/forms/css/forms.css
View File

@ -1,5 +1,5 @@
.k-form input, .pure-form input,
.k-form select { .pure-form select {
padding: 0.5em 0.6em; padding: 0.5em 0.6em;
display: inline-block; display: inline-block;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -17,57 +17,57 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.k-form input:focus, .pure-form input:focus,
.k-form select:focus { .pure-form select:focus {
outline: 0; outline: 0;
outline: thin dotted \9; /* IE6-9 */ outline: thin dotted \9; /* IE6-9 */
border-color: #129FEA; border-color: #129FEA;
} }
.k-form .k-checkbox, .pure-form .pure-checkbox,
.k-form .k-radio { .pure-form .pure-radio {
margin: 0.5em 0; margin: 0.5em 0;
display: block; display: block;
} }
.k-form input[disabled], .pure-form input[disabled],
.k-form select[disabled], .pure-form select[disabled],
.k-form textarea[disabled], .pure-form textarea[disabled],
.k-form input[readonly], .pure-form input[readonly],
.k-form select[readonly], .pure-form select[readonly],
.k-form textarea[readonly] { .pure-form textarea[readonly] {
cursor: not-allowed; cursor: not-allowed;
background-color: #eaeded; background-color: #eaeded;
color: #cad2d3; color: #cad2d3;
border-color: transparent; border-color: transparent;
} }
.k-form input:focus:invalid, .pure-form input:focus:invalid,
.k-form textarea:focus:invalid, .pure-form textarea:focus:invalid,
.k-form select:focus:invalid { .pure-form select:focus:invalid {
color: #b94a48; color: #b94a48;
border: 1px solid #ee5f5b; border: 1px solid #ee5f5b;
} }
.k-form input:focus:invalid:focus, .pure-form input:focus:invalid:focus,
.k-form textarea:focus:invalid:focus, .pure-form textarea:focus:invalid:focus,
.k-form select:focus:invalid:focus { .pure-form select:focus:invalid:focus {
border-color: #e9322d; border-color: #e9322d;
} }
.k-form select { .pure-form select {
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: white; background-color: white;
} }
.k-form select[multiple] { .pure-form select[multiple] {
height: auto; height: auto;
} }
.k-form label { .pure-form label {
margin: 0.5em 0 0.2em; margin: 0.5em 0 0.2em;
color: #999; color: #999;
font-size:90%; font-size:90%;
} }
.k-form fieldset { .pure-form fieldset {
margin: 0; margin: 0;
padding: 0.35em 0 0.75em; padding: 0.35em 0 0.75em;
border: 0; border: 0;
} }
.k-form legend { .pure-form legend {
display: block; display: block;
width: 100%; width: 100%;
padding: 0.3em 0; padding: 0.3em 0;
@ -77,16 +77,16 @@
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
.k-form.k-form-stacked input[type='text'], .pure-form.pure-form-stacked input[type='text'],
.k-form.k-form-stacked select, .pure-form.pure-form-stacked select,
.k-form.k-form-stacked label { .pure-form.pure-form-stacked label {
display: block; display: block;
} }
.k-form-aligned input, .pure-form-aligned input,
.k-form-aligned textarea, .pure-form-aligned textarea,
.k-form-aligned select, .pure-form-aligned select,
.k-form-aligned .k-help-inline { .pure-form-aligned .pure-help-inline {
display: inline-block; display: inline-block;
*display: inline; /* IE7 inline-block hack */ *display: inline; /* IE7 inline-block hack */
*zoom: 1; *zoom: 1;
@ -94,31 +94,31 @@
} }
/* aligned Forms */ /* aligned Forms */
.k-form-aligned .k-control-group { .pure-form-aligned .pure-control-group {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.k-form-aligned .k-control-group label { .pure-form-aligned .pure-control-group label {
text-align: right; text-align: right;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 10em; width: 10em;
margin: 0 1em 0 0; margin: 0 1em 0 0;
} }
.k-form-aligned .k-controls { .pure-form-aligned .pure-controls {
margin: 1.5em 0 0 10em; margin: 1.5em 0 0 10em;
} }
/* Rounded Inputs */ /* Rounded Inputs */
.k-form .k-input-rounded { .pure-form .pure-input-rounded {
border-radius: 20px; border-radius: 20px;
padding-left:1em; padding-left:1em;
} }
/* Grouped Inputs */ /* Grouped Inputs */
.k-form .k-group fieldset { .pure-form .pure-group fieldset {
margin-bottom: 10px; margin-bottom: 10px;
} }
.k-form .k-group input { .pure-form .pure-group input {
display: block; display: block;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
@ -126,39 +126,39 @@
position: relative; position: relative;
top: -1px; top: -1px;
} }
.k-form .k-group input:focus { .pure-form .pure-group input:focus {
z-index: 2; z-index: 2;
} }
.k-form .k-group input:first-child { .pure-form .pure-group input:first-child {
top: 1px; top: 1px;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
.k-form .k-group input:last-child { .pure-form .pure-group input:last-child {
top: -2px; top: -2px;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
.k-form .k-group button { .pure-form .pure-group button {
margin: 0.35em 0; margin: 0.35em 0;
} }
.k-form .k-input-1 { .pure-form .pure-input-1 {
width: 100%; width: 100%;
} }
.k-form .k-input-2-3 { .pure-form .pure-input-2-3 {
width: 66%; width: 66%;
} }
.k-form .k-input-1-2 { .pure-form .pure-input-1-2 {
width: 50%; width: 50%;
} }
.k-form .k-input-1-3 { .pure-form .pure-input-1-3 {
width: 33%; width: 33%;
} }
.k-form .k-input-1-4 { .pure-form .pure-input-1-4 {
width: 25%; width: 25%;
} }
/* Inline help for forms */ /* Inline help for forms */
.k-form .k-help-inline { .pure-form .pure-help-inline {
display: inline-block; display: inline-block;
padding-left: 0.3em; padding-left: 0.3em;
color: #666; color: #666;

170
src/forms/tests/manual/index.html
View File

@ -53,12 +53,12 @@
} }
</style> </style>
</head> </head>
<body class="k-skin-sam"> <body class="pure-skin-sam">
<div class="header y-u-1"> <div class="header y-u-1">
<h1 class="k-u-1">Pure Forms CSS</h1> <h1 class="pure-u-1">Pure Forms CSS</h1>
<h2 class="k-u">Simple styling for HTML Form elements.</h2> <h2 class="pure-u">Simple styling for HTML Form elements.</h2>
</div> </div>
@ -72,7 +72,7 @@
<h2>Default Form</h2> <h2>Default Form</h2>
<form class="k-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">
@ -80,7 +80,7 @@
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
</label> </label>
<button type="submit" class="k-button">Sign in</button> <button type="submit" class="pure-button">Sign in</button>
</fieldset> </fieldset>
</form> </form>
@ -90,32 +90,32 @@
Multi-column forms such as the one below can be created by pulling down YUI Grids. Multi-column forms such as the one below can be created by pulling down YUI Grids.
</p> </p>
<form class="k-form k-form-stacked"> <form class="pure-form pure-form-stacked">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<div class='k-g-r'> <div class='pure-g-r'>
<div class='k-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='k-u-1-3'> <div class='pure-u-1-3'>
<label>Last Name</label> <label>Last Name</label>
<input type="text"> <input type="text">
</div> </div>
<div class='k-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='k-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='k-u-1-3'> <div class='pure-u-1-3'>
<label>State</label> <label>State</label>
<select class='k-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>
@ -124,10 +124,10 @@
</select> </select>
</div> </div>
</div> </div>
<label class="k-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='k-button'>Submit</button> <button type="submit" class='pure-button'>Submit</button>
</fieldset> </fieldset>
</form> </form>
@ -135,9 +135,9 @@
<h2>Stacked Form</h2> <h2>Stacked Form</h2>
<p> <p>
Apply stacked label styling to any form by applying the <code>k-form-stacked</code> classname. Apply stacked label styling to any form by applying the <code>pure-form-stacked</code> classname.
</p> </p>
<form class="k-form k-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>
@ -146,21 +146,21 @@
<input type="text"> <input type="text">
<label>E-Mail</label> <label>E-Mail</label>
<input type="email" required> <input type="email" required>
<aside class='k-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">
<label>State</label> <label>State</label>
<select class='k-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="k-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='k-button notice'>Submit</button> <button type="submit" class='pure-button notice'>Submit</button>
</fieldset> </fieldset>
</form> </form>
@ -168,33 +168,33 @@
<p>Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.</p> <p>Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.</p>
<form class="k-form k-form-aligned"> <form class="pure-form pure-form-aligned">
<fieldset> <fieldset>
<div class="k-control-group"> <div class="pure-control-group">
<label>Username</label> <label>Username</label>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<div class="k-control-group"> <div class="pure-control-group">
<label>Password</label> <label>Password</label>
<input type="password" placeholder="Password"> <input type="password" placeholder="Password">
</div> </div>
<div class="k-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="k-control-group"> <div class="pure-control-group">
<label>Supercalifragilistic Label</label> <label>Supercalifragilistic Label</label>
<input type="text" placeholder="Enter something here..."> <input type="text" placeholder="Enter something here...">
</div> </div>
<div class="k-controls"> <div class="pure-controls">
<label class="k-checkbox"> <label class="pure-checkbox">
<input type="checkbox"> Check me out <input type="checkbox"> Check me out
</label> </label>
<button type="submit" class="k-button">Submit</button> <button type="submit" class="pure-button">Submit</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
@ -203,16 +203,16 @@
<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> <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="k-form"> <form class="pure-form">
<fieldset class='k-group'> <fieldset class='pure-group'>
<input type="text" class="k-input-1-3" placeholder='Username'> <input type="text" class="pure-input-1-3" placeholder='Username'>
<input type="text" class="k-input-1-3" placeholder='Password'> <input type="text" class="pure-input-1-3" placeholder='Password'>
<input type="text" class="k-input-1-3" placeholder='Email'> <input type="text" class="pure-input-1-3" placeholder='Email'>
</fieldset> </fieldset>
<fieldset class='k-group'> <fieldset class='pure-group'>
<input type="text" class="k-input-1-3" placeholder='Another Group'> <input type="text" class="pure-input-1-3" placeholder='Another Group'>
<input type="text" class="k-input-1-3" placeholder='More Stuff'> <input type="text" class="pure-input-1-3" placeholder='More Stuff'>
<button type="submit" class="k-button k-input-1-3">Sign in</button> <button type="submit" class="pure-button pure-input-1-3">Sign in</button>
</fieldset> </fieldset>
</form> </form>
@ -221,88 +221,88 @@
<h2>Input Sizing</h2> <h2>Input Sizing</h2>
<p>You can take advantage of YUI Grids and the <code>k-input-block</code> class to create fluid width inputs in practically any size that you want.</p> <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="k-form"> <form class="pure-form">
<input class="k-input-1" type="text" placeholder=".k-input-1"><br/> <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br/>
<input class="k-input-2-3" type="text" placeholder=".k-input-2-3"><br/> <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br/>
<input class="k-input-1-2" type="text" placeholder=".k-input-1-2"><br/> <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br/>
<input class="k-input-1-3" type="text" placeholder=".k-input-1-3"><br/> <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br/>
<input class="k-input-1-4" type="text" placeholder=".k-input-1-4"><br/> <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/>
</form> </form>
<div class="k-g sizing"> <div class="pure-g sizing">
<form class="k-form"> <form class="pure-form">
<div class="k-u-1-4"> <div class="pure-u-1-4">
<input class="k-input-1" type="text" placeholder=".k-u-1-4"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div> </div>
<div class="k-u-3-4"> <div class="pure-u-3-4">
<input class="k-input-1" type="text" placeholder=".k-u-3-4"> <input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
</div> </div>
<div class="k-u-1-2"> <div class="pure-u-1-2">
<input class="k-input-1" type="text" placeholder=".k-u-1-2"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div> </div>
<div class="k-u-1-2"> <div class="pure-u-1-2">
<input class="k-input-1" type="text" placeholder=".k-u-1-2"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div> </div>
<div class="k-u-1-8"> <div class="pure-u-1-8">
<input class="k-input-1" type="text" placeholder=".k-u-1-8"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
</div> </div>
<div class="k-u-1-8"> <div class="pure-u-1-8">
<input class="v" type="text" placeholder=".k-u-1-8"> <input class="v" type="text" placeholder=".pure-u-1-8">
</div> </div>
<div class="k-u-1-4"> <div class="pure-u-1-4">
<input class="k-input-1" type="text" placeholder=".k-u-1-4"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div> </div>
<div class="k-u-1-2"> <div class="pure-u-1-2">
<input class="k-input-1" type="text" placeholder=".k-u-1-2"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div> </div>
<div class="k-u-1-5"> <div class="pure-u-1-5">
<input class="k-input-1" type="text" placeholder=".k-u-1-5"> <input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
</div> </div>
<div class="k-u-2-5"> <div class="pure-u-2-5">
<input class="k-input-1" type="text" placeholder=".k-u-2-5"> <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div> </div>
<div class="k-u-2-5"> <div class="pure-u-2-5">
<input class="k-input-1" type="text" placeholder=".k-u-2-5"> <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div> </div>
<div class="k-u-1"> <div class="pure-u-1">
<input class="k-input-1" type="text" placeholder=".k-u-1"> <input class="pure-input-1" type="text" placeholder=".pure-u-1">
</div> </div>
</form> </form>
</div> </div>
<h2>Invalid Inputs</h2> <h2>Invalid Inputs</h2>
<p>Add the required attribute to any form control.</p> <p>Add the required attribute to any form control.</p>
<form class="k-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> <p>Add the disabled attribute to any form control.</p>
<form class="k-form"> <form class="pure-form">
<input class="k-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> <input class="pure-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</form> </form>
<h2>Rounded Form</h2> <h2>Rounded Form</h2>
<p>Add the k-input-rounded classname to any form control.</p> <p>Add the pure-input-rounded classname to any form control.</p>
<form class="k-form"> <form class="pure-form">
<input type="text" class="k-input-rounded"> <input type="text" class="pure-input-rounded">
<button type="submit" class='k-button'>Search</button> <button type="submit" class='pure-button'>Search</button>
</form> </form>
<h2>Selects</h2> <h2>Selects</h2>
<form class="k-form"> <form class="pure-form">
<select class='k-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>
@ -311,7 +311,7 @@
</select> </select>
<select multiple="multiple" class="k-input-large"> <select multiple="multiple" class="pure-input-large">
<option>Brazil</option> <option>Brazil</option>
<option>Canada</option> <option>Canada</option>
<option>United States</option> <option>United States</option>
@ -321,17 +321,17 @@
</form> </form>
<h2>Checkboxes and Radios</h2> <h2>Checkboxes and Radios</h2>
<form class="k-form"> <form class="pure-form">
<label class="k-checkbox"> <label class="pure-checkbox">
<input type="checkbox" value=""> <input type="checkbox" value="">
Here's option one. Here's option one.
</label> </label>
<label class="k-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="k-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>

6
src/grids/README.md
View File

@ -2,8 +2,8 @@ Grids
===== =====
This foundational grid provides a simple system for layout out content. The This foundational grid provides a simple system for layout out content. The
basic components are "grids" and "units". A "grid" (k-g) contains one or basic components are "grids" and "units". A "grid" (pure-g) contains one or
more "units" (k-u). The type of "unit" chosen describes how it should be more "units" (pure-u). The type of "unit" chosen describes how it should be
sized (e.g. "k-u-1-2" takes up half the grid, "k-u-1-3" takes up sized (e.g. "pure-u-1-2" takes up half the grid, "pure-u-1-3" takes up
one-third, et cetera). The only constrains for Pure Grids are that all "units" one-third, et cetera). The only constrains for Pure Grids are that all "units"
are children of a "grid". are children of a "grid".

6
src/grids/css/grids-core.css
View File

@ -1,4 +1,4 @@
.k-g { .pure-g {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
*letter-spacing: normal; /* reset IE < 8 */ *letter-spacing: normal; /* reset IE < 8 */
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
@ -10,11 +10,11 @@
and is not required in markup. and is not required in markup.
*/ */
.opera-only :-o-prefocus, .opera-only :-o-prefocus,
.k-g { .pure-g {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.k-u { .pure-u {
display: inline-block; display: inline-block;
zoom: 1; *display: inline; /* IE < 8: fake inline-block */ zoom: 1; *display: inline; /* IE < 8: fake inline-block */
letter-spacing: normal; letter-spacing: normal;

24
src/grids/css/grids-r.css
View File

@ -1,4 +1,4 @@
.k-g-r { .pure-g-r {
letter-spacing: -0.31em; letter-spacing: -0.31em;
*letter-spacing: normal; *letter-spacing: normal;
*word-spacing: -0.43em; *word-spacing: -0.43em;
@ -9,46 +9,46 @@
and is not required in markup. and is not required in markup.
*/ */
.opera-only :-o-prefocus, .opera-only :-o-prefocus,
.k-g-r { .pure-g-r {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.k-g-r img { .pure-g-r img {
max-width: 100%; max-width: 100%;
} }
@media (min-width:980px) { @media (min-width:980px) {
.k-visible-phone { .pure-visible-phone {
display: none; display: none;
} }
.k-visible-tablet { .pure-visible-tablet {
display: none; display: none;
} }
.k-hidden-desktop { .pure-hidden-desktop {
display: none; display: none;
} }
} }
@media (max-width:480px) { @media (max-width:480px) {
.k-g-r > [class ^= "k-u"] { .pure-g-r > [class ^= "pure-u"] {
width: 100%; width: 100%;
} }
} }
@media (max-width:767px) { @media (max-width:767px) {
.k-g-r > [class ^= "k-u"] { .pure-g-r > [class ^= "pure-u"] {
width: 100%; width: 100%;
} }
.k-hidden-phone { .pure-hidden-phone {
display: none; display: none;
} }
.k-visible-desktop { .pure-visible-desktop {
display: none; display: none;
} }
} }
@media (min-width:768px) and (max-width:979px) { @media (min-width:768px) and (max-width:979px) {
.k-hidden-tablet { .pure-hidden-tablet {
display: none; display: none;
} }
.k-visible-desktop { .pure-visible-desktop {
display: none; display: none;
} }
} }

112
src/grids/css/grids-units.css
View File

@ -1,31 +1,31 @@
.k-u-1, .pure-u-1,
.k-u-1-2, .pure-u-1-2,
.k-u-1-3, .pure-u-1-3,
.k-u-2-3, .pure-u-2-3,
.k-u-1-4, .pure-u-1-4,
.k-u-3-4, .pure-u-3-4,
.k-u-1-5, .pure-u-1-5,
.k-u-2-5, .pure-u-2-5,
.k-u-3-5, .pure-u-3-5,
.k-u-4-5, .pure-u-4-5,
.k-u-1-6, .pure-u-1-6,
.k-u-5-6, .pure-u-5-6,
.k-u-1-8, .pure-u-1-8,
.k-u-3-8, .pure-u-3-8,
.k-u-5-8, .pure-u-5-8,
.k-u-7-8, .pure-u-7-8,
.k-u-1-12, .pure-u-1-12,
.k-u-5-12, .pure-u-5-12,
.k-u-7-12, .pure-u-7-12,
.k-u-11-12, .pure-u-11-12,
.k-u-1-24, .pure-u-1-24,
.k-u-5-24, .pure-u-5-24,
.k-u-7-24, .pure-u-7-24,
.k-u-11-24, .pure-u-11-24,
.k-u-13-24, .pure-u-13-24,
.k-u-17-24, .pure-u-17-24,
.k-u-19-24, .pure-u-19-24,
.k-u-23-24 { .pure-u-23-24 {
display: inline-block; display: inline-block;
zoom: 1; *display: inline; /* IE < 8: fake inline-block */ zoom: 1; *display: inline; /* IE < 8: fake inline-block */
letter-spacing: normal; letter-spacing: normal;
@ -34,114 +34,114 @@
text-rendering: auto; text-rendering: auto;
} }
.k-u-1 { .pure-u-1 {
display: block; display: block;
} }
.k-u-1-2 { .pure-u-1-2 {
width: 50%; width: 50%;
} }
.k-u-1-3 { .pure-u-1-3 {
width: 33.33333%; width: 33.33333%;
} }
.k-u-2-3 { .pure-u-2-3 {
width: 66.66666%; width: 66.66666%;
} }
.k-u-1-4 { .pure-u-1-4 {
width: 25%; width: 25%;
} }
.k-u-3-4 { .pure-u-3-4 {
width: 75%; width: 75%;
} }
.k-u-1-5 { .pure-u-1-5 {
width: 20%; width: 20%;
} }
.k-u-2-5 { .pure-u-2-5 {
width: 40%; width: 40%;
} }
.k-u-3-5 { .pure-u-3-5 {
width: 60%; width: 60%;
} }
.k-u-4-5 { .pure-u-4-5 {
width: 80%; width: 80%;
} }
.k-u-1-6 { .pure-u-1-6 {
width: 16.656%; width: 16.656%;
} }
.k-u-5-6 { .pure-u-5-6 {
width: 83.33%; width: 83.33%;
} }
.k-u-1-8 { .pure-u-1-8 {
width: 12.5%; width: 12.5%;
} }
.k-u-3-8 { .pure-u-3-8 {
width: 37.5%; width: 37.5%;
} }
.k-u-5-8 { .pure-u-5-8 {
width: 62.5%; width: 62.5%;
} }
.k-u-7-8 { .pure-u-7-8 {
width: 87.5%; width: 87.5%;
} }
.k-u-1-12 { .pure-u-1-12 {
width: 8.3333%; width: 8.3333%;
} }
.k-u-5-12 { .pure-u-5-12 {
width: 41.6666%; width: 41.6666%;
} }
.k-u-7-12 { .pure-u-7-12 {
width: 58.3333%; width: 58.3333%;
} }
.k-u-11-12 { .pure-u-11-12 {
width: 91.6666%; width: 91.6666%;
} }
.k-u-1-24 { .pure-u-1-24 {
width: 4.1666%; width: 4.1666%;
} }
.k-u-5-24 { .pure-u-5-24 {
width: 20.8333%; width: 20.8333%;
} }
.k-u-7-24 { .pure-u-7-24 {
width: 29.1666%; width: 29.1666%;
} }
.k-u-11-24 { .pure-u-11-24 {
width: 45.8333%; width: 45.8333%;
} }
.k-u-13-24 { .pure-u-13-24 {
width: 54.1666%; width: 54.1666%;
} }
.k-u-17-24 { .pure-u-17-24 {
width: 70.8333%; width: 70.8333%;
} }
.k-u-19-24 { .pure-u-19-24 {
width: 79.1666%; width: 79.1666%;
} }
.k-u-23-24 { .pure-u-23-24 {
width: 95.8333%; width: 95.8333%;
} }

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

@ -4,30 +4,30 @@
<link rel="stylesheet" type="text/css" href="../../../../build/grids/grids-min.css"> <link rel="stylesheet" type="text/css" href="../../../../build/grids/grids-min.css">
<title>Responsive Grids Test</title> <title>Responsive Grids Test</title>
</head> </head>
<body class="k-g-r"> <body class="pure-g-r">
<div class="header k-u-1"> <div class="header pure-u-1">
<h1 class="k-u-1">Pure Responsive Grids</h1> <h1 class="pure-u-1">Pure Responsive Grids</h1>
<h2 class="k-u">An example of making your Pure Grids behave responsively.</h2> <h2 class="pure-u">An example of making your Pure Grids behave responsively.</h2>
</div> </div>
<div class='k-g'> <div class='pure-g'>
<h1 class="k-u-1 centered">How does it work?</h1> <h1 class="pure-u-1 centered">How does it work?</h1>
<div class='k-u-1'> <div class='pure-u-1'>
<div class='cell'> <div class='cell'>
<p>Pure Responsive Grids builds on top of the existing Pure Grids implementation. It adds a single new class name called <code>.k-g-r</code>. You can use this instead of using <code>.k-g</code> as you normally do. All elements with a class name of <code>.k-u-*-*</code> will automatically become responsive if they are direct descendents of a <code>.k-g-r.</code></p> <p>Pure Responsive Grids builds on top of the existing Pure Grids implementation. It adds a single new class name called <code>.pure-g-r</code>. You can use this instead of using <code>.pure-g</code> as you normally do. All elements with a class name of <code>.pure-u-*-*</code> will automatically become responsive if they are direct descendents of a <code>.pure-g-r.</code></p>
<h2>The HTML</h2> <h2>The HTML</h2>
<p>The first gist shows how regular Pure grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the <code>k-g</code> with <code>k-g-r</code>, thereby making the one-third columns collapse to full width on lower screen widths.</p> <p>The first gist shows how regular Pure grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the <code>pure-g</code> with <code>pure-g-r</code>, thereby making the one-third columns collapse to full width on lower screen widths.</p>
<script src="https://gist.github.com/3955432.js"></script> <script src="https://gist.github.com/3955432.js"></script>
</div> </div>
</div> </div>
<h1 class="k-u-1 centered">Features.</h1> <h1 class="pure-u-1 centered">Features.</h1>
<div class="k-u-1"> <div class="pure-u-1">
<div class="cell"> <div class="cell">
<ul> <ul>
<li>Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)</li> <li>Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)</li>
@ -39,46 +39,46 @@
</div> </div>
<div class="k-g-r"> <div class="pure-g-r">
<h1 class="k-u-1 centered">Example.</h1> <h1 class="pure-u-1 centered">Example.</h1>
<div class="k-u-1-4"> <div class="pure-u-1-4">
<div class="cell"> <div class="cell">
<h3>Fast</h3> <h3>Fast</h3>
<p>YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.</p> <p>YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.</p>
</div> </div>
</div><!--/span--> </div><!--/span-->
<div class="k-u-1-4"> <div class="pure-u-1-4">
<div class="cell"> <div class="cell">
<h3>Complete</h3> <h3>Complete</h3>
<p>YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.</p> <p>YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.</p>
</div> </div>
</div><!--/span--> </div><!--/span-->
<div class="k-u-1-4"> <div class="pure-u-1-4">
<div class="cell"> <div class="cell">
<h3>Industrial Strength</h3> <h3>Industrial Strength</h3>
<p>A thriving community, a carefully architected infrastructure, and a comprehensive suite of tools help you code like a pro, from simple web pages to complex web applications.</p> <p>A thriving community, a carefully architected infrastructure, and a comprehensive suite of tools help you code like a pro, from simple web pages to complex web applications.</p>
</div> </div>
</div><!--/span--> </div><!--/span-->
<div class="k-u-1-4"> <div class="pure-u-1-4">
<div class="cell"> <div class="cell">
<h3>Free and Open</h3> <h3>Free and Open</h3>
<p>YUI is free for all uses and is developed in the open on GitHub. Core team members can always be found in the forums and the #yui IRC channel on Freenode. Pull requests welcome!</p> <p>YUI is free for all uses and is developed in the open on GitHub. Core team members can always be found in the forums and the #yui IRC channel on Freenode. Pull requests welcome!</p>
</div> </div>
</div><!--/span--> </div><!--/span-->
<div class="k-u-1 centered"> <div class="pure-u-1 centered">
<img class="k-u" src="http://lorempixel.com/800/400/" alt="test image"> <img class="pure-u" src="http://lorempixel.com/800/400/" alt="test image">
</div> </div>
<div class="k-u-2-5"> <div class="pure-u-2-5">
<div class="cell"> <div class="cell">
<h3>Two-Fifth Column</h3> <h3>Two-Fifth Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis. Duis nulla dolor, suscipit in venenatis vitae, auctor eu nibh. Proin lobortis arcu nec tellus vehicula vitae pellentesque nisi molestie. Aenean felis ligula, hendrerit id dictum sed, ornare nec leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non lectus et quam porttitor dignissim vitae ac odio. Aenean mattis dui porta lacus egestas ultricies. Mauris vel dolor libero, sit amet rhoncus nibh.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis. Duis nulla dolor, suscipit in venenatis vitae, auctor eu nibh. Proin lobortis arcu nec tellus vehicula vitae pellentesque nisi molestie. Aenean felis ligula, hendrerit id dictum sed, ornare nec leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non lectus et quam porttitor dignissim vitae ac odio. Aenean mattis dui porta lacus egestas ultricies. Mauris vel dolor libero, sit amet rhoncus nibh.</p>
</div> </div>
</div> </div>
<div class="k-u-3-5"> <div class="pure-u-3-5">
<div class="cell"> <div class="cell">
<h3>Three-Fifth Column</h3> <h3>Three-Fifth Column</h3>
<p>Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl, vitae luctus velit vulputate vel. Aliquam sed sodales orci. Proin varius placerat magna tristique tincidunt. Morbi non dignissim felis. Proin bibendum libero nec felis eleifend porttitor. Morbi auctor venenatis justo, molestie luctus mi pulvinar nec. Pellentesque vitae ornare lacus. Nulla hendrerit tempor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus facilisis cursus. Integer in lacinia dui. Phasellus ullamcorper, sem at congue pretium, velit sapien ornare mi, eu eleifend risus sapien ac eros.</p> <p>Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl, vitae luctus velit vulputate vel. Aliquam sed sodales orci. Proin varius placerat magna tristique tincidunt. Morbi non dignissim felis. Proin bibendum libero nec felis eleifend porttitor. Morbi auctor venenatis justo, molestie luctus mi pulvinar nec. Pellentesque vitae ornare lacus. Nulla hendrerit tempor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus facilisis cursus. Integer in lacinia dui. Phasellus ullamcorper, sem at congue pretium, velit sapien ornare mi, eu eleifend risus sapien ac eros.</p>
@ -87,61 +87,61 @@
</div> </div>
</div> </div>
</div> </div>
<div class='k-g'> <div class='pure-g'>
<h1 class="k-u-1 centered">Grids on mobile</h1> <h1 class="pure-u-1 centered">Grids on mobile</h1>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
</div> </div>
<div class='k-g'> <div class='pure-g'>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
</div> </div>
<div class='k-g'> <div class='pure-g'>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
</div> </div>
</div> </div>
<div class="k-u-1-3"> <div class="pure-u-1-3">
<div class="cell"> <div class="cell">
<h4>Thirds</h4> <h4>Thirds</h4>
<p>This cell will be a grid even on mobile devices.</p> <p>This cell will be a grid even on mobile devices.</p>
@ -150,21 +150,21 @@
</div> </div>
<div class='k-g-r'> <div class='pure-g-r'>
<h1 class="k-u-1 centered">Helper Classes</h1> <h1 class="pure-u-1 centered">Helper Classes</h1>
<div class="k-u-1 k-hidden-phone"> <div class="pure-u-1 pure-hidden-phone">
<div class="cell"> <div class="cell">
<h4>No Phones Allowed</h4> <h4>No Phones Allowed</h4>
<p>Should be hidden on phones</p> <p>Should be hidden on phones</p>
</div> </div>
</div> </div>
<div class="k-u-1 k-hidden-tablet"> <div class="pure-u-1 pure-hidden-tablet">
<div class="cell"> <div class="cell">
<h4>No Tablets Allowed</h4> <h4>No Tablets Allowed</h4>
<p>Should be hidden on tablets</p> <p>Should be hidden on tablets</p>
</div> </div>
</div> </div>
<div class="k-u-1 k-hidden-desktop"> <div class="pure-u-1 pure-hidden-desktop">
<div class="cell"> <div class="cell">
<h4>No big screens allowed.</h4> <h4>No big screens allowed.</h4>
<p>Should be hidden on desktops/laptops</p> <p>Should be hidden on desktops/laptops</p>

38
src/menus/css/menus-core.css
View File

@ -1,15 +1,15 @@
.k-menu ul { .pure-menu ul {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
} }
.k-menu.k-menu-open { .pure-menu.pure-menu-open {
visibility: visible; visibility: visible;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
} }
.k-menu ul { .pure-menu ul {
left: -10000px; left: -10000px;
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -18,17 +18,17 @@
z-index: 1; z-index: 1;
} }
.k-menu > ul { position: relative; } .pure-menu > ul { position: relative; }
.k-menu-open > ul { .pure-menu-open > ul {
left: 0; left: 0;
top: 0; top: 0;
visibility: visible; visibility: visible;
} }
.k-menu li { position: relative; } .pure-menu li { position: relative; }
.k-menu a, .k-menu .k-menu-heading { .pure-menu a, .pure-menu .pure-menu-heading {
display: block; display: block;
color: inherit; color: inherit;
line-height: 1.5em; line-height: 1.5em;
@ -37,23 +37,23 @@
white-space: nowrap; white-space: nowrap;
} }
.k-menu.k-menu-horizontal > .k-menu-heading { .pure-menu.pure-menu-horizontal > .pure-menu-heading {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
vertical-align: middle; vertical-align: middle;
} }
.k-menu.k-menu-horizontal > ul { .pure-menu.pure-menu-horizontal > ul {
display: inline-block; display: inline-block;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
vertical-align: middle; vertical-align: middle;
} }
.k-menu li a { padding: 5px 20px; } .pure-menu li a { padding: 5px 20px; }
.k-menu-can-have-children > .k-menu-label:after { .pure-menu-can-have-children > .pure-menu-label:after {
content: '\25B8'; content: '\25B8';
float: right; float: right;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */ font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */
@ -61,11 +61,11 @@
margin-top: -1px; margin-top: -1px;
} }
.k-menu-can-have-children > .k-menu-label { .pure-menu-can-have-children > .pure-menu-label {
padding-right:30px; padding-right:30px;
} }
.k-menu-separator { .pure-menu-separator {
background-color: #dfdfdf; background-color: #dfdfdf;
display: block; display: block;
height: 1px; height: 1px;
@ -74,10 +74,10 @@
overflow: hidden; overflow: hidden;
} }
.k-menu-hidden { display: none; } .pure-menu-hidden { display: none; }
/* FIXED MENU */ /* FIXED MENU */
.k-menu-fixed { .pure-menu-fixed {
position: fixed; position: fixed;
top:0; top:0;
left:0; left:0;
@ -88,7 +88,7 @@
/* HORIZONTAL MENU CODE */ /* HORIZONTAL MENU CODE */
/* Initial menus should be inline-block so that they are horizontal */ /* Initial menus should be inline-block so that they are horizontal */
.k-menu-horizontal li { .pure-menu-horizontal li {
display: inline-block; display: inline-block;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
@ -96,16 +96,16 @@
} }
/* Submenus should still be display:block; */ /* Submenus should still be display:block; */
.k-menu-horizontal li li { .pure-menu-horizontal li li {
display: block; display: block;
} }
/* Content after should be down arrow */ /* Content after should be down arrow */
.k-menu-horizontal > .k-menu-children > .k-menu-can-have-children > .k-menu-label:after { .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after {
content: "\25BE"; content: "\25BE";
} }
/*Add extra padding to elements that have the arrow so that the hover looks nice */ /*Add extra padding to elements that have the arrow so that the hover looks nice */
.k-menu-horizontal > .k-menu-children > .k-menu-can-have-children > .k-menu-label { .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label {
padding-right:30px; padding-right:30px;
} }

14
src/menus/css/menus-paginator.css
View File

@ -1,31 +1,31 @@
.k-paginator { .pure-paginator {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.k-paginator li { .pure-paginator li {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
/* IE 7 inline-block hack */ /* IE 7 inline-block hack */
*zoom: 1; *zoom: 1;
margin: 0 -0.35em 0 0; margin: 0 -0.35em 0 0;
} }
.k-paginator .k-button { .pure-paginator .pure-button {
border-radius: 0; border-radius: 0;
padding: 0.8em 1.4em; padding: 0.8em 1.4em;
vertical-align: top; vertical-align: top;
height: 1.1em; height: 1.1em;
} }
.k-paginator .k-button:focus { .pure-paginator .pure-button:focus {
outline-style: none; outline-style: none;
} }
.k-paginator .prev, .k-paginator .next { .pure-paginator .prev, .pure-paginator .next {
color: #C0C1C3; color: #C0C1C3;
text-shadow: 0px -1px 0px rgba(0,0,0, 0.45); text-shadow: 0px -1px 0px rgba(0,0,0, 0.45);
} }
.k-paginator .prev { .pure-paginator .prev {
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
} }
.k-paginator .next { .pure-paginator .next {
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
} }

4
src/menus/css/menus-r.css
View File

@ -2,11 +2,11 @@
@media (max-width: 480px) { @media (max-width: 480px) {
.k-menu-horizontal { .pure-menu-horizontal {
width:100%; width:100%;
} }
.k-menu-children li { .pure-menu-children li {
display: block; display: block;
border-bottom:1px solid block; border-bottom:1px solid block;
} }

30
src/menus/css/menus.css
View File

@ -1,14 +1,14 @@
/* MAIN MENU STYLING */ /* MAIN MENU STYLING */
.k-menu.k-menu-open, .pure-menu.pure-menu-open,
.k-menu.k-menu-horizontal li .k-menu-children { .pure-menu.pure-menu-horizontal li .pure-menu-children {
background: #ffffff; /* Old browsers */ background: #ffffff; /* Old browsers */
border-radius: 3px; border-radius: 3px;
border: 1px solid #b7b7b7; border: 1px solid #b7b7b7;
} }
/* remove borders for horizontal menus */ /* remove borders for horizontal menus */
.k-menu.k-menu-horizontal, .k-menu.k-menu-horizontal .k-menu-heading { .pure-menu.pure-menu-horizontal, .pure-menu.pure-menu-horizontal .pure-menu-heading {
border: none; border: none;
} }
@ -16,50 +16,50 @@
/* LINK STYLES */ /* LINK STYLES */
.k-menu a { .pure-menu a {
border: 1px solid transparent; border: 1px solid transparent;
border-left: none; border-left: none;
border-right: none; border-right: none;
} }
.k-menu a, .pure-menu a,
.k-menu .k-menu-can-have-children > li:after { .pure-menu .pure-menu-can-have-children > li:after {
color: #777; color: #777;
} }
.k-menu .k-menu-can-have-children > li:hover:after { .pure-menu .pure-menu-can-have-children > li:hover:after {
color: #fff; color: #fff;
} }
/* HOVER STATES */ /* HOVER STATES */
.k-menu li a:hover { .pure-menu li a:hover {
background: #46b9e3; background: #46b9e3;
color: #fff; color: #fff;
} }
/* DISABLED STATES */ /* DISABLED STATES */
.k-menu li.k-menu-disabled a:hover { .pure-menu li.pure-menu-disabled a:hover {
background: #fff; background: #fff;
color: #bfbfbf; color: #bfbfbf;
} }
.k-menu .k-menu-disabled > a { .pure-menu .pure-menu-disabled > a {
background-image: none; background-image: none;
border-color: transparent; border-color: transparent;
cursor: default; cursor: default;
} }
.k-menu .k-menu-disabled > a, .pure-menu .pure-menu-disabled > a,
.k-menu .k-menu-can-have-children.k-menu-disabled > a:after { .pure-menu .pure-menu-can-have-children.pure-menu-disabled > a:after {
color: #bfbfbf; color: #bfbfbf;
} }
/* HEADINGS */ /* HEADINGS */
.k-menu .k-menu-heading { .pure-menu .pure-menu-heading {
color: #565d64; color: #565d64;
text-transform: uppercase; text-transform: uppercase;
font-size:90%; font-size:90%;
@ -70,13 +70,13 @@
} }
/* ACTIVE MENU ITEM */ /* ACTIVE MENU ITEM */
.k-menu .k-menu-selected a { .pure-menu .pure-menu-selected a {
font-weight: bold; font-weight: bold;
color: #000; color: #000;
} }
/* FIXED MENU */ /* FIXED MENU */
.k-menu.k-menu-open.k-menu-fixed { .pure-menu.pure-menu-open.pure-menu-fixed {
border-radius: 0; border-radius: 0;
border: none; border: none;
border-bottom: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7;

60
src/menus/tests/manual/list.html
View File

@ -50,18 +50,18 @@
margin: 10px; margin: 10px;
} }
.k-menu { .pure-menu {
margin-bottom:15px; margin-bottom:15px;
} }
</style> </style>
</head> </head>
<body class="k-skin-sam"> <body class="pure-skin-sam">
<div class="header y-u-1"> <div class="header y-u-1">
<h1 class="k-u-1">Pure List CSS</h1> <h1 class="pure-u-1">Pure List CSS</h1>
<h2 class="k-u">Simple styling for HTML List elements.</h2> <h2 class="pure-u">Simple styling for HTML List elements.</h2>
</div> </div>
@ -74,46 +74,46 @@
<h2>Horizontal Menu</h2> <h2>Horizontal Menu</h2>
<p> <p>
You can mark the active list element by adding the <code>.k-menu-selected</code> class to the list element. You can mark the active list element by adding the <code>.pure-menu-selected</code> class to the list element.
</p> </p>
<div class="k-menu k-menu-open k-menu-horizontal"> <div class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="#" class="k-menu-heading">Site Title</a> <a href="#" class="pure-menu-heading">Site Title</a>
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li class="k-menu-selected"><a href="#">Flickr</a></li> <li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li> <li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li> <li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li> <li><a href="#">Finance</a></li>
<li class="k-menu-disabled"><a href="#">Disabled</a></li> <li class="pure-menu-disabled"><a href="#">Disabled</a></li>
</ul> </ul>
</div> </div>
<h2>Vertical Menu</h2> <h2>Vertical Menu</h2>
<div id="vertical-menu1" class="k-menu k-menu-open"> <div id="vertical-menu1" class="pure-menu pure-menu-open">
<a href="#" class="k-menu-heading">Site Title</a> <a href="#" class="pure-menu-heading">Site Title</a>
<ul> <ul>
<li class="k-menu-selected"><a href="#">Home</a></li> <li class="pure-menu-selected"><a href="#">Home</a></li>
<li><a href="#">Flickr</a></li> <li><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li> <li><a href="#">Messenger</a></li>
<li class="k-menu-heading">Yahoo! Sites</li> <li class="pure-menu-heading">Yahoo! Sites</li>
<li><a href="#">Sports</a></li> <li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li> <li><a href="#">Finance</a></li>
<li class="k-menu-disabled"><a href="#">Disabled</a></li> <li class="pure-menu-disabled"><a href="#">Disabled</a></li>
</ul> </ul>
</div> </div>
<div id="vertical-menu1" class="k-menu k-menu-open"> <div id="vertical-menu1" class="pure-menu pure-menu-open">
<ul> <ul>
<li class="k-menu-heading">Site Title</li> <li class="pure-menu-heading">Site Title</li>
<li class="k-menu-selected"><a href="#">Home</a></li> <li class="pure-menu-selected"><a href="#">Home</a></li>
<li><a href="#">Flickr</a></li> <li><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li> <li><a href="#">Messenger</a></li>
<li class="k-menu-heading">Yahoo! Sites</li> <li class="pure-menu-heading">Yahoo! Sites</li>
<li><a href="#">Sports</a></li> <li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li> <li><a href="#">Finance</a></li>
<li class="k-menu-disabled"><a href="#">Disabled</a></li> <li class="pure-menu-disabled"><a href="#">Disabled</a></li>
</ul> </ul>
</div> </div>
@ -126,17 +126,17 @@
<div id="horizontal-menu"> <div id="horizontal-menu">
<a href="#" class="k-menu-heading">Site Title</a> <a href="#" class="pure-menu-heading">Site Title</a>
<ul id="std-menu-items"> <ul id="std-menu-items">
<li class="k-menu-selected"><a href="#">Flickr</a></li> <li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li> <li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li> <li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li> <li><a href="#">Finance</a></li>
<li> <li>
<a href="#">Other</a> <a href="#">Other</a>
<ul> <ul>
<li class="k-menu-heading">More from Yahoo!</li> <li class="pure-menu-heading">More from Yahoo!</li>
<li class="k-menu-separator"></li> <li class="pure-menu-separator"></li>
<li><a href="#">Autos</a></li> <li><a href="#">Autos</a></li>
<li><a href="#">Flickr</a></li> <li><a href="#">Flickr</a></li>
<li><a href="#">Answers</a></li> <li><a href="#">Answers</a></li>
@ -158,16 +158,16 @@
<h2>Fixed Menus</h2> <h2>Fixed Menus</h2>
<p> <p>
Fixed menus can be created by adding the <code>k-menu-fixed</code> class name to the wrapper. This will fix a menu to the top of the page. 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>
<p> <p>
<button class="k-button" id="showFixedMenuBtn">Toggle Fixed Menu</button> <button class="pure-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
</p> </p>
<div id="fixed-menu" class="k-menu k-menu-horizontal k-menu-fixed"> <div id="fixed-menu" class="pure-menu pure-menu-horizontal pure-menu-fixed">
<ul> <ul>
<li class="k-menu-selected"><a href="#">Flickr</a></li> <li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li> <li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li> <li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li> <li><a href="#">Finance</a></li>
@ -181,10 +181,10 @@
<script> <script>
var Y = YUI({ var Y = YUI({
fetchCSS: false, fetchCSS: false,
classNamePrefix: 'k' 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 = 'k'; //Y.config.classNamePrefix = 'pure';
var horizontalMenu = new Y.Menu({ var horizontalMenu = new Y.Menu({
container: '#horizontal-menu', container: '#horizontal-menu',
@ -199,7 +199,7 @@
Y.one('#showFixedMenuBtn').on('tap', function (e) { Y.one('#showFixedMenuBtn').on('tap', function (e) {
var fixedMenu = Y.one('#fixed-menu'); var fixedMenu = Y.one('#fixed-menu');
fixedMenu.toggleClass('k-menu-open'); fixedMenu.toggleClass('pure-menu-open');
}); });
}); });

32
src/tables/css/tables.css
View File

@ -6,7 +6,7 @@
*/ */
/* foundational CSS */ /* foundational CSS */
.k-table { .pure-table {
/* Remove spacing between table cells (from Normalize.css) */ /* Remove spacing between table cells (from Normalize.css) */
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
@ -14,15 +14,15 @@
border: 1px solid #cbcbcb; border: 1px solid #cbcbcb;
} }
.k-table caption { .pure-table caption {
color: #000; color: #000;
font: italic 85%/1 arial, sans-serif; font: italic 85%/1 arial, sans-serif;
padding: 1em 0; padding: 1em 0;
text-align: center; text-align: center;
} }
.k-table td, .pure-table td,
.k-table th { .pure-table th {
border-left: 1px solid #cbcbcb;/* inner column border */ border-left: 1px solid #cbcbcb;/* inner column border */
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
font-size: inherit; font-size: inherit;
@ -30,12 +30,12 @@
overflow: visible; /*to make ths where the title is really long work*/ overflow: visible; /*to make ths where the title is really long work*/
padding: 6px 12px; /* cell padding */ padding: 6px 12px; /* cell padding */
} }
.k-table td:first-child, .pure-table td:first-child,
.k-table th:first-child { .pure-table th:first-child {
border-left-width: 0; border-left-width: 0;
} }
.k-table thead { .pure-table thead {
background: #e0e0e0; background: #e0e0e0;
color: #000; color: #000;
text-align: left; text-align: left;
@ -48,35 +48,35 @@ striping:
even - #fff (white) even - #fff (white)
odd - #edf5ff (light blue) odd - #edf5ff (light blue)
*/ */
.k-table td { .pure-table td {
background-color: transparent; background-color: transparent;
} }
.k-table-odd td { .pure-table-odd td {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
/* nth-child selector for modern browsers */ /* nth-child selector for modern browsers */
.k-table-striped tr:nth-child(2n-1) td { .pure-table-striped tr:nth-child(2n-1) td {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
/* BORDERED TABLES */ /* BORDERED TABLES */
.k-table-bordered td { .pure-table-bordered td {
border-bottom:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb;
} }
.k-table-bordered tbody > tr:last-child td, .pure-table-bordered tbody > tr:last-child td,
.k-table-horizontal tbody > tr:last-child td { .pure-table-horizontal tbody > tr:last-child td {
border-bottom-width: 0; border-bottom-width: 0;
} }
/* HORIZONTAL BORDERED TABLES */ /* HORIZONTAL BORDERED TABLES */
.k-table-horizontal td, .pure-table-horizontal td,
.k-table-horizontal th { .pure-table-horizontal th {
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-bottom:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb;
} }
.k-table-horizontal tbody > tr:last-child td { .pure-table-horizontal tbody > tr:last-child td {
border-bottom-width: 0; border-bottom-width: 0;
} }

30
src/tables/tests/manual/index.html
View File

@ -25,8 +25,8 @@
<h2>Default Table</h2> <h2>Default Table</h2>
<p>Add the <code>k-table</code> classname to a table to style an HTML table similar to how a YUI 3 Datatable would be styled. This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.</p> <p>Add the <code>pure-table</code> classname to a table to style an HTML table similar to how a YUI 3 Datatable would be styled. This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.</p>
<table class="k-table"> <table class="pure-table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -58,8 +58,8 @@
</table> </table>
<h2>Bordered Table</h2> <h2>Bordered Table</h2>
<p>To add horizontal and vertical borders to all cells, add the <code>k-table-bordered</code> classname to the <code>table</code> element.</p> <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="k-table k-table-bordered"> <table class="pure-table pure-table-bordered">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -91,8 +91,8 @@
</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>k-table-horizontal</code> classname to the <code>table</code> element.</p> <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="k-table k-table-horizontal"> <table class="pure-table pure-table-horizontal">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -124,8 +124,8 @@
</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>k-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> <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="k-table"> <table class="pure-table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -135,7 +135,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class='k-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>
@ -147,7 +147,7 @@
<td>Camry</td> <td>Camry</td>
<td>2012</td> <td>2012</td>
</tr> </tr>
<tr class='k-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>
@ -159,7 +159,7 @@
<td>Focus</td> <td>Focus</td>
<td>2008</td> <td>2008</td>
</tr> </tr>
<tr class='k-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>
@ -171,7 +171,7 @@
<td>M3</td> <td>M3</td>
<td>2009</td> <td>2009</td>
</tr> </tr>
<tr class='k-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>
@ -190,7 +190,7 @@
<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> <p>Here's a striped table that's zebra-styled using <code>nth-child</code> selectors.</p>
<table class="k-table k-table-striped"> <table class="pure-table pure-table-striped">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -254,8 +254,8 @@
<h2>Simple Table with plain header</h2> <h2>Simple Table with plain header</h2>
<p>To remove the styled header, simply add the <code>k-thead-simple</code> class name to the <code>thead</code> element. You can mix and match this with other table class names mentioned above.</p> <p>To remove the styled header, simply add the <code>pure-thead-simple</code> class name to the <code>thead</code> element. You can mix and match this with other table class names mentioned above.</p>
<table class="k-table k-table-bordered"> <table class="pure-table pure-table-bordered">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>