11. November 2011
CSS schreiben mit LESS
LESS ist eine Erweiterung zu CSS und ermöglicht einem viele praktische Abkürzungen im eigenen Code.
Vor allem bietet es Variablen, was für Farbwerte von enormen Nutzen ist. Auch Klassen kann man erstellen um z.B. im weiteren CSS nur noch .borderRadius(2px) zuweisen zu müssen um anschließend den gesamten Code, inklusive der nötigen Vendor-Prefixes, zu erhalten.
Eine Klasse
Erstellung
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
ihre Zuweisung
.element {
.borderRadius(5px);
}
und die Ausgabe
.element {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Auch die gesamte Kaskadierung wird einem enorm erleichtert.
So kann ich Regeln für meinen Container zuweisen und anschließend einfach auch allen Elementen innerhalb dieses Container Regeln zuweisen auf eine Art und Weise die meiner Meinung nach nicht nur praktischer sondern auch viel schöner lesbar ist. Allerdings muss man hier auch aufpassen, den Code nicht unnötig aufzublähen, denn wenn eine bestimmte Klasse sowieso nur in meinem Container vorkommt, macht es natürlich keinen Sinn den Container Selektor vorne dran zu hängen.
Kaskadierung in LESS
.element {
attribut: wert;
.child {
attribut: wert;
&:hover {
attribut: wert;
}
}
}
wird zu
.element {
attribut: wert;
}
.element .child {
attribut: wert;
}
.element .child:hover {
attribut: wert;
}
In der Praxis schaut das folgendermaßen aus. Ich bearbeite in Coda nicht mehr ein CSS sondern eine .less Datei.
Hierzu habe ich einen Code-Clip, in dem alle gängigen Klassen angelegt sind, wie abgerundete Ecken, Verläufe, Schatten, Transitions und Transforms. Da die Klassen im kompilierten CSS nicht auftauchen, muss man sich keine Gedanken machen ob man Sie alle braucht.
Im Hintergrund läuft der LESS-Compiler und erzeugt jedes mal wenn ich mein Dokument speicher automatisch eine CSS Datei. In den meißten Compilern kann man zusätzlich noch angeben ob das CSS in einem anderen Ordner als das LESS File landen und ob es minimiert werden soll.
Ich war lange (und bin es eigentlich nach wie vor) zufrieden mit LESS.app von Bryon Jones, benutze aber seit kurzem CodeKit vom gleichen Entwickler, dass noch einiges mehr kann.
Alles in Allem kann einem LESS einiges an Arbeit abnehmen und sorgt dabei noch dafür, dass der Code gut lesbar bleibt.
Man muss aber aufpassen, dass man nicht unnötig stark kaskadiert.
26. Juli 2011
Schlechte Verbindung simulieren
Wenn man MacOs-X 10.7 (Lion) mit den Developer Tools installiert – hierzu nach der Lion Installation im App Store das nun kostenlose Xcode installieren – findet man in den Utilities (Dienstprogramme) einen Ordner “Network Link Conditioner” und in diesem ein gleichnamiges prefPane.
Nach Installation selbiger findet man in den System Preferences (Systemeinstellungen) entsprechende Einstellungsmöglichkeiten.
Hier kann man nun wunderbar die eigene Leitung drosseln und so Webseiten, Apps etc. unter schlechter Verbindung testen.
Aber nicht vergessen das ganze anschließend wieder abzuschalten, sonst macht das surfen nicht wirklich Spass.
29. April 2011
Simulierter Zufall mit CSS
Vor kurzem las ich einen interessanten Artikel von Alex Walker, in dem er beschreibt wie man mit dem von ihm „cicada principle“ genannten Umstand, dass Primzahlen sehr wenige gemeinsame Vielfache mit anderen beliebigen Zahlen haben, sehr einfach sich scheinbar nicht wiederholende Hintergründe mit CSS erstellen kann.
Da ich in meinen Webdesigns nur selten unruhige Hintergründe benutze und man bei ruhigen Hintergründen selten ein Problem mit sichtbaren Wiederholungen hat, kam mir der Gedanke, dass sich das doch auch gut auf andere Bereiche anwenden lässt.
Kommentare [1]
27. April 2011
Webdesigners Werkzeugkasten
Es ist nicht immer ganz leicht, die richtigen Programme für eine bestimmte Aufgabe zu finden. Da momentan gefühlt jeder zweite auf Mac-OsX umsteigt, stehen sicher einige vor dem Problem nicht nur mit der neuen Plattform warm zu werden sondern eben auch die richtigen Programme für die eigenen Anforderungen zu entdecken.
Zumindest den Webdesignern möchte ich mit diesem Artikel ein paar Möglichkeiten aufweisen.
25. April 2011
Blog Relaunch
Die Abstände meiner Blogpostings wurden immer länger und länger und lagen zuletzt bei über einem Jahr.
Dies soll sich mal wieder ändern.
Im Zuge der Website Neugestaltung habe ich auch dieses Blog überarbeitet und habe den festen Vorsatz wieder öfter etwas zu schreiben. Dies wird bestimmt kein Blog mit täglichen Updates (auch wöchentlich halte ich für unrealistisch), aber es wird doch immer wieder mal etwas neues geben.
Der Relaunch war auch mit einem Server Umzug verbunden. Leider sind hierbei alle Kommentare des alten Blogs verloren gegangen. Also ran an die Tastatur und schreibt mir ein paar Neue!
11. August 2010
TXP Mobile – Textpattern vom iPhone editieren
Mit TXP Mobile hat Oliver Ker das Admin Theme von Textpattern fürs iPhone optimiert.
Bei mir läuft das ganze bis her ganz wunderbar.
Bilder Upload funktioniert leider bislang noch nicht, aber da sich Custom Fields mit Inhalt bestücken lassen, kann man somit beispielsweise die ID eines Flickr Albums verknüpfen.
Dieser Artikel wurde am iPhone erstellt (Nur das Bild habe ich anschließend noch am Rechner hinzugefügt). Für lange Artikel ist das natürlich nicht sehr komfortabel, aber für das Update auf die schnelle einwandfrei.
