zui HTML5/CSS3 demo articles

Introduction to zui HTML5

By Somebody

This page demonstrates the semantic richness and presentational flexibility of zui HTML5/CSS3. The markup and css derive from and build directly on top of the "HTML5 Boilerplate" project and consequently the "Normalize.css" project. Using the testing tools on this page you may choose from a variety of sample stylesheets and layouts to examine zui html5.

Goal

  • Semantic Rich standards compliant-ish markup
  • Simple consistent infrastructure...
    • to normalize markup between projects
    • to speed up project setup
    • to simplify project maintenance

The strategy/philosophy behind zui HTML5 is in the spirit of the CSS Zen Garden. Utilize a universal default markup structure and naming scheme that can be used to present any web based document/app in any modern browser, screen reader, or mobile device.

The markup never changes in this demo. Only the stylesheets are switched to show the various designs and layouts.

So try out the different example stylesheets, view the various layouts, and try using the zui HTML5 methodology on your next project.

About the structure of zui html5

By Somebody

Article 1

By Somebody

[Author created opening section header]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum, ante eget rutrum gravida, lacus enim placerat sapien, in elementum enim velit a massa. Etiam pulvinar metus sem, ac euismod tellus. Nullam consectetur blandit mattis. Nunc feugiat neque ac nisl placerat iaculis. Pellentesque sed justo arcu, a adipiscing elit. Donec vitae mi ligula, et imperdiet arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et dolor dignissim lacus posuere pretium. Proin luctus fringilla tristique.

Proin egestas egesta-s risus, eu varius mauris tristique nec. Mauris quis egestas elit. In ullamcorper fringilla consequat. Pellentesque ut risus diam. Sed pellentesque porttitor nibh quis cursus. Aenean mi massa, volutpat mollis aliquet a, congue vel dui. Suspendisse non metus et neque lacinia congue.

  • [[Items in double brackets]] typically have no header in common design practice
    These would not be displayed via css/js but could be used for seo as well as semantics (i.e. faciliate a human readable semantic outline)
    • Style visually or hide by selector as appropriate
    • OR Apply helper class "hidden" to element to hide always
    • OR Apply helper class "visuallyhidden" to element to hide except for screen readers and accessibility
  • [Items in brackets] may or may not have actual headers in common design practice
    Where the designer choose to not visually represent the header it should be treated via css/js like the item in [[double brackets]]
  • In both of these cases this header can also be used in different media especially for screen readers and other accessibility media types
  • Look into workflow for always implementing manifest app caching

awesome button

[Author created subsection]

These h1-h6 elements demonstrate the semantic control for dynamically outtputting articles with entirely logical header structures.

[Author created subsubsection]

These h1-h6 elements demonstrate the semantic control for dynamically outtputting articles with entirely logical header structures.

[Author created subsubsubsection]

These h1-h6 elements demonstrate the semantic control for dynamically outtputting articles with entirely logical header structures.

[Author created subsubsubsubsection]

These h1-h6 elements demonstrate the semantic control for dynamically outtputting articles with entirely logical header structures.

[Author created subsubsubsubsection]

These h1-h6 elements demonstrate the semantic control for dynamically outtputting articles with entirely logical header structures.

Article 2

By Somebody

This represents a second article in a "list" such as browsing a blog

Note that the same markup "article" markup can be used for the document in a "list" or output on it's cannonical page.

Also note that because this section has not header of it's own it will be outlined as an "untitled" section

normalize.css demo markup

By normalize.css

Sample markup from normalize.css project (by way of h5bp). Includes everything from the demo.html file except for some form "box tests", invalid html5, or elements unsupported in a usuable way at this time by the major browsers.

And you get a bonus >hr< to demarcate the start of that markup in this "article".

Grouped Heading 1

Grouped Heading 2

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 and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example

Embedded content

audio

img

svg

video

Grouping content

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

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
<html>
                                                    <head>
                                                    </head>
                                                    <body>
                                                        <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. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

unordered list

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

description list

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value

figure

Figcaption content

Tabular data

Jimi Hendrix - albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00

Forms

Inputs as descendents of labels (form legend)

Inputs as siblings of labels

Clickable inputs and buttons

BONUS: Testing font system declarations

Rendered as captions

Rendered as icon

Rendered as menus

Rendered as message boxes

Rendered as small captions

Rendered as status bar