Kategorie-Archiv: CSS

CodeKit – komfortable CSS-Entwicklung mit LESS

Als Entwickler geht mir vor Allem eins auf den Keks: Design. Ich mag es nicht, wenn man Elemente hin und her schieben muss. Pixel für Pixel. Mit Chrome habe ich da ja schon einen einigermaßen runden Workflow gehabt – aber das geht wirklich noch besser. Und zwar mit LESS und CodeKit ($28).

Das geniale: Die Projekte (Verzeichnisse) werden einfach in CodeKit geladen. Hier werden Dateiänderungen überwacht und LESS dann einfach neu kompiliert, wenn sich eine Datei ändert. Doch damit nicht genug: Man kann außerdem definieren, dass der Browser ebenfalls aktualisiert werden soll! Dabei wird nicht die Seite komplett neu geladen, sondern die Änderung wird auch noch animiert.

CodeKit

Zusammen mit phpStorm also ein unschlagbares Team. Das einzige Problem was ich nun habe, ist fehlender Platz auf meinem MacBook – so muss ich mich nun doch öfter ins Arbeitszimmer setzen und den 24-Zöller anklemmen. Aber dann macht es erst richtig Spaß!

Kleiner Tipp noch: Von Haus aus funktioniert die Integration mit phpStorm nicht so richtig – das liegt daran, dass phpStorm per Default einen sog. „Safe-Mode“ nutzt. Dieser schreibt Änderungen erst in eine temporäre Datei, bevor das Original verändert wird. Schaltet man diesen ab, funktioniert die Magie hinter CodeKit wirklich einwandfrei (getestet mit Chrome). Diese Einstellung findet man unter dem Tab „General“:

phpStorm Safe-Mode

Die 28 Dollar habe ich jedenfalls gerne investiert – ein geniales Tool.

jQuery: One-Page Layouts mit OpenSource-PlugIns

Anfangs war ich ja etwas skeptisch was OnePage-Layouts angeht. Irgendwie fiel einigen Unternehmen der Start aber auch extrem schwer. So hat man genügend Seiten gesehen, die wirklich absolut schlecht gemacht waren. Mittlerweile lösen manche Landing-Pages aber auch echte WOW-Effekte in mir aus. Unterstrichen von genialen Fotos und tollen Animationen und Grafiken, bekommt man direkt einen positiven Eindruck und hat einfach Lust weiter zu scrollen.

Der aktuelle Trend für OnePages ist allerdings das sogenannte „parallax scrolling“ – das bedeutet, dass sich unterschiedliche Ebenen beim scrollen unterschiedlich schnell bewegen. So entsteht viel mehr Tiefe auf der Seite und alles wirkt einfach lebendiger.

Wer jetzt noch nicht verstanden hat was ich genau meine, der sollte sich durch folgende Links klicken:

Also, was braucht man denn nun um solch ein Layout zu bauen? Im Web existieren verschiedene Frameworks, welche einem alle einen relativ guten Start geben. Ich habe mich vom Bauchgefühl her aber bisher nur auf „cool kitten“ fixiert und bin insgesamt mit den Ergebnissen sehr zufrieden. Bisher konnte ich alles realisieren was ich mir vorgenommen habe. Außerdem bietet es einen einfachen Start in die Materie und man landet relativ schnell da, wo man hin möchte.

So habe ich als erstes eine Landing-Page für die Neugeborenen-Shootings meiner Freundin ins Leben gerufen, um mich mit der Materie etwas genauer auseinander zu setzen. Und ich muss sagen, dass ich mit den Ergebnissen sehr zufrieden bin. Leider unterstützen Mobilgeräte die Funktion noch nicht wirklich, und so muss man die Seite nebenbei nochmals für Mobilgeräte optimieren. Bisher habe ich auch noch keine Lösung gefunden, um diesen Effekt auf Mobilgeräten zu realisieren.

Bootstrap 3 Migration Guide

Angenommen man hat ein tolles Projekt auf Basis von Bootstrap 2 erstellt und online genommen. Nun möchte man irgendwie doch auf dem aktuellen Stand bleiben und auf Bootstrap 3 wechseln. Schon funktionieren einige Dinge nicht mehr oder sehen eventuell ganz anders aus.

Genau bei diesem Punkt hat mir diese Seite sehr geholfen. Dort findet man eine super Aufstellung aller Klassen die sich so geändert haben. Im Idealfall muss man also nur ein Find & Replace im Projekt durchführen und ist fertig. Soviel zur Theorie – es bleibt in jedem Fall ein super Einstieg und eine große Hilfe.

CSS: Eine Basis für alle Browser (reset.css)

Wenn man ein neues Design erstellt, sollte man sich die Zeit sparen um die Basis auf die einzelnen Browser anzupassen. Viel einfach geht das mit der reset.css. Hier werden die wichtigsten Settings „normalisiert“ – so braucht man sich nicht nach der Entwicklung ärgern, dass die Seite in allen Browsern anders aussieht.

Hier der direkte Download.

SpritePad – Sprites super schnell online erstellen

Durch einen vorigen Artikel bin ich auf die Seiten von WeAreKISS gestoßen. Diese bieten ebenfalls eine Web-Anwendung namens SpritePad an. Sprites sind einzelne Bilder welche eine Sammlung aller Bilder einer Website darstellen. Die Einzelnen Bilder sind dann trotzdem durch „zerschneiden“ per CSS nutzbar. So müssen weniger Bilder vom Server geladen werden und die Seite lädt außerdem deutlich schneller. Ich finde es klasse und setze es auf jeden Fall in meinem nächsten Projekt ein.

Außerdem braucht man nichts zu installieren und kann direkt online starten.

Wer nutzt noch reines CSS?

Irgendwie komme ich mir gerade etwas blöd vor. Natürlich habe ich schon von SASS gehört (in Kombination mit Ruby). LESS habe ich zuvor nur mal gehört und habe es nie wirklich in Betracht gezogen. Aber irgendwie mache ich mir so langsam meine Gedanken ob es wirklich Sinn macht in Zukunft weiter reines CSS zu schreiben oder ob man damit ein wenig „retro“ unterwegs ist. Wenn man etwas sucht findet man etliche CSS-Framworks:

Sicher gibt es noch einige mehr – aber da stellt sich mir doch die Frage ob es noch Sinn macht CSS selbst zu schreiben. Gerade bei größeren Projekten stößt man doch gerne mal an die Grenzen der Übersichtlichkeit. Das Einfügen von Kommentaren und das Unterteilen der Styles auf verschiedene Dateien hilft bei der Übersichtlichkeit auch nur bedingt. Außerdem ist es sicher sinnvoll wenn weniger HTTP-Requests generiert werden.

Natürlich erzeugt so ein Framework zusätzliche Last – aber man kann ja einen Zwischenweg gehen. So könnte man beispielsweise mit lessphp das LESS-File nur neu parsen wenn es sich auch geändert hat. Da gibt es sicher auch schon bestehende Lösungen und Tutorials – davon bin ich überzeugt!

Für mein nächstes Projekte nehme ich mir also vor so viele Frameworks wie möglich zu nutzen (Beispielsweise YAML + LESS + jQuery).