Das modulare CSS Framework YAML ist in Version 4 erschienen. Wir widmen uns in dieser Sendung ausführlich dem Konzept und der Technik des „Yet Another Multicolumn Layout“. Wir besprechen das vollständig überarbeitete Dokumentationskonzept, den zeitgemäßen Webauftritt und auch das Lizenzmodell. Vor allem erörtern wir die Frage, ob HTML5 und CSS3 enthalten sind und für wen YAML überhaupt gedacht ist.

Diese Folge jetzt anhören
YAML 4

David, Dirk und Jens haben Matthias Mees als Gast eingeladen. Informationen über YAML erhaltet ihr auch direkt im Blog von Dirk und natürlich auf der Webseite zum Framework.

Gesprächfaden

  • Kurzerklärung: Was ist YAML?
  • Modulares CSS-Framework (flexibel, barrierefrei, responsive)
  • Zielgruppe von YAML
  • YAML ist ein Baukasten, kein Fertiglayout
  • große Anzahl Dateien
  • „Da kommt immer so viel mit, das muss zu komplex sein und zuviel Overhead haben.“
  • Die neue Dokumentation – inspiriert von Bootstrap – ist praxisorientiert und erlaubt schnelles Kopieren von Code.
  • HTML5 und die alten IEs
  • html5shim
  • Ist Modernizr in YAML integriert?
  • HTML5 Boilerplate und YAML – Freund oder Feind?
  • Das build-Skript nutzen, um Stylesheets zu kombinieren/minifizieren
  • Grids vs. Spalten
    • ein eigenes Grid erstellen
    • 960gs, blueprint und die anderen sind immer so limitiert
    • Flexible Grids vs Rechenschwäche bei Browsern – wie geht man damit um?
  • Responsive Design – mobile first / desktop first – Wie supported man IE6-8?
  • respond.js oder css3-mediaqueries.js als mögliche JS-Krücke – Vor-/Nachteile
  • Responsive Design – Linearisierung, wann und wie?
  • „Problemfall“ Navigation in linearisierten Layouts; Chris Coyiers Smallscreen-Menü
  • Sass/LESS/Stylus mit YAML nutzen
  • Gibt es Pläne/Ansätze, Präprozessor-Versionen von YAML zu erstellen?
  • Sprite Generator via Compass (Sass-Erweiterung), siehe Fronteers-Video von Divya Manian


Diese Folge jetzt anhören

Tags: , , , , , , , , , , , , , , , , ,

Dieser Beitrag wurde am Mittwoch, 25. Januar 2012 um 21:08 Uhr in der Kategorie Podcast veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von GE GE
    am 26. Januar 2012, 13:44 Uhr

    Dirk zuzuhören ist immer eine Freude: kein albernes Understatement aber auch kein auf dicke Hose machen.
    Die neue Website ist sehr schön geworden!
    Es ist sehr lange her, dass ich mir YAML angesehen habe, werde ich auf jeden Fall nachholen. Da ich viel mit Contao arbeite, muss ich mal schauen, wie die sich vertragen.

  • Avatarbild von Nelson Nelson
    am 26. Januar 2012, 16:30 Uhr

    Nachtrag zu TW177: die Bücher sind ja schön und gut – mittlerweile findet man aber auch alles im Netz oder ist durch logisches Nachdenken erfahrbar.

  • Avatarbild von Andrej Prilipp Andrej Prilipp
    am 27. Januar 2012, 12:12 Uhr

    Super Beitrag.
    Besten Dank für die umfassenden und detaillierten Infos.

  • Avatarbild von Thomas Weise Thomas Weise
    am 27. Januar 2012, 13:08 Uhr

    Hat mir sehr sehr gut gefallen diese Sendung.

    Gratulation an Dirk Jesse für die 4.0.
    Ich hatte immer gehofft, dass es mit YAML irgendwann weitergeht.
    Die Vereinheitlichung der Klassennamen unter “ym-” und der Verzicht auf “id’s” macht für mich alles übersichtlicher. Auch die Dokumentation finde ich recht gelungen. Sie ist übersichtlicher und man kann gleich mal schnell ein Codeschnipsel kopieren.
    Klar ist es schade, dass es die Doku nicht mehr in deutsch gibt, aber das kann ich nachvollziehen. Und wenn ich die Wahl hätte zwischen einer aktuellen englischen und einer halbherzig gepflegten deutschen ist mir immer erstere lieber.

    Um den Kommentar gleich mal noch zu einer Frage zu nutzen:
    Bei einem Drei-Spalten-Layout kommt doch der eigentliche Inhalt im Quelltext wegen float erst hinter der linken und der rechten Spalte. Gibt es da eine einfache Möglichkeit, diesen Content (suchmaschinenfreundlich) am Anfang, bzw. wenigstens noch vor der rechten Spalte zu platzieren?

  • Avatarbild von Sebastian Sebastian
    am 27. Januar 2012, 13:56 Uhr

    Super Ausgabe,

    interessiere mich sehr längeren für YAML.

    Was ich den Dirk mal fragen wollte wie es den um sein Projekt thinkin’ tags steht.

    Mittlerweile hab ich so was ähnliches entdeckt. “Stylizer” nennt sich das ganze und sieht für mich vielversprechend aus.

    Eine kleine Einschätzung eurerseits zu Stylizer wäre ganz schön.

    Danke freu mich schon auf die nächste Folge.

  • Avatarbild von Dirk Dirk
    am 28. Januar 2012, 11:04 Uhr

    @Thomas Die Anordnung der Spalten am Bildschirm ist vollkommen unabhängig von der Reihenfolge im Quelltext.

    In der YAML-Doku findest Du die notwenigen CSS-Schnipsel zur Positionierung der Spalten. Wenn Du deine Hauptinhalte in .ym-col1 unterbringen möchtest und diese im Screendesign als mittlere Spalte dargestellt werden soll, dann verwende einfach die CSS-Konfiguration 2-1-3 oder 3-1-2, wie in der Doku angegeben.

    @Sebastian Um Thinkin’ Tags steht es gut, allerdings ist dieses Projekt ungleich größer und als Feierarbend-Entwickler geht nur eins nach dem anderen. Thinkin’ Tags baut auf YAML auf, weshalb die Finalisierung von YAML 4 jetzt zunächst Vorrang hatte. Jetzt nach dem Release geht auch die Arbeit an Thinkin’Tags verstärkt weiter.

    “Stylizer” ist ein aufpolierter CSS-Editor, der das Live-Editieren von Stylesheets mit Vorschau im Browser erlaubt. Die Oberfläche ist etwas gewöhnungsbedürftig aber hat einige interessante Features. Der größte Vorteil dürfte jedoch sein, dass man in der Vorschau unkompliziert zwischen verschiedenen Browserversionen umschalten kann. Ich habe allerdings in Stylizer allerdings bereits Mühe, wirklich jedes Element überhaupt ereichen zu können. HTML editieren ist ebenfalls nicht vorgesehen.

  • Avatarbild von Indianer3c Indianer3c
    am 29. Januar 2012, 14:30 Uhr

    Sehr viele Fachbegriffe ein Glossar wäre schön :)

  • Avatarbild von Indianer3c Indianer3c
    am 29. Januar 2012, 14:34 Uhr

    Und kann nicht wieder bei Minute 90 starten, wenn ich einen Kommentar abgesetzt habe… Benutze gerade den Google Chrome Browser unter Windwos 7

  • Avatarbild von macx macx
    am 29. Januar 2012, 14:38 Uhr

    @Indianer3c
    Dagegen gibt es gute Alternativen: Du hörst den Podcast in iTunes, in einer App oder lädst ihn dir runter. Alternativ könnten wir auch unserer Seite einen Popup-Player spendieren, doch dafür ist momentan keine Zeit.

  • Avatarbild von Thomas Weise Thomas Weise
    am 30. Januar 2012, 11:31 Uhr

    @Dirk
    Danke für den Tipp, genau das meinte ich, klappt wunderbar.

  • Avatarbild von Peter Müller Peter Müller
    am 31. Januar 2012, 08:46 Uhr

    Vielen Dank für die sehr informative Sendung. Habe es gerade im Auto nochmal gehört, und beim zweiten Mal kommen die ganzen Feinheiten erst richtig rüber ;-)

    Ich nutze YAML schon seit vielen Jahren in diversen Projekten, und finde YAML 4 absolut gelungen. Tolle Ideen hervorragend umgesetzt, im Code, in der Doku und in der Website.

  • Avatarbild von rockpianist rockpianist
    am 31. Januar 2012, 11:48 Uhr

    Zunächst einmal vielen Dank für die neue Yaml-Version, auf die ich lange gewartet habe. Ich bin zwar nicht ganz der Profi, habe mich in Yaml 3 aber recht gut eingearbeitet, dank Peter Müllers “Little Boxes” ;-) und Dirk Jesses Buch “CSS Layouts”.

    Der Umstieg fällt mir trotzdem schwer, denn die neue Doku macht mir zu schaffen.
    Gruß rockpianist

  • Avatarbild von Marcelo Marcelo
    am 3. Februar 2012, 01:15 Uhr

    Hat Spaß gemacht, zuzuhören.

    Auch wenn ich YAML noch nicht aktiv genutzt habe, betreffen mich die besprochenen Themen im Developer-Alltag doch sehr stark.

    Im Moment baue ich noch auf die Boilerplate, allein von der Aufmachung und den Features steht YAML dieser aber auf den ersten Blick in nichts nach, wobei ich tendenziell schon eine etwas längere Einarbeitungszeit vermute.

    Kann mir jemand den Link zu dem Performanceproblem mit der border-radius-Eigenschaft von erwähntem Russen nennen? Habe auf Anhieb leider nichts finden können.

  • Avatarbild von Matthias Mees Matthias Mees
    am 5. Februar 2012, 22:31 Uhr

    Aber klar: Profiling CSS for fun and profit. Optimization notes. von Juriy Zaytsev a.k.a. kangax.

  • Avatarbild von Marcelo Marcelo
    am 7. Februar 2012, 00:48 Uhr

    Das nenne ich mal einen interessanten Artikel, vielen Dank!

  • Avatarbild von Roland Roland
    am 7. Februar 2012, 22:46 Uhr

    Hallo!

    ich hab grade ein eigenes Framework-Projekt und bin mir nicht sicher wie ich an dem weiterarbeiten soll… verdienst du dir mit deinem Lizenzverkäufen deine Arbeitszeit fürs Projekt?

    lg
    Roland

  • Avatarbild von Mario Mario
    am 9. Februar 2012, 12:23 Uhr

    Zum Thema, warum CSS-Präprozessoren gerade für Frameworks sehr hilfreich sein können:
    Das CSS-Framework Bootstrap von Twitter bietet umfangreiche Konfigurationmöglichkeiten (http://twitter.github.com/bootstrap/less.html). Vorallem die Konfiguration des CSS-Grids durch Less-Variablen ist ziemlich praktisch.

  • Avatarbild von Dirk Dirk
    am 9. Februar 2012, 12:58 Uhr

    @Roland
    Aus den Lizenzeinnahmen schöpfe ich mit Sicherheit einen Teil meiner Motivation, das Projekt seit 2005 kontinuierlich zu pfegen und weiterzuentwickeln. Ein weiterer Motivationsfaktor kommt aus dem Anwenderfeedback und der öffentlichen Wahrnehmung des Projektes ansich.

    @Mario
    Speziell bei den Custom-Grids denke ich auch bei YAML über Hilfestellungen durch Less oder Sass nach. Bei Bootstrap sieht die Lage dennoch etwas anders aus, denn in diesem Projekt (v1.4) werden ja alle Module in eine, nicht eben kleine, CSS Datei geschrieben (minifiziert knapp 45 kB). Da lohnt es sich, über das Rauswerfen unnötiger Komponenten nachzudenken. In Bootstrap 2.0 ist der Aufbau etwas flexibler gelöst, allerdings bedingt dieser Ansatz im Grunde dann auch, dass auch bei der Anwendung diesen CSS-Präprozessoransatz weiterlebt. Und das ist im Bereich der Applikationsentwicklung (worauf Bootstrap eindeutig zielt), sehr viel leichter durchzuhalten als beim Bau “einfacher” Webseiten.

  • Avatarbild von Roland Roland
    am 9. Februar 2012, 17:52 Uhr

    Hallo Dirk!

    Glaubst du, dass sich aus der “öffentlichen Wahrnehmung” für dich schon Projekte ergeben haben? Darf ich fragen um welche Größenordnung von Lizenzgebühren wir da reden?

    Ich befürchte das mein Projekt zwar eine kleine Gruppe wirklich begeistert, aber diese zu klein ist um mit Lizenzgebühren viel zu verdienen.
    Ich bin ja eigentlich voll motiviert, teils auch durch Feedback von Leuten denen es gefällt. Aber dann gibt es eine kleine Stimme die meint, du solltest eigentlich Geld verdienen…

    Ich hatte auch schon überlegt eine Seite zu basteln, auf der man für die Entwicklung einzelner Features zahlen kann. Und wenn genug Geld da ist, programmiere ich das… keine Ahnung ob das gut ankommt.

    Bin schon auf deine Antwort gespannt ;)
    Roland

  • Avatarbild von Dirk Dirk
    am 9. Februar 2012, 18:58 Uhr

    @Roland
    Fragen darfst Du natürlich alles, als Antwort muss Dir aber mein vorheriger Kommentar genügen.

    In jedem Fall solltest Du für Dich die Frage beantworten, ob Dein Projekt soviel neues bietet, um sich neben den ca. 100 bereits existierenden CSS Frameworks zu behaupten. Wenn Du das bejahen kannst, dann veröffentliche es und lausche dem Feedback der Webcommunity. Das wird viele Deiner Fragen beantworten.

  • Avatarbild von Roland Roland
    am 9. Februar 2012, 19:04 Uhr

    Hallo Dirk!

    oh, da war ich wohl etwas ungenau… ich habe kein CSS Framework! Ich arbeite an einem Erweiterungsframework für CakePHP. Auf dem Gebiet biete ich derzeit das weitaus beste Framework, es hat jedoch nur eine sehr kleine Zielgruppe.

    lg
    Roland

  • Avatarbild von Dirk Dirk
    am 9. Februar 2012, 19:10 Uhr

    @Roland Ja dann, raus damit. Nur so bekommst Du das Feedback, was Du brauchst.

  • Avatarbild von Roland Roland
    am 9. Februar 2012, 20:55 Uhr

    @Dirk Naja, wenn ich nach einem Jahr dann auf einmal Geld verlange werden sich die Leute nicht freuen… das sollte ich wohl schon recht am Anfang entscheiden unter welcher Lizenz ich es veröffentliche.

  • Avatarbild von Marc Marc
    am 7. März 2012, 10:53 Uhr

    Hallo,

    ist auf jeden Fall eine sehr interessante Folge.
    YAML kannte ich überhaupt nicht, aber werde ich mir nun mal genauer anschauen.

    Vielen Dank für die Mühen, und weiter so. :)

    Gruß
    Marc

  • Avatarbild von ben.hoffmann ben.hoffmann
    am 26. März 2012, 19:44 Uhr

    Hey, mich würde brennend interessieren welchen HTML-Editor David und Dirk aktuell nutzen :-)

  • Avatarbild von Dirk Dirk
    am 3. April 2012, 00:11 Uhr

    Hallo Ben,

    unter Windows arbeite ich mit Dreamweaver und Sublime Text 2 für HTML/CSS. Auf dem Mac liegt Sublime Text 2 deutlich vorn, ab und zu kommt aber auch Coda zum Einsatz. Was die größeren Sachen mit JavaScript angeht, da ist Netbeans auf beiden Plattformen zu empfehlen.

  • Avatarbild von Christopher Primest Christopher Primest
    am 8. Dezember 2012, 10:52 Uhr

    Danke für den ausführlichen Podcast! Hatte schon nach verschiedenen Videos auf YouTube gesucht, bin aber zur aktuellen Version nicht fündig geworden. Ist super geworden. Jetzt kann ich loslegen :)

    Gruß

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.