Version: 1.0

Copyright (c) 2010 Shopware AG

Dieses Paket bietet Ihnen die Möglichkeit das BlueprintCSS Framework in Ihrem Shopware Template zu nutzen.

BlueprintCSS bietet Ihnen ein Grid, welches in 24 Spalten eingeteilt ist und eine Gesamtbreite von 950px hat. Als Lizenz für BlueprintCSS kommt eine modifizierte Version der MIT Lizenz zum Einsatz.

Für weitere Informationen zur Lizenzierung von BlueprintCSS folgen Sie bitte folgendem Link: http://wiki.github.com/joshuaclayton/blueprint-css/license

Die Installation dieses Template gestaltet sich wirklich einfach. Es wird empfohlen vor der Installation Ihr Standardtemplate zu sichern. Sie überschreiben dieses im späteren Verlauf dieser Installation.

1. Stellen Sie eine Verbindung zu Ihren FTP-Server her

2. Wechseln Sie in das Verzeichnis "/templates"

3. Laden Sie den Ordner "0", welcher neben dieser Installationsanleitung im Archiv befinden, auf Ihren FTP-Server hoch

4. Aktivieren Sie ggf. das Template in Ihrem Shopware Backend unter Einstellungen -> Templateauswahl

5. Fertig

BlueprintCSS baut auf ein so genanntes Grid-System auf. Dieses System basiert standardmäßig auf 24 Spalten, wo jede Spalte eine Breite von 30px und einer Gesamtbreite von 950px hat.

Wenn Sie das BlueprintCSS verwenden, achten Sie bitte darauf dass sich Ihre Elemente wie Links, Paragraphen und Div-Boxen innerhalb einer Div-Box befindet, welche die Klasse "container" vorweist.

Wir verwenden für dieses Template ein typisches 3-spaltiges Layout, wie Sie es häufig im Internet vorfinden. In der linken Spalte unseres Layouts befindet sich die Kategorienauswahl, deren Unterkategorien sowie alle statischen Seiten, die Sie in der Spalte links definiert haben.

Diese Div-Box hat die Klasse "span-4" und die ID "left" zugewiesen bekommen. Durch das "span-4" legen wir eine Breite von 150px sowie ein Spacing nach rechts von 10px fest.

Der Content-Bereich hat die Klasse "span-16" und die ID "middle", was eine Breite von 630px sowie wieder ein Spacing nach recht von 10px festlegt.

Die rechte Spalte, wo sich das Topseller Accordion befindet, hat auch die Klasse "span-4" sowie die ID "right" zugewiesen bekommen. Da dies die letzte Box in unserem 3-spaltigen Layout ist, vergeben wir zusätzlich die Klasse "last" um das standardmäßige Spacing nach rechts zu deaktivieren.

Die beachten Sie dass auf manchen Seiten die rechte Spalte komplett ausgeblendet wird. Hier wird der dann der Content-Bereich von den standardmäßigen 650px auf 780px gestreckt. Falls Sie selbst Anpassungen am Template vornehmen, achten Sie darauf dass die Box nicht 16 Spalten sondern 19 Spalten sind.

Wenn Sie wie wir beispielsweise ein 3-spaltiges Layout anlegen möchten dann machen Sie dies wie folgt:

 
<div class="container">
   <div class="span-4">
       linke Spalte 
   </div>
 
   <div class="span-16">
       mittlere Spalte 
   </div>
 
   <div class="span-4 last">
       rechte Spalte 
   </div>
</div>
 

Bitte beachten Sie dass nicht die komplette Funktionalität zur Verfügung stehen, da wir das BlueprintCSS Framework für die Verwendung in unseren Templates modifiziert haben. Wir verwenden nur noch den Reset sowie den Hauptteil des Framework, das Grid, für dieses Templates.

Für weitere Informationen zur Benutzung von BlueprintCSS erhalten Sie auf der Projektseite des Frameworks: blueprintcss.org

Für dieses Template haben wir die grundlegende Struktur unserer Stylesheets geändert, was Ihnen als Anwender natürlich auch einen Vorteil bietet. Wir konnten die Größe unseres Hauptstylesheets "basic.css" von 98 kB auf unter 64 kB drücken, was Ihren Shop wieder ein wenig mehr Geschwindigkeit liefert. Bitte beachten Sie dass die "basic.css" umbenannt wurde in "style.css" und die Dateistruktur verändert wurde.

Durch die Umstellung des Templates haben wir uns dazu entschlossen einen zentralen Punkt zur Verwaltung der verwendeten Stylesheets zu finden, so dass wir uns dazu entschieden haben, die einzelnen Stylesheets über die "style.css" zu importieren.

Durch die Verwendung von einen CSS-Frameworks können wir Ihnen die Möglichkeit bieten auf eine gleichbleibende, standardisierte und sorgsam getestete Grundlage Ihre eigenen Template zu erstellen.

Dazu bieten wir Ihnen auch einen kleinen Geschwindigkeitsbonus, welchen wir durch ablösen mehrerer Klassen