Share
960gs war großartig! Wenn die Mehrheit der Besucher Ihrer Website Desktops mit mindestens 1024 Pixeln breiten Bildschirmen verwendet, ist das Erstellen einer Website mit Code 960g ein Kinderspiel. Mit dem Aufkommen der Verbreitung von Geräten und der Verbreitung von Medienabfragen sind Sites mit fester Breite jedoch weniger effektiv als responsive Layouts.
In diesem Dokument werde ich beschreiben, wie Sie Ihre Site mit einer festen Breite von 960 g in das Fundament-Framework von ZURB verschieben. Ohne zu viel abzulehnen, möchte ich den 960g-Werten gerecht werden und erwähne adapt.js, die Antwort dieses Frameworks auf responsive Webdesign. In diesem Artikel werden nun die Grundlagen des Foundation-Grids, der Vergleich mit dem 960g-Grid und einige zusätzliche Optionen mit dem Foundation-Sass behandelt. Für dieses Tutorial gehe ich davon aus, dass Sie mit 960gs bereits vertraut sind und Foundation als einen Weg betrachten, um ein responsives Design zu erreichen.
Um zu beginnen, müssen Sie die grundlegenden Konzepte von Zeilen und Spalten in Foundation verstehen. Die Konvention von 960gs bestand darin, einen Mega-Container zu verwenden und sich auf jede Kombination von DIVs zu stützen, um eine Reihe zu erstellen. So wie:
Sie könnten eine haben zwischen Raster-DIVs geworfen, die sich auf 12 summieren, aber das ist optional. Dieses Layout würde tatsächlich zwei Zeilen mit zwei Spalten erzeugen, die die verfügbare Breite gleichmäßig teilen. Wenn Sie hinzufügen Alpha und Omega Klassen, es wird jeweils das Extra abstreifen Rand links und Rand rechts.
In den vordefinierten HTML-Klassen von Foundation würde dieses Layout mit dem folgenden Snippet erstellt:
Es gibt keinen Mega-Container für Foundation, stattdessen gibt es Zeilen und Zeilen, die Spalten enthalten, und Spalten müssen insgesamt 12 sein. Jede Spalte wird durch Hinzufügen von definiert Säulen Klasse, die von mindestens einer Klasse begleitet wird, um die Breite dieser Spalte festzulegen.
Kurz gesagt, das Foundation-Raster ähnelt den Zeilen und Spannweiten von Twitter Bootstrap. Mit Ausnahme von Foundation können Sie Spaltenbreiten an mehreren Haltepunkten definieren.
Sie werden die Notation bemerken mittel-6. Das bedeutet, dass an dem mittleren Haltepunkt (der definiert ist, der Standardwert 641px ist), sechs Spaltenbreite oder die Hälfte der verfügbaren Breite angezeigt wird. Eine weitere Klasse kann hinzugefügt werden, um anzugeben, wie viele Spalten der Wert ist div sollte an anderen Haltepunkten aufnehmen, einschließlich klein und groß. So würde das aussehen:
Grundlage ist mobil zuerst. Code für kleine Bildschirme zuerst und größere Geräte übernehmen diese Stile. Passen Sie bei Bedarf größere Bildschirme an. Quelle
Foundation ist standardmäßig in einem mobilen ersten Konzept konzipiert. Was dies für Netze bedeutet, ist das klein class kann alleine verwendet werden, um die Breite einer Spalte am kleinen Haltepunkt zu definieren, und alle Haltepunkte oben werden davon übernommen, solange a Mittel oder groß Klasse ist nicht anwesend. Auf der anderen Seite, wenn Sie nur eine Mittel Klasse, dann wandelt das standardmäßige Layout für kleine Haltepunkte die DIVs in übereinander gestapelte einspaltige Zeilen um (entspricht " klein-12) Dies ist die Standardeinstellung für Spalten im kleinen Haltepunkt.
In Anbetracht dessen sind die Grundlagen für das Ändern Ihres Markups wie folgt: Zuerst die div mit dem Container Klasse kann gelöscht werden. Als nächstes um deine Gitter_# DIVs, die "Reihen" bilden, müssen Sie eine div mit der Klasse Reihe. Die einzelnen DIVs enthalten Gitter Klassen können in geändert werden Mittel-#.
Dadurch erhalten Sie etwas, das Ihrem alten 960-g-Layout für Ansichtsfenster mit mehr als 640 Pixeln und unterhalb dieser Breite sehr ähnlich sieht. Sie haben nur Stapel mit voller Breite, dh jede Spalte div ändert sich auf 100% Breite.
Hier sind einige weitere 960g-Konzepte, die in Foundation-Sprachausdrücke übersetzt wurden:
In 960 g könnte die Verschachtelung durch Hinzufügen erfolgen Alpha zur ersten Spalte in Ihrer Zeile und Omega zu Ihrem letzten, horizontalen Ränder effektiv entfernen. Bei diesem Ansatz mussten die verschachtelten Zeilen die Summe der Spaltenbreite sein, in der sich die verschachtelten Spalten befanden.
In Foundation ist das Verschachteln für Sie erledigt, Sie müssen nur eine Zeile in eine Spalte einfügen. Keine zusätzlichen Klassen erforderlich. Der andere Hauptunterschied besteht darin, dass jede Nestreihe neue 12 Spalten innerhalb des verfügbaren Nestraums annimmt. Also eine Reihe in einem mittel-6 können Sie diese sechs Spalten in 12 teilen.
Die Präfix- und Suffixklassen von 960gs waren ausgezeichnete Hilfsklassen zum Erstellen von leerem Platz in Ihrem Layout und stellten Mittel zum Zentrieren bereit. Foundation verfügt über die gleichen Funktionen wie Offsets.
Das ist eigentlich in beiden Frameworks ziemlich gleich. Mit der Quellreihenfolge können Sie Ihre Spalten in beliebiger Reihenfolge in Ihrem HTML-Code erstellen, jedoch in einer anderen Reihenfolge von links nach rechts. Dafür können Sie verwenden drücken und ziehen Klassen.
Foundation deckt alle Funktionen von 960gs und vieles mehr ab. In den Dokumenten finden Sie weitere Informationen zu allen anderen Funktionen.
Nun, das ist der Hauptgrund, warum Sie sich in etwas wie Foundation bewegen: die Reaktionsfähigkeit. Du weißt über groß, Mittel und klein Haltepunkte gibt es aber auch xlarge und xxlarge. Diese Breakpoint-Klassen beziehen sich auf Folgendes:
| Haltepunkt | Breite des Ansichtsfensters |
|---|---|
| klein | < 40em (640px) |
| Mittel | 40.063 em (641px) < 64em (1024px) |
| groß | 64.063 em (1025px) < 90em (1440px) |
| xlarge | 90.063em (1441px)> 120em (1920px) |
| xxlarge | > 120.063em (1921px) |
Beachten Sie, dass nur die klein, Mittel und groß Haltepunkte können in Ihrem HTML-Code verwendet werden. Wenn Sie verwenden müssen xlarge oder xxlarge, Wenn Sie diese Haltepunkte anpassen möchten, können Sie die Arbeit mit Sass verwenden, um Foundation an Ihre Bedürfnisse anzupassen.
Foundation ist für die Arbeit mit Compass und Sass gebaut. Wenn Sie mit Sass etwas anfangen können, kann dies die Entwicklung erleichtern. Weitere Informationen zum Einstieg in Sass und Foundation finden Sie hier.
Der wichtigste Vorteil bei der Verwendung von Sass besteht darin, dass Sie Foundation-Attribute nicht einfach zu Ihrem HTML hinzufügen, sondern lediglich Foundation-Attribute basierend auf vorhandenem Markup erweitern können. Zum Beispiel das bestehende div mit der Klasse Nachrichten kann a nachgeahmt werden Raster-6 Spalten div.
Hier ist ein vollständiges Beispiel, wie dies aussehen könnte. Nehmen wir an, Sie haben diesen HTML-Code:
Um einen 50/50-Split von zu erreichen .Nachrichten und .Veranstaltungen, Dein Sass würde so aussehen:
.main @inkleine Rasterzeile; .news @ include-Spalte (6); .events @include grid-colmn (6);
Dies ist gleichbedeutend mit der Änderung des Markups:
Wenn Sie andere Haltepunkte in Ihr SCSS aufnehmen möchten, verwenden Sie einfach diese Technik:
.main @inkleine Rasterzeile; .news @ include-Spalte (8); @media # $ large-up grid-column (6) .events @include grid-colmn (4); @media # $ large-up Rasterspalte (6)
Welches ist das Gleiche wie:
Die SCSS-Technik ist schön, weil sie Ihre Klassen in Ihrem HTML-Code unübersichtlich hält und Sie semantischer werden lässt.
Es gibt noch eine wichtige Sache, die Sie über diese Methode verstehen müssen. Wenn Sie Ihr CSS in einem separaten, zusätzlichen Stylesheet kompilieren, möchten Sie jedoch die Foundation verwenden Mixins, Sie müssen importieren, was Sie brauchen, aber Duplizierung von Foundation-Styles vermeiden. Um zu vermeiden, dass redundante Stile zu Ihrem Ausgabe-CSS hinzugefügt werden, müssen Sie das angeben $ include-html-classes Variable als falsch, So sieht es aus:
@import "Gründung / Einstellungen"; $ include-html-classes: false; @import "Stiftung";
Beachten Sie, dass sich die Pfade je nach Ihren eigenen Einstellungen unterscheiden können. Auf diese Weise können Sie alle Mixins, Funktionen und Einstellungen in Foundation verwenden, ohne das gesamte CSS kopieren zu müssen. Dies ist praktisch, wenn Sie bereits Foundation CSS auf der von Ihnen bearbeiteten Seite verwenden. Diese Methode kann beispielsweise als Speicherort für alle Ihre Überschreibungen für eine spezielle Seite oder einen Teil der Seiten verwendet werden.
Dies ist nur der Tipp des Eisbergs: Foundation und Sass haben viel mehr zu bieten, und beide haben große Anhänger von Entwicklern, die sie beide weiter fortgeschritten und besser machen.
Accentsconagua