Da ich haupt- und nebenberuflich sehr viel mit CSS, HTML5 und dem ganzen Kram zu tun habe, war ich vor einigen Tagen auf der Suche nach einem etwas frischerem CSS Grid, den dass 960er Grid ist mittlerweile, in meinen Augen, nicht ganz so aktuell oder um es besser zu formulieren: Das 960er Grid System ist mir zu statisch. Ich will dieses nicht schlecht reden, die Leute welche dahinter sitzen / saßen / knieten haben echt eine klasse Arbeit gemacht und ich will es immer noch nicht missen, bedenkt man jedoch die aktuelle Lage der verschiedenen Bildschirmformate (Smartphones, Tablets oder Netbooks) macht sich ein etwas "dynamischeres" CSS Sytem besser. Und um den Bezug zum eigentlichen Thema zu finden, bin ich bei meiner, zufälligen, Suche auf das LESS Framwork gestoßen.
Ich will hier auch nicht über den allgemeinen Sinn bzw. Unsinn von CSS Frameworks diskutieren. Sicherlich gibt es wie überall Vor- und Nachteile. Für meinen Teil empfinde ich solche Frameworks als sehr arbeitserleichternd, und viel wichtiger, zeitsparend.
Die Grundidee
Wie bereits erwähnt, ist es in der heutigen Zeit sehr wichtig möglich viele Medienformate mit einer Seite abzudecken. Den wir sind momentan immer unterwegs, arbeiten an irgendwelchen Projekten (was ja immer ganz cool klingt, wenn man in der Lounge mit anderen über seine Arbeit redet und dabei auf seinem Macbook Air rumtippt) und dabei hat man seine Seiten meistens auf diversen Geräten wie dem iPad, iPhone oder einem Android Phone auf.
Nun wird meistens eine mobile Version der Seite geladen, sofern die gewählte Seite auf ein mobiles Gerät optimiert wurde. Bei den ganzen Wordpress Nutzern ist meistens das beliebte WPtouch im Einsatz. Ich sehe hier folgende Nachteile:
- Es ist ein Plug-in, wodurch unnötiger Ballast erzeugt wird
- Zusätzliche Abfragen durch Javascripts
- Undynamisch da vieles vom Plug-in abhängt, und man relativ eingeschränkt ist
Es gibt noch weitere Plug-ins für Wordpress welche denselben Zweck haben, eine mobile Fassung der Seite zu generieren, wohingegen WPtouch noch die High-End Klasse solcher Plug-ins ist. Nun nehmen wir mal an, wir haben einen Kunden welcher UNBEDINGT Funktion oder Darstellung XY in der mobilen Ansicht haben (den hat er hat ja NATÜRLICH Beweise und Statistiken, welche besagen, dass es sehr wichtig ist, genau jenes zu zeigen) - zu diesem Zeitpunkt fallen so ziemlich alle Plug-ins weg, da man dort meistens keine tief gehende Konfigurationsmöglichkeiten hat.
Für solche Zwecke ist LESS konzipiert, welches sich des "media-query" im CCS3 bedient.
Me...die...ja...Kuh...erie?
Mit der in CSS2 eingeführten Abfrage des genutzten Mediums durch media="screen", media="print" etc. konnte man einzelne Stylesheets für, zum Beispiel, die Druckvariante einer Seite festlegen. Diese Medienabfrage wird nun, beziehungsweise um genauer zu sein, wurde schon, in CSS3 erweitert und nennt sich, wie bereits gesagt, Media Query.
Das Ganze funktioniert ähnlich wie die "alten" Media abfragen jedoch kann man nun auch bestimmte Variablen abfragen.
Somit werden mit @media only screen and (min-width: 1212px) { XYZ:123 } nur die Eigenschaften XYZ angewandt wenn das darzustellende Display ein farbiger Bildschirm und mindestens einen Viewport von 1212px hat.
Alle vom W3C eingeführten Media Features, wie die einzelnen Media Query Eigenschaften genannt werden, kann man in einer schönen Übersicht auf ihrer Seite nachsehen. Außerdem empfehle ich allen den Heise Artikel von Michael Jendryschik zu lesen, dort wird noch auf Negation und andere Spielereien mit den Queries eingegangen wird.
Das Framework
Zurück zum eigentlichen Framework. Das LESS nutzt für seine Aufteilung die Fibonacci-Zahlen bis zur 13.
- 3 Spalten für kleine Displays bis 320px (iPhone etc. im Portrait Modus)
- 5 Spalten für kleine Displays bis zu 480px (Smartphones im Landscape Modus)
- 8 Spalten für "alte" Monitore und Browser bis zu 768px
- 13 Spalten für Monitore bis zu einer Breite von 1280px
Somit lässt sich unser Layout im Goldenen Schnitt teilen. Hat man nun ein Element, welches alle Spalten im 3er Layout einnimmt, ist dieses in der 8 Spalten Darstellung nur 38% breit (1,14 Spalten).
Bei der Typografie wurde auch darauf geachtet, den Goldenen Schnitt mit einfließen zu lassen, dabei wurde der Text auf die 24px Grundlinie optimiert.
Aber Aber Aber.... Was ist mit dem Internet Explorer?
Persönlich optimiere ich GAR NICHT mehr für den IE, da ich es nicht einsehe auf dieses miese Stück Software zu optimieren (was hat sich Microsoft nur dabei gedacht). Das LESS bietet dabei zwei Möglichkeiten: Entweder man belässt den Code im Urzustand, dabei nutzen alle alten Browser (auch der IE bis zur Version 8) das 768er Layout oder man nutzt ein JavaScript welches, alten Browsern ermöglicht die Media Queries abzufragen.
Doch nun stellt eich einigen die Frage wieso überhaupt das LESS und nicht die anderen media-query Grid-Systeme. Ich bin der Meinung dass das LESS ein optimal optimiertes CSS Grid ist und für die Zukunft gewappnet ist. Schaut es euch an, macht euch ein Bild davon und fangt an zu gestalten, den eine PSD und PNG Vorlage werden mitgeliefert.
Links: