Test Page

Main Site | View the UI elements


Use this to test the CSS/JS.

What device?

DESKTOP
TABLET
PHONE

Grid Layouts

Basic

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

Centered columns

1
10

Offset columns

2
2 (offset 8)
2
2 (offset 2)
2 (offset 2)
4 (offset 1)
8 (offset 1)
1 (offset 2)

Forms

Basic Inputs
Select Field
Checkboxes
Radio Buttons
Date Inputs
Fancy Inputs
Disabled Inputs
Readonly Inputs
Error Fields
Valid Fields
Buttons

Lists

Un-ordered lists

Below is an un-ordered list

  • List Item 1
  • List Item 2
    • List Item 2 - 1
    • List Item 2 - 2
    • List Item 2 - 3
      • List Item 2 - 3 - 1
      • List Item 2 - 3 - 2
      • List Item 2 - 3 - 3
  • List Item 3
  • List Item 4

Below is an un-ordered list (square)

  • List Item 1
  • List Item 2
    • List Item 2 - 1
    • List Item 2 - 2
    • List Item 2 - 3
      • List Item 2 - 3 - 1
      • List Item 2 - 3 - 2
      • List Item 2 - 3 - 3
  • List Item 3
  • List Item 4

Below is an un-ordered list (circle)

  • List Item 1
  • List Item 2
    • List Item 2 - 1
    • List Item 2 - 2
    • List Item 2 - 3
      • List Item 2 - 3 - 1
      • List Item 2 - 3 - 2
      • List Item 2 - 3 - 3
  • List Item 3
  • List Item 4

Below is an un-ordered list (disc)

  • List Item 1
  • List Item 2
    • List Item 2 - 1
    • List Item 2 - 2
    • List Item 2 - 3
      • List Item 2 - 3 - 1
      • List Item 2 - 3 - 2
      • List Item 2 - 3 - 3
  • List Item 3
  • List Item 4

Ordered lists

Below is an ordered list

  1. List Item 1
  2. List Item 2
    1. List Item 2 - 1
    2. List Item 2 - 2
    3. List Item 2 - 3
  3. List Item 3
  4. List Item 4

Below is an ordered list (decimal)

  1. List Item 1
  2. List Item 2
    1. List Item 2 - 1
    2. List Item 2 - 2
    3. List Item 2 - 3
  3. List Item 3
  4. List Item 4

Below is an ordered list (roman)

  1. List Item 1
  2. List Item 2
    1. List Item 2 - 1
    2. List Item 2 - 2
    3. List Item 2 - 3
  3. List Item 3
  4. List Item 4

Below is an ordered list (alpha)

  1. List Item 1
  2. List Item 2
    1. List Item 2 - 1
    2. List Item 2 - 2
    3. List Item 2 - 3
  3. List Item 3
  4. List Item 4

Definition List

Normal DL

Title 1
Data 1
Title 2
Data 2
Title 3
Data 3

Inline DL

Title 1
Data 1
Title 2
Data 2
Title 3
Data 3

Tables

Table with proper thead/tbody tags
thead > th element thead > th element
tbody > th element tbody > td element
tbody > td element tbody > td element
tbody > td element tbody > td element
tbody > td element tbody > td element
tfoot > th element tfoot > th element
Table without thead/tbody tags
th element th element
th element td element
td element td element
td element td element
td element td element

Notices

Normal Notices

This is a notice... Link

X

Some information... Link

Success, all is okay, don't worry. Link

X

There was an error below, please check it, ya plonker! Link

Fixed Notices

The fixed notice, that is stuck to the top of the page, is placed just beneath me...

This is a fixed notice that always stays at the top of the screen. In the markup, I'm actually down by the notices.

X

Formatted Text

Pre Tag

This is pre-formatted text. <
It keeps line breaks and
				text indents.

It also acknowledges        spaces between   words.
					This is a really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long line

Samp Tag (Sample output from computer program)

Last login: Wed Feb 6 15:26:40 on ttys000 computer-name:~ user$ cd /var/www/ computer-name:/var/www/ user$ 
Last login: Wed Feb  6 15:26:40 on ttys000
computer-name:~ user$ cd /var/www/
computer-name:/var/www/ user$

Code Tag

Here we have a code snippet <?php echo 'Hello World'; ?>, which is inline.

This is some code
<?php
	if($i == 42){
		echo 'Tis the meaning of life!';
	}

	while($i < 3675.78; $i += 0.025){
		echo $i;
		echo 'This is a really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long line';
	}
?>

Var tag (data is a variable)

The following is a variable.

Kbd Tag (Input that a user should press on their keyboard)

qwerty ctrl+f5

The text has been deleted.

The text has been inserted.

This text is Imported and has been marked.

This text is outdated.

Quotes

The below is a blockquote

My mom always said, Life's like a box of chocolates; ya' never know what ya' gonna' get. Forest Gump

This paragraph contains inline quotes. But Forest's mom thinks that life is ...like a box of chocolates. I've no idea why.

Miscellaneous

Progress elements

Indeterminate
Progress: 0%
Progress: 100%
Progress: 57%

Meter elements

Empty
0
Full
1
A bit
0.36
Preferred usage
120
Too much traffic
9216
Optimum value
0.5

Figures

placeholder
A simple placeholder image from placehold.it
You need JS!