Uikit - CSS Befehle - Spickzettel

Autor: Christian Hamberger, Kategorie: Warp 7, uikit, Widgetkit, Erstellt am: 09.08.2016, Bearbeitet: 02.09.2016, Aufrufe: 866

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.

Bsp Berge 200px

<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.

Bsp Berge 200px
Berge
<div class="uk-thumbnail">
<img src="/images/..." alt="Berge" />
<div class="uk-thumbnail-caption">Berge</div>
</div>

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 

 

 

 

 

Christian Hamberger
02.09.2016
Warp 7, uikit, Widgetkit
09.08.2016
866
Hinweis

Die Umsetzung der hier gemachten Lösungen und Vorschläge geschehen immer auf eigener Gefahr.