109-BYTES: The smallest CSS framework on Earth http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ The source code revision 1: 109 Bytes <!DOCTYPE html><head><title></title><style type="text/css">*{color:#000;background:#fff}</style></head><body> No need for a download link. It even fits in a tweet on Twitter. Revision 2: 74 Bytes <!DOCTYPE html><title></title><style>*{color:#000;background:#fff}</style> This is still a valid HTML 5, crossbrowser compatible document and the framework is still ready to start adding content. With revision 2 we achieve amazing 32 percent saving of markup. The source code fits on a single typewriter line. 10 exciting killer-features It’s standard compliant and only uses valid code (valid HTML 5)Completely made without any CSS hacksIt’s prepared for the future by using the latest web technologies (HTML 5)It has a streamlined source code, no DIV soups or bloated CSS, no optional end-tags.It has accessibility features (maximum contrast for all elements)Premium class browser compatibility (IE 3+)Performance optimized code - only a single HTTP requestNo limits for webpage design (allows fixed, elastic or fluid designs and even grids)Prepared for web 2.0: Just add rounded corners, drop shadows and reflectionsIt’s free: licensed under Gnu Public License Many thanks to co-author Tomas Caspers for his help, hard work and contribution to make this web developers dream come true. UPDATE:  Revision 2 is out with huge markup savings. Thanks to all commenters who helped to fall below the 100 Byte limit. de-de Dirk Jesse Copyright 2009 2009-07-08T;09:10:22+00:00 Kommentar von Dirk Jesse http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ @Papa Latty Yes, of course. @Papa Latty

Yes, of course.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Papa Latty http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Does having the less code equal faster load times for browsers for the web page? Does having the less code equal faster load times for browsers for the web page?

]]> 2012-01-18T;11:39:34+00:00 Kommentar von makcie http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ @Dirk Jesse Anfangs war mir der Beitrag auch etwas suspekt (Aprilscherz oder was?). Aber jetzt finde ich das Experiment recht interessant. Für mich war das der Anstoß, mich endlich näher mit HTML 5 zu beschäftigen - kein CSS-Framework macht Sinn ohne HTML. Verzichtet man auch noch auf die Stilregeln, dann hat man ein kleines einsatzbereites HTML 5 - Dokument, dessen Inhalt mit dem Default-Stylesheet der Browser gestaltet wird. Aber dann wäre es kein CSS-Framework. @ Marc {22] Wieso “Don’t use ...??? Gut, man muss die Minimalisierung nicht übertreiben - nicht das wir am Ende bei 0 Bytes landen.  ^^ @ Andreas Hecht (19) Deine “sinnloseste Webseite der Welt” war für mich der praktische Einstieg in HTML 5! Erstaunlich, wie viele HTML 5-Websites schon existieren html5gallery Aber Deine Seite ist die “weltweit erste Seite, die das 74-Bytes CSS/HTML5 Framework” nutzt. Gratulation! @Dirk Jesse
Anfangs war mir der Beitrag auch etwas suspekt (Aprilscherz oder was?). Aber jetzt finde ich das Experiment recht interessant. Für mich war das der Anstoß, mich endlich näher mit HTML 5 zu beschäftigen - kein CSS-Framework macht Sinn ohne HTML.
Verzichtet man auch noch auf die Stilregeln, dann hat man ein kleines einsatzbereites HTML 5 - Dokument, dessen Inhalt mit dem Default-Stylesheet der Browser gestaltet wird. Aber dann wäre es kein CSS-Framework.
@ Marc {22]
Wieso “Don’t use ...???
Gut, man muss die Minimalisierung nicht übertreiben - nicht das wir am Ende bei 0 Bytes landen.  ^^
@ Andreas Hecht (19)
Deine “sinnloseste Webseite der Welt” war für mich der praktische Einstieg in HTML 5!
Erstaunlich, wie viele HTML 5-Websites schon existieren
html5gallery
Aber Deine Seite ist die “weltweit erste Seite, die das 74-Bytes CSS/HTML5 Framework” nutzt. Gratulation!

]]> 2012-01-18T;11:39:34+00:00 Kommentar von simonnickel http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Ich find übrigens die Anordnung der Kommentare auf der rechten Seite sehr verwirrend, wollt grad als Kommentar schreiben, dass es mich stark wundert warum bisher noch niemand geschrieben hat was das denn für einen Sinn haben soll .... Obwohl das mit den Kommentaren, wenn man erstmal daran gewohnt ist, ne sehr sinnige Sache ist ... Ich find übrigens die Anordnung der Kommentare auf der rechten Seite sehr verwirrend, wollt grad als Kommentar schreiben, dass es mich stark wundert warum bisher noch niemand geschrieben hat was das denn für einen Sinn haben soll ....

Obwohl das mit den Kommentaren, wenn man erstmal daran gewohnt ist, ne sehr sinnige Sache ist ...

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Marc http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Ich denke, dass es langsam Zeit ist, den entsprechenden “Don’t use the smallest CSS-framework on earth” bzw. “why the smallest CSS-framework on earth is evil” bzw. “why you shouldn’t use the smallest CSS-framework on earth” zu verfassen ^^ Ich denke, dass es langsam Zeit ist, den entsprechenden “Don’t use the smallest CSS-framework on earth” bzw. “why the smallest CSS-framework on earth is evil” bzw. “why you shouldn’t use the smallest CSS-framework on earth” zu verfassen ^^

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Andreas Hecht http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ @Siegfried: Ja, ein leeres Dokument validiert nicht. Ist dem Validator dann doch zu leer… @Siegfried:

Ja, ein leeres Dokument validiert nicht. Ist dem Validator dann doch zu leer…

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Johannes Fürwentsches http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Endlich kann man sich in seiner Arbeit mal wieder auf das Wesentliche beschränken und auch Leute ohne Breitbandanschluss kommen in den Genuss qualitativ hochwertiger Webseiten wie der von Andreas exemplarisch gezeigten! Danke dafür. Endlich kann man sich in seiner Arbeit mal wieder auf das Wesentliche beschränken und auch Leute ohne Breitbandanschluss kommen in den Genuss qualitativ hochwertiger Webseiten wie der von Andreas exemplarisch gezeigten! Danke dafür.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Andreas Hecht http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Also, die zweite Revision hat mich echt überzeugt, Dirk! Habe da gleich mal ne Webseite von gebaut, valide und minimalistisch. Nicht, dass Du meinst, neben YAML würde Deine neueste Kreation vernachlässigt worden:-) Die sinnloseste Webseite der Welt. Also, die zweite Revision hat mich echt überzeugt, Dirk!

Habe da gleich mal ne Webseite von gebaut, valide und minimalistisch.

Nicht, dass Du meinst, neben YAML würde Deine neueste Kreation vernachlässigt worden:-)

Die sinnloseste Webseite der Welt.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Thomas Scholz http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Wenn du darauf Rücksicht nimmst, dann ist das Framework nicht mehr hackfrei. :) Wenn du darauf Rücksicht nimmst, dann ist das Framework nicht mehr hackfrei. :)

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Dirk Jesse http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ @Thomas Nein, wenn Du den Universalselektor weglässt, wird die Farbdefinition nicht mehr korrekt übernommen. Kannst Du im Firefox testen. @Thomas

Nein, wenn Du den Universalselektor weglässt, wird die Farbdefinition nicht mehr korrekt übernommen. Kannst Du im Firefox testen.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Siegfried http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Genial! Hat eigentlich schon mal Jemand versucht, eine leere Datei zu validieren? Immerhin steht da ja definitiv nichts Falsches drin :) Genial!

Hat eigentlich schon mal Jemand versucht, eine leere Datei zu validieren? Immerhin steht da ja definitiv nichts Falsches drin :)

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Thomas Scholz http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Der nackte Universalselektor ist auch optional. Du kannst sofort mit der {Klammer} loslegen. Der nackte Universalselektor ist auch optional. Du kannst sofort mit der {Klammer} loslegen.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Dirk Jesse http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Herje, gar keine Ordnung mehr? Da fühlt man mich aber aber schon etwas schmutzig, so zu arbeiten. Dann müssen wir wohl doch bald ne 2. Revision rausbingen, die dann deutlich unter 100 Byte sein wird. Herje, gar keine Ordnung mehr? Da fühlt man mich aber aber schon etwas schmutzig, so zu arbeiten. Dann müssen wir wohl doch bald ne 2. Revision rausbingen, die dann deutlich unter 100 Byte sein wird.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Eric Eggert http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Doch, Dirk. Wie in meinem Kommentar schon gezeigt reicht das aus. Du kannst sofort anfangen Sachen reinzuschreiben wie &lt;h1&gt;Meine Überschrift&lt;/h1&gt;. Optional ist Optional. Doch, Dirk. Wie in meinem Kommentar schon gezeigt reicht das aus. Du kannst sofort anfangen Sachen reinzuschreiben wie <h1>Meine Überschrift</h1>. Optional ist Optional.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Dirk Jesse http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ @Marc ... dann ist es aber nicht mehr anwendungsbereit. Um eigene Inhalte zu einzufügen, müsste man dann erstmal &lt;body&gt; wieder ergänzen. Und bei &lt;head&gt; bin ich mir auch nicht sicher, denn &lt;title&gt; darf glaub ich nicht im luftleeren Raum hängen. @Marc ... dann ist es aber nicht mehr anwendungsbereit. Um eigene Inhalte zu einzufügen, müsste man dann erstmal <body> wieder ergänzen. Und bei <head> bin ich mir auch nicht sicher, denn <title> darf glaub ich nicht im luftleeren Raum hängen.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Marc Görtz http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Es geht noch kleiner: &lt;head&gt;, &lt;/head&gt; und &lt;body&gt; sind optional, ebenso das type-Attribut beim style-Element. Es geht noch kleiner: <head>, </head> und <body> sind optional, ebenso das type-Attribut beim style-Element.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Markus http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Wo ist der Paypal Button zum spenden? ;-) muss ja ewig gedauert haben das runterzuschreiben ^^ Wo ist der Paypal Button zum spenden? ;-) muss ja ewig gedauert haben das runterzuschreiben ^^

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Marc http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ ^^ ^^

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Ansgar http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ It is even optimized for printing. And hell: It comes without layout-tables and full CSS3-support! It is even optimized for printing. And hell: It comes without layout-tables and full CSS3-support!

]]> 2012-01-18T;11:39:34+00:00 Kommentar von nasumi http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Damn! Jetzt muss ich alle YAML-Projekte umbauen! Damn! Jetzt muss ich alle YAML-Projekte umbauen!

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Fabian Tempel http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Sensationell! Wie konnten wir nur ohne dem leben? Ich liebe die Killerfeatures-Liste. Gibts da demnächst ne 2. Liste - “20 things you didn’t know about 109-Bytes” oder so? Danke. ;) Sensationell!
Wie konnten wir nur ohne dem leben?

Ich liebe die Killerfeatures-Liste. Gibts da demnächst ne 2. Liste - “20 things you didn’t know about 109-Bytes” oder so?

Danke. ;)

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Der Caspers http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ @yatil: Charset bitte weglassen, wir versuchen doch gerade die Leute zu erziehen, dass sie nicht immer das Internet speichern und ausdrucken sollen. @yatil: Charset bitte weglassen, wir versuchen doch gerade die Leute zu erziehen, dass sie nicht immer das Internet speichern und ausdrucken sollen.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Eric Eggert http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ It has a streamlined source code, no DIV soups or bloated CSS, no optional end-tags. Wrong. Even the start end end tags of the head and body elements are optional as well as the type=“text/css” section. &lt;!DOCTYPE html&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;*{color:#000;background:#fff}&lt;/style&gt; is all you need. (Yes, it validates.) I’d really add the charset meta-tag to this: &lt;!DOCTYPE html&gt;&lt;meta charset=“utf-8”&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;*{color:#000;background:#fff}&lt;/style&gt; This is pure genius.

It has a streamlined source code, no DIV soups or bloated CSS, no optional end-tags.

Wrong. Even the start end end tags of the head and body elements are optional as well as the type=“text/css” section.

<!DOCTYPE html><title></title><style>*{color:#000;background:#fff}</style> is all you need. (Yes, it validates.)

I’d really add the charset meta-tag to this: <!DOCTYPE html><meta charset=“utf-8”><title></title><style>*{color:#000;background:#fff}</style>

This is pure genius.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Dirk Jesse http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Ja, alles bestens. Gelegentlich braucht das Netz mal etwas Ironie. Und man kann sogar noch was dabei lernen. Übrigens: Wie gerade gelesen - es sind noch 16 Byte Optimierungspotential drin. :-) Ja, alles bestens. Gelegentlich braucht das Netz mal etwas Ironie. Und man kann sogar noch was dabei lernen. Übrigens: Wie gerade gelesen - es sind noch 16 Byte Optimierungspotential drin. :-)

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Andreas Hecht http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Dirk, alles klar bei Dir? Gehts Dir gut? Dirk, alles klar bei Dir? Gehts Dir gut?

]]> 2012-01-18T;11:39:34+00:00 Kommentar von David Maciejewski http://www.highresolution.info/weblog/entry/109-bytes_the_smallest_css_framework_on_earth/ Ist heute der erste April? Ist heute der erste April?

]]> 2012-01-18T;11:39:34+00:00