1. Sass Variablen:
prefix aus ersten 2 Buchstaben. z.B. $co = color aber: $ff = font-family und $fs = font-size
z.B. $fsHeadlineSmall: 24px;
Farbnamen: entweder aussagekräftige Bezeichnungen wie $coRed oder $coGreen oder $coPrimary, $coSecondary oder z.B. $coMmenuBackground
Schattierungen kommen an das Ende, also z.B. $coRedLight $coGreenDark oder als Prozentangabe: $coGrey20 (entspricht 20% von $coGrey)
2. Css Klassen:
css-klassen-werden-mit-einfachem-dash-geschreiben
z.B. .font-arial-bold oder .font-size-headline-small
3. Utility Klassen & Extendables: .
utility--klassen--werden--mit--doppeltem--dash--geschreiben -> Klassenamen sollten die Eigenschaften-Hierarchie wiedergeben. Vom Allgemeinen ins Spezifische.
zB. Für Utilities: .font--arial--bold oder .font--size--headline--small
oder für Extendables:
%__font--arial--bold oder %__font--size--headline--small
4. Dateiaufteilung / Sektionierung von sass files -> Dateistruktur
Jenseits der main.scss sollten alle Deklarationen, die sich logisch einfach abgrenzen und kapslen lassen, sollten in eigene Dateien ausgelagert werden.
z.B. _variables.scss, _mixins.scss, _utilites.scss, _keyframes.scss, _fonts.scss, _extendables.scss
Alles CSS, das Module (Plugins/Extensions/etc.) beschreibt, sollte im Ordner Modules abgelegt werden. Wenn ein Modul auf mehr als eine Datei aufgeteilt ist, sollte es in jeweils einem eigenen Ordner unterhalb von Modules abgelegt werden.
z.B. h2template/Resources/Private/Scss/Modules/hamburger
5. Mediaqueries
Mediaqueries sollten auf Ebene der CSS-Klasse umgesetzt werden. Dafür stehen entweder die fertigen Breakpoint-Utilities von Bootstrap zur Verfügung:
@include media-breakpoint-up(lg){
}
@include media-breakpoint-down(lg){
}
@include media-breakpoint-only(lg){
}
@include media-breakpoint-between(sm,lg){
}
Oder es wird das Mixin in unserem Dummy benutzt:
@include makeBpProperty(height,{height-xs}, {height-sm}, null, {height-lg}, {height-xl});
(Es muss nicht für jeden Breakpoint ein Wert gesetzt werden. Das entsprechende Mediaquery wird nur compiliert, wenn ein anderer Wert als "null" gesetzt ist.)
Bei Sonderfällen, die von den oben genannten Beispielen abweichen, können auch individual queries angelegt werden.
@media print and (max-width: 600px) {
}
Beispiel:
.top {
@include makeBpProperty(height, calc(100vh - 370px), calc(100vh - 440px), calc(100vh - 460px), calc(100vh - 261px), calc(100vh - 361px));
.logos {
@media print and (max-width: 600px) {
display: none;
}
.logoItem {
@include media-breakpoint-up(lg) {
max-width: 25%;
}
@include makeBpProperty(padding-right, 15px, null, 20px, 30px, null);
}
}
}
6. includes zB icomoon
Den kompletten heruntergeladenen icomoon Ordner in folgenden Ordner ablegen typo3conf/ext/h2template/Resources/Public/Icons, so dass der $icomoon-font-path unserer Variable $icomoon-font-path: '#{$iconPath}icomoon/fonts' entspricht.
Die beiden Dateien:
style.scss
variables.scss
in den Ordner typo3conf/ext/h2template/Resources/Private/Scss/Modules/icomoon kopieren und in der main.scss inkludieren.
Sollten zu einem späteren Zeitpunkt neue Icons zu dem Iconset hinzugefügt werden, kann der Prozess genauso wiederholt werden.
- neue zip herunterladen
- Inhalt in typo3conf/ext/h2template/Resources/Public/Icons/icomoon werfen
- style.scss und variables.scss in typo3conf/ext/h2template/Resources/Private/Scss/Modules/Icomoon/ kopieren
- fertig
7. Font-Handling
Google Fonts oder andere CDN Webfonts werden als einfacher @import in der _fonts.scss (gleiche Ebene wie main.scss) hinterlegt:
z.B. @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
andere Webfonts können über unser mixin "font-face" inkludiert werden:
z.B. @include font-face(DIN-Demi, #{$fontPath}DIN2014-Demi/font, normal, null, woff woff2);
Schriftschnitte sollten immer einen generischen Fallback haben (sans-serif,serif):
.font-regular {
font-family: Lato, sans-serif !important;
font-weight: 400;
}
Ausserdem ist es sinnvoll verschiedene Klassen für verschiedene Anwendungen zu deklarieren:
Css-Klasse, die im HTML Markup benutzt wird. Dabei sorgt das !important dafür, dass jede Vererbung unterbrochen wird und die Deklaration erzwungen wird.
.font-regular {
font-family: Lato, sans-serif !important;
font-weight: 400;
}
Css Klasse als extendable. Sollte mit @extend keyword (z.B. @extend %__font--regular;) in anderen Css-Klassen benutzt werden.
%__font--regular {
font-family: Lato, sans-serif;
font-weight: 400;
}
Dadurch entsteht z.B. folgendes compiliertes CSS:
.font-regular,
#bookingSearch .filterHead,
#bookingSearch .filterForm .selectWrap,
.tx-h2booking .filterForm .selectWrap select,
.tx-h2booking .acco-item .accommodation .priceWrap,
.tx-h2booking .owlShow .owl-city .priceWrap,
.tx-h2booking .accoBox .imgWrap .priceWrap {
font-family: Lato, sans-serif;
font-weight: 400;
}
Font-Grössen:
Je nach Bedarf ist es sinnvoll, die im Screendesign definierten Schriftgrössen am Anfang eines Projektes auf verallgemeinerbare einzelne Sets zu unterteilen.
z.B. Mainlines, Sublines, Paragraphs etc.
Diese sollten dann in der _fonts.scss initial durchdekliniert werden.
z.B.
.font-size-mainline {
@include makeBpProperty(font-size, 18px !important, null, 24px !important, null, null);
}
%__font--size--mainline {
@include makeBpProperty(font-size, 18px, null, 24px, null, null);
}
etc.
Die einzelnen Font Klassen sollten sich immer nur auf eine Eigenschaft beschränken, um sie so universell wie möglich zu halten.
z.B. nicht line-height, font-size und font-weight in einer Klasse benutzen