Vor ein paar Wochen der berühmte Rahmen der Stiftung veröffentlichte seine vierte Version. Wenn Sie noch nie von Foundation gehört haben, werden wir Sie durch dieses responsive Framework führen.

Da die Version 3 von Foundation von Grund auf mit SASS - einem CSS-Preprozessor, der beim Schreiben von effizienterem CSS hilft - erstellt wurde, ist diese neue Version auch für Mobilgeräte optimiert und bietet viele Funktionen in ihrem Grid, die Sie nicht verwenden. t bekommen von anderen Frameworks.

Lass uns in die Foundation eintauchen und sehen, warum sie so beliebt ist ...

Das Gitter

Foundation verwendet ein neigbares Raster mit 12 Spalten, das sich an jede Bildschirmgröße anpasst. Wenn Sie bereits Raster verwendet haben, sollte Ihnen dies sehr vertraut sein. Alle divs in Foundation verwenden Box-Sizing: border-box, so dass die Ränder und die Auffüllung nicht die Breite und Höhe des Elements beeinflussen, was die Mathematik für uns etwas einfacher macht. Aber das Erstaunliche am Grid der Foundation ist, dass Sie tatsächlich 2 Grids bekommen, ein großes Grid, wenn der Bildschirm größer als 768px ist und ein kleineres Grid, das Sie ebenso einfach steuern können. Zu diesem Zweck verwendet die Foundation die kleinen # und großen # Klassen wie folgt:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

In diesem Code haben wir eine Zeile erstellt, in der es drei divs gibt, die exakt dieselbe Breite haben, wenn der Browser breiter als 768px ist, aber wenn sie kleiner ist, wie die kleine Klasse in den divs zeigt, wird die letzte Hälfte die Hälfte einnehmen Während die anderen beiden jeweils 25% belegen, haben Sie immense Kontrolle darüber, wie unsere Website auf allen Bildschirmen aussehen wird.

Foundation ermöglicht es Ihnen auch, eine Spalte zu versetzen, mit der ich meine, dass Sie eine Zeile mit 2 Spalten haben können, die nur 3 Spalten breit sind, aber Sie können die zweite verschieben, dass sie nach rechts schwebt. Offset-Klasse oder die kleine Offset-Klasse:

3, offset 6

Gitter blockieren

Das Blockraster ist nur ein nettes kleines Extra, es ist eine Möglichkeit für Sie, den Inhalt einer Liste innerhalb des Rasters zu teilen. Es ist nützlich, wenn Sie möchten, dass dieser bestimmte Teil Ihrer Website unabhängig von der Größe der Website gleichmäßig verteilt bleibt Browser. Diese Art von Gitter verwendet das Small-Block-Grid und die Large-Block-Grid-Klassen. Wenn Sie nur das erste Gitter festlegen, behält das Gitter den gewünschten Abstand, unabhängig davon, wie das Ansichtsfenster aussieht, aber wenn Sie nur den Large-Block verwenden. Grid-Klasse Wenn das Ansichtsfenster den Haltepunkt von 768px erreicht, werden die Rasterelemente übereinander gestapelt. Sie können also immer mehr Kontrolle durch die Verwendung dieser beiden Klassen übernehmen:

Auf diese Weise werden die Bilder unabhängig von der Größe gleichmäßig verteilt. Wenn das Ansichtsfenster größer als 768 Pixel ist, belegt es nur eine Zeile und wenn es kleiner ist, belegt es zwei Zeilen mit jeweils zwei Bildern.

Die Hauptnavigation

Jetzt, da wir das Grid in Foundation abgedeckt haben und Ihnen in allen Umgebungen viel Kontrolle bieten, werden wir über etwas sprechen, das wir fast immer auf unseren Sites verwenden werden: eine Top-Navigationsleiste. Und natürlich kann diese Navigation auch flexibel sein, mit wenig oder keiner Arbeit mit diesem Framework. Um eine einfache responsive Navigation mit Foundation zu erstellen, verwenden Sie:

Mit diesem HTML-Code wird eine einfache Navigationsleiste erstellt, die links den Titel der Website und auf der rechten Seite vier Menüelemente enthält. Beachten Sie außerdem, dass bei einem Darstellungsbereich von weniger als 768 Pixeln dieses Menü durch ein Listensymbol ersetzt wird, das dieses Menü anspricht. Wenn Sie möchten, dass dieses Raster seine Position fixiert, während Sie die Seite nach unten scrollen, müssen Sie es nur in ein div mit einer Klasse von fixen umbrechen. Um Drop-downs zu Ihrer Navigation hinzufügen zu können, müssen Sie nur etwas an der Stelle hinzufügen, an die Sie Ihre Dropdown-Liste einfügen möchten:

#">  Untermenüpunkt 1
Untermenüpunkt 1
Untermenü Punkt 3

Es gibt auch die Möglichkeit, einen Teiler zu Ihrem Listenelement hinzuzufügen, indem Sie eine kleine graue vertikale Linie hinzufügen. Dazu müssen Sie nur ein Listenelement mit der Trennklasse zwischen den beiden Listenelementen platzieren, die Sie teilen möchten.

Tasten

Ohne einige vordefinierte Schaltflächen wäre kein Framework vollständig und in Foundation sind mehr als ein Button-Stil vordefiniert. Der Standard-Button hat eine blaue Farbe und fügt dann den Erfolgs-, Warn- und Sekundärstil hinzu. Durch Hinzufügen der Klasse des Radius geben Sie diesem Knopf ein wenig Rand-Radius und indem Sie ihm die Klasse der Runde geben , machen Sie den Knopf fast vollständig rund. Sie können der Schaltfläche auch die deaktivierte Klasse hinzufügen und es gibt 4 Größenklassen, um die Schaltfläche so groß zu machen, wie Sie sie benötigen.

StandardschaltflächeKleiner KnopfKleiner KnopfGroßer KnopfSekundäre TasteErfolgsknopfAlarmknopfRadius-SchaltflächeRunder KnopfDeaktivierte Schaltfläche

Um eine einfache Dropdown-Schaltfläche zu erstellen, müssen Sie lediglich die Dropdown-Klasse nach der letzten Klasse hinzufügen:

  h1 Unterprogramm 
  h1.  Kleiner 
  Listenpunkt 
  Listenpunkt 
  Link 1
Link 2

Wie Sie sehen, gibt uns Foundation bei der Typografie einige grundlegende Hilfestellungen und dann einige zusätzliche Kurse, um all unsere Bedürfnisse zu erfüllen.

Andere Komponenten

Wenn diese Demonstration des Foundation-Frameworks Lust macht, mehr zu lernen und mit der Foundation zu beginnen, sollten Sie sich die Dokumentation wirklich ansehen, denn Foundation bietet auch zusätzliche CSS-Komponenten an:

• Benachrichtigungsboxen
• Paneele
• Preistabellen
• Fortschrittsbalken
• Tabellen
• Vorschaubilder
• Flex-Video

Und auch einige Helfer JavaScript wie:

• Clearing
• Dropdown-Liste
• Joyride
• Magellan
• Orbit
• Verraten
• Sektion
• Tooltipps

Wie Sie sehen können, gibt es eine Menge zu erforschender Foundation, und ich rate Ihnen dringend, sich alle CSS- und JavaScript-Eigenschaften anzusehen.

Fazit

Wir haben gerade genug in diesem Artikel behandelt, um zu sehen, wie Foundation helfen kann, schnellere und reaktionsschnellere Websites zu erstellen. Mit seinem Grid erhältst du viel mehr Kontrolle über die Struktur deiner Website als mit einem normalen flexiblen Grid und Foundation bietet dir auch viele Helfer um deine Website zu erstellen. Ich hoffe, dieser Artikel hat Ihnen den Anstoß gegeben, Foundation für Ihr nächstes Projekt zu lernen und zu nutzen.

Haben Sie die Foundation für ein Projekt genutzt? Welche Funktionen haben Sie am nützlichsten gefunden? Lassen Sie es uns in den Kommentaren wissen.