Kickstart & Kickstart for WordPress

What is it?

All web frontend developers are tired of doing the same things over and over again when they start a new project. So there are frameworks, right? YAML, Blueprint, YUI-Grids.

But those Frameworks do too much! What I need is a really small set of files and folders for getting started my projects really quickly – a kick-start for static web development, as well as a very basic WordPress Theme.

Download on github

96 Kommentare

marten

hab dank, sehr hilfreich für so faule menschen wie mich.

Cedric

Endlich mal jemand der verstanden hat was Web-Entwickler wirklich wollen. Exakt wegen dem genannten Grund das YAML & Co. viel zu aufgeplustert sind habe ich solch eine Struktur bisher immer lieber selbst angelegt. Danke für den Tipp Gerrit!

Arne

Ganz so »leer« würde ich die Vorlagen nicht verwenden. Ich starte jedes Projekt mit einer abgewandelten Standard Vorlage. Finde ich sehr praktisch.

Gerrit van Aaken

@Arne: Das ist ein guter Hinweis, wusste nicht, dass Manuela auch schon mal etwas in der Richtung veröffentlicht hatte :-)

fwolf

Na, das klingt ja fast genauso, als würde es aus meiner Basis-Vorlage stammen. Werde ich gleich mal antesten ;)

cu, w0lf.

Conny Lo

Klasse! Und cool wäre noch die Einarbeitung von diversen jQuery-Effekten. Beispielsweise an diversen Stellen inline mit Kommentar versehen—damit man nach Bedarf entsprechende Stellen rauslöschen oder aktivieren kann.

Christian

Dank dir Gerrit,

habe es mir meinen Wünschen noch ein wenig angepasst, z.B. das Reset etwas komprimiert und in die screen.css übernommen, da es sonst für den Reset wieder einen zusätzlichen Query geben würde. Ich habe bei den meisten Projekten auch meist nur EINE CSS-Datei, einfach damit man nicht zwischen 4 CSS-Dateien springen muss wenn man etwas bearbeiten möchte.

Allerdings würde ich es auch glatt dabei belassen. Fügt man nämlich nun Elemente hinzu werden die in 90% der Fälle eh wieder gelöscht … denn das Markup ist ja nun doch meist von Projekt zu Projekt unterschiedlich. Ich habe bisher Manuelas Variante verwendet und haben zumindest was das HTML anging auch erstmal entrümpeln müssen.

jQuery-Effekte als Standard einbinden find ich doch etwas gewagt, das sollte doch jeder für sich machen ;)

Dominik

Das sieht wirklich fast so aus wie mein eigenes Grundlayout. Größter Untschied ist, dass ich mit @import Stylesheets arbeite und noch eine index.css benutze. Damit erspare ich mir das extra-laden der reset.css und kann meine Stylesheets gut in wenigen einzelnen Dateien organisieren. Ich bin kein Fan von ewig langen Stylesheets.

Stefan

Ja, das ist eine super Idee; sollte jeder Web-Designer haben, so was. Ich arbeite übrigens rückwärts, also in meinen CSS und HTML-Vorlagen steht schon einiges drin, und ich lösche, was ich nicht brauche.

Sehr praktisch auch: Ich habe zwei »img«-Ordner, einen auf der Hauptebene und einen in »css«. Im zweiten liegen nur Design-Grafiken, im ersten nur Content-Grafiken. So mischt der Kunde dann auch nichts, wenn er mal ein Bild austauscht, und man kann die Pfade relativ zum CSS schreiben, ohne komplizierte ../../.

Julian

Servus Gerrit,

ich habe mir die Mühe gemacht und das ganze um eine PHP Version ergänzt inkl. Switch, eingebundener Fehlerseite und Kontaktformular und würde es Dir gerne zur Verfügung stellen, da ich meinen Webauftritt in den nächsten Wochen komplett auf den Kopf stellen werde.
Noch ist es allerdings auf Deutsch, evtl müsste man es übersetzen.

Felix

Christian hat vollkommen recht. Und die Idee von Stefan ist echt super!

Ich fang doch tatsächlich jedes Mal von neuem an. Weiß auch nicht warum … Wird dringend Zeit, dass ich mich mal mit sowas beschäftige.

Jens Meiert

Ich darf das brandneue Choke Web Development Framework ebenfalls empfehlen.

Du hast mich zwar glatt ein bisschen dazu inspiriert, Gerrit, aber mir lag das doch schon lange auf der Leber ;) Nichts für ungut, ich kann »Kickstart« schon einordnen :)

Gerrit van Aaken

@Jens: LOL Schade, dass der Download-Link nicht geht. Ich hätte gerne das CSS für den Navigator 10 gesehen ;-)

Ingomar Wesp

Dein Altruismus in allen Ehren, aber zumindest jQuery kannst du nicht einfach als Public Domain weiterlizensieren ohne beide der für jQuery angegebenen Lizenzen (GPLv2 und MIT-License) zu verletzen.

Gerrit van Aaken

@Ingomar: Streng genommen hast Du natürlich recht. Andererseits ist in der jQuery-Datei natürlich die Original-Lizenz enthalten. Und so wahnsinnig ernst muss man jetzt diese Veröffentlichung auch nicht sehen – sie enthalt ja fast nichts, außer ein paar leeren Dateien und ein paar CSS-Anweisungen. Ich denke, dass man dies als Kavaliersdelikt und Grauzone durchgehen lassen kann.

Stefan

Die Idee von Stefan mit den unterschiedlichen Image-Ordnern find ich gut, ich hab das bisher immer ähnlich gemacht. Ich hab so »Meta«-Ordner, die beginnen mit einem Unterstrich, also zb. _images, _scripts, _styles  … dann sind die auch bei Ordnerauflistungen im Finder, Explorer, FTP-Programm immer schön oben (pedantisch, ich weiß ;))

Nils

WOW, Gerrit, zwei Versionen an einem Tag. Das ist sogar für Dich superschnell.
Mit den guten Wünschen und Vorschlägen der Gemeinde hast Du YAML in spätestens zwei Wochen an Funktionalität überrundet, (an Umfang auch), und schwupps, zu Weihnachten haben wir eine Alternative zu TYPO!
Mal überlegen, was ich noch gern hätte …
;-)

Jörg L.

That’s certainly a nice idea here, even though others had it before, as it seems. But why the sudden switch to English? The one thing I wondered immediately. But nobody else seems to mind? Is there some rule that says, this particular blog entry had to be written in English?

Gerrit van Aaken

Hallo Jörg, man kann ja nie ausschließen, dass vielleicht mal ein paar englischsprachige Surfer vorbeikommen! Es ist übrigens nicht das erste Mal, dass ich einen Eintrag auf Englisch verfasse. Es hat bisher niemanden gestört.

Sascha Tasche

Und falls es doch einen stört, kannst du ja ein Englisch-
Wörterbuch verlinken ;) Dieses Englisch ist einfach zu verstehen, wahrscheinlich daher wird es gut angenommen. Wenn ich an andere Seiten denke  … Kompliziert gibts auch auf Deutsch.

Manuel Maisch

ich packe jeweils css/img/jscripts/navi-includes usw in einen Ordner /technics, der für das Design und die Funktionalität der Website zuständig ist. so entsteht noch ein bisschen mehr ordnung ;)

Jörg L.

@Gerrit
Keine Beschwerde. Mir war noch kein englischer Eintrag über den Weg gelaufen. Da habe ich mich halt gefragt, wasnnulos?

Finn

Wunderbar. Vor allem freut es einen, wenn man sieht dass die »Profis« sehr ähnlich arbeiten wie man selbst ;)

Carlo

Wie einige hier habe ich auch sowas Ähnliches gebaut um mir die Arbeit bei neuen Projekten etwas zu erleichtern. Dabei hab ich aber auch im xhtml, eine allgemeine semantisch korrekte Struktur aufgebaut die ich dann für das jeweilige Projekt anpassen kann.
Aus Neugier habe ich mir Deine Datei runtergeladen (Vielen Dank dafür) und angeschaut: Trotz utf8 habe ich am PC die üblichen Probleme mit den Sonderzeichen (z.B. in der Datei defaults.css:
q:lang(de) {
quotes: ‘Ô˜’ ‘ì’ ‘Ô¡’ ‘ë’;
}
Na gut vielleicht bin ich der einzige Windows (und auch noch Vista) User hier …

Ralph

Als erstes möchte ich danken für die Idee »klickstart«.

Als zweites danke ich für die vielen kleinen Ideen in den Kommentaren, die für mich persönlich zum nachdenken anregen und vielleicht zum Teil bei meinen Webprojekten einfliessen werden ;)

Letztendlich kommt es bei fast allen Beiträgen ganz klar zum Vorschein, je sauberer die Vorarbeiten sind, desto einfacher haben es die nachfolgenden Beteiligten. Das Hauptproblem ist für einen selbst, am Anfang sich bereits Gedanken zu machen um eine interne Struktur seiner Unterlagen usw …. Schwierigkeiten liegen darin, den Sinn dieser Vorgehensweise bei seinen ersten kleinen (Mini-Webprojekten) zu sehen, denn der Aufwand überwiegt bei den ersten Webprojekten bei weitem den Nutzen dieser Webprojekte. So bald aber die Webprojekte in der Grösse oder Anzahl zu nehmen, ist man dankbar für diese eigenen Vorarbeiten.

Aus Dresden grüssend

Ralph

luix

Wie einige hier habe ich auch sowas Ähnliches gebaut …

Warum schmeisst ihr nicht eure kickstarts zusammen, um ein optimiertes »Loslege-System« zu bekommen? Wär doch gut, oder?

Matthias Willerich

Hurra!
das mit dem zusammenschmeissen ist so eine Sache, weil jeder anders arbeitet (siehe rauslöschen vs. in-leeres-file-bauen).

Ich hab neulich seit Jahren zum ersten Mal eine komplett statische microsite gebaut (http://www.iwm.org.uk/myboyjack) und mein kickstart set etwas aufgeräumt. Startpunkt waren:
CSS-Framework kombiniert mit YUI fonts und reset,
JQuery1.2.1 und conditional comments für ie-stylesheet.

Genauso wichtig wie den Startpunkt finde ich, dass man einem Regelwerk während dem development folgt (ich folge hier Ralphs Kommentar). So benutze ich z.B. das YUI %-font modell (meiner Meinung nach stabiler als ems im CSS Framework), Clearfix, Sprites, Microformats wenns Sinn macht, so wenig CSS hacks wie nötig (eigentlich … nie …), conditional comments wo ich kann, wobei ich IE6 gerne mal etwas mit JS aushelfe, z.B. bei PNG transparency oder hover states. Ich konnte mich bisher noch nicht auf eine image replacement technik festlegen, vielleicht kann mir hier einer das goldene Kalb vorschlagen?

DerJo

Hey, statt eines reset-css finde ich die Verwendung von tripoli einfach schöner. http://devkick.com/lab/tripoli/

Grüße, Jo

Brutos

Und ich hab mir noch letztens überlegt, ob du das Kickstart Projekt irgendwann aktualisieren wirst.

matthias

super sache. Danke ! ich habe mit etwas ähnlichen auf meinem apfel mit einem kleinen automator programm experimentiert. Bislang macht das noch nichts anderes als eine musterordner struktur anzulegen. Allerdings wird der projektname abgefragt und somit das projekt auch gleich benannt. file technisch bin ich aber noch zu nix gekommen. Eine Kombination bzw. Ausbau klingt vielversprechend!

alles in allem auf jeden fall ein aktuelles Thema, super Beitrag!

Jan

Danke Gerrit, sieht gut aus. Ich werde es demnächst mal testen. Ich habe mein Layout zuletzt mit Blueprint erstellt aber irgendwie ist das auch schon alles zu viel und man weiß manchmal gar nicht warum jetzt mache Sachen so aussehen wie sie aussehen.^^

Daniel

Ich glaube eigentlich muß sich jeder Entwickler ohnehin sein eigenes set zusammenpuzzeln. Ich brauch zum Beispiel auch immer einen JSON-parser, so wie eine kleine eigene tools.js anstatt von jquery.. mit der komm ich besser klar weil ich genau weiß was sie kann und ich meine eigenen Bugs leichter finde.

wdso

Schräg. Mir ist erst nach Lektüre der Kommentare aufgefallen, dass der Beitrag in englischer Sprache verfasst wurde. Musste dann nochmal nach oben scrollen um mich zu vergewissern. Ich habe in meinem Feedreader sowieso kreuz- und quer deutsch- und englischsprachige Seiten. Also: gute Idee! Mehr davon, damit auch die Amis etwas von Gerrit zu lesen bekommen. Immerhin lesen die meisten hier ja auch A List Apart, wäre also nur fair.

Thomas

Allerdings, bei allem Lob für die Simplicity und leiser Kritik an Yaml, finde Ich doch deren Builder eine echt fantastische Sache um Zeit zu sparen.
Wer es nicht kennt gehe auf builder.yaml.de.
Ansonsten mag Ich auch lieber einfachen übersichtlichen Code und werde Kickstart deswegen gerne mal im Alltag ausprobieren. Und wer weiss vielleicht bastelt Gerrit ja auch eines Tages so ein schickes JQuery Teil für die Welt?

Roman

Stell ich mir nur doof an, oder kann es sein, dass das Lightbox 0.5 nicht mit jQuery 1.3.1 läuft? Ich kriege es nur zum Laufen, wenn ich die alte, dem Plugin beiliegende jQuery-Version einbinde.

Francesco

W3C-Validator sagt:

Line 7, Column 69: The internal character encoding declaration must be the first child of the head element.

Bei HTML 5 so

<!DOCTYPE html>
<html lang=»de«>
<meta charset=»utf-8«>
<title>Title</title>

anfangen.

Gerrit

@Francesco: Danke für den Hinweis – ich wusste nicht, dass der Validator schon HTML 5 kann. Ist korrigiert.

(In deinem Beispiel fehlt übrigens das head-Element)

Francesco

Gern geschehen! :-)

Laut W3C kann man den auch weglassen. Ist genauso valide und macht den Code um zwei Zeilen schlanker.

Gerrit

@Roman: Ich hab’s nochmal getestet – die Lightbox funzt einwandfrei mit 1.3.1 …

Roman

Seltsam, ich hab sie mit 1.3.1 ums verrecken nicht zum Laufen bekommen, nur mit der alten Version, wie gesagt. Bin jetzt bei Slimbox 2, funktioniert auch wunderbar, weil Lightbox-kompatibel, d.h. alte mit rel=»lightbox« versehene IMGs können bleiben, wie sie sind …

Francesco

Mir ist was zum robots-Metatag aufgefallen: Der Googlebot durchsucht per default die Website und folgt allen Links. D. h. wenn man nur vom Googlebot ausgeht und dieses Verhalten haben will kann man sich die Zeile <meta name=»robots« content=»index, follow« /> auch sparen.

Michael

Nutze seit einiger Zeit auch gerne diesen Ansatz von Gerrit als Grundlage. Vielen Dank hierfür.
Eine Frage: Was passiert jetzt eigentlich beim IE8 wenn er nicht im Dokument via X-UA-Compatible auf Version 7 gesetzt wird?
HTML:
<!—[if IE 7]><body class=»ie7«><![endif]—>
<!—[if lte IE 6]><body class=»ie7 ie6«><![endif]—>
<!—[if !IE]><!—><body><!— <![endif]—>
Interpretiert der neueste IE die dritte Zeile »richtig«, also zuerst einen Kommentar, dann das body-tag und anschliessend wieder ein Kommentar, oder greift auch hier trotz aller Einhaltung von Standards der conditional comment? Dann wäre der IE8 ganz ohne body? Oder mache ich da einen Denkfehler?

Michael

Hat sich erledigt, Vorschlag:
<!—[if IE 7]><body class=»ie7«><![endif]—>
<!—[if lte IE 6]><body class=»ie7 ie6«><![endif]—>
<!—[if gte IE 8]><!—><body><!— <![endif]—>

Gerrit

@Michael: danke für den Hinweis – Du hattest Recht mit deiner Behauptung, dass der IE 8 gar keinen body zu sehen bekam. Deine Lösung ist jedoch auch nicht korrekt, weil das »vorzeitige Schließen« mit <!—> nur dann funktioniert, wenn !IE gesagt wird. In der neuen Version 1.0 habe ich das nochmal in korrekt gemacht.

Herr T.

Dein Kickstart gefällt mir. Ich schlage vor, die screen- und print-Anweisungen analog zu den conditional-body-comments ebenfalls in eine CSS-Datei zu schreiben:

link href=»css/layout.css« rel=»stylesheet« media=»screen, print« type=»text/css« /

und dann in der layout.css etwas ähnliches wie

body { }
[…]

@media print
{ body { } […]
}

Die nötigen print-Anweisungen sind oft weniger umfangreich und passen problemlos in die layout.css. @media projection, handheld etc. kann man so auch einfach integrieren.

Michael

@Gerrit: thx für das update!
Ich möchte bez. …<!—> nur dann funktioniert, wenn !IE gesagt wird. nochmal nachhaken:
Hier finde ich folgenden Hinweis:
<!—[if lt IE 7]><!—> Anweisungen für IE vor Version 7 und andere Browser <!—<![endif]—>
Was ist denn jetzt die Wahrheit ;-)

Gerrit

@Michael: Ich hab deine Variante ausprobiert, und er hat mir im Firefox den ConditionalComment im Klartext in das Browserfenster gerendert – das konnte es also nicht sein!

Rob

I created something very similar myself recently, if you would like a copy let me know and I will mail it to you.

kai

»All files based on UTF-8, no BOM«

mein Notepadd++ behauptet es seien alles ASCII-Texte
ausser das reset.css, das ist UTF-8 ohne BOM

Markus

hey…

vorhin ist mir aufgefallen, dass die reset.css auch ergänzungen von stefan enthält. sein body mit height: 101%; bewirkt automatisch einen scrollbalken – egal wie hoch der content ist.
imho ist das unschön und ich frage mich, was das bringen soll? ästhetische gründe wird es ja wohl kaum haben… ;)

lg,

Markus

Gerrit

@Markus: Da viele Websites horizontal zentriert angelegt sind, gibt es bei solchen Einzelseiten, die normalerweise keinen Scrollbalken erzeugen würden, einen Versatz in der horizontalen. Dieses Hin- und Herspringen der gesamten Website will man vermeiden.

Markus

ok – hinsichtlich dem »springen« macht das natürlich sinn. danke.

Daniel

Ich finde das »kickstart« super.

Gibt es die Möglichkeit sich irgendwo einzutragen um eine Info zu bekommen wenn es Updates gibt?

Gruß Daniel

Gerrit

@Daniel: Ich fürchte nicht…

Frank

Zeit für ein Update auf jQuery 1.4?

Christoph Zillgens

Kickstart ist wirklich klasse, nutze ich fast immer. Vielleicht kannst du einen Hinweis für Coda-User ergänzen.

Diese können nämlich mit dem Plugin »Create Project«, zu finden hier, ganz einfach per Mausklick Kickstart bei einem neuen Projekt anlegen.

Björn

Gefällt mir gut und kann ich nur weiterempfehlen. Ein wenig Freiheit braucht der Mensch doch, Yamll ud Konsorten geben schon manchmal das ein oder zuviel vor.

Truck Turner

Hi Gerrit,

danke für das Update.

Könntest Du mal erklären (oder eine Quelle angeben) worin genau die Vorzüge des Features »onDOMready JavaScript-File for unobtrusive DOM-Scripting« im Vergleich zur herkömmlichen Verwendung von »$(document).ready(…)« liegen?

Danke & Gruß,
T 2

Gerrit

Wenn ich die ganzen jQuery-Initialisierungsangaben einfach ganz am Ende des HTML-Dokuments händisch abfeuere, ist das noch viel präziser und stabiler als wenn jQuery mit seinem .ready-Funktion mutmasst, wann der DOM-Baum denn vielleicht fertig geladen sein könnte. In jQuery ist diese Mutmaßung zwar sehr ausgereift, aber noch sicherer und präziser kann ich das eben mit meiner Methode machen.

hans

offtopic: die leporello seite ist wirkich lupenrein geworden, respekt. ich hab die ajax suche leider nie so richtig zum laufen bekommen … (ich nehme an das ist modx)

Jens

Danke für die Erinnerung. Wird Zeit, dass ich mir sowas auch baue.

Robb

@Gerrit bzgl. der 101% höhe:
Ist es nicht eleganter die horizontale Scrollbar (wo es möglich ist) durch »overflow-y: scroll« im body zu erzwingen?

Gerrit

Bist Du sicher, dass der Scrollbalken mit overflow-y auch dann erscheint, wenn es keinen overflow gibt (also die Seite nicht bis zum unteren Browserrand geht?) Das ist ja der Clou dabei: Der Scrollbalken ist immer da.

Robb

@Gerrit
Die folgenden Browser habe ich erfolgreich getestet: Safari 3 und 4, Firefox 3.6 und sogar IE6.

Der Vorteil gegenüber dem 101%-Hack liegt vor allem darin, dass die ständig sichtbare Scrollleiste keinen Srollbalken hat, wenn der Inhalt kleienr als die Viewport-Höhe ist.

Gerrit

@Robb: okay super, dann kommt das in der nächsten Version rein!

Eduard Seifert

@Gerrit: Funktioniert das wirklich so gut einfach wie es aussieht?

<!—[if lt IE 7]><body class=»ie7 ie6«><![endif]—>
<!—[if IE 7]><body class=»ie7«><![endif]—>
<!—[if gt IE 7]><body><![endif]—>
<!—[if !IE]><!—><body><!— <![endif]—>

Kein »* html xy«-Hack mehr? Ich bin begeistert.

Da Stefan aus F. an der I.

Danke, Gerrit! Ja, den Overflow-y habe ich bisher auch immer per Hand eingefügt – aber nu isser ja drin! Sehr fein!

nuz:y

Fehlt für die html5 Unterstützung der neuen Elemente nicht noch die CSS-Information display:block;?

Gerrit

Wie wär’s mit einem Blick in die reset.css?

Francesco

Zwei Fragen:

1. Warum gibst du in der index.html bei der Einbindung der CSS-Dateien den Typ an und bei der Einbindung der JavaScript-Dateien nicht?

2. Warum verwendest du in der index.html für die Angabe der Zeichenkodierung nicht die neue HTML5-Schreibweise?

Gerrit

@Francesco:

1. weil ich’s vergessen haben, wegzulassen. Aber es wird auch empfohlen. (Beim link-Element ist der Typ noch sinnvoll, nicht jedoch beim style-Element)

2. Das ist richtig. Passe das noch an.

Alex

Hallo Gerrit!

Du verwendest in der reset.css:

/* Snip */
html { height: 100%; overflow:hidden;
}

body { height: 100%; overflow-y: scroll; background-color: #fff;
}
/* Snap */

Das schafft ein Problem mit JS, z.B. mit jQuery.

Beispiel:
$(window).scroll(function (event) { /* Do something each time the window is scrolled. */ });

Durch die Veränderung in der Scroll-Pane-Struktur kann man diese häufig verwendete Ereignisbehandlung nicht mehr nutzen.

Welcher Vorteil ergibt sich für dich mit dieser Änderung?

Viele Grüße

Alex

Gerrit

@Alex: Welche Änderung meinst du genau? Die von 1.1 auf 1.2, oder die von 1.2 auf 1.3?

Alex

@Gerrit: Die Änderung ist wohl erst in Version 1.3 hinzugekommen.

nuz:y

Der IE6 hat ebenfalls Probleme mit der Änderung auf overflow-y wenn Elementen gleichzeitig absolut positioniert sind. IE6< habe ich nicht getestet…

nuz:y

Ich muß meine Aussage widerrufen. Mit der aktuellen Version gibt es bei mir keine Probleme mit IE6. Der Beitrag bezog sich auf Version 1.3.

andre


eventuell noch einen jquery-fallback, …
falls google (oder ein anderer hoster mal hustet …)
dann bleibt die Seite aber trotzdem »schnell« ….

<script type=»text/javascript« src=»http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js«></script>
<script type=»text/javascript«>
if (typeof jQuery == ›undefined‹)
{ document.write(unescape(«%3Cscript src=‹/path/to/your/jquery‹ type=›text/javascript‹%3E%3C/script%3E«));
}
</script>

Torsten

Spannendes Projekt mit der gleichen Idee:
HTML5 Boilerplate

Inklusive Credit an Gerrit in der style.css.

seolar

Ich kann mich hier nur anschließen.
Ich habe mir soeben den HTML5 Boilerplate angeschaut. Klar, ein nahezu identischer Ansatz, aber eben auf HTML5 ausgelegt.
Hier stellt sich nur die Frage, inwiefern HTML5 denn nun aktuell schon eingesetzt werden kann. Die Browser der Neuzeit verstehen sich ja alle mit HTML5. Und auch der IE verträgt sich mit dem neuen noch-nicht-ganz-Standard mit ein wenig Starthilfe (html5shiv.js).
OK, Google selbst nutzt ja mittlerweile HTML5, sodass dies wohl keine negativen Auswirkungen auf das Ranking haben sollte. Aber die anderen Suchdienstanbieter? Wer weiß schon Genaues? Und bei den ganzen Validatoren fliegen einem die Fehler nur so um die Ohren, nutzt man heutzutage HTML5. Für den Validator ist es dann wohl doch wieder besser XHTML1.0 besser XHTML1.1 zu schreiben. Unterm Strich und summa summaraum: sowohl das hier beschriebene Kickstart-Projekt, als auch HTML5 Bolierplate sind exakt die Dinge, die Webdeveloper/ Webworker brauchen. Kein Firlefanz, kein sinnloser Schnickschnack. Weiter oben stand’s geschrieben: YAML und Co. sind zu aufgebläht. Andere zu »schön«, andere zu schmal und daher meist sinnlos.

Kickstart und Boilerplate sind exakt das, was wir brauchen. Ein fettes »Danke sehr« von Ludwig König (aka seolar)!

- Grüße aus Braunschweig –

Halil Köklü

Danke Gerrit.

Ich krieg vom Validator folgende Meldung:

In diesem Profil gilt eine sehr spezielle Syntax für die @charset Regel: Auf @charset muss genau ein Leerzeichen folgen, gefolgt vom Namen der Enkodierung in Anführungszeichen, direkt danach ein Semikolon. @charset ›utf-8‹;

Wenn ich @charset ›utf-8‹; mit @charset »utf-8«; ersetze geht’s weg.

Denny

Kleiner Aktualisierungs-Bug: in der index.html wird noch die »alte« Version 1.4.2 von jQuery eingebunden.

Karen

Looking forward to toying with it on a couple of my Wordpress websites!

tomcat

Jupp danke, so langsam wird nen schuh drauß.

tc

bennyb

Hallo Gerrit,

danke, super Grundlage/kickstarter, nur folgende Fragen/Details sind mir noch ein-/aufgefallen:

1.) header.php
-> was hat das ›twentyten‹ darin zu suchen

2.) functions.php
-> function templatename_widgets_init() waere noch etwas neutraler als kickstart_widgets_init(), aber ich verstehe dass Du, wenn Du es schon kostenlos hergibst, zumindest etwas Branding betreiben moechtest ;)

3.) functions.php
-> ein Widget is nice, ich habe jetzt mal drei (eine fuer Header/Sidebar/Footer) eingebaut, schicke ich Dir gerne den Code zu, wobei ich weiss dass Du das besser kannst als ich ;) Hintergrund ist, dass es Einsteigern den Zugang noch etwas erleichert, finde hier die TwentyTen Vorgabe/Vorlage gar nicht so schlecht

4.) index.php
-> hier ist noch hardcodierter Text enthalten, mir faellt aber auch nichts anderes ein als eine Meldung/Message in die functions.php zu schreiben, oder in eine separate messate.txt/inc/php. Generell waere das aber vermutlich praktisch auch fuer andere Funktionen/Ausgaben wie Suchbutton-Text,Suche-nicht-gefunden-Text usw.usf.
Wie gesagt, richtig schlau bin ich da auch noch nicht geworden….

5.) search.php
-> die fehlt, kann man natuerlich anlegen, aber ich denke Suche und Ergebnisse anzeigen sind so wichtig dass das vielleicht in ein fixes Paket mit hineingehoeren sollte, oder? http://codex.wordpress.org/Creating_a_Search_Page (ich kann es mir vorstellen, …. Du kennst den Link;)

Ansonsten, wie gesagt, ziemlich cool und auf das notwendige Minimum minimiert, nahezu perfekt und im Vergelcih zum TwentyTen eine angemessene Diaet.

Vielen Dank fuer die Zusammenstellung und Schoenen Abend,
bennyb

Sebastian

tausend danke, wird angewendet ;-)

Sven Kroschke

Vielen Dank!
Es werden einem hier genügend Freiheiten gelassen.
Wird nächstes Mal genutzt!

bennyb

Hallo Gerrit,

so, jetzt habe ich es nochmals angewandt, und folgendes waere mir noch aufgefallen.

a) ein vorangelegter image/pix Ordner waere gut

b) eine div-Grundstruktur waere folfreich, oder womit erstellst Du diese denn? Verwendest Du ein CSS Framework?
ich verwende immer so etwas wie …

<div id=»container«>
<div id=»header«>
</div><!— header ends—>
<div id=»content«>
</div><!— content ends—>
<div id=»sidebar«>
</div><!— sidebar ends—>
<div id=»footer«>
</div><!— sidebar ends—>
</div><!— container ends—>

c) macht es Sinn die comments.php und search.php zu inkludieren? Dann koennte man noch schneller die Details dazu aendern…

nur so Ideen….

Danke,
bennyb

Gerrit

@Benny:

– Image-Ordner ist kein Problem, wird gemacht
DIV-Grundstruktur will ich eigentlich bewusst vermeiden – das ist ein Eingriff in den Coding-Stil eines jeden Entwicklers
– comments.php und search.php: Schwierige Frage. Die ändern sich potenziell mit den WordPress-Versionen und sind ja Teil des Cores. Klar kann ich sie quasi forken und mit einbinden, aber es fühlt sich schmutzig an. Ich überlege mir das noch, verstehe aber auf jeden Fall deinen Hinweis.

bennyb

Hallo Gerrit

- Image Ordner kann ich auch selbst anlegen, ich dachte nur fuer Einsteiger macht man es einfacher/verstaendlicher, sicherlich kein MustHave

- verstehe den Punkt mit der DIV-Struktur. Benutzt Du eigentlich einen CSS Builder wie http://builder.yaml.de/ , setzt Du auf ein CSS Framework (960px?), oder machst Du alles selbst? Letzteres trifft aktuell auf mich zu und manchmal langweilt es mich etwas ;)

- verstehe auch den Punkt mit comments.php und search.php. Wenn sich das aendern kann (habe es seit 2008 nicht bemerkt, dachte die waeren immer da gewesen) dann lass Sie lieber raus, comments brauche ich eigentlich auch nie, habe bisher nur noch gefunden ob ich es generell abstellen kann (in der functions.php?). Auch Suche stehe ich wohl einfach nur, vielleicht weil es mal mein Core-Business war – Suchmaschinen-Integrationen – aber definitiv kein MustHave ;)

Danke fuer den Kickstarter auf jeden Fall!

Cheers,
bennyb

bennyb

…darüber hinaus macht ev. eine mobile.css Datei Sinn und/oder auch eine touch.css? Hierzu passt auch Deine Idee mit dem Mobile framework ganz gut, wobei ich auch das eher minimalistisch angehen wuerde, so wie Du mit dem kichstarter im Allgemeinen….

Ansonsten noch Gute Besserung (wie ich gerade im Tweet gelesen haben) und einen Schoenen Abend,
bennyb

bb

Also die mobile.css macht definitiv Sinn, wobei ich jetzt ueber die verschiedenste Integrationen gestoplert bin, interessant fand‹ ich allerdings: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
auch ggf. die Unterscheidung von/zwischen: – bis 480px – 481-1024px – ueber 1025px

Benutzt Du im uebrigen einen CSS Designer? Ich finde http://developer.yahoo.com/yui/grids/builder/ nicht schlecht, wobei die Namen der Classes und IDs nicht so meines ist….

VG und ein Schoenes Wochenende,
bb

Frank Brückner

Vielen Dank!
Ich habe deinen Video-Workshop von undsoversity gekauft (CSS und jQuery) und freue mich, dass du Ordnung in meine Arbeit und damit auch ins Internet bringst.

Kommentar verfassen