diff --git a/HISTORY.md b/HISTORY.md index f6b07e3..c9ae776 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -6,6 +6,8 @@ NEXT * (!) Rename to Pure. +* (!) Rename CSS classname prefix to `pure`. + 0.0.1 (2013-05-14) ------------------ diff --git a/src/base/README.md b/src/base/README.md index a22bae1..42ef453 100644 --- a/src/base/README.md +++ b/src/base/README.md @@ -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`. diff --git a/src/buttons/css/buttons-core.css b/src/buttons/css/buttons-core.css index 72bd691..8acc8f4 100644 --- a/src/buttons/css/buttons-core.css +++ b/src/buttons/css/buttons-core.css @@ -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; } diff --git a/src/buttons/css/buttons.css b/src/buttons/css/buttons.css index 79a075f..dd907ab 100644 --- a/src/buttons/css/buttons.css +++ b/src/buttons/css/buttons.css @@ -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); } diff --git a/src/buttons/tests/manual/button.html b/src/buttons/tests/manual/button.html index bc303d3..062dc2c 100644 --- a/src/buttons/tests/manual/button.html +++ b/src/buttons/tests/manual/button.html @@ -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 @@

Regular Buttons

- - An anchor Button + + An anchor Button

Disabled Buttons

- - An anchor Button + + An anchor Button

Active Buttons

- - An anchor Button + + An anchor Button

Primary/Selected Buttons

- - An anchor Button + + An anchor Button

Customizing Buttons

- - An anchor Button + + An anchor Button

- - Custom Button + + Custom Button

- - Custom Button + + Custom Button

- - + Start Playing Movie diff --git a/src/forms/css/forms-core.css b/src/forms/css/forms-core.css index 3020088..e52055e 100644 --- a/src/forms/css/forms-core.css +++ b/src/forms/css/forms-core.css @@ -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 */ } diff --git a/src/forms/css/forms-r.css b/src/forms/css/forms-r.css index 00852d1..55027fd 100644 --- a/src/forms/css/forms-r.css +++ b/src/forms/css/forms-r.css @@ -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 */ diff --git a/src/forms/css/forms.css b/src/forms/css/forms.css index 907e30d..0f46d29 100644 --- a/src/forms/css/forms.css +++ b/src/forms/css/forms.css @@ -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; diff --git a/src/forms/tests/manual/index.html b/src/forms/tests/manual/index.html index f1e9a12..29448dc 100644 --- a/src/forms/tests/manual/index.html +++ b/src/forms/tests/manual/index.html @@ -53,12 +53,12 @@ } - +

-

Pure Forms CSS

-

Simple styling for HTML Form elements.

+

Pure Forms CSS

+

Simple styling for HTML Form elements.

@@ -72,7 +72,7 @@

Default Form

-
+
A default inline form. @@ -80,7 +80,7 @@ - +
@@ -90,32 +90,32 @@ Multi-column forms such as the one below can be created by pulling down YUI Grids.

-
+
Legend -
-
+
+
-
+
-
+
-
+
-
+
- @@ -124,10 +124,10 @@
-
@@ -135,9 +135,9 @@

Stacked Form

- Apply stacked label styling to any form by applying the k-form-stacked classname. + Apply stacked label styling to any form by applying the pure-form-stacked classname.

-
+
Legend @@ -146,21 +146,21 @@ - + - -
@@ -168,33 +168,33 @@

Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.

-
+
-
+
-
+
-
+
-
+
-
-
@@ -203,16 +203,16 @@

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.

-
-
- - - + +
+ + +
-
- - - +
+ + +
@@ -221,88 +221,88 @@

Input Sizing

-

You can take advantage of YUI Grids and the k-input-block class to create fluid width inputs in practically any size that you want.

+

You can take advantage of YUI Grids and the pure-input-block class to create fluid width inputs in practically any size that you want.

-
-
-
-
-
-
+ +
+
+
+
+
-
-
-
- +
+ +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+

Invalid Inputs

Add the required attribute to any form control.

-
+

Disabled Inputs

Add the disabled attribute to any form control.

-
- + +

Rounded Form

-

Add the k-input-rounded classname to any form control.

+

Add the pure-input-rounded classname to any form control.

-
- - + + +

Selects

-
- @@ -311,7 +311,7 @@ - @@ -321,17 +321,17 @@

Checkboxes and Radios

-
-