id: #91

Transition

Verschiedene Möglichkeiten für die Transitions.

Allgemeine Transition-Anweisung (all steht für alle)

@include transition(STYLE, 0.3s, ease);

Allgemeine Transition-Anweisung mit Prefix

@include transitionprefix(STYLE, 0.3s, ease);

Entfernung der Transition, welche als Standard gesetzt ist

@include transition-none

Verzögerung: Wert: 0.5s | 500ms

@include transition-delay(WERT);

id: #92

Navigation

Level 1

@include font-nav-l-1;

id: #93

Worttrennung

.hyphen-auto, .hyphen-none

aktivieren

@include font-trennung(auto);

deaktivieren

@include font-trennung(manual);

id: #94

Hintergrundbild

@include background;

id: #95

Rechnen

Berechnung mit unterschiedlichen Werten

ohne Variablen

calc(PROZENT - PIXEL);

mit Variablen

calc(#{$VAR1} - #{$VAR2});

gemischt

calc(PROZENT - #{$VAR});

id: #96

Transform

Skalierung
Einheit: Integer (1.00, 1.05, usw.)

Verschiebung
Einheit: px, %, em, rem, vh, vw, usw.
Minus Werte sind auch erlaubt.

Rundung
Einheit: px, %, em, rem, vh, vw, usw.
Beispiele: Ein Wert für alle Rundungen gleich (10px) | Jede Rundung separat (10px,5px,15px,20px);
Rundungen in Prozenangaben nur bei quadratischen Kontainern möglich

Drehung
Einheit: deg
Beispiele: 45° (45deg) | -45° (-45deg)

Ankerpunkt
Einheit: %
Beispiele: (0,0) oben links | (100%,0) oben rechts | (0,100%) unten links | (100%,100%) unten rechts

Wichtige Info: Bei Hover immer auch den Normalzustand eingeben

Skalierung (Werte 1.00 = 100%, 2.00 = 200%)

@include scale(factor);

Verschiebung des Kontainers in der X und Y Achse

@include position2d(xAchse, yAchse);

Rundung

@include borderradius(radius);

Drehung

@include drehung(grad);

Verschiebung Ankerpunkt auf X und Y Achse

@include anchorpoint2d(xAchse, yAchse);

id: #151

Breakpoint

Smartphone Hochformat

@include breakpoint(s) {

}

Tablet Hochformat

@include breakpoint(m) {

}

Tablet Querformat

@include breakpoint(l) {

}

Desktop

@include breakpoint(xl) {

}

Desktop

@include breakpoint(xxl) {

}

id: #157

Media Queries

Querformat ohne Breitenangabe

@include medialandscape {

}

Smartphone quer

@include mediaphonelandscape {

}

Touchscreens

@include mediatouch {

}

Animationen

Typografie

Kniffs

Abstände

Breakpoints

Media Queries