The little Fox - CSS / SASS Template

Dieses SASS / CSS Template ist ein modular aufgebautes Template, welches mit verschiedenen Containern und Verschachtelungen dieser auftritt. Je nach Bedarf und Layout können die vorgefertigten div-Container individuell verwendet werden. Dieses ist nur eine Sammlung von verschiedenen Möglichkeiten, auf die zurück gegriffen werden kann.

Über eine "_variables.sass" werden verschiedene Relevante und immer wiederkehrende Parameter festgelegt. So z.B. die Farbgestaltung (Haupt-, Sekundär- und eine so genannte Standardfarbe), oder auch die Gesamtbreite des Inhalts kann einfach angepasst werden.

Über die obere Navigation werde ich nach und nach weitere Elemente zur modularen Gestaltung einer Webseite hinzufügen. Dazu zählen unter anderem Buttons und Formulare.

Container Template mit Rahmen

Hier haben wir einen Hauptcontainer (Hauptfarbe als Hintergrundfarbe und Sekundärfarbe als Schriftfarbe) mit innenliegenden Containern (Hintergrundfarbe ist Secondary und Schriftfarbe ist Hauptfarbe). Diese innenliegenden Container haben einen äußeren Abstand von "margin: 10px" und inneren Abstand von "padding: 10px".

Die Bilder sind entweder als Source oder Hintergrundbild im betreffenden div-Container eingebettet.

H3 Header

100%

H3 Header

50%

H3 Header

33%

H3 Header

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

H3 Header

25%

H3 Header

25%

H3 Header

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor ...

Container Template ohne Rahmen

Hier werden die folgenden Container ohne Margin und nur mit Padding erstellt. Die Farbgestaltung ist je nach Wunsch zwischen Standard (weißer Background und festgelgte Hauptfarbe als Schriftfarbe), main (Background ist die Hauptfarbe, Schriftfarbe die Sekundärfarbe) und secondary (Hintergrund ist Sekund und Schriftfarbe als Hauptfarbe).

Die Breite der inneren Container kann zwischen full (100%), half (50%) und third (33,33%) unterteilt werden. Die Breite ist full responsive und ab einer festgelegten Größe ($responsive_width) wird diese auf 100% Breite umgeschaltet.

Die Bilder können entweder als div-Container oder als Source mit "alternative Text" für SEO eingebunden werden.

Full Main

Ein voller div-Container auf 100% gesetzte Breite mit der zusätzlichen Farbgebung "main" in der Klasse class="full", welches den Hintergrund auf die Hauptfarbe ($color_main) setzt und die Schriftfarbe auf die Sekundärfarbe ($color_secondary) festlegt. Mit dem Zusatz "secondary" wird diese Farbgebung umgekehrt. Ohne Klassenzusatz wird die Standard-Farbgebung auf weißer Hintergrund und Hauptfarbe als Schriftfarbe festgelegt.

In diesem Container ist der Titel auf "h2" gesetzt und dementsprechend fett und größer.

Half

Div container mit jeweils 50% Bildschirmbreite und in diesem Fall ohne Farbcodierung. Das Bedeutet dass ohne die Zusätze "main" oder "secondary" in der Klasse class="half" diese Farbgebung gilt: weißer Hintergrund und Schiftfarbe gleich der Hauptfarbe ($color_main).

Bei einer responsiven Bildschirmbreite von 699px werden die Container 100% Breite gesetzt.

In diesem und allen darauf folgenden Containern ist der Titel auf "h3" eingestellt.

Half Secondary

Auch hier ist die Breite 50% jedoch durch den Zusatz "secondary" in der Klasse class="half" die Farbgebung folgend festgelegt wird: Hintergrund gleich der Sekundärfarbe ($color_secondary) und die Schriftfarbe ist die Hauptfarbe

Half

Dieser Container ist ebenfalls auf 50% der Gesamtbreite ($main_width) oder der Bildschirmbreite angepasst. Jedoch wird der jeweilige andere div-Container mit der Klasse "half_img" und einem eingebundenen Bild img src="" gefüllt. Dieser kann entweder Links oder rechts (respektive im Code darüber oder darunter) angeordnet werden.

Das responsive Verhalten ist wie bei bei dem oberen div-Container.

Half Secondary

Dieses Containerlayout ist gleich des darüber liegenden Containers, nur dass die class="half" mit dem Zusatz "secondary" die Farbänderung hervorruft (Hintergrund: Sekundärfarbe / Schriftfarbe: Hauptfarbe). Mit dem Zusatz "main" werden die Haupt- und Sekundär-Farbgebung umgekehrt.

Half Twothird

Hier ist das Layout des Containers so aufgebaut, dass 1/3 von einem Bild eingenommen werden. Die übrib gebliebenen 2 Drittel werden von einem Text-Container mit Standard-Hintergrundfarbe und die Textfarbe von der Hauptfarbe des Layouts bestimmt wird

Selbstverständlich kann man diesen Container mittels den Zusätzen "main" oder "secondary" in der class="half-twothird" farblich anpassen.

Die Breite des Bildcontainers ist 1/3 des Bildschirms, bzw. 1 Drittel der festgelegten Maximalbreite ($main_width) in der "_variables.sass" Datei.

Das Bild wird als Div-Hintergrund eingebettet und unter der Klasse "img_1" im CSS verändert. Für weitere Bilder in diesem Layout muss eine weitere Klasse "img_2" im Stile der "img_1" in der SASS-Datei hinzugefügt werden.

Third Main

Breite: 100% / 3 bei mehr als 401px Bildschirmbreite
Responsive Breite 100% bei 401px Bildschirmbreite
Hintergrundfarbe: festgelegte Hauptfarbe
Schriftfarbe: festgelegte Sekundärfarbe

Third

Hintergrundfarbe: Bodyfarbe
Schriftfarbe: festgelegte Hauptfarbe

Third Secondary

Hintergrundfarbe: Standard-Hintergrundfarbe
Schriftfarbe: festgelegte Hauptfarbe

Footer / Fussnavigation

Im Folgenden wird der Footer aufgebaut, welcher mit vorgefertigten Social-Media Icons zu den entsprechenden Profilen und Kanälen verlinkt werden kann. Es handelt sich hierbei um eingebundene SVG-Dateien die Individuell mit der Sekundär-Farbe und bei "hover" mit der Standard-Farbe gefüllt werden.

Des Weiteren Gibt es eine kleine Standard-Fussnavigation zum Kontakt, Impressum und Datenschutzrechtlichen Unterseiten verweist.

Bei bedarf kann darunter ein regionaler / lokaler oder deutschlandweiter Linkbaum aufgebaut werden, der vorgefertigt in 5 Elementen responsiv aufgebaut wurde. Die Anzahl der Elemente und Links müssen manuell an die Bedürfnisse angepasst werden.