Ein genauerer Blick auf dem Blueprint CSS-Framework

() translation by (you can also view the original English article)

Blueprint ist ein CSS-Framework, mit dem Sie Zeit und Kopfschmerzen sparen können, wenn Sie an einem Projekt arbeiten, das HTML und CSS umfasst, sei es mit Rails, PHP oder einfach nur mit dem Erstellen einer HTML-Seite. In diesem Tutorial erhalten Sie einen Einblick in das Innenleben von Blueprint und einen Blick auf die Demo-Anwendung, die Blueprint verwendet, um eine bessere Vorstellung davon zu erhalten, wie das Framework tatsächlich verwendet wird.

1. Was ist Blueprint CSS?

Wenn Sie wie ich eher ein Entwickler als ein Designer sind, sind Sie mit dem Prozess des Startens eines neuen Projekts vertraut und wissen nicht, was Sie mit Ihrem CSS tun sollen. Sie wissen, dass sich Ihr Design im Laufe des Projekts wahrscheinlich ändern wird, möchten aber von Anfang an ein gut aussehendes Design haben. Sie verbringen also einige Zeit damit, CSS zu schreiben, das in Firefox und Safari funktioniert. Oh, warten Sie, vergessen Sie den IE nicht, richtig, richtig. Dann schreiben Sie HTML-Code, von dem Sie glauben, dass Sie ihn verwenden werden, und arbeiten daran, dass alle Abstände richtig aussehen. Toll! Fertig! Jetzt, drei Tage später, haben sich die Anforderungen für Ihr Projekt geändert und Sie müssen das Layout erneut neu gestalten. Hmm...

Selbst wenn Sie ein Rockstar-Designer sind, der all diese CSS-Dinge bereits herausgefunden hat, oder wenn Sie sich keine Sorgen darüber machen, wie sich Ihr Layout im Laufe der Zeit ändern wird, weil Sie mit einer PSD-Vorlage oder etwas anderem arbeiten, heißt das nicht dass es hier nichts zu lernen gibt. Blueprint kann Ihnen weiterhin einige Tools zur Verfügung stellen, damit Sie...

Verbringen Sie Ihre Zeit mit Innovationen und nicht mit Replikationen.

Dies ist das Motto, für das geworben wird

blueprintcss.org

Und ich denke, genau das leistet Blueprint. Blueprint bietet eine solide Grundlage, auf der Sie Ihr Projekt aufbauen können. Dazu werden in allen Browsern sinnvolle Standardeinstellungen, eine gut aussehende Standardtypografie, ein Raster-Framework, gut aussehende Formulare und ein für Drucker erstelltes Druck-Stylesheet bereitgestellt. Werfen wir einen Blick darauf, wie Blueprint dies erreicht:

2. Blueprint-Quelldateien

reset.css

Diese Datei legt sinnvolle Standardeinstellungen für alle Browser fest. Ich bin sicher, wir sind alle damit vertraut, ein neues Projekt zu starten, zu unserer CSS-Hauptdatei zu wechseln und dem Body Selector einige Standardstile hinzuzufügen, z. B. 'margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;' oder so ähnlich. Dies ist, was reset.css tut und vieles mehr. Es setzt die Standardstile für Abstände, Tabellen, Schriftarten usw. zurück, sodass Sie von einer sauberen Tafel aus arbeiten können.
typography.css

Diese Datei erstellt eine nette Standardtypografie. Ich werde nicht alle Stile erklären, aber ich werde sagen, dass dies meine Lieblingsteile von Blueprint sind, denn für mich gibt es nichts Entmutigenderes, als zu versuchen, eine Seite zu gestalten und schwarzen Times New Roman-Text in der zu sehen obere linke Ecke einer Seite. Pfui. Die typography.css von Blueprint hält mich davon ab, das jemals wieder zu sehen. In typography.css werden auch einige wirklich schöne Stile für Schriftgrößen, Zeilenhöhen, Standardstile von Tabellen usw. eingerichtet.
grid.css

Diese Datei behandelt den Teil des Rasterlayouts der Blaupause. Wir werden uns in Kürze die Klassen ansehen, die es verwendet. Eine wichtige Sache, die beim Raster zu beachten ist: Standardmäßig wird eine Breite von 950 Pixel verwendet, wobei 24 Spalten jeweils eine Breite von 30 Pixel und einen Abstand von 10 Pixel zwischen den Spalten haben. Dies mag einschränkend klingen, aber wenn dies nicht das gewünschte Layout ist, können Sie jederzeit einen Blueprint Grid CSS Generator verwenden, um ein benutzerdefiniertes Rasterlayout zu generieren. Wenn dieser letzte Absatz Sie völlig verwirrt hat, lesen Sie bitte weiter, da wir in Kürze ein Layout mit einem Raster erstellen werden. Wenn Sie mit CSS-Rasterlayouts nicht vertraut sind und Hintergrundinformationen wünschen, wenden Sie sich an Raj's

Welches CSS-Grid-Framework sollten Sie für das Webdesign verwenden?

ist ein gutes Intro.
ie.css

Blueprint unterstützt IE, daher benötigt es natürlich ein eigenes Stylesheet, um sich um die kleinen Details zu kümmern, die IE so besonders machen :) Das Schöne ist, dass Blueprint dies für Sie erledigt, sodass alle seine Kernstile in allen funktionieren die wichtigsten Browser (ich denke, es unterstützt sogar IE 5).
print.css

In dieser Datei werden einige Standarddruckstile festgelegt, sodass gedruckte Versionen Ihrer Website besser aussehen als normalerweise. Die Datei print.css enthält auch eine Option, mit der Sie Ihren Domainnamen eingeben können, sodass relative Links in der gedruckten Version Ihrer Seite in Klammern hinter dem Textlink angezeigt werden. Ohne diesen Abschnitt auszufüllen, werden nur Remote-Links ordnungsgemäß gedruckt. Überprüfen Sie den unteren Rand der oben verlinkten src-Datei print.css.
forms.css

Diese Datei bietet gut aussehende Standardformulare sowie Klassen für Fehlerbenachrichtigungen oder sogar Flash-Benachrichtigungen, wenn Sie etwas wie Rails verwenden. Da dies der einzige Abschnitt ist, auf den ich nicht näher eingehen werde, sind hier einige der verwendeten Standardformularstile aufgeführt:

Bedeutet das, dass ich sechs verschiedene Stylesheets einfügen muss?

Nein. Blueprint enthält drei komprimierte Stylesheets für Ihre HTML-Seiten, screen.css, die die Nummern 1-3 und 6 von oben enthalten, print.css und ie.css. Der Grund, warum ich die verschiedenen Teile des Frameworks oben skizziert habe, ist, dass das Framework modular aufgebaut ist und jedes dieser Teile unabhängig voneinander funktioniert. Das Schöne daran ist, dass Sie nicht verwenden müssen, wenn Sie entscheiden, dass ein Aspekt von Blueprint, z. B. ein Rasterlayout, nicht zu Ihrem Projekt passt, Sie aber dennoch die Vorteile von reset.css und typography.css nutzen möchten Das Raster, aber die anderen Stile funktionieren weiterhin.

3. Erstellen wir ein Layout mit Blueprint

Diese Seite ist eine Idee, die ich in meinem Gehirn herumgetrampelt habe, also dachte ich, ich würde sie hier zum Leben erwecken. Es ist eine Seite, auf der Leute, die gerne Romane als Hobby schreiben, Romane anderer Hobbyautoren rezensieren und ihre eigenen hochladen können, um sie zu rezensieren.

Mir ist klar, dass alle Rockstar-Designer, die am Anfang geblieben sind, jetzt gehen werden, nachdem sie sich mein Design angesehen haben, aber das Interessante an diesem Design ist, dass ich kein CSS dafür geschrieben habe. Dieses Design verwendet nur Blueprint-Stile und obwohl es nicht das Ende aller Designs ist, bietet es ein flexibles, gut aussehendes Design für mein Projekt. Da sich mein Design wahrscheinlich ändert, erleichtert Blueprint das Aktualisieren meines Layouts. Wenn meine Website voll funktionsfähig ist, kann ich darüber nachdenken, einige meiner eigenen Stile hinzuzufügen, damit die Dinge schöner aussehen.

4. Brechen Sie es auf

Der Kopf des Dokuments

    <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <title>Book Haven</title>

      <!-- Framework CSS -->
        <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
        <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

        <!-- Import fancy-type plugin. -->
        <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
    </head>  
  

So sollte ein typisches <head> -Tag aussehen, wenn Sie Blueprint verwenden. Sie müssen die CSS-Dateien des Frameworks einschließen, die aus screen.css, print.css und ie.css bestehen.

Eine großartige Sache bei Blueprint: Es ist nur CSS, sodass es wie jedes andere CSS überschrieben werden kann. So funktionieren Blueprint-Plugins. In diesem Beispiel verwende ich das Blueprint-Plugin für ausgefallene Typen, das ein ausgefallenes Typografie-Styling bietet. Sie können sehen, dass ich unter den CSS-Dateien des Frameworks eine Verknüpfung mit der CSS-Datei vom Typ "Fancy" hergestellt habe, sodass das CSS vom Typ "Fancy" die vom Framework definierten Stile überschreiben kann. Zu diesem Zweck gibt es

Mehrere BP-Plugins verfügbar

die einfach Aspekte des Frameworks überschreiben oder neue Stile hinzufügen, die Sie verwenden können.

Zuletzt sollten Sie Ihre CSS-Datei einfügen, in der Sie Stile aus dem Framework überschreiben und der Seite Ihr eigenes Styling hinzufügen können.

Der Seitenkopf

    <body>
      <div class="container">

        <div id="header" class="span-24 last">

          <h1 id="book_haven"><img src="images/header.gif" alt="Book header image" id="header-image" /></h1>
        </div>

        <hr />
        <div id="subheader" class="span-24 last">
          <h3 class="alt">Get opinions on your latest novel, and read what other people are writing about.</h3>
        </div>

        <hr />  
  

Das Wichtigste an diesem Code: Ihr Raster muss von einem <div> mit einer Klasse von 'container' umgeben sein, da es sonst nicht als Raster angezeigt wird. Die <hr /> -Tags werden von Blueprint verwendet, um Abschnitte Ihrer Seite vertikal zu trennen. Die 'alt'-Klasse wird Ihnen vom ausgefallenen Plugin zur Verfügung gestellt und bietet eine gute Möglichkeit, Text aufzupeppen (kann auf jedes Textelement angewendet werden).

Hauptinhalt

    <div class="span-17 colborder" id="content">
          <h3 class="loud">Featured Book: "The World Without Us"</h3>
          <p>
            <img class="right" src="images/world-book.gif" alt="featured book" />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          </p>


          <p>
            Cras sagittis. Fusce porttitor felis sed massa. In hac habitasse platea dictumst.           
          </p>

          <hr />
          <div class="span-8 colborder">
            <h4 class="prepend-5">Upload a Book</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis. 
            </p>      
          </div>

          <div class="span-8 last">
            <h4 class="prepend-5">Write a Review</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis. Mauris ipsum. 
            </p>      
          </div>
        </div>

        <div class="span-6 last" id="sidebar">

          <div id="recent-books">
            <h3 class="caps">Recent Books</h3>

            <div class="box">
              <a href="#" class="quiet">Hygiene</a>
              <div class="quiet">Nov. 29, 2008</div>
              <div class="quiet">by Craven</div>
            </div>

          </div>

          <div class="prepend-top" id="recent-reviews">
            <h3 class="caps">Recent Reviews</h3>
            <div class="box">
              <span class="quiet">Thor reviewed Hygiene</span>
              <div class="quiet">Rating: 4/5</div>
              <a href="#" class="quiet">Read this review</a>
            </div>

          </div>
        </div>

        <hr />

Es gibt viele wichtige Dinge in diesem Code-Snippet! Beginnen wir oben mit <div class="span-17 colborder">. Dieses Tag deklariert das größte umrissene Div auf dieser Seite, das den Abschnitt "Empfohlenes Buch" sowie die beiden kleineren Abschnitte unten enthält. Die Klasse 'span-17' bezieht sich auf das Blueprint-Rasterlayout. Es wird festgelegt, dass die Breite dieses Div span 17 der 24 Spalten auf der Seite umfassen soll. Die andere verwendete Klasse, 'colborder', ist die Abkürzung für Spaltenrand und weist Blueprint an, rechts neben diesem Div einen Rand zwischen ihn und die Seitenleiste zu setzen.

Wichtig: Die Verwendung der Klasse 'colborder' nimmt tatsächlich eine ganze Spalte ein. Da unser Hauptteil 17 Spalten verwendet (span-17), würden Sie erwarten, dass die Seitenleiste 7 Spalten belegen könnte (da 17 + 7=24, die Anzahl der Spalten auf unserer Seite), aber da die Eigenschaft 'colborder' belegt Dies ist nur eine Spalte für sich selbst, sodass nur noch 6 Spalten für die Seitenleiste div verfügbar sind (17 + 1 + 6=24).

Bevor wir zur Seitenleiste gelangen, müssen wir uns die beiden kleineren Divs mit dem Titel "Upload a Book" und "Write a Review" ansehen. Dies ist tatsächlich ein Blueprint-Raster, das ein anderes Blueprint-Raster verschachtelt. Da das innere Gitter in einem 17 Spalten umfassenden Div verschachtelt ist, beträgt die maximale Breite für dieses Gitter anstelle von 24 17.

Das erste Div hat also die Klassen 'span-8' und 'colborder', was bedeutet, dass seine Breite 8 Spalten umfasst und rechts einen Rand hat. Die zweite Division hat hier die Klassen 'span-8' und 'last'. Dies ist ein wichtiger Bestandteil des Blueprint-Grid-Frameworks. Die Spalte ganz rechts in einem Raster muss die Klasse 'last' verwenden. Dies teilt BP mit, dass dies die letzte Spalte in diesem Raster ist und kein Platz mehr erforderlich ist. Beachten Sie, dass wir zunächst Platz für 17 Spalten hatten, jede der Divs 8 Spalten umfasste und die Eigenschaft 'colborder' die letzte Spalte einnahm (8 + 8 + 1=17).

OK, zurück zur Seitenleiste. Die Seitenleiste div hat die Klassen 'span-6' und 'last'. Ich bin sicher, ihr habt jetzt verstanden, wie diese Klassen funktionieren. Diese Seitenleiste vervollständigt das Raster, mit dem die Hauptspanne 17 begonnen hat. Falls Sie es nicht bemerkt haben, kann die Klasse 'span-#' eine beliebige Zahl zwischen 1 und 24 annehmen, es sei denn, Sie entscheiden sich für ein größeres Raster. In diesem Fall kann die Klasse 'span-#' eine beliebige Zahl annehmen, solange Die Anzahl ist geringer als die Gesamtzahl der Spalten in Ihrem Raster.

Hier geht es um das einfachste HTML, das ich mir vorstellen kann, um das Raster zu demonstrieren.

    <div class="container">
          <div class="span-24">
              Header
          </div>
          <div class="span-4">
              Left sidebar
          </div>
          <div class="span-16">
              Main content
          </div>
          <div class="span-4 last">
              Right sidebar
          </div>    
      </div>

Schauen wir uns noch einige der CSS-Klassen an, die wir im Layout verwendet haben.

'caps': Diese Klasse wird in den Titeln der Seitenleiste verwendet. Es wird uns vom ausgefallenen Plugin zur Verfügung gestellt und bietet ein schönes Styling für großgeschriebene Titel.
'box': Dies ist eine großartige Option zum Anzeigen von Listenelementen. Es unterscheidet diese Elemente leicht vom Rest der Seite und bietet einen schönen Abstand zwischen den Elementen und eine schöne Polsterung für die darin enthaltenen Elemente.
'quiet': Dies ist eine CSS-Klasse, die die Farbe des Texts in das weiche Grau ändert, das Sie im Text der Seitenleiste sehen.
'prepend-top': Dieser wird im Abschnitt 'Recent Reviews' der Seitenleiste verwendet. Es wird einfach ein Rand von 1,5 em auf die Oberseite des Elements angewendet. Es gibt eine ähnliche Klasse namens "append-bottom", die den gleichen Effekt auf die Unterseite eines Elements hat.
'prepend-5': Ich benutze diese Klasse, um die Titel in den kleineren Divs nach rechts zu verschieben. In Blueprint gibt es verschiedene Klassen für den Abstand: Voranstellen, Anhängen, Ziehen und Drücken. Voranstellen und Anhängen fügen links und rechts Polster hinzu. Ziehen und drücken Sie, um links und rechts einen Rand hinzuzufügen. Auch hier können Sie so viel anhängen, voranstellen, ziehen und schieben, wie Sie möchten, solange Sie keine Zahl verwenden, die größer ist als die Gesamtzahl der Spalten in Ihrem Raster (z. B. prepend-25 in einem Raster mit 24 Säulen).

Wenn Sie mit dem CSS-Box-Modell nicht vertraut sind und den Unterschied zwischen Polsterung und Rand nicht kennen, finden Sie hier eine kurze Lektion. In CSS fügt das Auffüllen Platz innerhalb der Ränder des Elements hinzu und vergrößert das Element tatsächlich. Wenn Sie beispielsweise eine Tabelle mit Rahmen haben und dieser Tabelle Auffüllungen hinzufügen, werden die Rahmen tatsächlich von der Tabelle weggeschoben. Der Rand hingegen fügt Platz außerhalb des Rahmens hinzu und vergrößert das Element nicht. Dies kann dazu führen, dass andere Elemente vom aktuellen entfernt oder das aktuelle Element auf der Seite verschoben werden. Hier ist ein großartiges Bild, um das CSS-Box-Modell zu demonstrieren:

5. Zusammenfassung

Dieses Tutorial soll Ihnen zeigen, wie Blueprint CSS verwendet werden kann, um die Grundlagen für Ihr nächstes Projekt zu schaffen oder zumindest Ihre Schultern beim Zurücksetzen und bei der Typografie zu entlasten. Wenn Sie Blueprint mit Rails verwenden, überprüfen Sie das Repository auf Github, da es einige Funktionen bietet, mit denen Sie Blueprint einfach integrieren und für die Arbeit mit Ihrem Rails-Projekt konfigurieren können.

Das Beste an Blueprint ist, dass es nur CSS ist. Es ist alles CSS. Wenn Sie also an Blueprint interessiert sind, schauen Sie sich die Quelle an und wenn Sie Kenntnisse über CSS haben, sollten Sie verstehen können, wie das alles funktioniert. Blueprint ist auch keine sehr große Codebasis, es hat wahrscheinlich weniger CSS als die meisten von uns in einem typischen Projekt verwenden. Sie können die Quelle sogar in Ihrem Browser im Blueprint-Repository auf Github lesen.

Ich werde Ihnen ein paar Ressourcen zu Blueprint hinterlassen:

Die Blueprint-Website finden Sie unter blueprintcss.org. Dies ist der einfachste Ort, um das Framework herunterzuladen.
Standardmäßig verwendet Blueprint ein festes Layout. Wenn Sie sich für flüssige Layouts entscheiden, finden Sie hier ein Plugin, mit dem Blueprint mit einem flüssigen Layout arbeiten kann.
Weitere Blueprint-Plugins

Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.