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
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, 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)
-
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. -
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
Super Beitrag.
Besten Dank für die umfassenden und detaillierten Infos. -
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? -
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.
-
Sehr viele Fachbegriffe ein Glossar wäre schön :)
-
Und kann nicht wieder bei Minute 90 starten, wenn ich einen Kommentar abgesetzt habe... Benutze gerade den Google Chrome Browser unter Windwos 7
-
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
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
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 -
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
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.
-
Das nenne ich mal einen interessanten Artikel, vielen Dank!
-
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
@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. -
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
@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.
-
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
@Roland Ja dann, raus damit. Nur so bekommst Du das Feedback, was Du brauchst.
-
@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.
-
-
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
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 -
Hey, mich würde brennend interessieren welchen HTML-Editor David und Dirk aktuell nutzen :-)
-
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
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ß
@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.
@Dirk
Danke für den Tipp, genau das meinte ich, klappt wunderbar.