Rails: Compass from scratch
“Compass is a real stylesheet framework, not a collection of classes. With Compass, you still use the best of breed css frameworks (blueprint, yui, 960); ported to Sass to make them easier to configure and apply to your semantic markup.”
Zum einrichten eines neuen Ruby on Rails-Projektes mit Compass müssen erst zwei gems installiert werden:
- Haml
- Compass
Die Installation von Haml ist dem vorigen Kapitel erklärt. Compass lässt sich einfach installieren über:
sudo gem install --source http://gems.github.com/ chriseppstein-compass
soweit so gut.
Nun erstmal das Rails Projekt starten mit:
rails compass-test-app
Jetzt das neue Projekt zu einem Haml projekt machen. Dazu nutzen wir den “haml”-befehl
Im Projektverzeichnis folgendes ausführen:
haml --rails .
Dann ist im “plugins”-Verzeichnis ein “haml”-Verzeichnis angelegt worden.
So, nun noch im Projektverzeichnis folgendes ausführen:
compass --rails -f blueprint .
Dies legt alle notwenigen Verzeichnisse und Dateien an. Dies sind “app/stylesheets” und “app/src” (app ist hier das Projektverzeichnis). Da ich die Stylesheets gerne im “/public”-Verzeichnis habe und nicht im empfohlenen Standardverzeichnis von compass verschiebe ich die beiden Verzeichnisse “src” und “stylesheets”.
Dann kommt noch der Hinweis, dass das sass-stylesheet neu kompiliert werden muss, wenn es sich ändert. Dies kann mit dem Befehl compass im Projektverzeichnis durchgeführt werden.
Da ich die Dateien ins “/public”-Verzeichnis geschoben habe, sollte auch dort der “compass”-Befehl ausgeführt werden.
Für ein automatisches Monitoring und neukompilierung geht auch
compass --watch [path/to/project]
Um die hier z.B. blueprint-stylesheets auch wirklich zu verwenden müssen diese noch in der entsprechenden Layout-Datei verankert werden. So also folgenden Code noch einbinden:
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
Interessant ist zudem noch zu sehen, wie blueprint-css aussieht, wenn man es ohne Anpassung verwendet. Dazu habe ich ein paar tags zusammengebaut. Es sind längst noch nicht alle, aber einen guten Eindruck bekommt man schonmal. Wie ich finde, sehr schick!
fertig!