From 696c274bcd56c930db114054643cf570b4bfec57 Mon Sep 17 00:00:00 2001 From: necolas Date: Thu, 26 May 2011 00:19:31 +0100 Subject: [PATCH] Demo: Add box-sizing tests; add more HTML5 type examples; add
example; reorganise elements --- demo.html | 222 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 164 insertions(+), 58 deletions(-) diff --git a/demo.html b/demo.html index e8984ea..0853ecb 100644 --- a/demo.html +++ b/demo.html @@ -6,6 +6,16 @@ Normalize CSS +
@@ -21,26 +31,26 @@
- -
-

Section Heading 1

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

-

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

-

Section Heading 2

-

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

-

Section Heading 3

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

-
- -
-

Article Heading 4

-

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

-
Article Heading 5
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

-
Article Heading 6
-

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

-
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +
+

Section Heading 1

+
+

Article Heading 2

+
Address: somewhere, world
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

+
+
+ +

Text-level semantics

+

The a element example
The abbr element example
@@ -68,32 +78,11 @@ The u element example

-
Address: somewhere, World
+

Grouping content

-
-

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

-
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

-
Even better philosophical quote marked up with just a <blockquote> element.
- -
    -
  1. Sed ut perspiciatis unde
  2. -
  3. omnis iste natus error
  4. -
  5. sit voluptatem accusantium
  6. -
- - - -
-
Definition list term #1
-
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Definition list term #2
-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
+

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
<html>
@@ -103,7 +92,79 @@
         <div class="main"> <div>
     </body>
 </html>
- + +

blockquote

+ +
+

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

+
+ +
Even better philosophical quote marked up with just a <blockquote> element.
+ +

ordered list

+ +
    +
  1. list item 1
  2. +
  3. list item 1 +
      +
    1. list item 2
    2. +
    3. list item 2 +
        +
      1. list item 3
      2. +
      3. list item 3
      4. +
      +
    4. +
    5. list item 2
    6. +
    7. list item 2
    8. +
    +
  4. +
  5. list item 1
  6. +
  7. list item 1
  8. +
+ +

unordered list

+ + + +

description list

+ +
+
Description name
+
Description value
+
Description name
+
Description value
+
Description value
+
Description name
+
Description name
+
Description value
+
+ +

figure

+ +
+ +
Figcaption content
+
+ +

Tabular data

+ @@ -143,22 +204,34 @@
Jimi Hendrix - albums
- -
+ +

Forms

+ +
Form legend -
-
-
-
-
-
-
-
-
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
-
-
+
+
@@ -169,7 +242,40 @@
-
+ +
+ box-sizing tests +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ \ No newline at end of file