Diese Beispielseite zum Amazium Framework enthält abweichend vom Standard eine dunkelrote Farbgebung. Alle
hierfür gemachten Anpassungen sind in der Datei dark-red.css
enthalten. Die Veränderungen der
Farbgebeung betreffen die CSS-Attribute
Auperdem wurden die mitgelieferten Grafiken
angepasst.
Basis dieses Frameworks sind Media Queries für:
Zur Bedeutung dieser Media Queries siehe auch die Abschnitte Grid und Offsetting.
Die Hauptnavigation befindet sich oben. Sie ist waagerecht ausgerichtet. Dort ist Platz für etwa neun Menüpunkte. Zur Erweiterung könnte man ganz unten noch eine zusätzlich Navigation mit zusätzlichen Links für Gästebuch, Impressum, Kontakt, Pinnwand, und Linksliste einbauen. Auf diesen zusätzlichen Menübereich wird oben unter Kontakt/Impressum verlinkt.
Eigentlich ist für das korrekte Funktionieren des Frameworks keine JavaScript erforderlich. Diese
Demonstrationsseite für Amazium enthält dennoch JavaScript. Zunächst wird als Basis jquery.js
eingebunden, und zwar als externer Verweis auf die Version 1.3.
Direkt hier enthalten sind:
jquery.easing.1.3.js
jquery.ui.totop.js
in der Verion 1.1. Zur Initialisierung dieses Plugins
gibt es ein kleines Stück Code direkt in der Seite.smoothscroll.js
, die das sanfte Scrollen zu den internen Links ermöglicht. Diese
Datei benötigt wahrscheinlich kein jQuery.navigation.js
, die mit der Klasse navigation-btn
verknüpft ist und
beim Klick die Klasse navigation
einblendet.Der folgende Code erstellt ein Raster mit einer Spalte in einer Breite von 960px.
<div class="row">
<div class="grid_12">
---Your text here---
</div>
</div>
Wenn man nun also zwei Spalten benötigt, zum Beispiel eine für die seitliche Navigation und eine weitere für den Hauptinhalt, muss man einfach diesen Code nutzen, der eine Spalte mit 280px und eine weitere mit 600px erstellt. (Siehe weiter oben die dritte Zeile der schematischen Darstellung.)
<div class="row">
<div class="grid_4">
---Your text here---
</div>
<div class="grid_8">
---Your text here---
</div>
</div>
Man kann auch problemlos zwei Spalten in einer größeren verschachteln. Ein Beispiel hierfür ist der untenstehende Code. Es sind keinerlei Anpassungen des CSS-Codes erforderlich.
<div class="row">
<div class="grid_12">
---Your text here---
<div class="row">
<div class="grid_6">
---1 of 2 columns---
</div>
<div class="grid_6">
---2 of 2 columns---
</div>
</div>
</div>
</div>
Wie man an den schematischen Darstellungen erkennen kann, wird das Raster Spaltenzwischenraum bzw. Rändern von 16px links bzw. rechts dargestellt. Es ist kein Problem, diese Zwischenräume zu verkleinern.
Dieser Beispielabschnitt wurde mit grid_6
erstellt.
Amazium bietet auch die Möglichkeit, Spalten mit einem Offset zu versehen. Darunter versteht man, dass eine Spalte
mit einem bestimmten Abstand zum linken Rand versehen wird. Auf diese Art und weise kann man auch erweiterte Abstände zwischen zwei Spalten
hiinzufügen. Dies geschieht, in dem man die Klasse offset
gefolgt von einer Ziffer einfügt. Wenn man also einen Offset von
4 Spalten bei einem Grid von 8 Spalten haben will, muss man grid_8 offset_4
einfügen.
Amazium enthält eine Reihe typografischer Grundeinstellungen. Die Standardschriftart ist Century Gothic, die Überschriften sind in Georgia. Bei Vorgaben lassen sich leicht anpassen. Die Standardabsätze sind mit einer Zeilenhöhe von 20px und einem unteren Padding von 10px vorgegeben.
Dieser Absatz nutzt die Klasse .intro
, die mit einer Schriftgröße und einem
Zeilenhöhe von 130% hervorragend für einen Einführungstext geeignet ist. Somit mus dieser nicht mit H1
formatiert werden.
<strong>
This text is rendered as bold.
<em>
This text is rendered as italicized.
<small>
This text is rendered for fine print.
<sup>
This text is rendered as Superscript
<sub>
This text is rendered as Subscript
.highlight
This text is Highlighted
Für Standard-Aufzählungen <ul>
wird eine kleine Grafik genutzt, die leicht ausgetauscht
werden kann.
<ul>
<li>Your text here</li>
</ul>
Für geordnete Listen <ol>
wurde etwas zusätzlicher CSS-Code eingefügt, damit sie etwas
gefälliger wirken.
<ol>
<li>Your text here</li>
</ol>
Um ein kreisförmiges Aufzählungszeichen zu nutzen, muss man nur die Klasse .circle
zum Tag <ul>
hinzufügen.
<ul class="circle">
<li>Your text here</li>
</ul>
Um ein quadratische Aufzählungszeichen zu nutzen, muss man .square
zum Tag <ul>
hinzufügen.
<ul class="square">
<li>Your text here</li>
</ul>
Title | |||
---|---|---|---|
Item: | Category: | Description: | Size: |
Bananen | Obst | Desc | 1KG |
Äpfel | Obst | Desc | 3KG |
Orangen | Obst | Desc | 2.5KG |
Mango | Obst | Desc | 6KG |
In Amazium wurden Stile für Tabellenelemente (z.B. Tabellenüberschriften) eingefügt. Außerdem besteht die Möglichkeit, gerade und ungerade Zeile unterschiedlich sowie einzelne Tabellenzellen unterschiedlich einzufärben.
Ziel von Amazium ist es, alle Elemente einer Webseite so darzustellen, dass sie mit jedem Gerät optimal dargestellt werden. Daher unterstützt Amazium auch die auflösungsadäquate Darstellung von Bildern. Man muss lediglich die Klasse class="max-img" hinzufügen, und das Bild wird entsprechend dem Raster angezeigt. Im folgenden Beispiel wird immer die selbe Bilddatei angezeigt.
<img src="images/blank.jpg" border="0" alt="blank image" class="max-img">
Wie bereits im Zusammenhang mit Bildern erwähnt, sollen alle Seitenelemente in das responsive Design einbezogen werden. Das betrifft dann natürlich auch die Anzeige von Videos.
Die Lösung, die das Framework anbietet, ist so effektiv wie simple. Man muss dem Code nur in ein div
einschließen, das die Klasse video-container
bekommt. So erfolgt auch die Videoanzeige responsiv.
<div class="media">
<iframe src="http://www.youtube.com/embed/d3J12dNz4xo" frameborder="0" allowfullscreen></iframe>
</div>
Auf jeden Fall muss man darauf achten, dass der von Youtube gelieferte Einfügecode ohne die Größenangaben übernommen wird.
Ein Problem kann es mit HTC Smartphones geben. Deren Browser kommen offensichtlich nicht mit dem aktuelleren Youtube Code klar. In solchen Fällen ist es sinnvoller, den Einfüge-Code alten Stils für zu verwenden. Allerdings, dass kann man aus dem Beispiel weiter unten erkennen , ist dieser Code deutlich umfangreicher.
<div class="media">
<object width="640" height="390">
<param name="movie" value="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash"
width="640" height="390" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>