Please activate JavaScript! — Or click here for the SiteMap.

Elemente

Lesbarkeit des Textes

Wie man an diesem Absatz (genau diesem hier) oder auf der Seite Allgemein sehen kann, ist es äußerst ungünstig, wenn auf sehr großen Bildschirmen der Text über fast die gesamte Breite läuft. Das Auge findet am Ende einer Zeile kaum den Anfang der nächsten. Es muss zu weit schwenken und verliert den Halt. Daher empfiehlt es sich Unterteilungen vorzunehmen – so wie es bei dem Text weiter unten demonstriert wird. Mindestens zweispaltig sollte es schon sein, besser dreispaltig.

Zeispaltig, erste Spalte

Das Template verfügt über ein Rastersystem – das allerdings nirgends und nirgendwo ausführlich beschrieben wird. Es bleibt also nichts anderes übrig, als sich zum Beispiel auf dieser Seite hier die nötigen Formatierungen zusammenzusuchen. Oder man studiert die CSS-Datei gründlich.

Zeispaltig, zweite Spalte

Für diejenigen, die schon einmal mit Bootstrap oder anderen CSS-Frameworks gearbeitet haben, dürfte es kaum Schwierigkeiten beim Verständnis des Rastersystems geben, beide sind sich sehr ähnlich. Nur Mut! Wird schon.

Dreispaltig (1)

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.

Dreispaltig (2)

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.

Dreispaltig (3)

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.


Elements

Text

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.


Heading Level 2

Heading Level 3

Heading Level 4


Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

Lists

Unordered class="default"

  • Dolor etiam magna etiam.
  • Sagittis lorem eleifend.
  • Felis dolore viverra.

Alternate class="alt"

  • Dolor etiam magna etiam.
  • Sagittis lorem eleifend.
  • Felis feugiat viverra.

Ordered

  1. Dolor etiam magna etiam.
  2. Etiam vel lorem sed viverra.
  3. Felis dolore viverra.
  4. Dolor etiam magna etiam.
  5. Etiam vel lorem sed viverra.
  6. Felis dolore viverra.

Icons

Definition

Item1

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.

Item2

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.

Item3

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.

Actions

Pagination

Blockquote

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.

Tables

Default class="default"

Name Description Price ($)
Item1 Ante turpis integer aliquet porttitor. 29.99
Item2 Vis ac commodo adipiscing arcu aliquet. 19.99
Item3 Morbi faucibus arcu accumsan lorem. 29.99
Item4 Vitae integer tempus condimentum. 19.99
Item5 Ante turpis integer aliquet porttitor. 29.99
  129.95

Alternate class="alt"

Name Description Price ($)
Item1 Ante turpis integer aliquet porttitor. 29.99
Item2 Vis ac commodo adipiscing arcu aliquet. 19.99
Item3 Morbi faucibus arcu accumsan lorem. 29.99
Item4 Vitae integer tempus condimentum. 19.99
Item5 Ante turpis integer aliquet porttitor. 29.99
  129.95

Form

Image

Fit

example image 12
example image 1
example image 2
example image 3
example image 4
example image 5
example image 6
example image 7
example image 8
example image 9

Left & Right

pic10.jpgLorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

pic11Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

Box

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum.

Preformatted

i = 0;
while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}
print 'It took ' + i + ' iterations to sort the deck.';