Uikit 2 - CSS Befehle - Spickzettel
Das CSS-Framework Uikit von Yootheme ist eine attraktive Alternative zu Bootstrap. Hier eine Übersicht von wichtigen CSS Markups. Dieser Spickzettel dient zur Erleichterung der Arbeit mit Uikit.
Bilder
Bilderrahmen
Dem Tag img, a oder figure die Klasse uk-thumbnail geben.
<img src="/images/..." alt="Berge" class="uk-thumbnail" />
Bildunterschriften
Einen umschließenden Tag z. B. div oder a wird die Klasse uk-thumbnail zugeordnet. Dieser enthält das img Tag, sowie ein weiteres div, welches die Klasse uk-thumbnail-caption bekommt.
Hinweis: Wird ein Block Element wie z.B. div mit einem uk-thumnail versehen wird es zum einem Inline Element. Bei einer gewünschten Zentrierung muss das Mutter Block Element mit uk-text-center versehen werden.
<div class="uk-thumbnail">
<img src="/images/..." alt="Berge" />
<div class="uk-thumbnail-caption">Berge</div>
</div>
Außen-Abstände
Grundbefehl: uk-margin
Model: uk-margin-GRÖßE-RICHTUNG uk-margin-GRÖßE uk-margin-RICHTUNG
Beispiele: uk-margin-small-top uk-margin-large uk-margin-bottom
Größen: small, large Richtungen: top, right, bottom, left
Textformatierung
| Befehl | Beispiel |
uk-text-small |
Text Text Text Text Text |
uk-text-large |
Text Text Text Text Text |
uk-text-bold |
Text Text Text Text Text |