Mein SASS Projekt der responsive Website hat einen schon einen recht stabilen Stand, so dass man die Seite verwenden kann. Mal sehen, welche Erweiterungen ich als nächstes implementieren werde. Dies sind die aktuellen Erneuerungen …
BEM (Naming convention) Schreibweise
Detailierte Information zur „Block_Element-Modifier“ Schreibweise git es hier.
Um uferlose Klassen-Namen zu vermeiden, kürze ich die Elemente ab.
Ein „_image“ wird zu „_img“. Die Abkürzungen sind in der SASS Datei kommentiert.
diverse Erweiterungen in SASS Mixins
Möglichkeit von Themes (2 Theme-Demos sind angelegt)
Schrift, Icons und Farben sind in Themes definiert.
Smooth Scrolling (JS)
Die Sichtbarkeit der „langen“ Website visualisiere ich nicht durch ein „störenden“ Pfeil nach unten, sondern lasse die Seite zum nächsten Container nach unten scrollen, sobald auf das Logo geklickt wird. (Ausser Logo und Menü-Icon ist kein weiteres Element aktiv)
Parallax Image Container (JS)
Das CSS zum Container habe ich in ein Sass Mixin gepackt. Die Funktion selbst steckt in der „effects“ JavaScript Datei.
Kontakt Formular aktiv (JS, PHP)
Die Input Validierung ist jetzt nicht bis in das Kleinste ausgereift. Es wird lediglich eine Zeichenlänge abgefragt. Die Abfrage findet beim Verlassen des Input Feldes statt, sowie beim finalen absenden des Formulars. Die E-Mail Versandt Funktionalität ist nicht integriert.
Der Button gibt den Sende-Status zurück – Fehlerhaft oder Erfolgreich mit persönlicher Anrede mit dem Vornamen.
Meta Icons
Neben dem Favicon sind auch die aktuellen mobilen Touch-Icons integriert.
Demo Seite (visualisiert die „Dark“ Theme)
Da dies ein fortlaufendes Projekt ist, kann es immer wieder zu Änderungen kommen. Infos des aktuellen Standes, sowie Link zum DEMO steht in der README in meinem GitHub Verzeichnis.