CSS Tests

One stop shop for quick debugging and edge-case tests of CSS.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h1. Heading 1

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h2. Heading 2

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h3. Heading 3

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h4. Heading 4

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h5. Heading 5

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h6. Heading 6

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.




12
1
1
1
1
1
1
1
1
1
1
1
1
11
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
10
1
1
1
1
1
1
1
1
1
1
1
1
2
1
1
1
1
1
1
1
1
1
1
1
1
9
1
1
1
1
1
1
1
1
1
1
1
1
3
1
1
1
1
1
1
1
1
1
1
1
1
8
1
1
1
1
1
1
1
1
1
1
1
1
4
1
1
1
1
1
1
1
1
1
1
1
1
7
1
1
1
1
1
1
1
1
1
1
1
1
5
1
1
1
1
1
1
1
1
1
1
1
1
6
1
1
1
1
1
1
1
1
1
1
1
1
6
1
1
1
1
1
1
1
1
1
1
1
1

Bordered without thead

1 2 3
1 2 3
1 2 3

Bordered without thead, with caption

Table caption
1 2 3
1 2 3
1 2 3

Bordered without thead, with colgroup

1 2 3
1 2 3
1 2 3
3 6 9

Bordered with thead, with colgroup

A B C
1 2 3
1 2 3
1 2 3
3 6 9

Bordered with thead and caption

Table caption
1 2 3
1 2 3
1 2 3
1 2 3
3 6 9

Bordered with rowspan and colspan

1 2 3
1 and 2 3
1 2 3
1 3
2 and 3

Grid sizing

1 2 3
1 and 2 3
1 2 3
1 3
2 and 3

Nesting and striping

Test
Test Test
test test
test test
test test

Fluid grid sizing

1 2 3
1 and 2 3
1 2 3
1 3
2 and 3

Buttons and button groups

Horizontal form errors

Please correct the error

Prepend and append on inputs

@
@
$ .00

Prepend and append with uneditable

$ Some value here
Some value here .00
$ Some value here .00

Prepend with type="submit"

Fluid prepended and appended inputs

@
@
$.00

Fixed row with inputs

Inputs should not extend past the light red background, set on their parent, a .span* column.


Fluid row with inputs

Inputs should not extend past the light red background, set on their parent, a .span* column.


Inline form in fluid row


Fluid textarea at .span12


Selects


Dropdown link with hash URL

Dropdown link with custom URL and data-target

Dropdown on a button


Default thumbnails (no grid sizing)

Standard grid sizing

Fluid thumbnails

I'm in Section 1.

I'm in Section 1.1.

I'm in Section 1.2.

I'm in Section 1.3.

Howdy, I'm in Section 2.

What up girl, this is Section 3.


Inline label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam Label name eget risus varius blandit sit amet non magna. Fusce .class-name dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Hey! Read this.

Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Mini buttons: text and icon


Visible on...

Hidden on...

Horizontal

Vertical

Directional

Three colors

Radial

Striped