Die 960 Grid System Toolbox & Ressourcen
Das 960 Grid System wurde von Nathan Smith entwickelt, um den Web-Entwicklungs-Workflow zu rationalisieren, indem gängige Dimensionen auf einer Breite von 960 Pixeln bereitgestellt werden.
Das 960.gs (oder ein beliebiges CSS-Framework) wurde in erster Linie für das Rapid Prototyping entwickelt, wodurch sich wiederholende und langwierige Aufgaben reduziert werden. Es eignet sich jedoch auch mehr als für Webdesign-Projekte.
Es gibt Ihrer Site eine strukturierte und solide Grundlage, auf der Sie Ihr Design aufbauen und gestalten können.
In diesem Artikel finden Sie Tutorials, eine Präsentation von Websites, die mit dem 960.gs erstellt wurden, Spin-offs, grundlegende WP-Themen, die auf dem 960.gs basieren, und mögliche alternative Frameworks, falls Sie das 960-Grid aus irgendeinem Grund nicht mögen System.
Im Download-Paket befinden sich druckbare Skizzenblätter, Design-Layouts und eine CSS-Datei mit identischen Abmessungen.
Sie haben zwei Vorlagen, ein 12-Spalten-Raster, aufgeteilt in 60-Pixel-Teile und ein 16-Spalten-Raster, unterteilt in 40 Pixel. Jede Spalte hat links und rechts 10 Pixel Ränder, wodurch 20 Pixel breite Rinnen zwischen den Spalten entstehen.
Startseite : 960.gs Homepage .
Herunterladen : Laden Sie die 960.gs herunter .
Demo: Sehen Sie sich die 960.gs-Demoseite an .
960.gs Tutorials
960 CSS Framework - Lernen Sie die Grundlagen
Dies ist ein großartiges grundlegendes Tutorial, das von Stefan Vervoort von divitodesign geschrieben wurde. Sie werden durch die Grundlagen des Ladens des Frameworks geführt, so dass Sie schnell mit 960.gs entwickeln können.
Arbeiten mit 960.gs
Ein weiteres Tutorial, das Sie durch die Grundlagen der Installation der 960.gs führt, besonders nützlich für die CSS-Herausforderung.
Ein detaillierter Blick auf das 960 CSS Framework
Sobald Sie die Gelegenheit genutzt haben, etwas Zeit mit 960.gs zu verbringen, werden Sie erstaunt sein, wie viel Zeit möglicherweise bei der Entwicklung Ihrer Webprojekte eingespart werden kann.
Prototyping mit dem CSS-Framework Grid 960
Dieser Artikel behandelt den gesamten Prototyping-Prozess, er erklärt die Grundlagen von Grid 960, plant das Grid für ein Design und codiert den Prototyp. So schnell wie das.
Erstellen Sie ein Zeitungsdesign mit WP_Query und dem 960 CSS Framework
In diesem Tutorial erfahren Sie, wie Sie mit WP_Query ein 3-zeiliges Zeitungsthema erstellen, in dem alle Ihre wichtigsten Blogposts in der Hauptspalte und daneben eine Reihe von Posts aus einer ausgewählten Kategorie enthalten sind. Anhand des CSS-Frameworks 960 für das Layout und den Rest des Themas wird gezeigt, wie Sie Ihre Produktivität erheblich steigern können.
Entwerfen Sie ein neues Blogthema auf dem 960-Raster
In diesem Lernprogramm lernen Sie ein Blogthema in Photoshop, das im 960-Framework verwendet werden soll. Dieses Tutorial wurde mehr für die Webdesign-Theorie entwickelt als die Photoshop-Technik, verbringt aber wesentlich mehr Zeit mit der Design-Theorie und der Anwendung.
960 Ausdrehungen
Typogridphy - Ein typografisches und Raster Layout CSS Framework
Typogridphy ist ein CSS-Framework, mit dem Webdesigner und Front-End-Entwickler typografisch ansprechende Grid-Layouts schnell kodieren können. Es ermöglicht Ihnen, Raster-Layouts zu erstellen, die vielseitig und ansprechend sind. Es validiert striktes xHTML und CSS. Es wird auch eine typografische Methode verwendet, die als "Erzeugen eines vertikalen Rhythmus" bekannt ist , wobei alle benachbarten Textzeilen horizontal ausgerichtet sind, unabhängig von Zeilenumbrüchen und neuen Absätzen.
Demo: Typogridphy Demo
Overture - Fluid 960 Grid System 1.0
Entwickelt von Stephen Bau aus Design7 Er hat eine Bibliothek häufig verwendeter HTML-Elemente erstellt, diese mit CSS für Typografie und Layout kombiniert und einige Basiseffekte aus beliebten JavaScript-Bibliotheken (hauptsächlich MooTools) hinzugefügt. Beim Herunterladen können Sie zwischen drei Vorlagen wählen: 960 px feste Breite , 12-Säulen-Flüssigkeitsbreite oder 16-Säulen-Flüssigkeitsbreite . Diese Vorlagen sind erstaunlich, Sie müssen das Detail sehen, um es zu glauben.
Demo: Ouvertüre Demo .
Vitrine
Alle folgenden schönen Seiten wurden mit dem 960-Gittersystem gebaut:
WordPress-Themen
Genau wie die tatsächlichen 960.gs, sind diese WP-Themen praktisch unausgereift und mit sehr grundlegenden Funktionen, aber sie wurden mit dem 960.gs gebaut. Sehr nützlich für jeden WP Entwickler.
5 Jahre WordPress Theme
Ein grundlegendes WP-Thema, das mit dem 960.gs erstellt wurde.
960bc WordPress Theme
Das 960bc Theme ist im Wesentlichen eine leere Leinwand mit minimalem Styling und ohne Bilder basierend auf dem 960 Rastersystem (nur 12 Spalten) für WordPress-Entwickler, die in einem traditionellen gitterbasierten Layout arbeiten möchten.
Mögliche Alternativen
Die Auswahl eines CSS-Frameworks kann schwierig sein, wenn das 960.gs nicht für Sie geeignet ist. Vielleicht können Sie einige der folgenden Frameworks ausprobieren.
Blueprint: Ein CSS-Framework
Blueprint ist ein CSS-Framework, mit dem Sie Ihre CSS-Entwicklungszeit verkürzen können. Es bietet Ihnen eine solide CSS-Grundlage, auf der Sie Ihr Projekt aufsetzen können, mit einem einfach zu verwendenden Raster, einer sinnvollen Typografie und sogar einem Stylesheet zum Drucken. Es ist weit weniger aufgebläht als das YUI-Framework und ist möglicherweise mit dem 960.gs in Bezug auf die Benutzerfreundlichkeit auf Augenhöhe.
CSS-Kesselplatte
Von einem der Autoren von Blueprint. Er hat ein abgespecktes Framework geschaffen, das das Nötigste zum Starten eines Projekts bietet. Dieser Rahmen ist leicht und strebt danach, nicht-semantische Namenskonventionen vorzuschlagen.
Elemente - Ein bodenständiges CSS-Framework
Es wurde entwickelt, um Designern zu helfen, CSS schneller und effizienter zu schreiben. Elements ist nicht nur ein Framework, sondern ein eigener Projekt-Workflow. Es hat alles, was Sie brauchen, um Ihr Projekt zu vervollständigen.
WYMstyle - CSS Framework - Überblick
Das Ziel dieses Projekts ist es, eine Reihe von gut getesteten modularen CSS-Dateien zur Verfügung zu stellen, die für das schnelle Design von Webseiten verwendet werden können.
Noch ein mehrspaltiges Layout | YAML
"Yet Another Multicolumn Layout" (YAML) ist ein (X) HTML / CSS-Framework zum Erstellen moderner und flexibler Float-Layouts. Die Struktur ist extrem vielseitig in ihrer Programmierung und für Endbenutzer absolut zugänglich.
CleverCSS
CleverCSS ist eine kleine, von Python inspirierte Auszeichnungssprache für CSS, mit der sich ein Stylesheet auf saubere und strukturierte Weise erstellen lässt. In vielerlei Hinsicht ist es sauberer und leistungsfähiger als CSS2.
sparkl CSS-Framework
Sparkl kombiniert POSH Markup, Bulletproof CSS und Unobtrusive JavaScript in einem einfach zu benutzenden Webentwicklungsframework, das die Erstellung von kugelsicheren Webseiten, die Webstandards entsprechen, einfach macht. Es verwendet ein modulares Framework, mit dem Sie das verwenden können, was Sie benötigen, und das, was Sie nicht benötigen.
Das jQuery UI CSS Framework
Die Abfrage-Benutzeroberfläche enthält ein robustes CSS-Framework, das zum Erstellen von benutzerdefinierten jQuery-Widgets entwickelt wurde. Das Framework enthält Klassen, die eine breite Palette von allgemeinen Benutzeroberflächenanforderungen abdecken und mit jQuery UI ThemeRoller manipuliert werden können. Wenn Sie Ihre UI-Komponenten mit dem CSS-Framework jQuery UI erstellen, übernehmen Sie gemeinsame Markup-Konventionen und vereinfachen die Code-Integration in der gesamten Plugin-Community.
Geschrieben exklusiv für WDD von Paul Andrew aus Speckyboy.com
Verwenden Sie die 960gs für Ihre Websites? Was sind die Hauptvorteile? Wir würden gerne von dir hören ...