960 Grid System kleines Tutorial für Drupal zur Einrichtung

Kleines 960 Grid Sytem (960.gs)Tutorial für Drupal. Wie richte ich das 960.gs in Drupal ein - Vorbereitungen.

Ich werde hier nicht die Funktionsweise des 960.gs erklären sondern meine Herangehensweise wie ich es einrichte bevor ich mit dem Theming beginne. Wenn jemand ganz andere oder bessere Vorstellungen hat bin ich für Kommentare sehr dankbar.

Download und Installation

http://drupal.org/project/ninesixty

Installation nach: sites/all/themes

Aktivieren unter: admin/build/themes

Ich benutze gerne während der Entwicklung ein separates Theme für die Admin-Oberfläche. Ist einfach übersichtlicher während des themings.

Das kann man einstellen unter:

admin/settings/admin

Da nehme ich immer das Standard Garland-Theme.

Vorbereitung:

Man sollte auf keinen Fall die Ninesixty Core Dateien ändern sondern eine eigene CSS Datei erstellen. Sonst kann es zu massiven Problemen bei einem Update kommen.

Es ist daher wichtig ein subtheme zu erstellen. Das ist eigentlich recht simpel.
Im "sites/all/themes/" Ordner erstellt man einen weiteren Ordner "mein_themename_ordner".

Dieser muss eine .info (mein_themename.info) Datei enthalten mit folgendem Inhalt:

name = mein_themename
description = 960 Subtheme
screenshot = images/screenshot.png
core = 6.x
engine = phptemplate
base theme = ninesixty

stylesheets[all][] = mein_themename.css

Bei Bastheme den Namen eintragen wie er in der .info Datei unter "Name = … " steht.

Wenn ich nun noch Javascripts einbinden möchte dann erstelle ich mir einen entsprechenden Ordner "scripts" und binde diese dann auch über die ".info" in Drupal ein.

; adding the scripts
scripts[] = scripts/myscript.js

Wenn man die CSS Datei "style.css" nennt wird diese von Drupal automatisch erkannt. Genauso verhält es sich mit Javascript Dateien diese müssen dann scripts.js heissen.

Wenn ich für unsere Freunde von Microsoft dem Internet Explorer 6 oder 7 eigene Stylesheets brauche dann setzte ich folgenden Code im von der page.tpl.php ein:

<!--[if IE 6]>
      <link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie6.css" type="text/css">
<![endif]--><!--[if IE 7]>
      <link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie7.css" type="text/css">
<![endif]-->

Somit stelle ich sicher, das die Pfade Dynamisch bleiben und ich einfach von meiner Testumgebung auf den Liveserver migrieren kann.

Dann richte ich noch das entsprechende Logo unter "admin/build/themes/settings" ein und kann mit dem Theming beginnen.

Was mich immer nervt sind irgendwelche margins und paddings die irgendwo herkommen. Deswegen hab ich mir eine eigene "myrest.css" gemacht die vieles was von "views" usw. kommt zurücksetzt. Diese binde ich dann in meine "projektname.css" mit "@import url(myreset.css);" ein.

Im Moment enthält diese folgendes:

/* @group general Reset */
.block ul,
.item-list ul li {
 margin: 0;
 padding: 0;
}
#site-menu, #branding {
 margin: 0;
 padding: 0;
}
#site-header,
#site-subheader,
.column,
.node,
.comment,
.block {
  margin: 0;
  padding: 0;
}
ul.tips li {
 list-style-type: none;
 padding-left: 0;
}
a {
 text-decoration: none;
}
ul.links li {
 padding: 0;
}
.form-item {
 margin: 0;
 padding: 0;
}
li.leaf {
list-style-image:none;
list-style-type: none;
}
tbody {
border-top:0;
}
thead th {
border-bottom:0;
padding-right:0;
}
tr.even, tr.odd {
background-color:white;
border-bottom:0;
padding:0;
}

/* @end */

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
  margin-bottom: 0;
}

Ich habe hier auch eine Subtheme - Vorlage angehängt.