Technikwürze

YAML total

Technikwürze 184

Meta: S3 · E57 · Typ full · Veröffentlicht · Aktualisiert

Moderation: David Maciejewski, Dirk Jesse, Jens Grochtdreis

Zusammenfassung

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.

Inhalt

[caption id="attachment_1352" align="alignnone" width="620" caption="YAML 4"]YAML 4Matthias 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, blüprint 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

Kommentare (81)

  • GE GE

    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.

  • Nelson Nelson

    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.

  • Andrej Prilipp Andrej Prilipp

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

  • Thomas Weise Thomas Weise

    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?

    • Dirk Dirk

      @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.

    • Thomas Weise Thomas Weise

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

  • Sebastian Sebastian

    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.

  • Indianer3c Indianer3c

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

  • Indianer3c Indianer3c

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

    • macx macx

      @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.

  • Peter Müller Peter Müller

    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.

  • rockpianist rockpianist

    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

  • Marcelo Marcelo

    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.

  • Matthias Mees Matthias Mees

    Aber klar: "Profiling CSS for fun and profit. Optimization notes.":http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/ von Juriy Zaytsev a.k.a. kangax.

  • Marcelo Marcelo

    Das nenne ich mal einen interessanten Artikel, vielen Dank!

  • Roland Roland

    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

    • Dirk Dirk

      @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.

    • Roland Roland

      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

    • Dirk Dirk

      @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.

    • Roland Roland

      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

    • Dirk Dirk

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

    • Roland Roland

      @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.

  • Mario Mario

    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.

  • Marc Marc

    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

  • ben.hoffmann ben.hoffmann

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

    • Dirk Dirk

      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.

  • Christopher Primest Christopher Primest

    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ß

By submitting your data, you agree that all entered data may be saved and displayed as a comment.