seblog

Das CSS-Framework YAML erleichtert das Erstellen von Webseiten im Bereich Layout und Design. So wie CakePHP dem Entwickler die gängisten und teilweise nervigen immer wiederkehrenden Aufgaben abnimmt, macht YAML im Prinzip das Gleiche – nur eben mit CSS. Was liegt näher, als beide Frameworks miteinander zu kombinieren bzw. YAML in CakePHP zu integrieren? Hier eine Kurzanleitung, wie YAML in CakePHP integriert werden kann:

1. Das YAML Download Paket von dieser Seite runterladen (zum aktuellen Zeitpunkt V3.2)
2. Das Paket in einen beliebigen Ordner entpacken.
3. Im Ordner “yaml” befinden sich zwei Dateien (central_draft.css und markup_draft.html) sowie mehrere Ordner.
4. Der gesamte Inhalt von yaml muss kopiert und in das css Verzeichnis von CakePHP (app/webroot/css/) eingefügt werden.

Prinzipiell wars das schon. Jedoch muss natürlich ein Design her und die Pfade müssen noch gesetzt werden. Daher Folgendes durchführen:

1. Am besten den YAML Builder nutzen. Das ist ein “Almost WYSIWYG” CSS-Editor, quasi ein “AWYSIWYG for CSS“.
2. Dann erstmal viel Spaß beim Gestalten des Layouts der Seite, der YAML Builder ist selbsterklärend.
3. Nach einem Klick auf “Get Code” im YAML Builder bekommt man die notwendigen CSS Dateien.
4. Der Inhalt von basemode.css muss kopiert und in eine basemod.css Datei im Ordner screen in app/webroot/css/screen abgelegt werden.
5. Die CSS Patches für den Internet Explorer von patch_my_layout.css müssen ebenfalls kopiert und in eine patch_my_layout.css Datei im Ordner patches in app/webroot/css/patches abgelegt werden.
6. Den (X)HTML Code vom YAML Builder am besten in die default.ctp von CakePHP in app/views/layout kopieren. Dies muss man so nicht machen, aber dann bekommt man erstmal ein Gefühl, wie sich YAML und CakePHP miteinder verbinden.
7. In der default.ctp muss nun der folgende Teil

   durch folgenden Teil ersetzt werden.

         < ?php echo $html->css(‘central_draft’);? >
         
         < ?php echo $html->css(‘patches/patch_layout’);? >
         

   Anmerkung: Das Leerzeichen zwischen < und ? sowie zwischen ? und > muss natürlich weg. Das Code-Plugin für Wordpress verschluckt sonst jedoch das gesamte < ?php und ? >.

   Es wurden nun gemäß CakePHP Konventionen, die CSS Dateien eingebunden.

   Abschließend müssen noch kleine Pfadänderungen in der central_draft.css in app/webroot/css gemacht werden. Die Datei sollte den folgenden Code enthalten:

   /* import core styles | Basis-Stylesheets einbinden */
   @import url(core/base.css);
   
   /* import screen layout | Screen-Layout einbinden */
    @import url(navigation/nav_shinybuttons.css);
    @import url(screen/basemod.css);
    @import url(screen/content.css); 
   
   /* import print layout | Druck-Layout einbinden */
   /* @import url(print/print_003.css); */

   Anmerkung: Schön auf die /* Kommentare */ aufpassen, nicht dass eine Datei dadurch nicht importiert wird.

Das war’s auch schon. Viel Spaß weiterhin mit CakePHP und diesmal auch mit YAML.