praegnanz.de büro für intervernetzte medien

Gerrit, 21.02.2011

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

  1. marten am 13. November 2007 #

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

  2. Cedric am 13. November 2007 #

    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!

  3. Arne am 13. November 2007 #

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

  4. Gerrit van Aaken am 13. November 2007 #

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

  5. fwolf am 13. November 2007 #

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

    cu, w0lf.

  6. Conny Lo am 13. November 2007 #

    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.

  7. Christian am 13. November 2007 #

    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 ;)

  8. Dominik am 13. November 2007 #

    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.

  9. Stefan am 13. November 2007 #

    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 ../../.

  10. Julian am 13. November 2007 #

    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.

  11. Felix am 13. November 2007 #

    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.

  12. Jens Meiert am 13. November 2007 #

    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 :)

  13. Gerrit van Aaken am 13. November 2007 #

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

  14. Ingomar Wesp am 13. November 2007 #

    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.

  15. Gerrit van Aaken am 13. November 2007 #

    @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.

  16. Stefan am 13. November 2007 #

    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ß ;))

  17. Nils am 13. November 2007 #

    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 …
    ;-)

  18. Jörg L. am 14. November 2007 #

    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?

  19. Gerrit van Aaken am 14. November 2007 #

    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.

  20. Sascha Tasche am 14. November 2007 #

    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.

  21. Manuel Maisch am 14. November 2007 #

    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 ;)

  22. Jörg L. am 14. November 2007 #

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

  23. Finn am 17. November 2007 #

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

  24. Carlo am 17. November 2007 #

    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 …

  25. Ralph am 18. November 2007 #

    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

  26. luix am 19. November 2007 #

    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?

  27. Matthias Willerich am 20. November 2007 #

    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?

  28. DerJo am 24. Mai 2008 #

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

    Grüße, Jo

  29. Brutos am 24. Mai 2008 #

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

  30. matthias am 24. Mai 2008 #

    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!

  31. Jan am 24. Mai 2008 #

    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.^^

  32. Daniel am 26. Mai 2008 #

    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.

  33. wdso am 29. Mai 2008 #

    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.

  34. Thomas am 8. Juni 2008 #

    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?

  35. Roman am 12. Februar 2009 #

    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.

  36. Francesco am 12. Februar 2009 #

    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.

  37. Gerrit am 13. Februar 2009 #

    @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)

  38. Francesco am 13. Februar 2009 #

    Gern geschehen! :-)

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

  39. Gerrit am 13. Februar 2009 #

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

  40. Roman am 13. Februar 2009 #

    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 …

  41. Francesco am 20. Februar 2009 #

    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.

  42. Markus Thömmes am 26. Juni 2009 #

    Du bist im Smashing Magazine mit dem Teil :).

  43. Michael am 27. Juni 2009 #

    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?

  44. Michael am 28. Juni 2009 #

    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]—>

  45. Gerrit am 29. Juni 2009 #

    @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.

  46. Herr T. am 29. Juni 2009 #

    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.

  47. Michael am 29. Juni 2009 #

    @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 ;-)

  48. Gerrit am 29. Juni 2009 #

    @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!

  49. Rob am 29. Juni 2009 #

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

  50. kai am 4. August 2009 #

    »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

  51. Markus am 12. August 2009 #

    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

  52. Gerrit am 12. August 2009 #

    @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.

  53. Markus am 12. August 2009 #

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

  54. Daniel am 6. Januar 2010 #

    Ich finde das »kickstart« super.

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

    Gruß Daniel

  55. Gerrit am 7. Januar 2010 #

    @Daniel: Ich fürchte nicht…

  56. Frank am 27. Februar 2010 #

    Zeit für ein Update auf jQuery 1.4?

  57. Christoph Zillgens am 19. März 2010 #

    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.

  58. Björn am 19. März 2010 #

    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.

  59. Truck Turner am 19. März 2010 #

    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

  60. Gerrit am 19. März 2010 #

    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.

  61. hans am 19. März 2010 #

    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)

  62. Jens am 22. März 2010 #

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

  63. Robb am 19. Mai 2010 #

    @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?

  64. Gerrit am 19. Mai 2010 #

    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.

  65. Robb am 27. Mai 2010 #

    @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.

  66. Gerrit am 28. Mai 2010 #

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

  67. Eduard Seifert am 10. Juni 2010 #

    @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.

  68. Da Stefan aus F. an der I. am 24. Juni 2010 #

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

  69. nuz:y am 12. Juli 2010 #

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

  70. Gerrit am 12. Juli 2010 #

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

  71. Francesco am 12. Juli 2010 #

    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?

  72. Gerrit am 12. Juli 2010 #

    @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.

  73. Alex am 12. Juli 2010 #

    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

  74. Gerrit am 12. Juli 2010 #

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

  75. Alex am 12. Juli 2010 #

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

  76. nuz:y am 27. Juli 2010 #

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

  77. nuz:y am 31. Juli 2010 #

    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.

  78. andre am 6. August 2010 #


    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>

  79. Torsten am 12. August 2010 #

    Spannendes Projekt mit der gleichen Idee:
    HTML5 Boilerplate

    Inklusive Credit an Gerrit in der style.css.

  80. seolar am 12. August 2010 #

    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 –

  81. Halil Köklü am 27. August 2010 #

    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.

  82. hikaye am 27. November 2010 #

    Danke

  83. Denny am 9. Dezember 2010 #

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

  84. Karen am 24. Januar 2011 #

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

  85. tomcat am 26. Januar 2011 #

    Jupp danke, so langsam wird nen schuh drauß.

    tc

  86. bennyb am 18. Februar 2011 #

    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

  87. Sebastian am 22. Februar 2011 #

    tausend danke, wird angewendet ;-)

  88. Sven Kroschke am 24. März 2011 #

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

  89. bennyb am 2. Mai 2011 #

    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

  90. Gerrit am 2. Mai 2011 #

    @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.

  91. bennyb am 3. Mai 2011 #

    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

  92. bennyb am 4. Mai 2011 #

    …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

  93. bb am 20. Mai 2011 #

    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

  94. Frank Brückner am 13. Januar 2013 #

    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 schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.