Vorheriger Artikel Nächster Artikel

Kostenloses CSS-Framework für Responsive Webdesign

ist in aller Munde, auf zahlreiche Tools können 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.

Kostenloses CSS-Framework für Responsive Webdesign
Responsive Webdesign

 

Responsive Webdesign
Responsive Webdesign mit dem CSS-Framework Responsive GS umsetzen

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

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
19 Antworten
  1. von Philipp Kruft am 12.05.2012 (15:10 Uhr)

    Extra zu erwähnen, dass es kostenlos ist find ich etwas seltsam - mir ist gar kein CSS Frame bekannt, das nicht kostenlos ist.

    Antworten Teilen
  2. von Sebastian am 12.05.2012 (17:10 Uhr)

    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/

    Antworten Teilen
  3. von Till am 12.05.2012 (21:48 Uhr)

    @Sebastian:
    Das sehe ich auch so! Deswegen würde ich dieses hier: http://semantic.gs/ auch jederzeit bevorzugen!

    LG,
    Till

    Antworten Teilen
  4. von Ben am 13.05.2012 (01:34 Uhr)

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

    Antworten Teilen
  5. von Till am 13.05.2012 (10:51 Uhr)

    @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

    Antworten Teilen
  6. von Sebastian am 13.05.2012 (20:06 Uhr)

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

    Antworten Teilen
  7. von 1131 am 13.05.2012 (22:18 Uhr)

    Interessant, aber weshalbt verwendet dann das Semantic Grid System auf der Demo-Seite auch IDs? http://semantic.gs/examples/pushpull/pushpull.html

    Antworten Teilen
  8. von Sebastian am 13.05.2012 (22:20 Uhr)

    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.

    Antworten Teilen
  9. von 1131 am 13.05.2012 (22:24 Uhr)

    Haha versteh ich gerade wenig. Ein Beispiel würde sicher helfen :)

    Antworten Teilen
  10. von Sebastian am 13.05.2012 (22:33 Uhr)

    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.

    Antworten Teilen
  11. von Sebastian am 13.05.2012 (22:34 Uhr)

    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.

    Antworten Teilen
  12. von 1131 am 13.05.2012 (22:43 Uhr)

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

    Antworten Teilen
  13. von Matthias am 14.05.2012 (07:43 Uhr)

    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?

    Antworten Teilen
  14. von Matthias am 14.05.2012 (07:52 Uhr)

    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.

    Antworten Teilen
  15. von Lukas Koch am 14.05.2012 (10:03 Uhr)

    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.

    Antworten Teilen
  16. von Thomas Quensen am 14.05.2012 (14:00 Uhr)

    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

    Antworten Teilen
  17. von Till am 14.05.2012 (16:47 Uhr)

    @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

    Antworten Teilen
  18. von Sebastian am 14.05.2012 (17:07 Uhr)

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

    Antworten Teilen
  19. von Sebastian am 14.05.2012 (17:09 Uhr)

    Punktum: Style-bezogene Klassen ändern sich mit dem Design, semantische Klassen nicht (oder müssten es zumindest nicht).

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates

Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose … » weiterlesen

Die Basics des Responsive Webdesign [Infografik]
Die Basics des Responsive Webdesign [Infografik]

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher … » weiterlesen

Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen