Responsive Webdesign umsetzten mit dem CSS-Framework Responsive Grid System
Der Vorteil des Responsive Grid System ist sein modularer Aufbau: Je nachdem, welche Funktionen der Webdesigner in sein Webprojekt einbauen will, kann er sich ein individuelles Framework zusammenstellen. Media Queries und spezifische Internet-Explorer-Anpassungen sind beispielsweise in verschiedenen CSS-Dateien ausgelagert. Webentwickler, die in ihrem Webprojekt keine speziellen Anpassungen für den Internet-Explorer planen, können auf diese Weise die entsprechende CSS-Datei einfach ignorieren – und verschlanken auf diese Weise die Website. Verfügbar ist ein 12-Kolumnen-, 16-Kolumnen- und 24-Kolumnen-Grid.
Das Responsive Grid System ist von Denis Leblanc (Studio Snapsize) entwickelt worden und unter der Creative Commons Attribution 3.0 License lizensiert.
22 Antworten
von News vom 12. May 2012 | Markus Bley 12.05.2012 (14:51Uhr) 1.
[...] Kostenloses CSS-Framework für Responsive Webdesign Responsive Webdesign ist in aller Munde, auf zahlreiche Tools können Webdesigner bereits zurückgreifen. Mit dem Responsive Grid System ist ein CSS-Framework dazugekommen, das eine relativ schnelle Umsetzung reaktionsfähiger Websites möglich macht und modular aufgebaut ist. Responsive Webdesign umsetzten mit dem CSS-Framework Responsive Grid System Der Vorteil des Responsive Grid System ist sein modularer Aufbau: [...] [...]
von Philipp Kruft 12.05.2012 (15:10Uhr) 2.
Extra zu erwähnen, dass es kostenlos ist find ich etwas seltsam - mir ist gar kein CSS Frame bekannt, das nicht kostenlos ist.
von Sebastian 12.05.2012 (17:10Uhr) 3.
Basiert mal wieder auf Klassen. Das bricht schon mit der einfachsten aller Webdesign-Regeln: Style-Informationen haben im Markup nichts zu suchen. http://meiert.com/en/blog/20091027/rules-for-html/
von Till 12.05.2012 (21:48Uhr) 4.
@Sebastian:
Das sehe ich auch so! Deswegen würde ich dieses hier: http://semantic.gs/ auch jederzeit bevorzugen!
LG,
Till
von Ben 13.05.2012 (01:34Uhr) 5.
@Sebastian
Natürlich wäre es optimal wenn Style-Informationen nicht im Markup wären, aber lässt sich das wirklich sinnvoll umsetzen?
@Till
Dein vorgeschlagenes Framework scheint aktiviertes JavaScript vorauszusetzen. Ob es wirklich klüger ist, ein einfacheres Markup zugunsten weiterer Abhängigkeiten zu erlangen, sei mal dahingestellt.
Ich persönlich verstehe euere beiden Einwände nicht wirklich. Klar, ein Markup ohne Style-Infos wäre wirklich toll, aber wo liegt das Problem wenn ich einem DIV Klassen ala "col span_4" verpasse? Guckt euch mal um, ich habe noch keine Website gesehen die ohne etwas derartiges auskommt.
von Till 13.05.2012 (10:51Uhr) 6.
@Ben: Das ist so nicht ganz richtig. Das System arbeitet mit LESSCSS ( http://www.lesscss.org ). Dabei handelt es sich um eine sparsame und "logischere" Schreibweise für normalen CSS-Code. Entweder man benutzt die Less-Datei direkt, dann benötigt man JavaScript, oder aber man lässt sie vorher kompilieren und so in normales CSS umschreiben. Dass geht ganz einfach mit einem Tool namens SimpLess. Wenn man so vorgeht, benötigt man kein JavaScript. Ergo: Alle Probleme gelöst ;)
Was unsere Einwände betrifft: Im Prinzip ist das ganz einfach: So, wie es (wie Du selbst sehr richtig angemerkt hast) alle machen, ist es nun mal schlichtweg falsch. Die Spezifikationen sind da eindeutig: HTML und CSS müssen getrennt sein, wo es möglich ist. Und zwar nicht, weil es sonst nicht funktioniert, sondern einfach, weil man es so festgelegt hat. Konventionen sind wichtig und es ist alles andere als hilfreich, wenn man sie (aus welchen Gründen auch immer, besonders aber aus dem der Faulheit) missachtet. Dann passiert zum Beispiel so etwas wie der Internet-Explorer. Wobei der ja auf einem guten Weg ist ;)
LG,
Till
von Sebastian 13.05.2012 (20:06Uhr) 7.
@Ben
Selbstverständlich lässt sich sowas umsetzen. Man muss sich nur wieder angewöhnen das Markup fertig zu machen und dann die Stylesheets für das gegebene zu schreiben, statt beides parallel zu machen. Das mag gelegentlich zu Schwierigkeiten führen, aber wenn man das da oben sieht können wir auch gleich wieder zurück zu Center- und Font-Elementen. Ich habe das hier mal zusammengefasst: http://sgaul.de/2012/05/12/appell-fur-sauberes-html/
von 1131 13.05.2012 (22:18Uhr) 8.
Interessant, aber weshalbt verwendet dann das Semantic Grid System auf der Demo-Seite auch IDs? http://semantic.gs/examples/pushpull/pushpull.html
von Sebastian 13.05.2012 (22:20Uhr) 9.
Weil die einen semantischen Wert haben. Es spricht ja nichts gegen Klassen und IDs, nur eben explizite Style-Klassen und IDs wie im hier beschriebenen Framework widersprechen der klassischen von Inhalt und Design.
von 1131 13.05.2012 (22:24Uhr) 10.
Haha versteh ich gerade wenig. Ein Beispiel würde sicher helfen :)
von Sebastian 13.05.2012 (22:33Uhr) 11.
sagt dir, dass darin ein Blog-Post enthalten sind. Es hat einen inhaltlichen Wert. Das ist Teil des HTMLs und somit völlig okay. Ähnliche Klassen können sein: comment, author, navigation, ... Alles was den Inhalt beschreibt, also den Text den du innerhalb des Divs findest.
Das Framework nutzt aber Klassen wie . Dieses Klassen haben nichts mit dem Inhalt zu tun (in dem Div steht ja schließlich kein Text über Container). Sie sind Hilfsmittel, die vom CSS genutzt werden ( .container {width: bla;} ). Hier wurden Informationen, wie das ganze gestylt werden soll, ins HTML gepackt. Und das soll ja eigentlich nicht sein.
von Sebastian 13.05.2012 (22:34Uhr) 12.
Hat meine Beispiele gefressen, hier noch mal:
div class="blog-post" sagt dir, dass darin ein Blog-Post enthalten sind. Es hat einen inhaltlichen Wert. Das ist Teil des HTMLs und somit völlig okay. Ähnliche Klassen können sein: comment, author, navigation, ... Alles was den Inhalt beschreibt, also den Text den du innerhalb des Divs findest.
Das Framework nutzt aber Klassen wie div class=" container row" . Dieses Klassen haben nichts mit dem Inhalt zu tun (in dem Div steht ja schließlich kein Text über Container). Sie sind Hilfsmittel, die vom CSS genutzt werden ( .container {width: bla;} ). Hier wurden Informationen, wie das ganze gestylt werden soll, ins HTML gepackt. Und das soll ja eigentlich nicht sein.
von 1131 13.05.2012 (22:43Uhr) 13.
Macht Sinn. Danke fürs Beispiel, wird auf jeden Fall im nächsten Projekt ausprobiert.
Vielleicht sollte man einfach mal das semantic.gs hier vorstellen, das ist auch kostenlos (hust) und hat nach deiner, vernünfigen Argumentation, einen durchaus höheren Wert, als das hier vorgestellte Framework..
von Matthias 14.05.2012 (07:43Uhr) 14.
Macht Sinn semantische Klassen zu verwenden und nicht diese ganzen Wrapper und Col-Klassen. Aber: Nehmen wir an es gibt Teaser mit 3 Spalten auf einer Seite und mit 4 Spalten auf einer anderen Seite dazu ist das ganze noch fixed und muss pixelgenau sein. Man könnte jetzt also beispielsweise wie auf semantic.gs ul id=boxes nehmen. Man styled das ganze und möchte jetzt aber im grunde den gleichen Code ausser der Breitenangabe wieder verwenden? Und dann? Zack wären wir bei Klassen wie "var1-x" oder ähnlichem. Wie genau meint Ihr, dass man das umgehen kann?
Den Designeren Sagen, dass alles nur noch fluid sein kann? No Way! Oder wie würdet ihr das machen?
von Matthias 14.05.2012 (07:52Uhr) 15.
Achso und was genau hat jetzt z.B. ul id="boxes" mit der Semantik zu tun? Müsste es nicht eher z.B. ul id="anreissertexte" heissen um sinnvolle Klassennamen zu haben. Die Boxes werden ja wohl kaum Inhalte haben, die mit Boxen zu tun haben.
von Lukas Koch 14.05.2012 (10:03Uhr) 16.
Leider nicht ganz zuverlässig. Funktioniert mit Chrome auf meinem Desktop nicht korrekt und im Safari auf dem iPhone sieht es nicht schön aus.
von Thomas Quensen 14.05.2012 (14:00Uhr) 17.
Das Problem mit den col_x Klassen ist IMO nicht, dass sie "unsemantisch" sind, denn:
Laut HTML-Spec sind alle Klassennamen unsemantisch, sie seind ein frei wählbarer Wert; class="article" ist für den Browser, den User und Suchmaschinen genauso semantisch wie class="column" oder class="Ggkzbkjbnlbfs" - es ist völlig egal, der einzige Unterschied ist, dass der Entwickler, der die Seite baut/gestaltet besser erkennt, worum es sich da handelt)
Blöd bei col_4 usw ist aber, dass man diese über Media-Queries nicht einfach in col_8 oder so "umwandeln" kann, das macht das semantic.gs besser
von Till 14.05.2012 (16:47Uhr) 18.
@Thomas:
Aber wenn es doch sinnvoll geht, warum sollte man dann etwas (ich nenne es mal) hässliches als Klassennamen verwenden. Ich hab dann immer gleich das Gefühl, ich würde 'rum hacksen. Es fühlt sich irgendwie unschön und unelegant an :S
Und außerdem kann ich mir sehr gut vorstellen, dass Suchmaschinen sich durchaus auch an solchen Informationen orientieren.
LG,
Till
von Sebastian 14.05.2012 (17:07Uhr) 19.
@Thomas: Aus HTML-Sicht sind auch alle Text-Nodes ohne Semantik. Auch Bilder sind für den Browser selbst ohne tiefere Bedeutung.
Wir wollen doch aber weiter in Richtung semantisches Web. Wir wollen in Google in 10 Jahren doch wohl sagen können, dass wir einen Artikel von Autor XY wollen aus dem Jahr 2000 wollen. Es gibt hierfür zwar vielversprechendere Ansätze als Klassen und IDs, aber das ist ein Ansatz. Aus jedem Wikipedia-Artikel lässt sich der Autor extrahieren und die entsprechende ID muss sich nie ändern. Auch nicht, wenn sich das Design noch zehnmal ändert. Dieser andere Row-Container-Unsinn ist eben nur ein Workaround für die Unzulänglichkeiten von CSS. Aber es ist schlechter Stil.
von Sebastian 14.05.2012 (17:09Uhr) 20.
Punktum: Style-bezogene Klassen ändern sich mit dem Design, semantische Klassen nicht (oder müssten es zumindest nicht).
von Responsive Webdesign: flexibles CSS-Fram… 21.05.2012 (13:38Uhr) 21.
[...] Links: Kostenloses CSS-Framework für Responsive Webdesign (t3n) 50 kostenlose Einsteigertools für Responsive Web Design (t3n) 5 kostenlose [...]
von Weby24 – der Blog rund ums worldwi… 21.05.2012 (15:58Uhr) 22.
[...] Links: Kostenloses CSS-Framework für Responsive Webdesign (t3n) 50 kostenlose Einsteigertools für Responsive Web Design (t3n) 5 kostenlose [...]