Blog » Installation von YAML in SilverStripe

Installation von YAML in SilverStripe

Eintrag von Roland Lehmann am 14/11/2009 17:47 | 8 Kommentare

Tags: ,

Webdesigner müssen einen nicht unerheblichen Teil ihrer Zeit damit verbringen, die Probleme auszubügeln, die ein gewisses Produkt der Firma Microsoft namens InternetExplorer bei der Darstellung von Webseiten verursacht. Eigentlich müsste das nicht so sein, wenn Microsoft sich an die Vorgaben des W3C halten würde, das festlegt, wie Browser HTML und CSS darzustellen haben.
Aber die Zeiten, in denen man sich damit rumschlagen musste, gehören der Vergangenheit an, denn jetzt gibt es YAML. YAML ist ein CSS-Framework. Auf der Homepage von YAML gibt es ein kleines Tool names YAML-Builder, mit dem sich ein Grundlayout definieren lässt. Dazu liefert der Builder dann CSS-Dateien und Markup, welches man in sein Webprojekt einbindet und schon hat man eine große Sorge weniger. Wie man das YAML Framework in SilverStripe einbindet, beschreibe ich in den folgenden Schritten:


  1. YAML Verzeichnis nach themes/blackcandy/ kopieren. Blackcandy steht für den Namen des Themes.
  2. Layout mit YAML Builder zusammenstellen
  3. Den Inhalt der Datei layout.css mit dem Code aus my_layout.css des Builders überschreiben. Der Pfad für zwei der CSS-imports muss wie folgt angepasst werden:
      so sieht´s aus -> so muss es aussehen:
          url(screen/basemod.css); -> url(../yaml/screen/basemod.css);
          url(screen/content.css); -> url(content.css);
          • Der Inhalt der Datei basemod.css aus dem YAML Builder wird über den Inhalt der Datei blackcandy/yaml/screen/basemod.css kopiert. Diese Datei sorgt für das Basislayout, beispielsweise Breite der verschiedenen Spalten.
          • Die Datei blackcandy/yaml/screen/content_draft.css wird nach blackcandy/css/content.css kopiert. In dieser Datei wird jetzt das Individualdesign definiert. Elementdefinitionen dieser Datei haben automatisch Vorrang vor denen anderer CSS Dateien.
          • Jetzt fehlt noch die Datei patch_my_layout.css aus dem YAML Builder. Diese kommt in das Verzeichnis blackcandy/css/my_patches/patch_my_layout.css.
          • Zu guter letzt wird das Markup des YAML Builders in das SilverStripe Theme eingearbeitet. Es wird in die Datei blackcandy/templates/Page.ss kopiert. Die entsprechenden Teile der Datei müssen jetzt in sinnvolle Includes gepackt werden. Die Definition im <head> der Page.ss müssen außerdem mit den neuen des YAML Builders verschmolzen werden. Wichtig ist hier vor allem das Einbinden der zentralen CSS Datei:
            <% require themedCSS(layout) %>
            • Im <head> ist in der Browserweiche für den IE eine Patchdatei definiert. Deren Referenz muss auch noch angepasst werden:
                href="../css/my_patches/patch_my_layout.css"


Geben Sie einen Kommentar ab

Kommentare

  • Super Anleitung! Und man muss auch nicht extra umständlich ein Modul oder so installieren.

    Erstellt von Andreas, 29/06/2010 5:12pm (vor 2 Jahre)

  • Danke für deinen Hinweis, Jiri. Die Einbindung des CSS soll in SilverStripe ja über das Template erfolgen und nicht über den Controller. Man findet die Einbindung über den Controller immer noch, weil einige alte SilverStripe Themes dies benötigen.

    Erstellt von Roland Lehmann, 08/05/2010 7:22pm (vor 2 Jahre)

  • Noch ein kleiner Zusatz. Um Silverstripe CSS edngültig zu entfernen, sollten wir noch in mysite/Code/Page.php Zeile etwa 21 folgende requirements löschen:
    //Requirements::themedCSS("layout");
    //Requirements::themedCSS("typography");
    //Requirements::themedCSS("form");

    Erstellt von jiri, 03/02/2010 5:07pm (vor 2 Jahre)

  • Hallo Mathiasmex,

    vielen Dank für deinen Hinweis. Mein YAML-Markup war bis jetzt JS frei. Ich habe gesehen, dass mache Markup´s für den IE6 ein JS-patch bekommen. Wenn ich Zeit habe, arbeite ich das in die Doku noch ein.

    Erstellt von Roland Lehmann, 25/01/2010 8:33pm (vor 2 Jahre)

  • Hallo,

    schöne Anleitung. Ich habe in meinem error-log immer die Meldung gehabt: file not found www.yoursite.com/yaml. Bis ich den fehler gefunden hatte: Das Markup des YAML Builders hat am Ende eine JS Datei. Die sollte mittels Requirement in der Page.php in der init Funktion eingebunden werden. Daraufhin ist der Fehler verschwunden. Wolle nur darauf hinweisen....

    Erstellt von mathiasmex, 19/01/2010 2:28pm (vor 2 Jahre)

  • super howto, darauf habe ich gewartet...
    das wird mir die ersten Schritte mit Yaml im SS erleichtern.

    vielen dank...

    Erstellt von frosch, 02/12/2009 10:01am (vor 2 Jahre)

  • Hallo stooni,

    ich glaube dich aus dem Silverstripe Forum zu kennen. Hast du da einen gleichnamigen Account?
    YAML kann einem wirklich das Webdesignerleben erleichtern. Die Themes von Silverstripe haben auch so ihre Probleme mit den verschiedenen IE Versionen.

    Erstellt von baba-papa, 17/11/2009 3:35pm (vor 2 Jahre)

  • Guter Ansatz, wollte mich auch schon einarbeiten in YAML und Silverstripe!

    ---Dank

    Erstellt von stooni, 17/11/2009 9:32am (vor 2 Jahre)

RSS Feed für die Kommentare auf dieser Seite | RSS feed für alle Kommentare