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?
Kommentare (25)
Ich ¶
15. September 2008, 19:45 Uhr
Nett, aber meinste denn das das Apple-Touch-Icon wirklich nötig ist für die paar iPhone-Nutzer?
Peter ¶
15. September 2008, 19:49 Uhr
Nötig ist es vielleicht nicht, aber der Mehraufwand dafür geht gegen Null … kann man machen, muss man nicht. Ich mach’s.
HASENFARM ¶
15. September 2008, 19:52 Uhr
Vielen Dank für die Zusammenstellung. Bisher habe ich mir immer mein letztes Projekt genommen und einfach umgeschrieben. Mir fehlte die Lust, das so strukturiert aufzuarbeiten, wie du.
Und welcher Webdesigner ignoriert schon das iPhone? Viel eher und lieber ignoriere ich den IE6.
Markus ¶
15. September 2008, 20:06 Uhr
Sieht gut aus! Würde evtl jQuery mit reinnehmen. Und die CSS-Dateien ebenfalls in nen eigenen Ordner. So hab ich's auch mal bei Gerrit gesehen (ohne Link - iPhone ;-) ) & für gut befunden. Was ich super finde: Die .htc-Dateien. Hab sie bisher nie eingebunden, wollte es aber immer machen. Spricht eigentlich irgendwas Gravierendes gegen deren Einsatz?
Na ja, herzlichen Dank für den Input, werd ich die Tage sicherlich gebrauchen :-)
Peter ¶
15. September 2008, 20:11 Uhr
Zitat Markus:
Eigentlich nicht. Der einzige Haken ist, dass sie nicht funktionieren wenn der Nutzer Javascript abgeschaltet hat.
Janis von Seggern ¶
15. September 2008, 20:24 Uhr
Mein „Starterkit“ sieht haargenau so aus wie deines, jedoch benutze ich folgendes CSS-Grundgerüst:
/**
* Titel der Website
*
* @copyright © 2008
* @author Janis von Seggern
* @site www.janisvonseggern.de
*/
/**
* @section Positioning
*/
body {}
#wrapper {}
#navigation {}
#footer {}
/**
* @section Colors
*/
…
/**
* @section Typography
*/
…
Janis von Seggern ¶
15. September 2008, 20:27 Uhr
Jetzt habe ich doch glatt den Hinweis auf die CSSDoc vergessen: Tom Klingenberg, Timo Derstappen und Dirk Jesse haben unter www.cssdoc.net eine Art „Spezifikation“ von CSS-Kommentaren, ähnlich der Javadoc, geschaffen.
Benni ¶
15. September 2008, 20:36 Uhr
So was ähnliches habe ich mir auch schon mal gebaut, jedoch ist mein "Framework" noch um einiges schlanker gehalten.
Mal schauen, eventuell blogge ich auch mal darüber wie ich mit Projekten anfange. Irgendwie hast Du mich gerade dazu inspiriert :-D
bloodflash ¶
15. September 2008, 22:52 Uhr
XHTML-Kopf, CSS inkl Reset, Verzeichnisstruktur - das sieht bei mir recht ähnlich aus, wobei ich css, js, pic (statt img) und error-pages schon vorgefertigt habe.
Anfangen tue ich, indem ich erstmal alles nicht benötigte lösche ;) Natürlich nach der Handskizze und dem Sichten des zugelieferten Materials.
Richtig wichtig sind aber die Snippets, denn damit hole ich mir vorgefertigte Code-Konstrukte per Fingerdruck in den Editor. OK, könnte man auch als mein persönliches Framework bezeichnen. Wobei ich teilweise gar nicht mehr weiss, welchen Code ich von Grund auf geschrieben habe und welchen ich ursprünglich mal kopiert hatte und dann weiterverurstet.
(Hmm, da müsste ich mal aufräumen, habe gerade uralten Code mit Tabellenboxen und HTML-Font gefunden)
core ¶
16. September 2008, 04:50 Uhr
Sehr schönes Paket, hast Du Dir da zusammengestellt. Ich baue immer alles von Grund auf neu und jedesmal nervt es. Werde mir da das eine oder andere von Deinem Paket mal genauer anschauen. Danke.
Tornadokalle ¶
16. September 2008, 07:23 Uhr
Wer ist dieser Peter Kröner?
Peter ¶
16. September 2008, 07:50 Uhr
Zitat Tornadokalle:
Mh... also eigentlich sollte da ein normales ö sein. Ist in der Datei auch der Fall. Irgendwie macht mein Code-Script hier im Blog das kaputt. Muss ich beizeiten mal flicken.
Lexx ¶
16. September 2008, 07:52 Uhr
Zitat Tornadokalle:
Die komische Gestalt, die hier alles schreibt und so. :>
Siegfried ¶
16. September 2008, 08:31 Uhr
Nett gemacht. Bei der xhtml Datei sah es bei mir bis vor Kurzem ähnlich aus. Seit einiger Zeit gehe ich dazu über, stattdessen eine XSL Datei vorzuhalten, die aus einer html-ähnlichen, sehr einfachen Quelldatei eben dieses Gerüst ergänzt. Ich denke mal, dass ich damit auf Dauer weiter komme.
Bei CSS bin ich noch nicht so weit. Bis auf ein paar wenige Standards, die ich eigentlich immer verwende, bastle ich das css immer neu. Sollte ich mir vielleicht auch mal Gedanken drüber machen.
Eines allerdings ging mir durch den Kopf, als ich das hier las. Ich bin im Hauptberuf Softwareentwickler im Maschinenbau. Dabei habe ich vor Jahren eine interessante Beobachtung gemacht. In US-Firmen setzt man konsequent auf Standardpakete und passt notfalls die Firma an diese Standardpakete an. In deutschen Firmen wird jede Software unbedingt auf die Firmengegebenheiten angepasst, selbst, wenn das teuer wird. Sonderlösungen sind in Deutschland die Regel.
Ich bin prinzipiell für Individualität und Vielfalt und ziehe es vor, Software oder Webseiten individuell zu erstellen. Aber man sollte nicht außer Acht lassen, dass die Verwendung von "Kleidern von der Stange" durchaus auch ihren Sinn hat. Ich würde Niemanden runterputzen, weil er Massenware der Konfektionsware vorzieht. Es ist eine Frage des Verwendungszwecks und der Zielgruppe.
Philipp Marquardt ¶
16. September 2008, 08:51 Uhr
Interessant zu sehen, wie andere das machen!
In meiner HTML-Vorlage habe ich auch schon eine grobe Struktur (Container/Kopf/Inhalt) und eine ul für das Menü (im Kopf) vordefiniert, weil die in 99,95% aller Projekte eh gleich ist.
An CSS-Dateien beschränke ich mich auf 2: "styles.css", wo das "Reset" schon mit drin ist - so behalte ich besser den Überblick - und "ie.css" für IE 7 und 6.
Damit IE 7 und IE 6 sich eine CSS-Datei teilen können, darf man im HTML die XML-Deklaration nicht weglassen, also ganz am Anfang der HTML-Datei:" " - dann kann man im ie.css ganz normale Regeln für den 7er schreiben und für den 6er mit "* html".
Mal sehen, wie das jetzt mit dem IE 8 wird …
Übrigens iso-8859-1, weil die meisten Server, mit denen wir arbeiten (müssen) so konfiguriert sind …
Im Übrigen finde ich Deine Spamschutz-Frage sehr lustig :)
Philipp Marquardt ¶
16. September 2008, 08:54 Uhr
Verzeihung, ich Dussel hatte die XML-Deklaration nicht maskiert. Also, ganz am Anfang der HTML-Datei natürlich kein Leerzeichen, sondern dies:
<?xml version="1.0" encoding="iso-8859-1"?>
Siegfried ¶
16. September 2008, 09:41 Uhr
iso-8859-1: Kann man problemlos in der .htaccess ändern :)
cortex ¶
16. September 2008, 10:13 Uhr
Zitat Siegfried:
In historischen Zusammenhängen spricht man ja auch vom deutschen Sonderweg .-p
cx
Markus ¶
16. September 2008, 10:15 Uhr
Ach ja, was ich noch immer mit rein nehmen würde, ist eine kurze Liste mit zwei Links direkt nach dem <body>-Tag. Nämlich einer zum Inhalt & einer zur Navigation. Die haben ja meist eigene IDs, die sich bei verschiedenen Projekten nicht sooo sehr unterscheiden - bei mir etwa "content" und "menu" oder "nav". Daher kann man die getrost drin lassen & muss die nur in Ausnahmen anpassen.
Die Liste wird einfach per CSS nach links weggeschoben, so dass sie nur bei deaktiviertem CSS & bei Screenreadern überhaupt auftaucht. Diese beiden Sprungmarken können dann auf einfache Art und Weise zur Orientierung auf der Seite beitragen.
Der "Trick" an sich dürfte ja bekannt sein. Finde, man sollte das standardmäßig mit im Starterkit integrieren :-)
rwc ¶
16. September 2008, 10:21 Uhr
Verwende hin und wieder auch ganz gerne das Kickstart Framework: http://praegnanz.de/weblog/htmlcssjs-kickstart; etwas umfangreicher, aber durchaus nützlich
5Tan ¶
16. September 2008, 16:01 Uhr
Mach das eigentlich auch so in der art.
Nur das ich meine Ordnerstruktur so aufbaue:
/root
- files
- - img (alle Bilder und Unterordner für Icons usw... )
- - js (alle JS Files)
- - css (Normal, Print usw... )
Tobias Battenberg ¶
17. September 2008, 08:18 Uhr
Danke! Gibts das irgendwo als Download? Das wäre fein. Grüße. Tobi
muhli ¶
17. September 2008, 12:39 Uhr
Schick, schick. Meine Vorlage sieht deiner sehr ähnlich, und seit fünf Minuten noch ähnlicher ;) Mir ist aber aufgefallen, dass du im HTML-Header keinen Base-Tag hast. Ich brauch den ja ständig ;) Ansonsten sehr schön, hab meine Vorlage nun auch um den Reset erweitert und einfach mal deinen übernommen.
Was ich aber etwas anders mache ist die Standard-CSS-Datei. Da habe ich alle möglichen Elemente (Tabellen, Listen, Überschriften, Textelemente, Formulare etc.) vordefiniert, allerdings ohne sie mit Style-Angaben zu versehen. So vergesse ich keine und die, die nicht genutzt werden, sind schnell gelöscht.
CRI ¶
1. Oktober 2008, 21:35 Uhr
hatte letztens mal irgendwoher (quelle vergessen) erfahren, das @import-befehle die performance runterziehn sollen.
ist da was dran oder nur bei import innerhalb eines css?
mfg
der CRI
Torsten ¶
12. August 2010, 10:36 Uhr
Ob es von diesem Starterkit noch einmal ein HTML5-Update gibt?
Gerrit hat sein Kickstart ja schon vor längerer Zeit auf HTML5 umgestellt. Und dann gibt es noch das umfangreichere HTML5 Boilerplate (was vielleicht sogar etwas für die Mittwochs-Linkliste wäre ... schade, dass gerade Donnerstag ist.) ;-)