mirror of
https://github.com/pure-css/pure.git
synced 2024-11-07 21:34:24 +00:00
Rename CSS classname prefix to pure
This commit is contained in:
Eric Ferraiuolo
parent
a19f09a17f
commit
681ca1a93e
@ -6,6 +6,8 @@ NEXT
|
||||
|
||||
* (!) Rename to Pure.
|
||||
|
||||
* (!) Rename CSS classname prefix to `pure`.
|
||||
|
||||
|
||||
0.0.1 (2013-05-14)
|
||||
------------------
|
||||
|
||||
@ -14,4 +14,4 @@ Differences
|
||||
Changes are minimal. Base uses Normalize v1.1.1.
|
||||
|
||||
- Create a contextual normalize.css (normalize-context.css) toggled off a
|
||||
parent classname: `.k`.
|
||||
parent classname: `.pure`.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.k-button {
|
||||
.pure-button {
|
||||
/* Structure */
|
||||
display: inline-block;
|
||||
*display: inline; /*IE 6/7*/
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
|
||||
/* Firefox: Get rid of the inner focus border */
|
||||
.k-button::-moz-focus-inner{
|
||||
.pure-button::-moz-focus-inner{
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.k-button {
|
||||
.pure-button {
|
||||
font-size: 100%;
|
||||
*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 */
|
||||
@ -21,8 +21,8 @@
|
||||
}
|
||||
|
||||
|
||||
.k-button-hover,
|
||||
.k-button:hover {
|
||||
.pure-button-hover,
|
||||
.pure-button:hover {
|
||||
|
||||
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));
|
||||
}
|
||||
|
||||
.k-button-active,
|
||||
.k-button:active {
|
||||
.pure-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;
|
||||
-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;
|
||||
}
|
||||
|
||||
.k-button[disabled],
|
||||
.k-button-disabled,
|
||||
.k-button-disabled:hover,
|
||||
.k-button-disabled:active {
|
||||
.pure-button[disabled],
|
||||
.pure-button-disabled,
|
||||
.pure-button-disabled:hover,
|
||||
.pure-button-disabled:active {
|
||||
border: none;
|
||||
background-image: none;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
@ -56,26 +56,26 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.k-button-hidden {
|
||||
.pure-button-hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Firefox: Get rid of the inner focus border */
|
||||
.k-button::-moz-focus-inner{
|
||||
.pure-button::-moz-focus-inner{
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Sam */
|
||||
.k-button-primary,
|
||||
.k-button-selected,
|
||||
a.k-button-primary,
|
||||
a.k-button-selected {
|
||||
.pure-button-primary,
|
||||
.pure-button-selected,
|
||||
a.pure-button-primary,
|
||||
a.pure-button-selected {
|
||||
background-color: rgb(0, 120, 231);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.k-button:-moz-focusring {
|
||||
.pure-button:-moz-focusring {
|
||||
outline-color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.k-button-green {
|
||||
.pure-button-green {
|
||||
text-transform: uppercase;
|
||||
font-weight:bold;
|
||||
color: white;
|
||||
@ -27,7 +27,7 @@
|
||||
text-shadow: 0 1px 1px rgb(22, 116, 29);
|
||||
}
|
||||
|
||||
.k-button-red {
|
||||
.pure-button-red {
|
||||
background: red;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
@ -38,19 +38,19 @@
|
||||
|
||||
}
|
||||
|
||||
.k-button-yellow {
|
||||
.pure-button-yellow {
|
||||
background: rgb(255, 236, 15);
|
||||
color: rgb(146, 128, 32);
|
||||
border: 1px solid rgb(201, 189, 52);
|
||||
text-shadow: -1px 1px 1px white;
|
||||
}
|
||||
|
||||
.k-button-wedding:hover {
|
||||
.pure-button-wedding:hover {
|
||||
background: #555;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.k-button-wedding:active {
|
||||
.pure-button-wedding:active {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
@ -61,47 +61,47 @@
|
||||
</head>
|
||||
<body>
|
||||
<h2>Regular Buttons</h2>
|
||||
<button class="k-button">A Regular Button</button>
|
||||
<a class="k-button" href="#">An anchor Button</a>
|
||||
<button class="pure-button">A Regular Button</button>
|
||||
<a class="pure-button" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Disabled Buttons</h2>
|
||||
<button class="k-button k-button-disabled">A Regular Button</button>
|
||||
<a class="k-button k-button-disabled" href="#">An anchor Button</a>
|
||||
<button class="pure-button pure-button-disabled">A Regular Button</button>
|
||||
<a class="pure-button pure-button-disabled" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Active Buttons</h2>
|
||||
<button class="k-button k-button-active">A Regular Button</button>
|
||||
<a class="k-button k-button-active" href="#">An anchor Button</a>
|
||||
<button class="pure-button pure-button-active">A Regular Button</button>
|
||||
<a class="pure-button pure-button-active" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Primary/Selected Buttons</h2>
|
||||
<button class="k-button k-button-primary">A Regular Button</button>
|
||||
<a class="k-button k-button-primary" href="#">An anchor Button</a>
|
||||
<button class="pure-button pure-button-primary">A Regular Button</button>
|
||||
<a class="pure-button pure-button-primary" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Customizing Buttons</h2>
|
||||
<p>
|
||||
<button class="k-button k-button-green">A Custom Button</button>
|
||||
<a class="k-button k-button-green" href="#">An anchor Button</a>
|
||||
<button class="pure-button pure-button-green">A Custom Button</button>
|
||||
<a class="pure-button pure-button-green" href="#">An anchor Button</a>
|
||||
</p>
|
||||
<p>
|
||||
<button class="k-button k-button-red">Another custom Button</button>
|
||||
<a class="k-button k-button-red" href="#">Custom Button</a>
|
||||
<button class="pure-button pure-button-red">Another custom Button</button>
|
||||
<a class="pure-button pure-button-red" href="#">Custom Button</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="k-button k-button-yellow">Another custom Button</button>
|
||||
<a class="k-button k-button-yellow" href="#">Custom Button</a>
|
||||
<button class="pure-button pure-button-yellow">Another custom Button</button>
|
||||
<a class="pure-button pure-button-yellow" href="#">Custom Button</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="k-button k-button-wedding" href="#">
|
||||
<button class="pure-button pure-button-wedding" href="#">
|
||||
<i class="icon-film"></i>
|
||||
Start Playing Movie
|
||||
</button>
|
||||
|
||||
<a class="k-button k-button-wedding" href="#">
|
||||
<a class="pure-button pure-button-wedding" href="#">
|
||||
<i class="icon-film"></i>
|
||||
Start Playing Movie
|
||||
</a>
|
||||
|
||||
@ -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
|
||||
@ -8,7 +8,7 @@
|
||||
* Corrects margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
.k-form {
|
||||
.pure-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
.k-form fieldset {
|
||||
.pure-form fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
@ -28,7 +28,7 @@
|
||||
* 3. Corrects alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
.k-form legend {
|
||||
.pure-form legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
@ -42,10 +42,10 @@
|
||||
* 3. Improves appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
.k-form button,
|
||||
.k-form input,
|
||||
.k-form select,
|
||||
.k-form textarea {
|
||||
.pure-form button,
|
||||
.pure-form input,
|
||||
.pure-form select,
|
||||
.pure-form textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
@ -57,8 +57,8 @@
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
.k-form button,
|
||||
.k-form input {
|
||||
.pure-form button,
|
||||
.pure-form input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@ -72,10 +72,10 @@
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
.k-form button,
|
||||
.k-form input[type="button"], /* 1 */
|
||||
.k-form input[type="reset"],
|
||||
.k-form input[type="submit"] {
|
||||
.pure-form button,
|
||||
.pure-form input[type="button"], /* 1 */
|
||||
.pure-form input[type="reset"],
|
||||
.pure-form input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
@ -85,8 +85,8 @@
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
.k-form button[disabled],
|
||||
.k-form input[disabled] {
|
||||
.pure-form button[disabled],
|
||||
.pure-form input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -97,8 +97,8 @@
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
.k-form input[type="checkbox"],
|
||||
.k-form input[type="radio"] {
|
||||
.pure-form input[type="checkbox"],
|
||||
.pure-form input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
@ -111,7 +111,7 @@
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
.k-form input[type="search"] {
|
||||
.pure-form input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
@ -123,8 +123,8 @@
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
.k-form input[type="search"]::-webkit-search-cancel-button,
|
||||
.k-form input[type="search"]::-webkit-search-decoration {
|
||||
.pure-form input[type="search"]::-webkit-search-cancel-button,
|
||||
.pure-form input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@ -132,8 +132,8 @@
|
||||
* Removes inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
.k-form button::-moz-focus-inner,
|
||||
.k-form input::-moz-focus-inner {
|
||||
.pure-form button::-moz-focus-inner,
|
||||
.pure-form input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -143,7 +143,7 @@
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
.k-form textarea {
|
||||
.pure-form textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
@media only screen and (max-width : 480px) {
|
||||
.k-form button[type='submit'] {
|
||||
.pure-form button[type='submit'] {
|
||||
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;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.k-group input[type='text'] {
|
||||
.pure-group input[type='text'] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.k-form-aligned .k-control-group label {
|
||||
.pure-form-aligned .pure-control-group label {
|
||||
margin-bottom: 0.3em;
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.k-form-aligned .k-controls {
|
||||
.pure-form-aligned .pure-controls {
|
||||
margin: 1.5em 0 0 0;
|
||||
}
|
||||
|
||||
.k-form .k-help-inline {
|
||||
.pure-form .pure-help-inline {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.k-form input,
|
||||
.k-form select {
|
||||
.pure-form input,
|
||||
.pure-form select {
|
||||
padding: 0.5em 0.6em;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
@ -17,57 +17,57 @@
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.k-form input:focus,
|
||||
.k-form select:focus {
|
||||
.pure-form input:focus,
|
||||
.pure-form select:focus {
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
border-color: #129FEA;
|
||||
}
|
||||
.k-form .k-checkbox,
|
||||
.k-form .k-radio {
|
||||
.pure-form .pure-checkbox,
|
||||
.pure-form .pure-radio {
|
||||
margin: 0.5em 0;
|
||||
display: block;
|
||||
}
|
||||
.k-form input[disabled],
|
||||
.k-form select[disabled],
|
||||
.k-form textarea[disabled],
|
||||
.k-form input[readonly],
|
||||
.k-form select[readonly],
|
||||
.k-form textarea[readonly] {
|
||||
.pure-form input[disabled],
|
||||
.pure-form select[disabled],
|
||||
.pure-form textarea[disabled],
|
||||
.pure-form input[readonly],
|
||||
.pure-form select[readonly],
|
||||
.pure-form textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: #eaeded;
|
||||
color: #cad2d3;
|
||||
border-color: transparent;
|
||||
}
|
||||
.k-form input:focus:invalid,
|
||||
.k-form textarea:focus:invalid,
|
||||
.k-form select:focus:invalid {
|
||||
.pure-form input:focus:invalid,
|
||||
.pure-form textarea:focus:invalid,
|
||||
.pure-form select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border: 1px solid #ee5f5b;
|
||||
}
|
||||
.k-form input:focus:invalid:focus,
|
||||
.k-form textarea:focus:invalid:focus,
|
||||
.k-form select:focus:invalid:focus {
|
||||
.pure-form input:focus:invalid:focus,
|
||||
.pure-form textarea:focus:invalid:focus,
|
||||
.pure-form select:focus:invalid:focus {
|
||||
border-color: #e9322d;
|
||||
}
|
||||
.k-form select {
|
||||
.pure-form select {
|
||||
border: 1px solid #ccc;
|
||||
background-color: white;
|
||||
}
|
||||
.k-form select[multiple] {
|
||||
.pure-form select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
.k-form label {
|
||||
.pure-form label {
|
||||
margin: 0.5em 0 0.2em;
|
||||
color: #999;
|
||||
font-size:90%;
|
||||
}
|
||||
.k-form fieldset {
|
||||
.pure-form fieldset {
|
||||
margin: 0;
|
||||
padding: 0.35em 0 0.75em;
|
||||
border: 0;
|
||||
}
|
||||
.k-form legend {
|
||||
.pure-form legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.3em 0;
|
||||
@ -77,16 +77,16 @@
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.k-form.k-form-stacked input[type='text'],
|
||||
.k-form.k-form-stacked select,
|
||||
.k-form.k-form-stacked label {
|
||||
.pure-form.pure-form-stacked input[type='text'],
|
||||
.pure-form.pure-form-stacked select,
|
||||
.pure-form.pure-form-stacked label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.k-form-aligned input,
|
||||
.k-form-aligned textarea,
|
||||
.k-form-aligned select,
|
||||
.k-form-aligned .k-help-inline {
|
||||
.pure-form-aligned input,
|
||||
.pure-form-aligned textarea,
|
||||
.pure-form-aligned select,
|
||||
.pure-form-aligned .pure-help-inline {
|
||||
display: inline-block;
|
||||
*display: inline; /* IE7 inline-block hack */
|
||||
*zoom: 1;
|
||||
@ -94,31 +94,31 @@
|
||||
}
|
||||
|
||||
/* aligned Forms */
|
||||
.k-form-aligned .k-control-group {
|
||||
.pure-form-aligned .pure-control-group {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.k-form-aligned .k-control-group label {
|
||||
.pure-form-aligned .pure-control-group label {
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 10em;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
.k-form-aligned .k-controls {
|
||||
.pure-form-aligned .pure-controls {
|
||||
margin: 1.5em 0 0 10em;
|
||||
}
|
||||
|
||||
/* Rounded Inputs */
|
||||
.k-form .k-input-rounded {
|
||||
.pure-form .pure-input-rounded {
|
||||
border-radius: 20px;
|
||||
padding-left:1em;
|
||||
}
|
||||
|
||||
/* Grouped Inputs */
|
||||
.k-form .k-group fieldset {
|
||||
.pure-form .pure-group fieldset {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.k-form .k-group input {
|
||||
.pure-form .pure-group input {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
@ -126,39 +126,39 @@
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.k-form .k-group input:focus {
|
||||
.pure-form .pure-group input:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.k-form .k-group input:first-child {
|
||||
.pure-form .pure-group input:first-child {
|
||||
top: 1px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.k-form .k-group input:last-child {
|
||||
.pure-form .pure-group input:last-child {
|
||||
top: -2px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.k-form .k-group button {
|
||||
.pure-form .pure-group button {
|
||||
margin: 0.35em 0;
|
||||
}
|
||||
|
||||
.k-form .k-input-1 {
|
||||
.pure-form .pure-input-1 {
|
||||
width: 100%;
|
||||
}
|
||||
.k-form .k-input-2-3 {
|
||||
.pure-form .pure-input-2-3 {
|
||||
width: 66%;
|
||||
}
|
||||
.k-form .k-input-1-2 {
|
||||
.pure-form .pure-input-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
.k-form .k-input-1-3 {
|
||||
.pure-form .pure-input-1-3 {
|
||||
width: 33%;
|
||||
}
|
||||
.k-form .k-input-1-4 {
|
||||
.pure-form .pure-input-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* Inline help for forms */
|
||||
.k-form .k-help-inline {
|
||||
.pure-form .pure-help-inline {
|
||||
display: inline-block;
|
||||
padding-left: 0.3em;
|
||||
color: #666;
|
||||
|
||||
@ -53,12 +53,12 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="k-skin-sam">
|
||||
<body class="pure-skin-sam">
|
||||
|
||||
<div class="header y-u-1">
|
||||
|
||||
<h1 class="k-u-1">Pure Forms CSS</h1>
|
||||
<h2 class="k-u">Simple styling for HTML Form elements.</h2>
|
||||
<h1 class="pure-u-1">Pure Forms CSS</h1>
|
||||
<h2 class="pure-u">Simple styling for HTML Form elements.</h2>
|
||||
|
||||
</div>
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
<h2>Default Form</h2>
|
||||
|
||||
<form class="k-form">
|
||||
<form class="pure-form">
|
||||
<fieldset>
|
||||
<legend>A default inline form.</legend>
|
||||
<input type="text" placeholder="Email">
|
||||
@ -80,7 +80,7 @@
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="k-button">Sign in</button>
|
||||
<button type="submit" class="pure-button">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
@ -90,32 +90,32 @@
|
||||
Multi-column forms such as the one below can be created by pulling down YUI Grids.
|
||||
</p>
|
||||
|
||||
<form class="k-form k-form-stacked">
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
|
||||
<div class='k-g-r'>
|
||||
<div class='k-u-1-3'>
|
||||
<div class='pure-g-r'>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class='k-u-1-3'>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>Last Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class='k-u-1-3'>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
</div>
|
||||
|
||||
<div class='k-u-1-3'>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class='k-u-1-3'>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>State</label>
|
||||
<select class='k-input-medium'>
|
||||
<select class='pure-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
@ -124,10 +124,10 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label class="k-checkbox">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='k-button'>Submit</button>
|
||||
<button type="submit" class='pure-button'>Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
@ -135,9 +135,9 @@
|
||||
<h2>Stacked Form</h2>
|
||||
|
||||
<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>
|
||||
<form class="k-form k-form-stacked">
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<label>First Name</label>
|
||||
@ -146,21 +146,21 @@
|
||||
<input type="text">
|
||||
<label>E-Mail</label>
|
||||
<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>
|
||||
<input type="text">
|
||||
<label>State</label>
|
||||
<select class='k-input-medium'>
|
||||
<select class='pure-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
<label class="k-checkbox">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='k-button notice'>Submit</button>
|
||||
<button type="submit" class='pure-button notice'>Submit</button>
|
||||
</fieldset>
|
||||
</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>
|
||||
|
||||
<form class="k-form k-form-aligned">
|
||||
<form class="pure-form pure-form-aligned">
|
||||
<fieldset>
|
||||
<div class="k-control-group">
|
||||
<div class="pure-control-group">
|
||||
<label>Username</label>
|
||||
<input type="text" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="k-control-group">
|
||||
<div class="pure-control-group">
|
||||
<label>Password</label>
|
||||
<input type="password" placeholder="Password">
|
||||
</div>
|
||||
|
||||
<div class="k-control-group">
|
||||
<div class="pure-control-group">
|
||||
<label>Email Address</label>
|
||||
<input type="text" placeholder="Email Address">
|
||||
</div>
|
||||
|
||||
<div class="k-control-group">
|
||||
<div class="pure-control-group">
|
||||
<label>Supercalifragilistic Label</label>
|
||||
<input type="text" placeholder="Enter something here...">
|
||||
</div>
|
||||
|
||||
<div class="k-controls">
|
||||
<label class="k-checkbox">
|
||||
<div class="pure-controls">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
<button type="submit" class="k-button">Submit</button>
|
||||
<button type="submit" class="pure-button">Submit</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</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>
|
||||
|
||||
<form class="k-form">
|
||||
<fieldset class='k-group'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Username'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Password'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Email'>
|
||||
<form class="pure-form">
|
||||
<fieldset class='pure-group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Username'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Password'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Email'>
|
||||
</fieldset>
|
||||
<fieldset class='k-group'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Another Group'>
|
||||
<input type="text" class="k-input-1-3" placeholder='More Stuff'>
|
||||
<button type="submit" class="k-button k-input-1-3">Sign in</button>
|
||||
<fieldset class='pure-group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Another Group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='More Stuff'>
|
||||
<button type="submit" class="pure-button pure-input-1-3">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
@ -221,88 +221,88 @@
|
||||
|
||||
<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">
|
||||
<input class="k-input-1" type="text" placeholder=".k-input-1"><br/>
|
||||
<input class="k-input-2-3" type="text" placeholder=".k-input-2-3"><br/>
|
||||
<input class="k-input-1-2" type="text" placeholder=".k-input-1-2"><br/>
|
||||
<input class="k-input-1-3" type="text" placeholder=".k-input-1-3"><br/>
|
||||
<input class="k-input-1-4" type="text" placeholder=".k-input-1-4"><br/>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br/>
|
||||
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br/>
|
||||
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br/>
|
||||
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br/>
|
||||
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/>
|
||||
</form>
|
||||
|
||||
<div class="k-g sizing">
|
||||
<form class="k-form">
|
||||
<div class="k-u-1-4">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-4">
|
||||
<div class="pure-g sizing">
|
||||
<form class="pure-form">
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
<div class="k-u-3-4">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-3-4">
|
||||
<div class="pure-u-3-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="k-u-1-2">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-2">
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
<div class="k-u-1-2">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-2">
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="k-u-1-8">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-8">
|
||||
<div class="pure-u-1-8">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
<div class="k-u-1-8">
|
||||
<input class="v" type="text" placeholder=".k-u-1-8">
|
||||
<div class="pure-u-1-8">
|
||||
<input class="v" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
<div class="k-u-1-4">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-4">
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
<div class="k-u-1-2">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-2">
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="k-u-1-5">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-5">
|
||||
<div class="pure-u-1-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
|
||||
</div>
|
||||
<div class="k-u-2-5">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-2-5">
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
<div class="k-u-2-5">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-2-5">
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="k-u-1">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1">
|
||||
<div class="pure-u-1">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Invalid Inputs</h2>
|
||||
<p>Add the required attribute to any form control.</p>
|
||||
<form class="k-form">
|
||||
<form class="pure-form">
|
||||
<input type="email" placeholder="Requires an email" required>
|
||||
</form>
|
||||
|
||||
<h2>Disabled Inputs</h2>
|
||||
<p>Add the disabled attribute to any form control.</p>
|
||||
<form class="k-form">
|
||||
<input class="k-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</form>
|
||||
|
||||
<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">
|
||||
<input type="text" class="k-input-rounded">
|
||||
<button type="submit" class='k-button'>Search</button>
|
||||
<form class="pure-form">
|
||||
<input type="text" class="pure-input-rounded">
|
||||
<button type="submit" class='pure-button'>Search</button>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Selects</h2>
|
||||
<form class="k-form">
|
||||
<select class='k-input-medium'>
|
||||
<form class="pure-form">
|
||||
<select class='pure-input-medium'>
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
@ -311,7 +311,7 @@
|
||||
</select>
|
||||
|
||||
|
||||
<select multiple="multiple" class="k-input-large">
|
||||
<select multiple="multiple" class="pure-input-large">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
@ -321,17 +321,17 @@
|
||||
</form>
|
||||
|
||||
<h2>Checkboxes and Radios</h2>
|
||||
<form class="k-form">
|
||||
<label class="k-checkbox">
|
||||
<form class="pure-form">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox" value="">
|
||||
Here's option one.
|
||||
</label>
|
||||
|
||||
<label class="k-radio">
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Here's a radio button. You can choose this one..
|
||||
</label>
|
||||
<label class="k-radio">
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
..Or this one!
|
||||
</label>
|
||||
|
||||
@ -2,8 +2,8 @@ Grids
|
||||
=====
|
||||
|
||||
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
|
||||
more "units" (k-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
|
||||
basic components are "grids" and "units". A "grid" (pure-g) contains one or
|
||||
more "units" (pure-u). The type of "unit" chosen describes how it should be
|
||||
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"
|
||||
are children of a "grid".
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.k-g {
|
||||
.pure-g {
|
||||
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
|
||||
*letter-spacing: normal; /* reset IE < 8 */
|
||||
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
|
||||
@ -10,11 +10,11 @@
|
||||
and is not required in markup.
|
||||
*/
|
||||
.opera-only :-o-prefocus,
|
||||
.k-g {
|
||||
.pure-g {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.k-u {
|
||||
.pure-u {
|
||||
display: inline-block;
|
||||
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
|
||||
letter-spacing: normal;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.k-g-r {
|
||||
.pure-g-r {
|
||||
letter-spacing: -0.31em;
|
||||
*letter-spacing: normal;
|
||||
*word-spacing: -0.43em;
|
||||
@ -9,46 +9,46 @@
|
||||
and is not required in markup.
|
||||
*/
|
||||
.opera-only :-o-prefocus,
|
||||
.k-g-r {
|
||||
.pure-g-r {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.k-g-r img {
|
||||
.pure-g-r img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width:980px) {
|
||||
.k-visible-phone {
|
||||
.pure-visible-phone {
|
||||
display: none;
|
||||
}
|
||||
.k-visible-tablet {
|
||||
.pure-visible-tablet {
|
||||
display: none;
|
||||
}
|
||||
.k-hidden-desktop {
|
||||
.pure-hidden-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width:480px) {
|
||||
.k-g-r > [class ^= "k-u"] {
|
||||
.pure-g-r > [class ^= "pure-u"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
.k-g-r > [class ^= "k-u"] {
|
||||
.pure-g-r > [class ^= "pure-u"] {
|
||||
width: 100%;
|
||||
}
|
||||
.k-hidden-phone {
|
||||
.pure-hidden-phone {
|
||||
display: none;
|
||||
}
|
||||
.k-visible-desktop {
|
||||
.pure-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width:768px) and (max-width:979px) {
|
||||
.k-hidden-tablet {
|
||||
.pure-hidden-tablet {
|
||||
display: none;
|
||||
}
|
||||
.k-visible-desktop {
|
||||
.pure-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
.k-u-1,
|
||||
.k-u-1-2,
|
||||
.k-u-1-3,
|
||||
.k-u-2-3,
|
||||
.k-u-1-4,
|
||||
.k-u-3-4,
|
||||
.k-u-1-5,
|
||||
.k-u-2-5,
|
||||
.k-u-3-5,
|
||||
.k-u-4-5,
|
||||
.k-u-1-6,
|
||||
.k-u-5-6,
|
||||
.k-u-1-8,
|
||||
.k-u-3-8,
|
||||
.k-u-5-8,
|
||||
.k-u-7-8,
|
||||
.k-u-1-12,
|
||||
.k-u-5-12,
|
||||
.k-u-7-12,
|
||||
.k-u-11-12,
|
||||
.k-u-1-24,
|
||||
.k-u-5-24,
|
||||
.k-u-7-24,
|
||||
.k-u-11-24,
|
||||
.k-u-13-24,
|
||||
.k-u-17-24,
|
||||
.k-u-19-24,
|
||||
.k-u-23-24 {
|
||||
.pure-u-1,
|
||||
.pure-u-1-2,
|
||||
.pure-u-1-3,
|
||||
.pure-u-2-3,
|
||||
.pure-u-1-4,
|
||||
.pure-u-3-4,
|
||||
.pure-u-1-5,
|
||||
.pure-u-2-5,
|
||||
.pure-u-3-5,
|
||||
.pure-u-4-5,
|
||||
.pure-u-1-6,
|
||||
.pure-u-5-6,
|
||||
.pure-u-1-8,
|
||||
.pure-u-3-8,
|
||||
.pure-u-5-8,
|
||||
.pure-u-7-8,
|
||||
.pure-u-1-12,
|
||||
.pure-u-5-12,
|
||||
.pure-u-7-12,
|
||||
.pure-u-11-12,
|
||||
.pure-u-1-24,
|
||||
.pure-u-5-24,
|
||||
.pure-u-7-24,
|
||||
.pure-u-11-24,
|
||||
.pure-u-13-24,
|
||||
.pure-u-17-24,
|
||||
.pure-u-19-24,
|
||||
.pure-u-23-24 {
|
||||
display: inline-block;
|
||||
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
|
||||
letter-spacing: normal;
|
||||
@ -34,114 +34,114 @@
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.k-u-1 {
|
||||
.pure-u-1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.k-u-1-2 {
|
||||
.pure-u-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.k-u-1-3 {
|
||||
.pure-u-1-3 {
|
||||
width: 33.33333%;
|
||||
}
|
||||
|
||||
.k-u-2-3 {
|
||||
.pure-u-2-3 {
|
||||
width: 66.66666%;
|
||||
}
|
||||
|
||||
.k-u-1-4 {
|
||||
.pure-u-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.k-u-3-4 {
|
||||
.pure-u-3-4 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.k-u-1-5 {
|
||||
.pure-u-1-5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.k-u-2-5 {
|
||||
.pure-u-2-5 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.k-u-3-5 {
|
||||
.pure-u-3-5 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.k-u-4-5 {
|
||||
.pure-u-4-5 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.k-u-1-6 {
|
||||
.pure-u-1-6 {
|
||||
width: 16.656%;
|
||||
}
|
||||
|
||||
.k-u-5-6 {
|
||||
.pure-u-5-6 {
|
||||
width: 83.33%;
|
||||
}
|
||||
|
||||
.k-u-1-8 {
|
||||
.pure-u-1-8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.k-u-3-8 {
|
||||
.pure-u-3-8 {
|
||||
width: 37.5%;
|
||||
}
|
||||
|
||||
.k-u-5-8 {
|
||||
.pure-u-5-8 {
|
||||
width: 62.5%;
|
||||
}
|
||||
|
||||
.k-u-7-8 {
|
||||
.pure-u-7-8 {
|
||||
width: 87.5%;
|
||||
}
|
||||
|
||||
.k-u-1-12 {
|
||||
.pure-u-1-12 {
|
||||
width: 8.3333%;
|
||||
}
|
||||
|
||||
.k-u-5-12 {
|
||||
.pure-u-5-12 {
|
||||
width: 41.6666%;
|
||||
}
|
||||
|
||||
.k-u-7-12 {
|
||||
.pure-u-7-12 {
|
||||
width: 58.3333%;
|
||||
}
|
||||
|
||||
.k-u-11-12 {
|
||||
.pure-u-11-12 {
|
||||
width: 91.6666%;
|
||||
}
|
||||
|
||||
.k-u-1-24 {
|
||||
.pure-u-1-24 {
|
||||
width: 4.1666%;
|
||||
}
|
||||
|
||||
.k-u-5-24 {
|
||||
.pure-u-5-24 {
|
||||
width: 20.8333%;
|
||||
}
|
||||
|
||||
.k-u-7-24 {
|
||||
.pure-u-7-24 {
|
||||
width: 29.1666%;
|
||||
}
|
||||
|
||||
.k-u-11-24 {
|
||||
.pure-u-11-24 {
|
||||
width: 45.8333%;
|
||||
}
|
||||
|
||||
.k-u-13-24 {
|
||||
.pure-u-13-24 {
|
||||
width: 54.1666%;
|
||||
}
|
||||
|
||||
.k-u-17-24 {
|
||||
.pure-u-17-24 {
|
||||
width: 70.8333%;
|
||||
}
|
||||
|
||||
.k-u-19-24 {
|
||||
.pure-u-19-24 {
|
||||
width: 79.1666%;
|
||||
}
|
||||
|
||||
.k-u-23-24 {
|
||||
.pure-u-23-24 {
|
||||
width: 95.8333%;
|
||||
}
|
||||
|
||||
@ -4,30 +4,30 @@
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/grids/grids-min.css">
|
||||
<title>Responsive Grids Test</title>
|
||||
</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>
|
||||
<h2 class="k-u">An example of making your Pure Grids behave responsively.</h2>
|
||||
<h1 class="pure-u-1">Pure Responsive Grids</h1>
|
||||
<h2 class="pure-u">An example of making your Pure Grids behave responsively.</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='k-g'>
|
||||
<h1 class="k-u-1 centered">How does it work?</h1>
|
||||
<div class='k-u-1'>
|
||||
<div class='pure-g'>
|
||||
<h1 class="pure-u-1 centered">How does it work?</h1>
|
||||
<div class='pure-u-1'>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 class="k-u-1 centered">Features.</h1>
|
||||
<div class="k-u-1">
|
||||
<h1 class="pure-u-1 centered">Features.</h1>
|
||||
<div class="pure-u-1">
|
||||
<div class="cell">
|
||||
<ul>
|
||||
<li>Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)</li>
|
||||
@ -39,46 +39,46 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="k-g-r">
|
||||
<h1 class="k-u-1 centered">Example.</h1>
|
||||
<div class="k-u-1-4">
|
||||
<div class="pure-g-r">
|
||||
<h1 class="pure-u-1 centered">Example.</h1>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="cell">
|
||||
<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>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="k-u-1-4">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="cell">
|
||||
<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>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
<div class="k-u-1-4">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="cell">
|
||||
<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>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
<div class="k-u-1-4">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="cell">
|
||||
<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>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="k-u-1 centered">
|
||||
<img class="k-u" src="http://lorempixel.com/800/400/" alt="test image">
|
||||
<div class="pure-u-1 centered">
|
||||
<img class="pure-u" src="http://lorempixel.com/800/400/" alt="test image">
|
||||
</div>
|
||||
|
||||
<div class="k-u-2-5">
|
||||
<div class="pure-u-2-5">
|
||||
<div class="cell">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="k-u-3-5">
|
||||
<div class="pure-u-3-5">
|
||||
<div class="cell">
|
||||
<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>
|
||||
@ -87,61 +87,61 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='k-g'>
|
||||
<h1 class="k-u-1 centered">Grids on mobile</h1>
|
||||
<div class="k-u-1-3">
|
||||
<div class='pure-g'>
|
||||
<h1 class="pure-u-1 centered">Grids on mobile</h1>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='k-g'>
|
||||
<div class="k-u-1-3">
|
||||
<div class='pure-g'>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='k-g'>
|
||||
<div class="k-u-1-3">
|
||||
<div class='pure-g'>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
@ -150,21 +150,21 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class='k-g-r'>
|
||||
<h1 class="k-u-1 centered">Helper Classes</h1>
|
||||
<div class="k-u-1 k-hidden-phone">
|
||||
<div class='pure-g-r'>
|
||||
<h1 class="pure-u-1 centered">Helper Classes</h1>
|
||||
<div class="pure-u-1 pure-hidden-phone">
|
||||
<div class="cell">
|
||||
<h4>No Phones Allowed</h4>
|
||||
<p>Should be hidden on phones</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1 k-hidden-tablet">
|
||||
<div class="pure-u-1 pure-hidden-tablet">
|
||||
<div class="cell">
|
||||
<h4>No Tablets Allowed</h4>
|
||||
<p>Should be hidden on tablets</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1 k-hidden-desktop">
|
||||
<div class="pure-u-1 pure-hidden-desktop">
|
||||
<div class="cell">
|
||||
<h4>No big screens allowed.</h4>
|
||||
<p>Should be hidden on desktops/laptops</p>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
.k-menu ul {
|
||||
.pure-menu ul {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.k-menu.k-menu-open {
|
||||
.pure-menu.pure-menu-open {
|
||||
visibility: visible;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.k-menu ul {
|
||||
.pure-menu ul {
|
||||
left: -10000px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -18,17 +18,17 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.k-menu > ul { position: relative; }
|
||||
.pure-menu > ul { position: relative; }
|
||||
|
||||
.k-menu-open > ul {
|
||||
.pure-menu-open > ul {
|
||||
left: 0;
|
||||
top: 0;
|
||||
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;
|
||||
color: inherit;
|
||||
line-height: 1.5em;
|
||||
@ -37,23 +37,23 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.k-menu.k-menu-horizontal > .k-menu-heading {
|
||||
.pure-menu.pure-menu-horizontal > .pure-menu-heading {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.k-menu.k-menu-horizontal > ul {
|
||||
.pure-menu.pure-menu-horizontal > ul {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
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';
|
||||
float: right;
|
||||
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;
|
||||
}
|
||||
|
||||
.k-menu-can-have-children > .k-menu-label {
|
||||
.pure-menu-can-have-children > .pure-menu-label {
|
||||
padding-right:30px;
|
||||
}
|
||||
|
||||
.k-menu-separator {
|
||||
.pure-menu-separator {
|
||||
background-color: #dfdfdf;
|
||||
display: block;
|
||||
height: 1px;
|
||||
@ -74,10 +74,10 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.k-menu-hidden { display: none; }
|
||||
.pure-menu-hidden { display: none; }
|
||||
|
||||
/* FIXED MENU */
|
||||
.k-menu-fixed {
|
||||
.pure-menu-fixed {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
@ -88,7 +88,7 @@
|
||||
/* HORIZONTAL MENU CODE */
|
||||
|
||||
/* Initial menus should be inline-block so that they are horizontal */
|
||||
.k-menu-horizontal li {
|
||||
.pure-menu-horizontal li {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
@ -96,16 +96,16 @@
|
||||
}
|
||||
|
||||
/* Submenus should still be display:block; */
|
||||
.k-menu-horizontal li li {
|
||||
.pure-menu-horizontal li li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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";
|
||||
}
|
||||
/*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;
|
||||
}
|
||||
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
.k-paginator {
|
||||
.pure-paginator {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.k-paginator li {
|
||||
.pure-paginator li {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
/* IE 7 inline-block hack */
|
||||
*zoom: 1;
|
||||
margin: 0 -0.35em 0 0;
|
||||
}
|
||||
.k-paginator .k-button {
|
||||
.pure-paginator .pure-button {
|
||||
border-radius: 0;
|
||||
padding: 0.8em 1.4em;
|
||||
vertical-align: top;
|
||||
height: 1.1em;
|
||||
}
|
||||
.k-paginator .k-button:focus {
|
||||
.pure-paginator .pure-button:focus {
|
||||
outline-style: none;
|
||||
}
|
||||
.k-paginator .prev, .k-paginator .next {
|
||||
.pure-paginator .prev, .pure-paginator .next {
|
||||
color: #C0C1C3;
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0, 0.45);
|
||||
}
|
||||
.k-paginator .prev {
|
||||
.pure-paginator .prev {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.k-paginator .next {
|
||||
.pure-paginator .next {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.k-menu-horizontal {
|
||||
.pure-menu-horizontal {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.k-menu-children li {
|
||||
.pure-menu-children li {
|
||||
display: block;
|
||||
border-bottom:1px solid block;
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
/* MAIN MENU STYLING */
|
||||
|
||||
.k-menu.k-menu-open,
|
||||
.k-menu.k-menu-horizontal li .k-menu-children {
|
||||
.pure-menu.pure-menu-open,
|
||||
.pure-menu.pure-menu-horizontal li .pure-menu-children {
|
||||
background: #ffffff; /* Old browsers */
|
||||
border-radius: 3px;
|
||||
border: 1px solid #b7b7b7;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@ -16,50 +16,50 @@
|
||||
|
||||
/* LINK STYLES */
|
||||
|
||||
.k-menu a {
|
||||
.pure-menu a {
|
||||
border: 1px solid transparent;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
}
|
||||
|
||||
.k-menu a,
|
||||
.k-menu .k-menu-can-have-children > li:after {
|
||||
.pure-menu a,
|
||||
.pure-menu .pure-menu-can-have-children > li:after {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.k-menu .k-menu-can-have-children > li:hover:after {
|
||||
.pure-menu .pure-menu-can-have-children > li:hover:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* HOVER STATES */
|
||||
.k-menu li a:hover {
|
||||
.pure-menu li a:hover {
|
||||
background: #46b9e3;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
/* DISABLED STATES */
|
||||
.k-menu li.k-menu-disabled a:hover {
|
||||
.pure-menu li.pure-menu-disabled a:hover {
|
||||
background: #fff;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.k-menu .k-menu-disabled > a {
|
||||
.pure-menu .pure-menu-disabled > a {
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.k-menu .k-menu-disabled > a,
|
||||
.k-menu .k-menu-can-have-children.k-menu-disabled > a:after {
|
||||
.pure-menu .pure-menu-disabled > a,
|
||||
.pure-menu .pure-menu-can-have-children.pure-menu-disabled > a:after {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
/* HEADINGS */
|
||||
.k-menu .k-menu-heading {
|
||||
.pure-menu .pure-menu-heading {
|
||||
color: #565d64;
|
||||
text-transform: uppercase;
|
||||
font-size:90%;
|
||||
@ -70,13 +70,13 @@
|
||||
}
|
||||
|
||||
/* ACTIVE MENU ITEM */
|
||||
.k-menu .k-menu-selected a {
|
||||
.pure-menu .pure-menu-selected a {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* FIXED MENU */
|
||||
.k-menu.k-menu-open.k-menu-fixed {
|
||||
.pure-menu.pure-menu-open.pure-menu-fixed {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid #b7b7b7;
|
||||
|
||||
@ -50,18 +50,18 @@
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.k-menu {
|
||||
.pure-menu {
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="k-skin-sam">
|
||||
<body class="pure-skin-sam">
|
||||
|
||||
<div class="header y-u-1">
|
||||
|
||||
<h1 class="k-u-1">Pure List CSS</h1>
|
||||
<h2 class="k-u">Simple styling for HTML List elements.</h2>
|
||||
<h1 class="pure-u-1">Pure List CSS</h1>
|
||||
<h2 class="pure-u">Simple styling for HTML List elements.</h2>
|
||||
|
||||
</div>
|
||||
|
||||
@ -74,46 +74,46 @@
|
||||
<h2>Horizontal Menu</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="k-menu k-menu-open k-menu-horizontal">
|
||||
<a href="#" class="k-menu-heading">Site Title</a>
|
||||
<div class="pure-menu pure-menu-open pure-menu-horizontal">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li class="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="#">Sports</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>
|
||||
</div>
|
||||
|
||||
<h2>Vertical Menu</h2>
|
||||
|
||||
<div id="vertical-menu1" class="k-menu k-menu-open">
|
||||
<a href="#" class="k-menu-heading">Site Title</a>
|
||||
<div id="vertical-menu1" class="pure-menu pure-menu-open">
|
||||
<a href="#" class="pure-menu-heading">Site Title</a>
|
||||
<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="#">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="#">Finance</a></li>
|
||||
<li class="k-menu-disabled"><a href="#">Disabled</a></li>
|
||||
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="vertical-menu1" class="k-menu k-menu-open">
|
||||
<div id="vertical-menu1" class="pure-menu pure-menu-open">
|
||||
<ul>
|
||||
<li class="k-menu-heading">Site Title</li>
|
||||
<li class="k-menu-selected"><a href="#">Home</a></li>
|
||||
<li class="pure-menu-heading">Site Title</li>
|
||||
<li class="pure-menu-selected"><a href="#">Home</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li class="k-menu-heading">Yahoo! Sites</li>
|
||||
<li class="pure-menu-heading">Yahoo! Sites</li>
|
||||
<li><a href="#">Sports</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>
|
||||
</div>
|
||||
|
||||
@ -126,17 +126,17 @@
|
||||
|
||||
|
||||
<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">
|
||||
<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="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li>
|
||||
<a href="#">Other</a>
|
||||
<ul>
|
||||
<li class="k-menu-heading">More from Yahoo!</li>
|
||||
<li class="k-menu-separator"></li>
|
||||
<li class="pure-menu-heading">More from Yahoo!</li>
|
||||
<li class="pure-menu-separator"></li>
|
||||
<li><a href="#">Autos</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Answers</a></li>
|
||||
@ -158,16 +158,16 @@
|
||||
<h2>Fixed Menus</h2>
|
||||
|
||||
<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>
|
||||
<button class="k-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
|
||||
<button class="pure-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
|
||||
</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>
|
||||
<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="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
@ -181,10 +181,10 @@
|
||||
<script>
|
||||
var Y = YUI({
|
||||
fetchCSS: false,
|
||||
classNamePrefix: 'k'
|
||||
classNamePrefix: 'pure'
|
||||
}).use('gallery-sm-menu', 'event-tap', 'node-base', function (Y) {
|
||||
|
||||
//Y.config.classNamePrefix = 'k';
|
||||
//Y.config.classNamePrefix = 'pure';
|
||||
|
||||
var horizontalMenu = new Y.Menu({
|
||||
container: '#horizontal-menu',
|
||||
@ -199,7 +199,7 @@
|
||||
|
||||
Y.one('#showFixedMenuBtn').on('tap', function (e) {
|
||||
var fixedMenu = Y.one('#fixed-menu');
|
||||
fixedMenu.toggleClass('k-menu-open');
|
||||
fixedMenu.toggleClass('pure-menu-open');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
/* foundational CSS */
|
||||
.k-table {
|
||||
.pure-table {
|
||||
/* Remove spacing between table cells (from Normalize.css) */
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
@ -14,15 +14,15 @@
|
||||
border: 1px solid #cbcbcb;
|
||||
}
|
||||
|
||||
.k-table caption {
|
||||
.pure-table caption {
|
||||
color: #000;
|
||||
font: italic 85%/1 arial, sans-serif;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.k-table td,
|
||||
.k-table th {
|
||||
.pure-table td,
|
||||
.pure-table th {
|
||||
border-left: 1px solid #cbcbcb;/* inner column border */
|
||||
border-width: 0 0 0 1px;
|
||||
font-size: inherit;
|
||||
@ -30,12 +30,12 @@
|
||||
overflow: visible; /*to make ths where the title is really long work*/
|
||||
padding: 6px 12px; /* cell padding */
|
||||
}
|
||||
.k-table td:first-child,
|
||||
.k-table th:first-child {
|
||||
.pure-table td:first-child,
|
||||
.pure-table th:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.k-table thead {
|
||||
.pure-table thead {
|
||||
background: #e0e0e0;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
@ -48,35 +48,35 @@ striping:
|
||||
even - #fff (white)
|
||||
odd - #edf5ff (light blue)
|
||||
*/
|
||||
.k-table td {
|
||||
.pure-table td {
|
||||
background-color: transparent;
|
||||
}
|
||||
.k-table-odd td {
|
||||
.pure-table-odd td {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* BORDERED TABLES */
|
||||
.k-table-bordered td {
|
||||
.pure-table-bordered td {
|
||||
border-bottom:1px solid #cbcbcb;
|
||||
}
|
||||
.k-table-bordered tbody > tr:last-child td,
|
||||
.k-table-horizontal tbody > tr:last-child td {
|
||||
.pure-table-bordered tbody > tr:last-child td,
|
||||
.pure-table-horizontal tbody > tr:last-child td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* HORIZONTAL BORDERED TABLES */
|
||||
|
||||
.k-table-horizontal td,
|
||||
.k-table-horizontal th {
|
||||
.pure-table-horizontal td,
|
||||
.pure-table-horizontal th {
|
||||
border-width: 0 0 1px 0;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
|
||||
<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>
|
||||
<table class="k-table">
|
||||
<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="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -58,8 +58,8 @@
|
||||
</table>
|
||||
|
||||
<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>
|
||||
<table class="k-table k-table-bordered">
|
||||
<p>To add horizontal and vertical borders to all cells, add the <code>pure-table-bordered</code> classname to the <code>table</code> element.</p>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -91,8 +91,8 @@
|
||||
</table>
|
||||
|
||||
<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>
|
||||
<table class="k-table k-table-horizontal">
|
||||
<p>If you prefer to just have horizontal lines, add the <code>pure-table-horizontal</code> classname to the <code>table</code> element.</p>
|
||||
<table class="pure-table pure-table-horizontal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -124,8 +124,8 @@
|
||||
</table>
|
||||
|
||||
<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>
|
||||
<table class="k-table">
|
||||
<p>Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>pure-table-odd</code> class name to every other <code>tr</code> element changes the background of the row and creates a zebra-styled effect.</p>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -135,7 +135,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class='k-table-odd'>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
@ -147,7 +147,7 @@
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr class='k-table-odd'>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
@ -159,7 +159,7 @@
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr class='k-table-odd'>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
@ -171,7 +171,7 @@
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr class='k-table-odd'>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
@ -190,7 +190,7 @@
|
||||
|
||||
<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="k-table k-table-striped">
|
||||
<table class="pure-table pure-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -254,8 +254,8 @@
|
||||
|
||||
|
||||
<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>
|
||||
<table class="k-table k-table-bordered">
|
||||
<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="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user