CSS-Klassen
Schriften
| fontSizeS - fontSize3XL | Größe der Schrift festlegen |
| textTwoColumn, textThreeColumn, textFourColumn | Texte werden in gleichmäßige Blöcke aufgeteilt |
| colorWhite, -Lightgray, -Gray, -Darkgray, -Black, -Main, -Second | Textfarbe auswählen |
Breite
| maxWidthContainerSize, maxWidth750, maxWidth700 | Maximale Breite von Containern wählen. ContainerSize entspricht dabei der maximalen Laufweite im Boxedmodus |
| fullWidth | Als Klasse eines Artikels festlegen, damit dieser die komplette Bildschrimbreite einnimmt. |
Margin / Padding
| mt0, mtXS bis mt2XL | Außenabstand Oben |
| mb0, mbXS bis mb2XL | Außenabstand Unten |
| pt0, ptXS bis pt2XL | Innenabstand Oben |
| pb0, pbXS bis pb2XL | Innenabstand Unten |
Buttons
| btn, btnWhite, btnGray, btnSecond | Buttonklassen, Standardfarbe ist die mainColor |
| hoveranimation | Hovereffekt, bei dem das Objekt einige Pixel nach oben wandert. |
Radius
| imageBorderRadiusXS - imageBorderRadiusXL | Rundet ein Bildelement ab |
| borderRadiusXS - borderRadiusXL | Rundet ein Element ab |
| borderRadiusXS - borderRadiusXL | Rundet ein Element ab |
Hintergrund
| .bgWhite, -Lightgray , -Gray, -Darkgray, -Black, -Main, , -Second | Hintergrundfarbe definieren |
Grid
| grid2Col - grid4Col | Erzeugt ein gleichmäßiges Grid mit X Spalten |
| grid-66-33, grid-33-66, grid-60-30-10, grid-50-25-25 |
Erzeugt ein Grid, anhand der Aufteilung |
Verschiedenes
| verticalAlignCenter | Richtet alle children dieser Klasse vertikal zentriert aus |
| grayImg | Bild ist grau, bis der User hovert |
Header
| imageHeader | Konzipiert für ein Text-Element. Text eingeben, Foto als Medium einbinden und Klasse vergeben |
| imageHeaderSmall | Lässt den Header auf die definierte Höhe schrumpfen. |
| imageHeaderColored | Färbt den Header in definierter Farbe ein. |
Folgende CSS-Dateien werden verwendet
| variables.css | In dieser Datei werden variable Werte wie den Farben, Abständen oder Smartphonegrößen gespeichert |
| font-setting.css | Die Schriftgrößen, Farben, Überschriften und mehr werden in dieser Datei definieren. |
| grid.scss | Definiert das responsive Grid. |
| margin-padding.css | |
| custom-elements.css | |
| main.css | In der main.css werden generelle Informationen wie der Wrapper-größe definiert |
| left-sidebar.css | |
| header-footer.css | |
| menu.css |