20 Jahre CSS - Herzlichen Glückwunsch!

Heute vor 20 Jahren erschien ein Beitrag mit dem Titel:

Cascading HTML style sheets -- a proposal

von Håkon W Lie. Das war die Geburtsstunde der Cascading Style Sheets (CSS), welche heute nicht mehr wegzudenken sind. Herzlichen Glückwunsch!

Der Schritt zu WordPress

Nach ewigen Zeiten wurde ich gefragt, ob ich nicht eine Website aufsetzen könnte. Als bekennender Purist hatte ich geplant, alles mit der Hand am Arm zu machen.
Dann überlegte ich kurz und las im Netz über Wordpress ein. OK dachte ich, Versuch macht klug.

Also ran an die Installation. Ich hatte Glück, die Version 4 von Wordpress wurde gerade veröffentlicht. Viel anzupassen hat man ja nicht. Ein paar Einträge in der wp-config.php (Angaben zur Datenbank) und dann das Installscript starten, die Felder ausfüllen und das war es schon.

Wordpress lief sofort und ich konnte loslegen, alles so anzupassen und einzurichten, wie ich es mir vorgestellt habe.

Thema

Da die Website schick aussehen soll und in der heutigen Zeit auch auf mobilen Geräten eine gute Figur machen muss, habe ich mich als erstes auf die Suche nach einem passenden Thema gemacht. Gelandet bin ich schließlich bei Dazzling. 

Flat Design, Responsive, sehr gut anpassbar. Nebenbei habe ich dieses Thema auch gleich ins Deutsche übersetzt. (Download .mo und .po Dateien als .zip.)

Plugins

Natürlich mussten auch noch ein paar Plugins ran. Als erstes musste ich einen Weg finden, einen Ebay Shop mit der Website zu verheiraten. Es sollen die aktuellen Artikel des Shops dargestellt werden als auch in Beiträgen auf besondere Artikel verwiesen werden.

Der Weg dahin war steinig. Ich habe einiges ausprobiert und bin dann bei dem Plugin WP RSS Aggregator. 

Der Weg über die Darstellung der Inhalte des RSS-Feeds des Ebay Shops erschien mir am einfachsten. Das Plugin funktioniert reibungslos. Für die Qualität des Ebay RSS-Feeds kann das Plugin aber auch nichts...

Nun ging die Suche los, ein Plugin zu finden, welches zu einem Link ähnlich wie bei Facebook oder Google+ den Inhalt des Links mit evtl. Bild in einer Box darstellt. Der Plan war, den Link zu ausgewählten Ebay Artikeln in einen Beitrag einzufügen und dann erscheint diese erwähnte Box mit den Inhalten hinter dem Link.

Gefunden habe ich dazu Onebox. Dieses Plugin macht genau das und ist gut konfigurierbar.

Das sind kurz zusammengefasst die ersten Erfahrungen mit einer Wordpress Installation. Bisher bin ich recht zufrieden und werde natürlich weiterhin an der Seite schrauben und Sachen ausprobieren.

Das Ergebnis ist hier zu sehen: unger-id.de

Blueprint CSS Framework Tutorial

Eine schöne Einführung in das Blueprint CSS Framework. Blueprint CSS ist ein gridbasiertes CSS Framework, welches einem viel Arbeit beim Layouten einer Webseite abnimmt. Es ist auf jeden Fall einen Blick wert.

http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/

Horizontales UND vertikales Ausrichten mit jQuery Plugin

NealGrosskopf.com l CSS Horizontal And Vertical Align JQuery Plugin

Gestern habe ich über 5 Möglichkeiten, ein Layout vertikal auszurichten, geschrieben. Nun hat es keinen Tag gedauert, bis ein Blogpost zum horizontalen und vertikalen Ausrichten auftaucht. Das Ganze ist auch noch ein jQuery Plugin. Was will man mehr!

Einfache Webinterfaces - 7 Tips

7 Interface Design Techniques to Simplify and De-clutter Your Interfaces | Webdesigner Depot

Eine schöne kurze Darstellung, was man mit einfachen Mitteln erreichen kann. Vielfach alledings unter Zuhilfenahme von Javascript. Geschrieben von Dmitry Fadeyev. Er schreibt ein Blog unter: Usability Post.

CSS Grid Layout mit Blueprint / Bluetrip

Nun bin ich seit Ewigkeiten mal wieder dabei, eine Webseite auf Vordermann zu bringen. Das Layout stammt von einer Designerin und ich darf aus dem Design das eine HTML Seite machen.
Zum Layouten habe ich mich schlau gemacht, welche css Frameworks es mittlerweile gibt. Dabei bin ich auf zwei Frameworks für das sogenannte Grid Layout gestossen. Es handelt sich dabei um:

• blueprint

• bluetrip

Bluetrip ist dabei eine Kombination von Blueprint, Tripoli (daher der Name), Hartija's print stylesheet, 960.gs's Einfachheit und Elements' Icons.
Der Umgang mit Bluetrip ist recht einfach. Ausgehend von einer 950 px breiten Seite stellt das Framework 24 Spalten zu Verfügung. Jede Spalte ist 30px breit und hat an der rechten Seite einen 10px breiten Rand. Die letzte Spalte besitzt diesen Rand nicht.
Grundsätzlich befinden sich alle Elemente in einem Container, welcher das grundlegende Layout für alle Elemente steuert.
Hier ein Beispiel:

Einbinden der CSS Dateien:

  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
  <!--[if IE]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
  <![endif]-->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">

Der grundlegende Aufbau des HTML body:

<div class="container">
   <div class="span-12">Ich bin der Text in Spalte1</div>
   <div class="span-12 last">Ich bin der Text in Spalte2</div>
</div>

Damit hat man zwei Spalten in einer 50% / 50% Teilung. Es gibt die Klassen span-1 bis span-24. Die Summe der span-x Klassen muss immer 24 betragen.
Man bekommt sehr schnell ein Layout über CSS gebaut und hat den Vorteil, dass es Browserkompatibel ist.
So sieht das Ergebnis bisher aus:

Fazit: Es lohnt sich auf jeden Fall, diese Frameworks einmal anzutesten. Man kann sich viel Arbeit beim debuggen von selbstgeschriebenen CSS sparen.