Checkliste für den Theming-Ninja

Hier ein paar Firefox-Plugins und Websites, die einem das Leben doch sehr erleichtern können.
Manche werden die Seiten und Tools vielleicht alle kennen, die bitte ich um Nachsicht. Aber für die Anderen ist es sicher wertvoll.

Plugins

Grundausstattung für Firefox:

  • Firebug - der König der CSS-Überprüfung. Wer das nicht nutzt, ist selber schuld. Für Javascript Entwickler sind genauso geniale Tools drinne.
  • Web Developer Toolbar - war früher am Start als Firebug und bietet andere, auch sehr nützliche Funktionen, wie z.B. alle Stylesheets hintereinander anzuzeigen - so kann man per Suchbefehl auf die Jagd gehen, was auch oft nützlich ist. Ausserdem von mir immer wieder gerne genommen: Resize Window, um mal zu gucken, wie es auf 1024x768 aussieht (natürlich nur für Monitore mit hoher Auflösung sinnvoll
  • Colorzilla - mit einer Pipette beliebige Farben (auch aus Bildern) auf einer Website aufnehmen und kopieren oder aus einer Farbpalette auswählen - einfach und unersetzlich
  • Measureit - ein Viereck aufziehen und Abstände, Containergrössen oder was auch immer abmessen. Nicht schätzen - messen! Einfach und enorm praktisch.

Auch für den Internet Explorer gibts was:

  • IE Developer Toolbar - eine Mischung aus Firebug und der Web Developer Toolbar. Sehr praktisch, wenn man wissen will, ob IE einen Style nicht angenommen hat oder was auch immer. Schliesslich kann man die alte (und neue, IE7) Schrottkiste (leider) nicht ignorieren

Da der Mac ja nun Safari hat, auch dazu ein paar Links
(sorry, vor allem für Windows-User interessant):

  • Safari für Windows - Beta forever und einfach fürchterlich, aber er rendert fast genauso wie auf dem Mac und daher sehr wertvoll
  • Browsrcamp - Screenshots von einem echten aktuellen Mac-Safari. Recht schnell und die Auflösung lässt sich auswählen. Ihr gebt eure URL ein und Browsrcamp erstellt einen Screenshot, wie diese auf dem Mac Safari aussieht, der dann dargestellt wird.

CSS Resourcen:

Ja da wird man nicht fertig, es gibt so geniale Leute, dass es eine Lösung zu jedem Problem zu finden gibt, wenn man nur weiss wo. Ein paar Seiten haben allerdings Kompendium- und Referenzcharakter und seien deshalb hier aufgeführt:

  • Listamatic - Hier gibt es sogar zwei Seiten, hier die zweite. Ein gut gemachtes Menü besteht aus verschachtelten Listen. Und der Tag, an dem ich die horizontale Liste entdeckte, war ein ganz besonderer. Leider sind die Biester fast noch schwerer zu bändigen als Floats, weshalb die umfangreiche Seite Sinn macht. Sehr klar aufbereitete Codebeispiele, die auch immer als Preview live angezeigt werden. Dazu noch viele, viele kreative Nutzungsmöglichkeiten für Listen. Wenn ich nicht weiterweiss, gehe ich immer wieder da hin.
    Wie ich oben auf der Seite entdecke, gibts da noch viel mehr: ein Listutorial, was zu Floats und Selects... Hammer.
  • css4you - War lange DIE Referenz. Immer noch ein tolles, übersichtliches und auch noch hübsch gestyltes Kompendium. Leider hat der Autor vor zwei Jahren (gefühlt, vielleicht waren es auch nur eins oder drei) die aktive Arbeit daran aufgegeben, da freche Raubkopierer sich mit seinen Federn schmückten. Andere pflegen die Seite weiter, so dass sie immer aktuell ist, aber nicht ganz so aktiv was neues angeht wie der Originalautor. Hier sehr gut: Eine sehr umfangreiche Kompatibilitätstabelle zu jederm CSS Attribut.
  • A List apart - eigentlich mehr eine Onlinezeitung als ein Blog. Artikel zu verschiedenen Rubriken des Webworking. Aber von welchen Autoren! Die absoluten Topnamen schreiben hier, oft als Gastautoren, nur hochwertiges kommt rein. Wer schon immer mal was über Sliding Doors wissen wollte... Mir fehlt leider oft die Geduld, da mal mehr zu lesen, aber das Niveau ist unglaublich.
  • Positioniseverything - die absolut hammermässige Sammlung von Seiten zum Thema Browserbugs. Vor allem extrem wertvoll für IE - denn da ist der ganze Browser ein einziger Bug. Meine Lieblingsseite darin: Explorer Exposed. Sehr gründlich erklärt, und da geht einem so manches Licht auf. Ein Horrorkabinett... aber mit bereitgelegtem Holzpflock und Silberkugeln. (Das heisst Lösungen ;) )
  • CSSplay - Wenn ein erfahrener Webdesigner bezüglich CSS ein guter Handwerker ist, dann ist Stu Nicholls (Autor der Seite) ein Raketeningenieur. Absolut extreme Spielereien, aber auch normale (haha, normal - am Anfang denkt man, das wäre nur mit CSS gar nicht möglich) Lösungen für Layoutprobleme und alles mögliche. Der Typ ist echt Extremsportler, und er ruht nicht, bis seine Sachen in allen Browseren funktionieren. Das Stichwort ist Vermeidung von Javascript bis aufs Messer - vermutlich enthält die gesamte Seite keine Zeile Javascript. Eine Spielwiese und ein Technik-Museum. Man kann die Lösungen auch verwenden, auch wenn man sich dann reinfuchsen muss. Stu bittet um einen Backlink in diesem Falle. Wenn man sich die Sachen anguckt, versteht man aber warum.

Drupal Themeing

0
Your rating: Keines

Kleines Feedback

Bild von enypsilon

Leider auf einem Wordpress geschrieben ... Eye-wink

Hier weiterlesen.

Speed-Theming

Bild von tommi

Hier der Artikel im Drupalcenter-Handbuch, der einen up and running in 15 Minuten bringen sollte: http://www.drupalcenter.de/handbuch/8821

Ich würde der Liste oben

Bild von SteffenR

Ich würde der Liste oben noch den HTML Validator zufügen (https://addons.mozilla.org/de/firefox/addon/249) - gerade bei komplexeren HTML/ CSS - "Geschichten" ist er bei der Fehlersuche recht hilfreich..

 

Danke für die schöne

Bild von derhasi

Danke für die schöne Sammlung!

 

Kennt jemand von euch zudem ein Tool/FF-Plugin, mit dem ich mehrere CSS zu einer  Datei zusammenfassen und in einer Datei speichern kann. Muss für eine Institutsseite deren CSS in eine Datei zusammenführen, will dies jedoch nicht per Hand machen Eye-wink

Du könntest dir über die

Bild von SteffenR

Du könntest dir über die Web Developer Toolbar unter dem Punkt CSS>"View CSS" alle im Dokument enthaltenen Styles anschauen und die dann via Copy and Paste in eine neue CSS Datei kopieren ..

Ein CSS "Aggregator" für den FF kenne ich so noch nicht..