Erstellen Sie Websites Superfast mit Foundation 5 [Ein Leitfaden]

Die Verwendung eines Frontend-Frameworks kann Ihren Webdesign-Workflow auf viele Arten verbessern. Es kann Ihnen dabei helfen, moderne Designprinzipien wie Mobile-First-Ansatz, semantisches Markup und Responsive Design zu befolgen . Sie können von vielen gebrauchsfertigen CSS- und JavaScript-Elementen profitieren und Ihren Entwicklungsprozess erheblich beschleunigen, sodass mehr Zeit für die visuelle Gestaltung und die Gestaltung des Benutzererlebnisses bleibt .

Zurb Foundation 5 ist eines der leistungsfähigsten Frontend-Frameworks auf dem Markt. Es ist logisch aufgebaut, einfach zu bedienen und völlig kostenlos. Sie können ein flexibles CSS-Raster verwenden, das die Erstellung eines sauberen, benutzerfreundlichen Layouts erleichtert . Das Foundation-Framework wird ebenfalls stark getestet. Es kümmert sich um die browserübergreifende und geräteübergreifende Kompatibilität.

In diesem Tutorial zeige ich Ihnen, wie Sie mit Zurb Foundation 5 superschnell eine Website erstellen können. Sie können sich das Endergebnis auf der Demo-Seite ansehen.

Ich werde das Layout der Website erstellen, die Aufgabe, subtile Designelemente hinzuzufügen, wartet auf Sie. Die Website, die wir zusammen in diesem Tutorial erstellen werden, wird den Traum des modernen UX-Designers erfüllen: Er wird reaktionsschnell, mobil - zuerst -, benutzerfreundlich und semantisch sein.

Aufgrund der Länge dieses Handbuchs finden Sie hier die Kurzbefehle, um schnell zum gewünschten Abschnitt zu gelangen:

• Herunterladen der Foundation 5
• Das Grid verstehen
  • Wann verwenden Sie die Large-N-, Medium-N- und Small-N-Klassen
• Hinzufügen der oberen Menüleiste
• Füllen des Hauptteils
  • Ein Panel für beliebte Beiträge hinzufügen
  • Hinzufügen von 3 weiteren Posts zum populären Panel
  • Das CSS aufpäppeln
  • Hinzufügen weiterer Inhalte
  • Seitenumbruch hinzufügen
• Die Seitenleiste auffüllen
  • Das Newsletter-Formular
  • Flex-Video
  • Das Sidebar-Menü
• Fazit

1. Herunterladen der Foundation 5

Sie können Foundation 5 in 4 verschiedenen Formen herunterladen:

1. der vollständige Code
2. eine leichtere Version mit nur dem wesentlichen Code
3. eine benutzerdefinierte Version, wo Sie anpassen können, was Sie brauchen und was nicht
4. eine Sass-Version, wenn Sie Ihre Variablen und Mixins in SCSS setzen möchten.

In diesem Tutorial werde ich den Complete-Code mit Vanille-CSS auswählen, aber natürlich können Sie auch andere Versionen wählen, wenn Sie Ihre Site optimieren und nur das verwenden möchten, was Sie wirklich brauchen.

Nachdem Sie die ZIP-Datei heruntergeladen und entpackt haben, öffnen Sie die Datei index.html in Ihrem Browser und Sie sehen etwa Folgendes:

Ja, die Devs enthalten nützliche Links in der Indexdatei. Sie können es so belassen und eine neue Datei für Ihren Prototyp mit dem Namen home.html oder etwas ähnliches erstellen, aber Sie müssen es nicht wirklich behalten, da Sie die Foundation-Dokumentation jederzeit erreichen können.

Öffnen Sie die Datei index.html in Ihrem bevorzugten Code - Editor und löschen Sie alles darin Abschnitt, aber vor dem Schließen

Die Stilregeln, die wir der app.css- Datei hinzufügen, um unseren Prototyp zu verschönern, sind folgende:

 Kopfzeile {margin-bottom: 2em; } .popular-zusätzliche h4 {font-size: 1.125em; Rand oben: 0.4em; } .row .row.popular-main {Rand-unten: 1.5em; } 

Da Foundation 5 relative Einheiten verwendet, müssen wir "em" -s oder "rem" -s anstelle von Pixeln verwenden, um mit den Regeln Schritt zu halten. (Hier können Sie mehr über CSS-Einheiten lesen: Pixel vs ems vs%.) Ich habe die Firebug-Erweiterung von Firefox verwendet, um festzustellen, wo ich die CSS-Regeln von Foundation 5 außer Kraft setzen muss.

Hier in diesem kurzen CSS-Snippet mussten wir Foundation's Standard-CSS nur einmal bei der letzten Regel (.row .row.popular-main) außer Kraft setzen. So sieht die Demo-Site jetzt aus:

4.4 Einige weitere Inhalte hinzufügen

Nach den gleichen Regeln wie zuvor fügen wir dem Hauptbereich der Seite noch weitere Inhalte hinzu. Der Inhalt, den wir jetzt hinzufügen werden, sind die neuesten Beiträge mit kleinen Vorschaubildern.

Foundation 5 hat wirklich coole vorbereitete Miniaturansichten, die wir in diesem Schritt verwenden werden. Foundation Thumbnails verwenden eine vorgefertigte CSS-Klasse namens "th", die wir zu den Bildern hinzufügen müssen, die wir als Miniaturbilder anzeigen möchten, so wie Sie sie im folgenden Code-Snippet sehen können.

Für jeden letzten Post fügen wir eine neue Zeile unterhalb des Populären Panels mit unserer benutzerdefinierten CSS-Klasse namens "aktuellste Post" hinzu .

Auf Tablet- und Desktop-Größe zeigen wir ein kleines Thumbnail mit der Foundation-Thumbnail-Klasse auf der linken Seite und den Titel und eine kurze Beschreibung auf der rechten Seite. Auf Mobilgeräten werden die Überschrift und die Beschreibung unter dem Thumbnail angezeigt.

Jetzt habe ich die Klassen "Medium-3 columns" und "Medium-9 columns" verwendet, um den Bildschirm in 1: 3 zu unterteilen, 25% für das Bild und 75% für den Text ab der mittleren Größe.

Fügen Sie das folgende Code-Snippet dreimal unter dem Popup-Bedienfeld ein (für die drei neuesten Posts). Hier schließe ich einfach den Code einer Zeile des letzten Posts ein, da alle dasselbe HTML-Markup verwenden, nur der Inhalt unterscheidet sich.

  4.5 Seitenumbruch hinzufügen 
In diesem Schritt fügen wir eine coole Seitennummerierung unter den neuesten Posts hinzu. Foundation 5 unterstützt uns mit praktischen, gebrauchsfertigen Paginierungsklassen. Wir verwenden den gleichen Code in diesem Schritt, den Sie im Abschnitt "Erweitert" in den Paginierungsdokumenten finden.
Hier sind die neuesten Beiträge mit dem neu hinzugefügten Bereich "Paginierung":
 5. Füllen der Seitenleiste 
Jetzt, wo wir mit dem Hauptinhalt unserer Demoseite fertig sind, ist es Zeit, die rechte Seitenleiste zu füllen. Die rechte Seitenleiste wird unterhalb des Hauptinhalts auf Mobil- und Tablet-Größe verschoben.
Sie müssen alle Code-Snippets in diesem Abschnitt in die einfügen 
  
  



Interessante Artikel






			
	
				

					22 beste Webinar-Tools zum Hosten von Online-Meetings
					

			
	
				

					5 VR Headset Alternativen zum Oculus Rift
					
						







			
	
				

					So verwenden Sie die Funktion "In-Depth-Artikel", um den Website-Traffic zu verbessern
					

			
	
				

					20 Toy Packaging Designs, die absolut bezaubernd sind