Joe Workman erstellt im Video eine recht einfache Seite, aber daran wird das Prinzip deutlich, wie das geschieht (und es ist ein deutlich anderer Weg, den du bisher von Foundation 1, aber auch von allen anderen Stacks-Projekten kennst).
Hier die einzelnen Schritte zur Foundation-6-Webseite. Wenn du auf die Links klickst, springst du zum jeweiligen Abschnitt des Youtube-Videos:
Konfiguration des Site Styles Stacks:
Headerbereich mit Hintergrundbild und Seitentitel
- Einfügen eines Banners und eines Seitentitels mit Hilfe eines Content-Containers und eines Background Swatches; Formatierung einer alternativen Textfarbe über Custom Classes
- Zentrierung des Seitentitels über die Content Alignment Settings des Columns Stacks
- Festlegung der Höhe des Banners mit Hilfe eines Height Swatches und Custom Classes
- Vertikales Verschieben des Seitentitels über die Alignment Settings des Columns Stacks
- Einfügen eines Overlays zwischen Bannerbild und Seitentitel - entweder durch Farbzuweisung im Header Stack oder durch einen Overlay Swatch und Custom Classes
- Anpassung der maximalen und minimalen Textgröße des Seitentitels durch einen Fit Text Swatch und Custom Classes
- Hinzufügen einer Schattierung durch einen Shadow Swatch und Custom Classes
Einfügen und Formatieren von Content Stacks
- Hinzufügen von Content: Container Stack, 2 Columns Stack, Text Stack, Picture Stack
- Hinzufügen eines Abstands zwischen Banner/Header und Content und Festlegung der Randabstände der Content Stacks über die Spacing Einstellungen des Columns Stacks
- Hinzufügen von Content: Container Stack, Card Layout Template, Kopieren der Swatches im Template nach Site Styles Stack
- Festlegung der HTML 5 Tags zu Inhaltsbereichen: Header, Section
- Feinabstimmung der Randabstände (Padding) über einen Padding Swatch, Classes Swatch und CSS Selector
- Geräteklassenspezifische Vorgaben für die Contentbreite am Beispiel von mehrspaltigen Columns Stacks über die Sizing Einstellungen für jede einzelne Spalte
- Anspruchsvollere Einstellungsmöglichkeiten mit Hilfe eines Grid Pro Stacks am Beispiel eines Columns Swap Templates
- Anspruchsvollere Einstellungsmöglichkeiten mit Hilfe eines Grid Pro Stacks am Beispiel eines Columns Swap Templates: Vorgaben für die Reihenfolge der Container in der Mobilausgabe über die Ordering Einstellungen
Anlegen eines Kontaktformulars
Anlegen eines Footers
Layoutanpassungen
Einrichten einer Seitennavigation
- Einrichtung einer Seitennavigation mit Logo mit Hilfe des Menu Stacks: Einfügen der Links und Anlegen einer Dropdown Zone für das Logo, Positionierung und Formatierung des Menüs. Veränderung der Schriftgrößen über ein Font Style Swatch und Custom Parent Classes. Anpassung des Hintergrundes über ein Background Swatch und Custom Classes. Anpassung der Randabstände mit Hilfe eines Padding Swatches und Custom Classes. Konfiguration der seitenbreiten Darstellung des Menüs über die Sizing-Einstellungen des Containers, in welchen das Menü eingefügt wird
- Feinabstimmung der geräteklassenübergreifenden Darstellung der Navigation: Verstecken bzw. Geräteklassenabhängige Positionierung des Logos über Custom Classes. Anwendung eines Center Logo Templates
Animationen
Untertitel unter Bildern
Organisieren der Swatches
Weitere Beiträge zum Thema werden folgen...
------
Bildquelle: ZURB