From 44b5be0a4690626d51ed49965da161912756f52f Mon Sep 17 00:00:00 2001 From: Eric Ferraiuolo Date: Tue, 3 Sep 2013 13:18:46 -0400 Subject: [PATCH] Clean manual tests by formatting the HTML and making it valid --- src/buttons/tests/manual/button.html | 11 +- src/forms/tests/manual/forms.html | 598 +++++++++++++------------ src/grids/tests/manual/responsive.html | 20 +- src/menus/tests/manual/menus.html | 320 ++++++------- src/tables/tests/manual/tables.html | 456 +++++++++---------- 5 files changed, 680 insertions(+), 725 deletions(-) diff --git a/src/buttons/tests/manual/button.html b/src/buttons/tests/manual/button.html index c9766f6..83a4d26 100644 --- a/src/buttons/tests/manual/button.html +++ b/src/buttons/tests/manual/button.html @@ -1,8 +1,11 @@ - Button Manual Tests - + + Buttons Tests + + + @@ -48,7 +51,7 @@ -

Test Button Styles

+

Buttons Tests

Regular Buttons

@@ -89,7 +92,7 @@

- diff --git a/src/forms/tests/manual/forms.html b/src/forms/tests/manual/forms.html index 9a8e722..ce4915e 100644 --- a/src/forms/tests/manual/forms.html +++ b/src/forms/tests/manual/forms.html @@ -1,334 +1,346 @@ - - - Forms CSS Manual Test - - - - + + + Forms Tests - + + + + + -

+

Forms Tests

Default Form

-
- A default inline form. - - - - -
+
+ A default inline form. + + + + + + + +
-

Multi-Column Form (with YUI Grids)

-

- Multi-column forms such as the one below can be created by pulling down YUI Grids. -

+

Multi-Column Form with Grids

-
-
- Legend + +
+ Legend -
-
- - -
-
- - -
-
- - -
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
-
- - -
+ -
- - -
-
- - - -
- + + +
+

Stacked Form

-

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

-
- Legend - - - - - - - - - - +
+ Legend - - - - - + + -
- + + -

Aligned Form

+ + + -

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

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

Grouped Inputs

- -

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.

- -
-
- - - -
-
- - - -
-
- - - - -

Input Sizing

- -

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.

-
- -
- -

Readonly Inputs

-

Add the readonly attribute to any form control.

-
- -
- -

Rounded Form

-

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

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

Selects

-
- +

Aligned Form

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

Grouped Inputs

-

Checkboxes and Radios

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

Help text

-
-
- - - -
-
-
-
-
-
- Anchor - - - - -
-
-
+

Input Sizing

+ +
+
+
+
+
+
+
+ + +
+
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ + +

Invalid Inputs

+ +
+ +
+ + +

Disabled Inputs

+ +
+ +
+ + +

Readonly Inputs

+ +
+ +
+ + +

Rounded Form

+ +
+ + + + + + + + +
+ + +

Selects

+ +
+ + + +
+ + +

Checkboxes and Radios

+ +
+ + + + + +
+ + +

Help text

+ +
+
+ + + +
+
+ + +

Buttons

+ +
+ Anchor + + + + +
diff --git a/src/grids/tests/manual/responsive.html b/src/grids/tests/manual/responsive.html index 70c9b2e..7a4187b 100644 --- a/src/grids/tests/manual/responsive.html +++ b/src/grids/tests/manual/responsive.html @@ -2,7 +2,7 @@ - Responsive Grids Test + Responsive Grids Tests @@ -24,7 +24,9 @@ -

Base Grid

+

Grids Tests

+ +

Base Grid

@@ -267,7 +269,7 @@
-

Responsive Grid

+

Responsive Grid

@@ -510,22 +512,22 @@
-

Images Grid

+

Images Grid

- + Test image.
- + Test image.
- + Test image.
-

Nested Grid

+

Nested Grid

@@ -562,7 +564,7 @@
-

Custom Font and Grids

+

Custom Font and Grids

Grids with a serif font stack.

diff --git a/src/menus/tests/manual/menus.html b/src/menus/tests/manual/menus.html index 05c0f72..58c5c47 100644 --- a/src/menus/tests/manual/menus.html +++ b/src/menus/tests/manual/menus.html @@ -1,202 +1,152 @@ - - - Menus CSS - - - + + + Menus Tests - + + + - -
+ +

Menus Tests

-

Pure Menus CSS

-

Simple styling for HTML List elements as menus.

+

Horizontal Menu

-
- -
- -

Horizontal Menu

- -

- You can mark the active menu element by adding the .pure-menu-selected class to the list item. -

- -
- Site Title - -
- -

Vertical Menu

- -
- Site Title - -
- -
- -
- - -

Add Dropdowns to Menus

- -

- Adding dropdowns to menus requires the use of JavaScript. The Y.Menu module adds dropdown functionality and the ability to create JavaScript menus. It uses csslist to style these menus, so they look identical. -

- - -
- Site Title - -
- - -

Fixed Menus

- -

- Fixed menus can be created by adding the pure-menu-fixed class name to the wrapper. This will fix a menu to the top of the page. -

- -

- -

- -
- -
- -

Paginator

- -
    -
    • -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
    • +
    + Site Title + -
    - + +

    Vertical Menu

    + +
    + Site Title + +
    + +
    + +
    + + +

    Add Dropdowns to Menus

    + +

    + Adding dropdowns to menus requires the use of JavaScript. The Y.Menu module adds dropdown functionality and the ability to create JavaScript menus. It uses csslist to style these menus, so they look identical. +

    + +
    + Site Title + +
    + + +

    Fixed Menus

    + +

    + Fixed menus can be created by adding the pure-menu-fixed class name to the wrapper. This will fix a menu to the top of the page. +

    + +

    + +

    + +
    + +
    + +

    Paginator

    + + + + + diff --git a/src/tables/tests/manual/tables.html b/src/tables/tests/manual/tables.html index 3f4b459..11c8132 100644 --- a/src/tables/tests/manual/tables.html +++ b/src/tables/tests/manual/tables.html @@ -1,251 +1,239 @@ - - - + + + -
    -

    Pure Table CSS

    -

    - Simple CSS for HTML Tables -

    -
    +

    Tables Tests

    -

    Default Table

    +

    Default Table

    -

    Add the pure-table classname to a table to style an HTML table This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    -

    Bordered Table

    -

    To add horizontal and vertical borders to all cells, add the pure-table-bordered classname to the table element.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    +

    Bordered Table

    -

    Table with Horizontal Borders

    -

    If you prefer to just have horizontal lines, add the pure-table-horizontal classname to the table element.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    -

    Striped Table

    -

    Large tables are easier to parse visually if rows are easily distinguishable. Adding the pure-table-odd class name to every other tr element changes the background of the row and creates a zebra-styled effect.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    4FordFocus2008
    5NissanSentra2011
    6BMWM32009
    7HondaCivic2010
    8KiaSoul2010
    +

    Table with Horizontal Borders

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    +

    Striped Table

    -

    Nth Child Selector Styling

    -

    Here's a striped table that's zebra-styled using nth-child selectors.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    4FordFocus2008
    5NissanSentra2011
    6BMWM32009
    7HondaCivic2010
    8KiaSoul2010
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    4FordFocus2008
    5NissanSentra2011
    6BMWM32009
    7HondaCivic2010
    8KiaSoul2010
    +

    Nth Child Selector Styling

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #MakeModelYear
    1HondaAccord2009
    2ToyotaCamry2012
    3HyundaiElantra2010
    4FordFocus2008
    5NissanSentra2011
    6BMWM32009
    7HondaCivic2010
    8KiaSoul2010