Ob Sie es lieben oder hassen, der 960.gs sorgt für unglaublich schnelles Prototyping. Durch Verwendung voreingestellter Klassen können Sie ziemlich komplexe Layouts mit wenig oder gar keinem Aufwand erstellen.
Heute bringen wir Ihnen eine kostenlose einseitige Vorlage, die vollständig mit dem 960.gs codiert ist. Die Vorlage verfügt über ein paar nette CSS3-Effekte und verwendet @ font-face, um eine schöne benutzerdefinierte Typografie zu implementieren. Nachfolgend finden Sie den Download und eine grundlegende Schritt-für-Schritt-Anleitung zum Erstellen eines eigenen.
Sie können die Vorlage völlig kostenlos herunterladen und sie ohne Zutritt nach Belieben verwenden.
Laden Sie die Vorlage herunter
- Vorschau im Browser
- Laden Sie .ZIP herunter
Hier ist eine kurze Vorschau, wie die Vorlage aussieht:
Laden Sie die 960.GS-Ressourcen herunter
Als erstes sollten Sie zur 960 Grid System-Website gehen und auf die Schaltfläche "Download" oben links auf der Seite klicken.
Der Download hat eine Menge Zeug, aber eigentlich brauchen wir nur drei CSS-Dateien: reset.css, text.css und 960.css. Dies sind die Standardkomponenten, auf denen das Netz aufgebaut ist. Die Reset- und Text-Stylesheets sind vollständig optional, aber wir werden sie verwenden, um sicherzustellen, dass alles in den verschiedenen Browsern schön und konsistent bleibt.
Das folgende Tutorial setzt voraus, dass Sie sowohl mit CSS als auch mit 960.gs ziemlich vertraut sind. Wenn Sie einen Absturzkurs für Gittersysteme benötigen, lesen Sie meine 960-Anleitung bei Six Revisions.
Schritt 1: Starten Sie Ihre HTML- und CSS-Dateien
Zusätzlich zu den CSS-Dateien, die im Lieferumfang der 960.gs enthalten sind, benötigen wir eigene. Erstellen Sie ein Verzeichnis auf Ihrem Computer, fügen Sie die heruntergeladenen Dateien ein und erstellen Sie eine index.html-Datei und eine style.css-Datei.
Fügen Sie den folgenden Code in Ihren HTML-Code ein, um zu beginnen:
Wir haben im Grunde nur einen Link zu unseren verschiedenen CSS-Dateien (wahrscheinlich zu viele für eine einzelne Webseite, die jedoch erweitert werden kann) und den Body-HTML-Code gestartet.
Das Design verfügt über dünne graue Balken oben und unten auf der Seite. Wir möchten, dass sich diese über die gesamte Seite erstrecken, sodass wir sie außerhalb des 960-Bereichs platzieren.
Als nächstes befindet sich zwischen Kopf- und Fußzeile ein Div mit der Klasse "container_12". Da wir die 12-Spalten-Version des 960-Systems verwenden, wird ein Div erstellt, das den größten Teil der Seite überspannt und automatisch horizontal zentriert wird.
Schritt 2: Die Schriftarten
Wir werden für dieses Projekt zwei benutzerdefinierte Nicht-Web-Schriftarten verwenden: Lobster und Caviar Dreams. Beide sind in der FontSquirrel @ Font-Face Kit Library enthalten.
Laden Sie die Kits für jede Schriftart herunter und platzieren Sie die verschiedenen Schriftartdateien in Ihrer Projektdatei. In dem mit jedem Kit gelieferten CSS sollten Sie den @ font-face-Code zum Einbetten dieser Schriftart finden. Schnappen Sie sich das Snippet für jede Schriftart und fügen Sie es in Ihre stye.css-Datei ein.
Mit diesem Code können wir diese Schriftarten jetzt in unsere Schriftartenstapel aufnehmen, indem Sie einfach 'Lobster13Regular' oder 'CaviarDreamsRegular' eingeben.
Schritt 3: Kopfzeile
Da wir den Header bereits in unseren HTML-Code eingefügt haben, müssen wir ihn nur noch mit einem einfachen Styling versehen.
Grundsätzlich haben wir hier nur die Höhe und Hintergrundfarbe des Headers angegeben.
Schritt 4: Navigation HTML
Nach der Kopfzeile erscheint als erstes die Navigation. Dies ist ein wenig schwierig, da es auf der rechten Seite der Seite angezeigt wird. Wir könnten eine 960-Klasse festlegen und dann den Push-Befehl verwenden, aber es ist viel einfacher, keine Klasse auf das div anzuwenden und es mit CSS richtig zu setzen.
Für das HTML benötigen wir lediglich eine standardisierte ungeordnete Liste mit einigen Links. Ich habe hier einige Platzhalter-Links eingefügt, aber Sie möchten dies natürlich für Ihre eigene Website anpassen.
Schritt 5: Navigation CSS
Als Nächstes müssen wir eine ganze Reihe von Stilen für die Navigation festlegen. Links, ungeordnete Listen, Listenelemente und Hover-Effekte müssen ausgearbeitet werden.
Beachten Sie, dass wir die Schriftart auf Caviar Dreams eingestellt haben, wie wir oben erfahren haben, und sichergestellt haben, dass einige Sicherungen aufgeführt wurden, falls der Browser die richtige Schriftart nicht lädt.
Das seltsamste daran ist, dass wir sowohl einen linken als auch einen rechten Float verwendet haben. Damit die Listenelemente nicht in einer Reihe, sondern in einer Zeile angezeigt werden, müssen wir die Option "ul li" links. Damit das Set als Ganzes auf der rechten Seite unseres Container-Divisums haftet, haben wir das #nav-Recht nach rechts verschoben.
Alles andere ist nur ein Bündel von Grundstilen wie Farbe, Schriftgröße usw. Um den Link beim Hover zu unterscheiden, habe ich eine einfache Unterstreichung verwendet.
An diesem Punkt sollte Ihre Seite Gestalt annehmen. Stellen Sie sicher, dass es in der Nähe der Vorschau aussieht.
Schritt 6: Überschrift HTML
Fügen Sie nach der Navigation ein Div mit der ID "Überschrift" ein. und eine Klasse von? grid_12 ?. Die Klasse grid_12 macht die Breite des div-Werts der des gesamten Containers gleich. Platzieren Sie in diesem Div ein h2-Tag und ein Absatz-Tag mit etwas Inhalt.
Beachten Sie, dass es nach den Navigations- und Headline-Divs ein Div mit der Klasse "clear" gibt. Auf diese Weise werden mit dem 960 Grid System zuvor implementierte Floats gelöscht. Vergewissern Sie sich, dass Sie diese Option immer dann verwenden, wenn Sie eine neue Inhaltszeile beginnen möchten.
Schritt 7: Überschrift CSS
Als nächstes fügen Sie Stile für die Überschrift, das h2-Tag und das Absatz-Tag für die Überschrift hinzu. Ich habe h2 auf 50px Lobster und den Absatz auf 25px Caviar Dreams gesetzt.
Damit sollte Ihre Seite jetzt eine obere Leiste, einen Navigationsbereich und eine schöne große Überschrift haben.
Schritt 8: Das große Foto-HTML
Um das Foto hinzuzufügen, verwenden wir ein leeres div mit der Klasse grid_12 und setzen den Hintergrund mit CSS.
Schritt 9: Das Big Photo-CSS
Für das CSS haben wir ein Hintergrundbild für das div gesetzt, ihm einen 3px-Rahmen gegeben und einen CSS3-Box-Schatten angewendet. Der weiße Rand würde nicht auf einem weißen Hintergrund angezeigt, sodass der Schatten dem Bild mehr Tiefe verleiht.
Schritt 10: Werbebuchung HTML
Das letzte Stück HTML, das wir brauchen, sind die Boxen und der Text am unteren Rand der Seite.Wir werden diese mit einer Klasse gestalten, damit Sie später problemlos weitere hinzufügen können.
Um diesen Abschnitt zu erstellen, benötigen wir zwei Spalten: eine für das Bild und eine für den Text daneben. Hier macht uns der 960.gs einfach. Da wir die 12-Säulen-Version verwenden, möchten wir, dass sich die Gesamtzahl zwölf auf den gesamten Container erstreckt.
Durch Anwenden des? Grid_4? Klasse gefolgt von? grid_8? Klasse erhalten wir zwei Spalten, von denen die erste die halbe Breite der zweiten ist (8 + 4 = 12).
Beachten Sie, dass wir unseren Code verdoppelt und verschiedene Bilder eingefügt haben. Dies gibt uns zwei der? LineItem? Bereiche. Fügen Sie einfach ein weiteres Duplikat hinzu, um einen dritten oder vierten hinzuzufügen.
Schritt 11: CSS für Werbebuchungen
Als Nächstes fügen wir diesem Bereich eine Reihe von Stilen hinzu, damit dieser schön aussieht. Geben Sie den Bildern einen Schatten und eine Kontur, und wenden Sie die entsprechenden Schriftarten an.
Beachten Sie, dass wir verwendet haben? anstelle von? border? Hier. Dies ist ein netter CSS-Trick, mit dem Sie im Wesentlichen einen Bildrand haben können, der Ihr Layout nicht stört.
Wenn Sie fertig sind, sollten Ihre Werbebuchungen großartig aussehen und in klar definierte Spalten unterteilt werden.
Schritt 12: Fußzeile CSS
Der letzte Schritt besteht darin, die gleichen Stile auf die Fußzeile anzuwenden wie auf die Kopfzeile. Dies gibt der Seite einen schönen starken Kontrast auf der Unterseite und der Oberseite.
Endergebnis
Das sollte Ihnen ein funktionierendes Endprodukt geben! Beachten Sie, dass der größte Teil unserer Arbeit darin bestand, die Objekte zu gestalten, die wir auf der Seite platziert haben. Wir haben uns fast keine Sorgen um die Positionierung gemacht. Dies ist der Hauptzug von Gittersystemen wie 960 und Blueprint.
Wir können den ganzen Tag über Semantik argumentieren, aber am Ende helfen Ihnen diese Tools, sich mehr auf das Design und weniger auf Layoutprobleme zu konzentrieren. Je erfahrener Sie mit CSS sind, desto weniger müssen Sie ein Rastersystem verwenden, um das Layout für Sie auszuführen. Bis dahin ist es jedoch schön, wenn Ihre Probleme gelöst werden, bevor sie überhaupt entstehen.
Fazit
Wie es bei diesen Arten von Posts unvermeidlich ist, werden mehrere Personen zweifellos Kommentare hinterlassen, die Gittersysteme anstoßen. Die Wahrheit ist, ich benutze sie selten. Ich sehe jedoch ihren Wert und es macht mir Spaß, mit ihnen zu spielen, um zu sehen, was ich damit machen kann. Fazit: Wenn Sie 960.gs nicht mögen, laden Sie die Vorlage nicht herunter!
Wenn Sie jedoch mit Rastersystemen vertraut sind und kostenlose Dinge mögen, laden Sie die Datei herunter und optimieren Sie sie! Wenn Sie es in einem Projekt verwenden, werfen Sie einen Link (optional), damit ich überprüfen kann, wie Sie es implementiert und das Design erweitert haben. Wenn Sie einen Vorschlag benötigen, schreit das große Foto in einen jQuery-Schieberegler.