Crash-Kurs YUI-Raster-CSS

Die Yahoo User Interface Library ist ein ziemlich umfangreicher Satz von JavaScript-Tools für Entwickler. Unbemerkt bleiben einige nützliche Komponenten der Bibliothek, die das Codieren beschleunigen: einige CSS-Bibliotheken. Heute möchte ich Ihnen die YUI Grids CSS-Bibliothek vorstellen.

---

Warum?

Warum sollten Sie überhaupt die Verwendung der YUI-Grids-CSS-Bibliothek in Betracht ziehen (nachstehend als "YUI-Grids" bezeichnet)? Was zeichnet es aus? Andere Raster-Bibliotheken habe ich nicht ausführlich betrachtet, aber ich finde diese Dinge überzeugend:

• Gute Namenskonventionen

  YUI-Grids verwenden leicht zu merkende IDs und Klassen sowie Clean Markup. Wenn Sie es einmal gelernt haben, können Sie innerhalb eines Monats zu Ihrem Code zurückkehren und wissen, welche Teile von YUI stammen und was jedes Stück tut.

• Kostenloses Hosting von Dateien

  Dadurch wird die Last zweimal reduziert: Sie müssen die Datei nicht auf Ihrem Server hosten, und das Laden der Seite ist schneller, wenn der Client die Datei zwischengespeichert hat.

• Kompatibilität mit gängigen Anzeigengrößen

  Yahoo hat in Seitenbreiten gebacken, die den Anzeigenrichtlinien des Interactive Advertising Bureau entsprechen.

• Viele Layoutoptionen

  Mit mehreren Vorlagen und der Möglichkeit, Seitenbereiche zu verschachteln, gibt Yahoo an, mehr als 1000 Layoutkombinationen zu bieten ... alles in weniger als 5 KB.

YUI-Grids sind natürlich nicht perfekt. Es ist ein wenig einschränkend, wenn es um die Breite der vorgebackenen Seitenleiste geht; Wenn sie jedoch Ihren Bedürfnissen entsprechen, sparen Sie beim Erstellen Ihrer Website viel Zeit, Programmieraufwand und Kopfschmerzen.

---

Ressourcen

Zu Beginn sind hier einige Ressourcen, die hilfreich sein werden.

• Die YUI Grids-CSS-Startseite: Der Ort, an den Sie sich nach dem Lesen dieses Artikels wenden
• The Grids Builder: Ein Tool, mit dem Sie Ihre Seite mit ein paar Klicks erstellen können - eine großartige Hilfe, um schnell den Überblick über YUI-Grids zu bekommen!
• Der Spickzettel: Ein einseitiges PDF mit allen YUI-Raster-Konventionen

---

Bausteine

Bevor wir in das Nötigste geraten, wollen wir uns die Bausteine ​​der YUI-Gitter ansehen. Es gibt fünf verschiedene Strukturen, mit denen Sie Ihr Layout entwickeln werden. Jede dieser Strukturen wird entweder durch eine ID oder eine Klasse (normalerweise eine Klasse) definiert. Sie sind wie folgt:

1. Dokumentieren
2. Vorlage
3. Blöcke
4. Gitter
5. Einheiten

---

Dokumentieren

Offensichtlich ist Ihre gesamte HTML-Datei das Dokument, aber in unserem Fall ist es auch das div direkt im Körper - das div, das alles enthält. Hier definieren Sie die Breite Ihrer Site. YUI-Raster bieten Ihnen 4 Breitenoptionen: 750px, 950px, 100% oder 974px. Diese Breiten sind keine hartcodierten Pixel. Sie sind Ems. Die Seite wird also fließend angepasst, wenn der Benutzer die Schriftgröße ändert. Wenn dies nicht der Fall ist, hat Yahoo die Definition einer benutzerdefinierten Breite zu einem Kinderspiel gemacht. Hier ist der Code zum Erstellen eines Dokuments mit einer Breite von 800 Pixeln:

# custom-doc margin: auto; / * Diese beiden Werte sind als * / text-align: left erforderlich. / * Sie helfen YUI-Rastern, die Seite zu zentrieren * / width: 61.54em; / * 800px / 13 = em-Wert für die meisten Browser * / * width: 60.00em; / * 800px / 13.333 = em-Wert für IE * / min-Breite: 800px; / * optional, aber empfohlen * /

Verwenden Sie zum Festlegen der Breite einfach die ID von doc, doc2, doc3 oder doc4 entsprechend den oben angegebenen Werten.

---

Vorlage

Es stehen sieben Vorlagen zur Auswahl. Die ersten sechs definieren ein zweispaltiges Layout. Jedes hat eine andere Breite oder Ausrichtung für die Seitenleiste, wobei die Hauptspalte den Rest der Breite des Dokuments einnimmt. Die Vorlagen sind 1) 160px auf der linken Seite, 2) 180px auf der linken Seite, 3) 300px auf der linken Seite, 4) 180px auf der rechten Seite, 5) 240px auf der rechten Seite und 6) 300px auf der rechten Seite. Um die Vorlage Ihres Wunsches zu erhalten, fügen Sie einfach eine Klasse von yui-t # zu dem Div hinzu, in dem Sie Ihr Dokument definiert haben (ersetzen Sie das # durch die obigen Zahlen). Wie ich bereits erwähnt habe, handelt es sich bei diesen Seitenleisten um Standardwebbreiten für Anzeigen, so dass jede Werbung bequem in sie passen sollte.

Das siebte Template-yui-t7 ist nicht so gut dokumentiert (seltsam, es ist nicht auf dem Spickzettel, mit dem ich oben verlinkt habe, aber es ist auf dieser älteren Version). Es subtrahiert die Seitenleiste und gibt Ihnen eine Spalte mit voller Breite (die später in Spalten unterteilt werden kann)..

---

Blöcke

Die Blöcke sind die tatsächliche Manifestation der von Ihnen in der Vorlage definierten Spalten. Sie sind einfach zwei Divs innerhalb des Dok-Div, beide mit yui-b klassifiziert. Glücklicherweise müssen sie keine unmittelbaren Kinder des Hauptdivits sein. Yahoo gibt dieses Beispiel an:

 
 
 <-- Header Content --> 
 
 
 
 <-- Main Content --> 
 
 
 <-- Sidebar Content --> 
 
 
 <-- Footer Content --> 
 
 

Sie können am Beispiel sehen, dass Sie die Blöcke nicht direkt in das root -div einfügen müssen. Auf diese Weise können Sie Kopf- und Fußzeilen in voller Breite verwenden, was im Allgemeinen eine gute Idee ist. Sie werden feststellen, dass sich der Hauptinhaltsblock in einem Div mit einer ID von Yui-Main befindet. Mit YUI-Grids haben Sie die Möglichkeit, entweder die Sidebar oder die Hauptspalte an erster Stelle in Ihrem Code zu haben. Dies kann von Vorteil sein, wenn Sie über SEO oder Zugänglichkeit nachdenken.

---

Raster & Einheiten

Ich habe Gitter und Einheiten gruppiert, weil sie sich sehr ähnlich sind. beide sind divs. Ein Raster (definiert mit der Klasse yui-g) teilt zwei Kindern (normalerweise Einheiten) mit, ihre Breite gleichmäßig zu teilen. Eine Einheit (Klasse yui-u) sollte immer das untergeordnete Element eines Rasters und das übergeordnete Element Ihres Inhalts sein.

Was ist also der Unterschied zwischen einem Block und einem Gitter??

• Blöcke
  • Werden nur zum Definieren von Gesamtseitenspalten verwendet
  • Wird nur verwendet, wenn Sie die Vorlagen 1 - 6 verwenden
  • Werden nur einmal verwendet (daher sollten Sie niemals mehr als 2 divs.yui-b auf einer Seite haben)
• Gitter
  • Werden verwendet, um Bereiche (z. B. Ihren Hauptblock oder ein anderes Gitter) in Spalten zu unterteilen
  • Werden auf einer Vorlage verwendet
  • Sind nestbar

Immer, wenn Sie mehrere Gitter oder Einheiten in einem Raster haben, müssen Sie dem ersten eine Klasse von First geben. Dies liegt daran, dass nicht jeder Browser die Pseudoklasse anbietet: first-child.

Was aber, wenn Sie ein Raster ungleichmäßig teilen möchten? Das Leben ist nicht immer fair, oder? Glücklicherweise bietet YUI eine Reihe von Alternativen zur yui-g-Klasse. Hier ist eine Liste der anderen:

• yui-gb : Nimmt 3 Einheiten und teilt sich gleich
• yui-gc : Nimmt 2 Einheiten und teilt sich als 2/3 und 1/3
• yui-gd : Nimmt 2 Einheiten und teilt sich als 1/3 und 2/3
• yui-ge : Nimmt 2 Einheiten und teilt sich als 3/4 und 1/4
• yui-gf : Nimmt 2 Einheiten und teilt sich als 1/4 und 3/4

Das sind alles von ihnen. Schlagen Sie einfach 2 oder 3 Einheiten in jedes der oben genannten Raster, und Sie haben ungleiche Spalten.

---

Grundlegendes Beispiel

Nun, da Sie die Seile kennen, gehen wir ein grundlegendes Beispiel durch. Nehmen wir an, wir möchten das standardmäßige Site-Layout - wissen Sie, Hauptinhaltsspalte mit einer Seitenleiste rechts - mit einer kleinen Drehung: Wir teilen die Hauptspalte in zwei kleinere auf und teilen eine davon weiter in zwei Teile auf.

Wie bereits erwähnt, bietet Yahoo Hosting für dieses Framework an, und es ist normalerweise eine gute Idee, dies zu nutzen. Außerdem empfiehlt Yahoo den HTML 4.01-strengen Doctype, also habe ich das eingefügt. Hier beginnen wir mit:

---

Schritt 1: Dokumente und Blöcke

Der erste Schritt ist das Einrichten unserer Dokumentenmodule und -blöcke. Wir können bei der ersten Breite des Dokuments (750px) bleiben und mit Vorlage 6 gehen, die uns eine rechte Seitenleiste von 300px gibt.

Für die zwei bSperren des Inhalts müssen wir zwei divs.yui-b hinzufügen. Wir machen die oberste Spalte zur größeren Spalte, indem wir sie mit div # yui-main umschließen.

 
 
 Mein Hauptinhalt DIV 
 
 
 Mein Sidebar DIV 
 

Super! Hier ist also das, was wir bis jetzt haben: Ich habe mir die Freiheit genommen, es ein bisschen zu gestalten, damit Sie sehen können, was los ist.

---

Schritt 2: Gitter und Einheiten

Es ist noch nicht so beeindruckend, aber wir werden dorthin gelangen. Jetzt teilen wir die größere Spalte in zwei Teile auf. Wir können dies erreichen, indem wir ein div.yui-g (das zwei Einheiten enthält) darin einfügen:

 
 
 
 Erste Unterspalte 
 
 Zweite Unterspalte 
 
 
 

Dies gibt uns zwei Spalten auf der linken Seite; nicht schlecht; Lassen Sie uns die zweite dieser Spalten in zwei Hälften teilen. Dazu müssen wir es in ein Gitter umwandeln und zwei Einheiten darin einfügen.

 Erste Unterspalte 
 
 
 Erste Unterspalte 
 
 Zweite Unterspalte 
 

Dies ist ein hervorragendes Beispiel dafür, dass Gitter und Einheiten gleichrangig sind und nebeneinander stehen können: Sie unterscheiden sich nur in der Verwendung.

---

Eine Gotcha

Dies bringt mich zu einer Polsterung (die zu einem großen Vorteil von YUI-Gittern führt). Sehen Sie sich zunächst den Code an, den wir bisher geschrieben haben, mit Fülltext:

Ihr guter Geschmack sollte das Fehlen von Polsterungen an den Rändern unserer Säulen feststellen. Aber das lässt sich leicht mit etwas Polsterung beheben, zB 0.5em-on .yui-u, richtig?

Yikes! YUI-Grids haben die Breiten für diese divs festgelegt. Da die Auffüllung die Breite von div erhöht, haben wir ein Überlaufproblem. Eine einfache Lösung hierfür ist das Hinzufügen der Polsterung zu den unmittelbaren Kindern des .yui-u.

Um unsere Spalten in einer Linie zu halten und leicht lesbar zu machen, werden wir die Absätze innerhalb der .yui-u-Zeile mit Padding füllen. Aber ich muss dir kein Bild davon zeigen, damit du herausfindest, dass unsere schmalen Spalten enger wurden. Hier können wir die Stärke von YUI-Netzen nutzen. Ändern wir die ID in unserem Root-Div von doc in doc2. Hier ist ein Vorher und Nachher:

Durch Hinzufügen eines Zeichens zu unserem HTML-Code können Sie leicht mit einem breiteren Layout experimentieren. Das ist die Schönheit von YUI-Grids. # doc2 ist 200px breiter als #doc, jetzt haben unsere schmalen Absätze eine angenehme Breite.

---

Komplexes Beispiel

Das ist ein ziemlich einfaches Beispiel. Lassen Sie uns einen komplexeren betrachten ... das ist wirklich nicht schwieriger zu erstellen. Wir beginnen mit der siebten Vorlage - einer einzigen Spalte - mit einem 750px breiten Dokument (#doc) und schneiden es auf mehrere Zeilen. Wir beginnen mit:

Da wir die Vorlagen 1 - 6 (mit Seitenleisten) nicht verwenden, brauchen wir keine divs.yui-b. Wir können gleich mit ein paar divs.yui-g beginnen; wir werden 4 hinzufügen: