Wenn es darum geht, eine Website aus dem Nichts komplett neu zu erstellen, braucht man eigentlich ein Grundgerüst. Damit meine ich keine Frameworks für Webentwicklung wie CakePHP o.Ä. und auch nicht diese seltsamen CSS-Frameworks auf die in letzter Zeit alle so scharf sind. Die sind vielleicht in Einzelfall zu gebrauchen, aber sonst nicht. Ein Framework, das irgendein Heini am anderen Ende der Welt zusammenkloppt, kann unmöglich genau für den Auftrag passend sein, den man gerade von einem Kunden aus der Nachbarstadt bekommen hat. Andere haben das auch schon ausführlicher bearbeitet.

Eine Art Framework benutze ich aber trotzdem. Es ist im Wesentlichen ein Haufen (großteils leerer) Dateien und Verzeichnisse, die ich aber wirklich bei so gut wie jedem Projekt brauche. Ich nenne es immer mein Starterkit. Und das sieht so aus:

HTML

Eine Datei index.html mit folgendem Inhalt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
	<head profile="http://gmpg.org/xfn/11">
		<title></title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="author" content="Peter Kröner" />
		<meta name="language" content="de" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta name="robots" content="index,follow" />
		<style type="text/css" media="screen">@import url("default.css");</style>
		<style type="text/css" media="screen">@import url("style.css");</style>
		<!--[if IE 7]><style type="text/css" media="screen">@import url("ie7.css");</style><![endif]-->
		<!--[if lte IE 6]><style type="text/css" media="screen">@import url("ie6.css");</style><![endif]-->
		<style type="text/css" media="print">@import url("print.css");</style>
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="apple-touch-icon" href="apple-touch-icon.png" />
	</head>
	<body>

	</body>
</html>

Ein ganz einfaches, leeres XHTML-Strict-Dokument. Sofern man nicht ein bestehendes System bearbeiten muss, braucht man das immer irgendwann. Eingebaut sind die Links für das Favicon, das Icon für iPhones und iPod Tourch sowie alle fünf Style-Elemenente.

CSS

Es gibt fünf CSS-Dateien, die ich eigentlich immer benutze. Erstens: default.css mit folgendem Inhalt:

/*

	Projekt:
	Datei: default.css
	Author: Peter Kröner

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background-image:none; }

body { line-height:1; color:black; background:white; text-align:center; }

ol, ul { list-style:none; }

table { border-collapse:collapse; border-spacing:0; }

caption, th, td { text-align:left; font-weight:normal; }

blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }

Das ist ein ganz durchschnittlicher CSS-Reset, den ich irgendwann mal von Eric Meyer geklaut und dann so lange umgebaut habe, bis ich zufrieden war.

Zweitens: style.css mit folgendem Inhalt:

/*

	Projekt:
	Datei: style.css
	Author: Peter Kröner

	============
	== FARBEN ==
	============

	Hintergrund:
	Text: 

*/

/* Basics */
body {  }
a {  }
	a:link {  }
	a:visited {  }
	a:hover {  }
	a:active {  }
q {  }
	q q {  }
strong {  }
em {  }

/* Layout */

/* Textgestaltung */

/* Spezielle Klassen */

/* Allgemeine Klassen */

.clear { display:block; width:100%; clear:both; }

Wie man sieht ist die Datei weitgehend leer, abgesehen von den Dingen, die jedes Mal gebraucht werden: Dokumentkopf, ein paar Kommentare für die Gliederung und ein paar Elemente und Klassen.

Drittens und viertens gibt es die Dateien ie6.css und ie7.css für das Ausbügeln der Böcke unserer Lieblingsbrowser, die bis auf einen Dokumentkopf wie beim Hauptstylesheet leer sind. Letzte Datei im Bunde ist print.css, die den gleichen Inhalt hat wie die style.css.

Verzeichnisse

Bilder lade ich so gut wie immer in img ab, kleine Icons landen in img/icons. Deswegen gehören die beiden Verzeichnisse auch zu meinem Framework.

Optional: htc-Files für den Internet Explorer

Oft, aber nicht immer braucht man ein Set an htc-Dateien, die dem Internet Explorer Unterstützung für Dinge beibringen, die er normalerweise nicht kann. Das wichtigste ist hierbei htcmime.php mit folgendem Inhalt:

<?php
	// Get component file name
	$fname = (array_key_exists("file", $_GET)) ? $_GET["file"] : "";
	// basename() also strips x00, we don't need to worry about ? and # in path:
	// Must be real files anyway, fopen() does not support wildcards
	$ext = array_pop(explode('.', basename($fname)));
	if (strcasecmp($ext, "htc") != 0 || !file_exists($fname))
		exit ("No file specified, file not found or illegal file.");
	$flen = filesize($fname);
	header("Content-type: text/x-component");
	header("Content-Length: ".$flen);
	header("Content-Disposition: inline; filename=$fname");
	$fp = fopen($fname, "r");
	echo fread($fp, $flen);
	fclose($fp)
?>

Diese Datei habe ich von hier und sie sorgt dafür, dass .htc-Dateien vom Server mit dem korrekten Mimetype ausgeliefert werden. Man muss dann nur in seinen Stylesheets behavior:url(xyz.htc) durch behavior:url(htcmime.php?file=xyz.htc) ersetzen.

Dazu kommen dann, je nachdem was gebraucht wird, IEPNGFix v2.0 (transparente PNGs) und/oder csshover.htc (:hover für den IE6), die ich beide lokal vorrätig halte.

Fazit

Der eine oder andere vermisst in der obrigen Aufstellung vielleicht ein Javascript-Framework, aber ich als Mootooler baue mir da lieber für jedes Projekt die Komponenten neu zusammen. Manchmal braucht man JSON-Support, manchmal nicht.

Mit diesem Starterkit kann man (zumindest ich) schnell aus dem Nichts eine Website zusammenbauen, ohne sich um die nervigen Basics kümmern zu müssen. Es ist, anders als bei den ganzen dicken Frameworks nichts dabei, was ich nicht wirklich jedes Mal bräuchte, aber es ist genug, um den Start spürbar zu beschleunigen. Und so gefällt mir das.

Wie sieht euer Starterkit oder Framework aus?