CSS verfügt auch über ein Framework: Einführung in Blueprint

Das CSS-Framework-Design kann uns dabei helfen, schnell und effektiv hochwertige Seiten zu erstellen und auch zur Standardisierung des Codes beizutragen. Natürlich basiert jedes Framework auf den Bemühungen unzähliger Vorgänger. Hier ist ein empfohlenes CSS-Framework – das Blueprint CSS Framework

CSS-Frameworks + CSS-Reset: Design von Grund auf neu

http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch

1. Einführung

Blueprint ist ein sogenanntes CSS-Framework. Im Vergleich dazu sind die Kommentare im Blueprint-Code relativ detailliert.

Befolgen Sie die Methode zum Erstellen eines CSS-Frameworks, wie in Jeff Crofts Frameworks for Designers (oder der chinesischen Version von Understanding Web Frameworks and How to Build a CSS Framework) beschrieben:

Es gibt mehrere Möglichkeiten, ein Framework zu erstellen, aber die gebräuchlichste und wohl nützlichste besteht darin, Ihr gemeinsames CSS in einzelne Stylesheets zu abstrahieren, die jeweils einen bestimmten Teil des Ganzen abdecken Das Schöne an diesem Ansatz ist die Möglichkeit, selektiv nur die Stile einzubeziehen, die Sie benötigen. Möglicherweise haben Sie am Ende sechs oder sieben verschiedene Stylesheets in Ihrem Framework, aber wenn dies bei einem bestimmten Projekt nicht der Fall ist. Sie benötigen nicht ein oder zwei davon, sie müssen nicht enthalten sein. Das Framework, das wir in unserem Büro erstellt haben, verfügt über fünf Stylesheets:.

reset.css – übernimmt den Massen-Reset.

type.css – kümmert sich um die Typografie.

grid.css – verwaltet das Layout-Raster.

widgets.css – verwaltet Widgets wie Registerkarten, Dropdown-Menüs und „Weiterlesen“-Schaltflächen.

base.css – enthält alle anderen Stylesheets, sodass wir nur base.css aus unseren (X)HTML-Dokumenten aufrufen müssen, um das gesamte Framework zu nutzen.

Der Bauplan ist ähnlich aufgebaut :

Teile und herrsche :

Im Hinblick auf die funktionale Organisation verteilt Buleprint Funktionen wie Layout, Typografie, Widget, Zurücksetzen und Drucken in verschiedene CSS-Dateien. Dadurch können Benutzer bequem nur die Funktionen importieren, die sie verwenden möchten, anstatt alle Dateien zu importieren, und die Leistung beim Laden von Seiten wird verbessert. Derzeit bietet der Komponentenabschnitt nur die Verarbeitung von Schaltflächen und hat den MECE-Ansatz („gegenseitig unabhängig und vollständig erschöpfend“) von McKinsey noch nicht erreicht.

Einheitliche Schnittstelle :

Obwohl die Funktionen auf mehrere CSS-Dateien verteilt sind, muss beim Import nur dieselbe Datei screen.css einbezogen werden. Die spezifischen Importdetails werden in screen.css verarbeitet, wodurch die externe Schnittstelle vereinheitlicht wird.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />

Beschreibung der im Blueprint enthaltenen CSS-Datei:

screen.css

Dies ist die Hauptdatei des Frameworks. Sie importiert andere CSS-Dateien aus dem Verzeichnis „lib“ und sollte auf jeder Seite enthalten sein.

Ähnlich wie bei der base.css-Funktion von Jeff Croft müssen Sie nur diese Datei einbinden und sie kann importiert werden

print.css

Diese Datei legt einige Standarddruckregeln fest, sodass gedruckte Versionen auf jeder Seite enthalten sind.

Wird zum Drucken verwendet und kann als Widget klassifiziert werden.

lib/grid.css

Diese Datei richtet das Raster ein (das stimmt). Sie enthält viele Klassen, die Sie auf Divs anwenden, um jede Art von spaltenbasiertem Raster einzurichten.

Wird zur Handhabung des Seitenlayouts (Spalten) verwendet.

lib/typography.css
Diese Datei legt einige Standardtypografien fest. Sie enthält auch einige Methoden für einige wirklich ausgefallene Dinge, die mit Ihrem Text zu tun haben.

Wird verwendet, um das Layout von Seitenelementen zu verwalten.

lib/reset.css

Diese Datei setzt CSS-Werte zurück, die Browser normalerweise für Sie festlegen.

Wird verwendet, um die Seite zurückzusetzen und Standardwerte für Seitenelemente anzugeben, die keine CSS-Attribute angeben.

lib/buttons.css
Bietet einige großartige Nur-CSS-Schaltflächen.

Wird zur Handhabung von Schaltflächen verwendet, die als Widgets klassifiziert werden können

lib/compressed.css

Eine komprimierte Version der Kerndateien. Verwenden Sie diese auf jeder Live-Site.

Anweisungen finden Sie in screen.css

Stellen Sie komprimierte CSS-Dateien bereit (einschließlich Grid.css, Typography.css, Reset.css, Buttons.css).

2. Recherche zur Nutzung jedes Moduls

2.1. Recherche zu Grid.css

Kompatibilitätsbehandlung der browserübergreifenden Zentrierung

Um die Unterschiede zwischen Firefox und IE bei der Zentrierung auszugleichen, werden im Allgemeinen die folgenden Methoden verwendet:

body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}

Abgerufen von: http://www.maxdesign.com.au/presentation/center/

So gehen Sie mit Blaupausen um:

body { text-align: center; /* IE6 Fix */ margin:36px 0;}/* Ein Container sollte alle Ihre Spalten gruppieren */ .container { text-align: left; : 0 auto; /* Zentriert das Layout */ width: 1150px; /* Gesamtbreite */ }So implementieren Sie den Entwurf für Spalten (Spalten):

Blueprint definiert .column, .span-x und .last, die kombiniert werden, um die Spaltenfunktion zu realisieren.

Darunter: .column definiert das Float-Attribut der Spalte; .span-x definiert die Spaltenbreite; .last setzt den Rand rechts auf 0px.

2.2. Recherche zu reset.css

Der ursprüngliche Code von reset.css sollte von Eric Meyer stammen. Eric Meyer hat zwei Protokolle zum Thema Zurücksetzen, die verwendet werden, um das Problem unterschiedlicher Standardwerte in verschiedenen Browsern zu lösen. Die Dokumentation von Eric Meyer ist ausgezeichnet:

Begründung zurücksetzen: http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Neu geladen zurücksetzen: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Warum zurücksetzen?
Der Hauptgrund dafür ist, dass alle Browser über Präsentationsstandards verfügen, aber kein Browser über dieselben Standardeinstellungen verfügt (Okay, es gibt keine zwei Browserfamilien – die meisten Gecko-basierten Browser haben dieselben Standardeinstellungen.)
Beispielsweise rücken einige Browser ungeordnete und geordnete Listen mit linken Rändern ein, während andere den linken Abstand verwenden. In den vergangenen Jahren haben wir diese Inkonsistenzen von Fall zu Fall behoben.

Warum den Reset-Stil anstelle des Universal-Selektors verwenden?

Der sogenannte Universal-Selektor verwendet beispielsweise *, um alle Elemente des Dokuments darzustellen

* { margin: 0;} Einige Ressourcen zum Thema Reset-Stil:

YUI-Reset-Bibliothek: http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

Bei den folgenden Artikeln handelt es sich eigentlich um Artikel, in denen das CSS-Framework oder Tipps behandelt werden, aber sie alle erwähnen das Thema „Zurücksetzen“.

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://businesslogs.com/design_and_usability/my_5_css_tips.php

http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3. Recherche zu typography.css

typography.css wird verwendet, um das Standardlayoutformat (Baseline) von Seitenelementen zu bestimmen:

Festlegen des Typs im Web auf ein Grundlinienraster:

http://alistapart.com/articles/settingtypeontheweb

2.4. Recherche zu Buttons.css

In „Rediscovering the Button Element“ werden die verschiedenen Vorteile der Verwendung des Button-Elements als Ersatz für das Eingabeelement erläutert. Das Button-Element bietet umfangreichere Funktionen.

http://particletree.com/features/rediscovering-the-button-element

2.4. Print.css-Recherche

Eric Meyer hat einen Artikel über die Implementierung der Druckfunktion in CSS verfasst, der als Referenz zum Verständnis von print.css verwendet werden kann.

CSS-Design: Zum Drucken gehen

Anders drucken

2.5, komprimiertes.css

compress.css ist ein Paket, das mehrere Blueprint-Dateien komprimiert. Es komprimiert auch die CSS-Datei und entfernt unnötige Leerzeichen, Zeilenumbrüche, Kommentare und anderen Text.

Diese Methode wird bei der Bereitstellung auf Produktionssystemen verwendet, um den Import mehrerer CSS-Dateien auf der Seite zu vermeiden, und ist auch hilfreich, um die Seitenleistung zu verbessern.

Gemäß den Anweisungen in lib/screen.css sollte der von Teenage bereitgestellte CSS-Komprimierungsdienst verwendet werden:

http://teenage.cz/acidofil/tools/cssformat.php

Zu den ähnlichen Diensten, die die Optimierung und Komprimierung von CSS und Javascript ermöglichen, gehören außerdem:

http://csstidy.sourceforge.net/ (Open Source)

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ (basierend auf csstidy)

3. Anwendungsbeispiele

4. Referenzdokumente

http://code.google.com/p/blueprintcss/wiki/Tutorial

5. Verwandte Projekte

Blueprint-Generator: http://kematzy.com/blueprint-generator/

Tripolis: http://monc.se/tripoli/

Empfohlener Artikel: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/