AUI other layout tests

AUI Page — Typography

Other typographical elements

Paragraphs

These are pretty much the building blocks of content areas. Styles for paragraphs are fairly minimal.

Sona si Latine loqueris. Si Hoc Legere Scis Nimium Eruditionis Habes. Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat. Quantum materiae materietur marmota monax si marmota monax materiam possit materiari? Utinam barbari spatium proprium tuum invadant! Di! Ecce hora! Uxor mea me necabit! Sona si Latine loqueris. Si Hoc Legere Scis Nimium Eruditionis Habes. Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat. Quantum materiae materietur marmota monax si marmota monax materiam possit materiari? Utinam barbari spatium proprium tuum invadant! Di! Ecce hora! Uxor mea me necabit!

Vivamus semper consequat pharetra. Nullam volutpat, purus vitae tristique suscipit, tellus odio venenatis tellus, vel rhoncus velit sapien ac sapien.

Blockquote and Inline Quotes (with citations using <cite>)

All that is gold does not glitter, not all those who wander are lost; The old that is strong does not wither, deep roots are not reached by the frost.

From the ashes a fire shall be woken, a light from the shadows shall spring; Renewed shall be blade that was broken, the crownless again shall be king.

J.R.R. Tolkien, The Fellowship of the Ring
  • Blockquote text should line up nicely with the text in list items

The old addage Be yourself; everyone else is already taken. Oscar Wilde is very fitting

Definitions and Abbreviations

Recursion is the repeated application of a recursive procedure or definition.

The AUI library provides a typography component — make sure you put a title on your <abbr> elements.

Diffing using <ins> and <del>

Ice cream is awesomesucks.

Ensure we don't mess with <sub> and <sup>

They should still have default styling1 as well2

Preformatted text

Useful for stack traces or other content that is formatted using space characters.

                                 Item    | Qty
                                -------------------
                                 Apples  |   5
                                 Oranges |  10
                                 Grapes  |  99
                                

Preformatted code

                                <div class="foo">
                                    <h1>Example markup snippet</h1>
                                    <p>Sona si Latine loqueris. Si Hoc Legere Scis Nimium Eruditionis Habes. Sentio aliquos togatos contra me conspirare.</p>
                                </div>
                                

Inline code

Simple paste body { font-weight: bold; } into your file.

Keyboard commands via <kbd>

Simply press Alt + F4 to preview your changes.

A variable in a mathematical expression or a programming context via <var>

A simple equation: x = y + 2

Time using the … wait for it … <time> element

Let's move that meeting on to the pub!

Small text

Only use this size text if there's a good rationale for why 14px can't or won't work!

Links

Sometimes people hyperlink the little <sup>/<sub> elements1 as well2

H1 with a link in it

H2 with a link in it

H3 with a link in it

H4 with a link in it

H5 with a link in it
H6 with a link in it
Item Colour (full list) Qty
SKU-234859 Red 5
SKU-655448 Blue 17
SKU-118983 Orange 0