Share
Das 960-Rastersystem gibt es schon eine Weile? Es wird jedoch meistens als HTML / CSS-Framework auf der Codierungsseite von Projekten verwendet. Heute werden wir die Vorteile der Verwendung von Rastersystemen wie 960GS bereits zu Beginn eines Projekts besprechen, bevor Sie Photoshop oder Fireworks öffnen. Wenn Sie noch kein Framework verwendet haben oder einfach nur eine gute Auffrischung wünschen, ist dies ein großartiger Ausgangspunkt!
Die Chancen stehen gut, dass Sie bereits von einem CSS-Framework gehört haben oder bereits verwendet haben? Aber nur für den Fall, lassen Sie uns die wichtigsten Vorteile eines CSS-Frameworks (Grid-Systems) in einem Webprojekt überprüfen:
Letztendlich sollte ein CSS-Framework dabei helfen, einige grundlegende Richtlinien für Inhaltsspalten festzulegen, während Designer dennoch die volle Kontrolle über ihre Designs haben.
In diesem Artikel: Ich werde erklären, was ein CSS-Framework ist und warum ich 960 gewählt habe. Anschließend werde ich die Grundlagen der Anwendung des 960-Gitters erläutern. Zum Abschluss unserer Diskussion zeige ich Ihnen einige Websites, die das 960-Raster verwenden und wie diese strukturiert sind.
Ein CSS-Framework besteht aus einer Reihe von Stylesheets, die das Leben eines Webentwicklers erleichtern sollen. Sie berücksichtigen die verschiedenen Macken von Browsern, sind leicht anpassbar und wenden grundlegende Gestaltungsprinzipien an (z. B. visuell ansprechende Randbereiche zwischen Elementen)..
Diese Frameworks verfügen häufig auch über Typografie-Stylesheets, die sich hervorragend als Ausgangspunkt für die Arbeit an der Typografie Ihrer Website eignen (weitere Informationen zur Typografie finden Sie in diesem Artikel)..
Momentan gibt es zwei große CSS-Frameworks: Blueprint und 960. Beide sind perfekt fähige Frameworks mit großartigen Funktionen und Benutzerfreundlichkeit. Es kommt einfach darauf an, welches Framework Ihnen am besten gefällt.
Bevor Sie mit der Entwurfsphase eines Projekts beginnen, müssen Sie die Auswahl eines Frameworks mit der Person besprechen, die die Site codiert. Entwickler haben oft Vorzüge gegenüber einem bestimmten CSS-Framework. Als Hauptgrund für die Verwendung von Frameworks in der Entwurfsphase ist es, den Übergang vom Design zum Coding zu vereinfachen. Dies ist eine wichtige Entscheidung. Wenn Sie das Projekt selbst programmieren, stellen Sie sicher, dass Sie mit dem Raster-Framework, das Sie auswählen, vertraut sind. Es gibt nichts Schlimmeres, als eine gesamte Site basierend auf einem Framework zu entwerfen, das Sie nicht mögen.
Ich persönlich fand das 960-Grid besser für meine Bedürfnisse, also habe ich es angenommen und das werden wir in diesem Artikel besprechen. Die übergreifenden Prinzipien, die wir diskutieren werden, gelten jedoch für alle Rahmenbedingungen, einschließlich Blueprint.
960.gs basiert darauf, alle Elemente Ihrer Site in einen 960px breiten Container (cleveres Mädchen) zu setzen und diesen Container in 12, 16 oder 24 gleich große Spalten zu unterteilen. Sie bieten ein Werkzeug zur Verwendung alternativer Breiten, aber 960 ist das, wofür das gesamte System entwickelt wurde, und es sieht ziemlich scharf aus.
Warum 960px?? Weil 960px eine Breite ist, die für die große Anzahl von Plattformen geeignet ist, auf denen wir im Internet surfen. Es ermöglicht im Wesentlichen einen 1024px breiten Monitor, der die Site genau und ohne horizontales Scrollen anzeigt, was die Breite des Browser-Chrome, Scrollbalken und ein wenig Abstand zur besseren Lesbarkeit berücksichtigt. Rechts und links von der Hauptspalte befindet sich immer ein Rand von 10 Pixeln. Dies bedeutet, dass kleinere Browser immer den am weitesten links liegenden Inhalt lesen können, ohne den Text anzustoßen, sondern gegen das Browserfenster.
Darüber hinaus sind alle Zahlen in der 960GS ganze Zahlen, die auf dem Goldenen Schnitt basieren. Es gibt keine Dezimalpunkte oder funky Abstände. Wenn Sie unseren Artikel zu Mathematik und Webdesign gelesen haben, wissen Sie, wie wichtig es ist, diese Zahlen richtig zu machen.
Eine der eklatanten Auslassungen oder schönen Funktionen, je nachdem, wie Sie es betrachten, ist die Art und Weise, wie der 960 mit der Typografie umgeht (oder auch nicht). Es gibt eine text.css-Datei, die jedoch vor allem sicherstellen soll, dass zumindest etwas vorhanden ist, sodass beim Rapid Prototyping allgemeine Elemente wie Überschriften, Absätze und Listen grundlegend gestaltet werden.
Ich werde hier nicht zu viel in die Tiefe gehen, aber lassen Sie uns kurz die wichtigsten Unterschiede zwischen 960.gs und Blueprint diskutieren. Erstens ist Blueprint ein auf 950px basierendes CSS-Framework - es ähnelt 960 in der Art und Weise, wie es die grundlegenden Layout-Elemente behandelt (BP verwendet 24 Spalten mit ähnlichen Ansätzen für das Auffüllen und die Verhältnisse). Aber da hört Blueprint auf, ähnlich zu sein.
Blueprint ist ein viel komplexeres, robusteres und umfassenderes Rahmensystem. Es wurde als vollwertiges Stylesheet für so ziemlich jedes Element erstellt, das Sie sich vorstellen können (Optionsfelder, Tabellen usw.). Es gibt Dinge, die ich an Blueprint mag, am bemerkenswertesten ist die Gestaltung von Formularelementen und eingebauten Benachrichtigungsklassen. Darüber hinaus enthält es eine vollständige Reihe von Stilen für:
Das Problem, das ich mit Blueprint hatte, ist, dass es einfach zu komplex ist, um es in der Designphase zu verwenden. Wenn Sie ein Design von Grund auf erstellen, müssen Sie alles neu formatieren, was Sie bereitstellen, und es ist oft schwierig, mit der umfassenden Vollständigkeit, die BP bietet, Schritt zu halten. Im Gegensatz dazu bietet 960.gs nur ein Layout - perfekt, damit ein Designer innerhalb realistischer Grenzen kreativ werden kann.
Das 960-Grid ist fast erschreckend einfach zu verwenden (tatsächlich fragen Sie sich vielleicht: "Warum habe ich das nicht früher verwendet?"), Mit nur ein paar einfachen Regeln, an die Sie sich halten müssen.
Nachdem Sie es heruntergeladen haben, werfen Sie einen Blick in das Verzeichnis, das Sie gerade entpackt haben. Ich möchte Ihre Aufmerksamkeit auf zwei Ordner lenken: "sketch_sheets" und "Vorlagen". Der Ordner "Skizzenblätter" enthält eine PDF-Datei der verschiedenen Rastergrößen in einem Browserfenster, und der Ordner "Vorlage" enthält Vorlagen für fast jedes Grafikprogramm unter der Sonne (z. B. GIMP, Fireworks und Photoshop)..
Der Zweck eines CSS-Frameworks ist es, Ihnen das Leben zu erleichtern, und Sie sollten immer nach Möglichkeiten suchen, um die Zeit zu reduzieren, die für die Erstellung eines Designs erforderlich ist. Verwenden Sie diese Vorlagen, wenn Sie ein Design in Photoshop erstellen, und drucken Sie Kopien der "Skizzenblätter" aus, wenn Sie die Details eines Projekts mit einem Kunden besprechen (und stellen Sie sicher, dass Sie sich das unbedingt ansehen, bevor Sie loslegen!)..
Tatsächlich würde ich empfehlen, diese Skizzenblätter bei jedem Start eines Projekts zu verwenden: Mit ihnen können Sie frei experimentieren, bevor Sie sich auf ein beliebiges Layout festlegen. Es dauert nur 5 Minuten Skizzieren, um zu realisieren, ob ein Entwurf funktionieren wird oder nicht, im Gegensatz zu mehr als 50 Minuten, wenn Sie ihn entworfen und codiert haben.
Wenn Sie zu dem grundsätzlichen Einverständnis über das skizzierte Konzept der Site gekommen sind, sollten Sie die Vorlagendateien aufbrechen. Dies ist wahrscheinlich der zentrale Grund, warum ich das 960-System mag. Es wird mit Vorlagen für nahezu jedes Programm geliefert, das Sie sich vorstellen können. Ich verwende Photoshop. Hier ist ein Screenshot der bereitgestellten Vorlage:
Der Hauptvorteil hier ist einfach: Die Vorlage enthält vorgefertigte Leitfäden für alle Hauptinhaltsspalten, die direkt auf der Codierseite dem CSS-Framework entsprechen. Es ist einfach, schnell die wichtigsten Inhaltsspalten zu zeichnen und alles in Ihrem Design sauber und übersichtlich zu halten.
Erfahrene Designer sehen dies vielleicht als "Design mit Laufrädern an" an, aber ehrlich gesagt, ist es nicht falsch, ein einfaches Overlay-System zu haben, das den Rahmen für ein Webdesign leitet.
Sie müssen natürlich immer noch alles auf der Website entwerfen, aber wenn Sie Ihr Design mit den Leitfäden in Einklang bringen, wird dies die Entwicklungsseite erheblich vereinfachen. Als zusätzlicher Vorteil ist ein einheitlicher Ansatz für das Auffüllen zwischen Inhaltszellen eine großartige Möglichkeit, um Ihr Design professioneller aussehen zu lassen. Lesen Sie hier mehr darüber, warum "Pixel Perfect Comps".
Nachdem Sie nun ein Design festgelegt haben, sprechen wir jetzt über die 960-Raster-Syntax. Wie ich bereits beim Intro erwähnte, finden Sie bei Nettuts eine Menge weiterer Informationen zur Verwendung und zum Prototyping von CSS-Frameworks. Ich werde hier nur die Grundlagen behandeln.
Zunächst müssen Sie die entsprechenden CSS-Dateien in Ihrem Design referenzieren: reset.css (die Reset-Datei, die Browser-Macken berücksichtigt), text.css (das integrierte Typografie-Stylesheet) und 960.css (oder 960_24_col.css, wenn Sie ein Raster mit 24 Spalten verwenden). Normalerweise platziere ich mein gesamtes Site-spezifisches Styling in einer separaten Datei (normalerweise genannt) style.css), um sicherzustellen, dass ich im Framework nichts kaputt mache.
Kurzer Tipp: Verweisen Sie auf Ihr eigenes Stylesheet, nachdem Sie auf das Framework verweisen, sodass Sie bestimmte Aspekte des Frameworks anpassen können, ohne das Framework selbst zu ändern (und wenn Sie einen Fehler machen, müssen Sie die Dateien des Frameworks nicht erneut herunterladen und überschreiben). Mit diesen 4 Dateien können Sie jetzt mit dem Entwerfen Ihrer Site beginnen.
Hier ist ein kurzer Überblick über die Syntax der Website 960.gs:
????
Das erste div ist Ihr Container, in dem Ihr Inhalt gespeichert wird. Wenn Sie die Klasse als "container_12" definieren, sagen Sie: "Ich möchte, dass dieser Container ein 12-Spalten-Raster hat" (Die gleiche Vorgehensweise gilt bei der Verwendung von 16.) und 24 Spaltenraster).
Nachdem Sie den Container als 12-Spalten-Layout definiert haben, beginnen Sie damit, Ihre Site so zu strukturieren, dass sie in das Layout passt. Wenn Sie sich die nächsten div-Elemente in der Hierarchie ansehen (wie auf den Registerkarten angegeben), sehen Sie die Syntax für ihre Definitionen. "Grid_7" und "grid_3" sind leicht zu verstehen: Sie sagen, dass dieses div-Element eine X-Anzahl von Spalten aufnehmen wird. 7 + 3 = 10 < 12, which means you'll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of "grid_x suffix_y", you're saying: "I want this div to take up X columns, and for there to be Y number of empty columns after it." (This also applies to prefix). So, since "Grid_7" has a prefix of 1, and "Grid_3" has a suffix of 1, 7+3+1+1 = 12!
Ich weiß, dass Sie sich über die Div-Elemente im "Grid_7" -Div wundern. Nun, Sie können divs verschachteln, die eine bestimmte Anzahl von Spalten in einem anderen div aufnehmen, solange die Größe des übergeordneten Rasters nicht überschritten wird. Außerdem müssen an das erste und das letzte Element jeweils "alpha" und "omega" angehängt werden. In unserem Beispielcode: "grid_2 alpha" ist das erste verschachtelte div in "grid_7", das nächste Element "grid_3" befindet sich in der Mitte (und benötigt daher kein "alpha" oder "omega",). und schließlich ist "grid_2_ omega" das letzte verschachtelte div innerhalb von "grid_7". Und da 2 + 3 + 2 = 7, ist die Definition richtig.
Um diesen gesamten Prozess zu veranschaulichen, gehen wir ein kurzes Beispiel für die Verwendung des 960 Framework während der Entwurfsphase eines persönlichen Projekts von mir vor.
Das Design selbst ist ziemlich einfach, aber es ist der perfekte Weg, um Ihnen zu zeigen, wie das Framework während des Designprozesses als Werkzeug dienen kann.
Die Cerberus-Website: Das Beispiel, das wir verwenden werden Mass Effect 2 ist eines meiner Lieblingsspiele der letzten fünf Jahre, und es schien mir eine Herausforderung, eine Website für die fiktive Organisation "Cerberus" zu erstellen. Die Hauptaspekte der Organisation sind: Professionalität und technologisches Können, die ich mit einem klaren Design vermitteln wollte, das ihre gesamte Farbgebung verwendete. Zu Beginn habe ich den Entwurf für die Site skizziert (es wäre heuchlerisch, wenn ich anders agiere, oder?).
Als ich die Entwurfsskizze durchblickte, sah ich, wie das Design im 960-Raster funktioniert. Nachfolgend finden Sie das HTML-Skelett für meine Website:
LogoCerberus: Stärke für die Menschheit
NavigationInhaltSeitenleisteSeitenleisteSeitenleisteFußzeile
Wenn Sie bemerkt haben, dass das Logo nur 2 Spalten enthielt, während der Unterheader alle 12 Leerzeichen beanspruchte. Da der Header div 12 Spalten lang war, können alle Unterelemente bis zu 12 Spalten lang sein. Dieser Trick ermöglichte es mir, den Header zu erstellen, da das Logo 2 Spalten enthielt und der Rest leer blieb (das Bild ist eigentlich das Hintergrundbild für das Header-Div). Und da der Sub-Header 12 Spalten breit war, füllte er die gesamte Breite unter dem Logo aus (da er nicht den gesamten Inhalt in die 10 Leerzeichen nach dem Logo einfügen konnte)..
Dies ist eine wichtige Unterscheidung, die Sie vornehmen sollten, und es ist ein weiteres Entwurfswerkzeug, das Sie verwenden sollten (und um sicherzugehen, können Sie "Präfix" oder "Suffix" verwenden, um sicherzustellen, dass ein bestimmter Speicherplatz reserviert wird). Der Rest der Seite ist ziemlich einfach und trocken: 8 Spalten für den Hauptinhalt und 4 für die Seitenleiste. Jedes Seitenleistenelement ist ein separates div-Element. Sie stapeln sich übereinander, da sie auf die Breite von 4 Spalten beschränkt sind.
Um die Einrichtung der Site zu veranschaulichen, habe ich einen Screenshot der Site erstellt und die Spalten eindeutig markiert:
Nun, mein eigenes Beispiel ist vielleicht nicht der beste Weg, um Sie wirklich dazu zu inspirieren, ein paar coole Webdesigner zu kreieren. Hier sind nur einige Beispiele des 960-Systems in Aktion. Mehr finden Sie auf der Website 960.gs.
Einer der attraktivsten Aspekte eines CSS-Frameworks ist die Bequemlichkeit, die sie für Designer bieten. Wie bei jedem anderen Tool müssen Sie jedoch sicherstellen, dass Sie es sachgerecht und sinnvoll einsetzen. Versuchen Sie nicht, es zu verwenden, wenn es nicht zum Design passt, und lassen Sie es nicht Ihre Kreativität einschränken. Für die meisten Projekte (insbesondere für komplexe, von Zeitungen oder Blogs inspirierte Layouts) kann ein CSS-Framework ein hervorragendes Zeitersparnis sein, nicht nur für das schnelle Ausspalten von HTML / CSS, sondern für den gesamten Entwurfsprozess.
Möchten Sie mehr über das Codieren mit CSS-Frameworks erfahren? Schauen Sie sich die Nettuts-Bibliothek mit Artikeln zum Thema an (scrollen Sie nach unten, um erweiterte Tuts zu erhalten).
Accentsconagua