CSS-Dateien sinnvoll strukturieren

Thu, 15 Jan 2015 16:54:12 +0100

Wie baut man eine CSS-Datei sinnvoll auf? Nachdem man meistens sehr strukturiert angefangen hat, werden die Stylesheets im Laufe des Projektes immer unübersichtlicher – und schließlich kann sich die Datei nicht mehr retten vor tausenden von Spezialklassen, die irgendwo zwischen den Styles für Überschriften und Sidebar-Divs die letzte Übersichtlichkeit ausmerzen. Die Devise für gutes CSS sollte sein: unspezifisch und klassisch bleiben. Warum das so ist, erfahrt ihr hier. Unspezifisch bleiben Die Spezifität der CSS-Datei entscheidet über die Wertigkeit der verschiedenen Stylesheet-Angaben und priorisiert sie entsprechend. Folgende beispielhafte Liste ist quasi „anti-spezifisch“, also von der wichtigsten bis zur wenigsten wichtigen Stylesheet-Angabe, sortiert: Wichtigkeit Selektor(en) Spezifität höchste style="foo: bar;" 1-0-0-0 mittel-hoch #foo #bar { /* bar in foo */ } 0-2-0-0 mittel #foo { /* foo */ } 0-1-0-

Neues Jahr, neue Schrift, neuer Blog

Mon, 05 Jan 2015 21:53:52 +0100

Quadratdesign begrüßt das neue Jahr mit neuer Typographie und einem Weblog! Nachdem wir unser Redesign im Sommer mit der von Adobe entwickelten Source Sans Pro gestartet haben, haben wir uns nun doch noch einmal umentschieden: Die neue „Hausschrift“ von Quadratdesign ist ab nun die Fira Sans: entwickelt von Schriftenguru Erik Spiekermann in Anlehnung an seine FF Meta und freigegeben unter der SIL OpenFont License, weshalb sie ohne weiteres als Webschrift einsetzbar ist. Die Fira Sans Warum eine neue Schrift? Die Fira ist einfach viel fluffiger – seht selbst (oben Source Sans, unten Fira): Auf Quadratdesign kommt die Schrift nun auch öfter mal im Schriftsatz Medium (font-weight: 500;) zur Geltung und setzt dadurch prägnante Akzente, quasi als stillen Protest gegen den Light-bis-ExtraLight-Wahn der 2010er-Jahre ;) Gute Nachrichten für typo-affine Entwickler: Die Fira gibt es auch in einer monospaced-Version:

jQuery Accordion ohne jQuery-UI

Wed, 07 Jan 2015 13:08:45 +0100

Nur ein kleiner Hack am Rande: Um ein jQuery-Accordion zu initialisieren, bedarf es nicht unbedingt der Einbindung der knapp 300 kB schweren jQuery-UI-Bibliothek - es geht auch folgendermaßen (hier mit einer Definition List): $('.accordion dd:not(:first-of-type)').hide(); $('.accordion dt').on('click', function (e) { e.preventDefault(); $(this).parent('dl.accordion').children('dd:visible').slideUp('slow'); $(this).nextUntil('dt').filter(':not(:visible)').slideDown('slow'); }); Die erste Zeile blendet alle

s außer dem ersten aus, die zweite Zeile initialisiert den Toggle. Das passende HTML:

Erster Eintrag: Absatz des ersten Eintrags
Zweiter Eintrag: Absatz des zweiten Eintrags

Das Ganze noch per CSS stylen (.accordion dt { cursor: pointer; } nicht vergessen) und fertig ist das Akkordeon.

Über Webdesign und Fastfood

Fri, 05 Jun 2015 15:35:09 +0200

Natürlich können wir schnell eine Webseite aufsetzen: Wir installieren eine aktuelle WordPress-Version, suchen uns im Internet ein passendes Theme für 50,- €, machen die nötigsten Anpassungen und fertig. Oder? Das kommt immer darauf an: In den meisten Fällen funktioniert das und selbstverständlich haben kostenpflichtige WordPress-Themes ihre Berechtigung. Mit ihnen ist es möglich, relativ schnell eine gut funktionierende Seite aufzusetzen, die in allen gängigen Browsern läuft, responsiv (also mobiloptimiert) ist und den Bedürfnissen von 80% unserer Kunden entspricht. Und was ist mit Sonderwünschen? Das Einfügen eines speziellen Terminkalenders, eine Bildergalerie mit eigenen Meta-Daten, ein Online-Formular für spezifische Anfragen etc. In der schönen bunten WordPress-Welt gibt es für die meisten dieser Anforderungen Plugins. Wir klicken uns die Webseite im Administrationsbereich zusammen, setzen Baustein auf Baustein und lehnen uns entspannt zurück. Nicht immer!

Merry Christmas

Mon, 19 Jan 2015 10:28:46 +0100

Viele Grüße vom Internet Explorer ;)

Quadratdesign Weblog

CSS-Dateien sinnvoll strukturieren

Neues Jahr, neue Schrift, neuer Blog

jQuery Accordion ohne jQuery-UI

Über Webdesign und Fastfood

Merry Christmas