Sonntag10. März 2013

Seit kurzem kann man sich den aktuellen Entwicklungsstand von Bootstrap 3.0, dem kommenden Major-Release dieses umfangreichen Applikations-Frameworks ansehen. Die größten Neuerungen sind der Mobile-First Ansatz und das überarbeitete Design, welches sich nun stärker von seinen Wurzeln bei Twitter abnabelt.

Die neue Optik betrifft dabei in erster Linie die Formular- und Navigationselemente. Ich persönlich finde sie deutlich weniger elegant, wodurch Bootstrap insbesondere für das Prototyping etwas von seinem Reiz verliert. Denn selbst wenn man sich die Twitter-nahe Optik so langsam satt gesehen hat, so sind die UI Komponenten doch nahezu perfekt aufeinander abgestimmt gewesen und damit erstellte Layout-Prototypen vermittelten einen hochwertigen – jederzeit vorzeigbaren – Eindruck. Diese Qualität von Bootstrap scheint im aktuellen Entwicklungsstadium etwas verloren zu gehen, denn die Entwickler ziehen den neuen Stil nicht konsequent durch. Insbesondere die Formularelemente sehen nun kontrastärmer und irgendwie ... unfertig aus.

Nun ist es so, dass auch ich bei YAML 4 das mitgelieferte Design in neutralem grau halte, weil dies für den Bau von Prototypen eine sinnvolle Ausgangsbasis ist, will man doch den Anwender nicht in Richtung eines bestimmten Farbschema drängen. Steht dann erstmal der eigentliche Layoutentwurf, werden die einzelnen Komponenten im Detail gestaltet. Bootstrap (ehemals Twitter Bootstrap) will sich in Version 3 offenbar weiter von seinen Wurzeln lösen und seine Anwender mit der “unfertigeren” Optik stärkerer zur Individualisierung ... nennen wir’s mal animieren, denn überall wird auch die nun “platte” oder neu-deutsch “flat” Optik auch nicht passen.

Das ist im Sinne der Eigenständigkeit des Frameworks und weniger uniformen “made with Bootstrap” Projekten zu begrüßen. Wenn ich mich recht entsinne arbeiten die beiden Entwickler auch gar nicht mehr bei Twitter. Dennoch war natürlich die ausgereifte Optik der UI Elemente bisher eines der ganz großen Pluspunkte. Die mit Bootstrap erstellten Oberflächen konnte man bisher meist ohne weiteres produktiv einsetzen. Ob das auch mit Version 3 so sein wird, bleibt abzuwarten – noch ist die Version 3 ja nicht fertig (wie man an einigen Komponenten leicht erkennen kann). Ich habe aber so meine Zweifel, ob der neue ... Draft-Look ... gleichermaßen gut angenommen wird. Von einem echten Flat-UI Design mag ich in diesem Zusammenhang eher nicht sprechen, denn dazu sind mir die Umstellungen im Design nicht konsequent genug. Bisher wurden in erster Linie die sanften Gradienten im Hintergrund entfernt und die Standardfarbe der Buttons ist nicht mehr weiß sondern grau. Ein neuer eigenständiger Stil ist das aber noch nicht.

Doch genau das bringt mich zu einem Problem, welches mich seit jeher an Bootstrap stört und welches wohl auch in Version 3 Bestand haben wird. Die Entwickler verzichten auch weiterhin auf eine Trennung von Funktionalität und Design im CSS. Bei YAML gibt es diese Trennung – aus gutem Grund. Die Funktionalität der Layoutbausteine steckt bei YAML in den Core-Dateien des Frameworks, während das Design (Theme) separat verwaltet wird. Dieser Ansatz hat seine Vorteile: Zum einen sind Anpassungen des Layouts bereits durch einfaches Austauschen einzelner CSS-Dateien erledigt (oder Sass-Dateien, so man mit dem Sass-Port von YAML arbeitet). Zum anderen sind Anwender frei in ihrem Workflow – speziell im Hinblick auf den Einsatz von CSS-Preprozessoren. Es ist also möglich, die Core-Dateien von YAML unverändert zu übernehmen, das eigentliche Design aber z.B. mit LESS oder Sass zu erstellen.

Bei Bootstrap gibt es diese Trennung bisher nicht. Zwar ermöglicht das hauseigene Konfigurationstool die Auswahl der Komponenten, ein Austausch des Layouts bedeutet aber immer auch den Austausch der Frameworklogik, weil eben alles miteinander verwoben ist. Das ist besonders dann ärgerlich, wenn man im Rahmen der eigenen Anpassungen vielleicht auch die eine oder andere Erweiterung hat einfließen lassen. Wer die Optik individualisieren will, ist so zwingend auf LESS angewiesen, unabhängig von den ggf. bestehenden Abhängigkeiten des eigenen Projektes.

Trotzdem ist es natürlich spannend zuzusehen, wohin die Entwicklung bei Bootstrap, Foundation & Co. geht. Schließlich macht man sich ja auch so seine Gedanken fürs eigene Framework.


Samstag09. März 2013

Thinkin’ Tags ist zweifellos komplex. Um sie jedoch sinnvoll einsetzen zu können, muss man die Funktionsweise zunächst einmal verstehen. Bisher ging das nur mit Fleiß und ausreichend Forschergeist. Während der letzten Wochen habe ich nun jedoch zahlreiche Screencasts für Thinkin’ Tags aufgenommen, welche Funktionsweise aller Kernbestandteile der Applikation ausführlich erklären. Ab sofort stehen sie auf dem neuen Youtube-Kanal von Thinkin’ Tags zur Verfügung.

Die Screencasts stehen sowohl in Deutsch als auch in Englisch zur Verfügung, wobei die deutschsprachige Playlist der Videodocs bereits 8 Screencasts umfasst, während die englische Playlist momentan erst 5 Videos enthält. Ich bin im Moment noch mit den Übersetzungsarbeiten beschäftigt und werde die die weiteren Screencasts dann Stück für Stück hochladen und freischalten.

Ach ja: Wer genau hinschaut, wird zu Beginn des ersten Screencasts ein leicht überarbeitete Startseite von Thinkin’ Tags erkennen, sowie ein “Request Invite” Formular. Das kommt nicht ganz von ungefähr, denn in Kürze möchte ich die Zahl der aktiven Nutzeraccounts deutlich erhöhen.


Mittwoch23. Januar 2013

Es ist soweit, das erste Feature-Update für Thinkin’ Tags ist fertig und seit heute Nacht auf dem Server. Die auffallendste Änderung dürfte sicherlich das überarbeitete Dashboard sein. Es ist übersichtlicher gestaltet und die zwei Funktionen für das Anlegen neuer Projekte wurden zusammengelegt. Mit diesem Feature-Update ist nun auch die von Beginn an geplante Unterstützung das schon etwas betagte, aber dennoch vielfach genutzte CSS-Framework 960.gs mit an Bord. Anwender können nun also zwischen YAML, 960.gs und Blueprint CSS wählen.

Zusammen mit 960.gs wurde auch die Unterstützung für Blueprint CSS deutlich verbessert, die zuvor nur “experimentellen Charakter” hatte. Vergleichbar zu YAML kennt Thinkin’ Tags nun die Grid-Bausteine beider CSS-Frameworks und bietet nun eine Reihe von Hilfsfunktionen zur Erstellung von Grid-Layouts an. So können die CSS-Klassen zur Weiterung einer Grid-Spalte “append_n” und “prepend_n” (bzw. “suffix-n” und “präfix-n” bei 960.gs). sowie die Klassen “pull-n” und “push-n” als Element-Eigenschaften eingestellt werden Zudem stehen für beide Frameworks eine Reihe von vorkonfigurierten Gridsets als Drag & Drop Elemente bereit. Beides führt zu spürbar zu schnelleren Ergebnissen. Und schließlich habe ich ein neues Template mit dem Namen “Company Profile” hinzugefügt, welches für beide Frameworks zur Verfügung steht. Das Template beinhaltet eine Startseite und eine Inhaltsseite als einfacher Zweispalter. Ach ja, eine kleiner Hinweis: Auch wenn die beiden Frameworks schon ein paar Jahre auf dem Buckel haben und nicht mit dem Buzzword “responsive” glänzen können. Sie gegebenenfalls dahingehend zu erweitern, ist eine Frage weniger Zeilen CSS.

Die zweite große Neuerung betrifft den CSS3 Support von Thinkin’ Tags. Im CSS-Inspektor gab es ja bereits eine Auto-Vervollständigung für CSS-Eigenschaften, allerdings nur auf Basis von CSS 2. Ab sofort werden die CSS-Eigenschaften zahlreicher CSS3 Module unterstützt. Und als Sahnehäubchen erstellt Thinkin’ Tags selbstständig und nach Bedarf die notwendigen geprefixten Varianten (-webkit-, -moz-, -ms-, -o- ). Als Anwender ist es somit ausreichend, die Eigenschaften ohne Vendor-Prefix einzugeben. Alles weitere erledigt Thinkin’ Tags. Natürlich ist es gleichermaßen möglich, einzelne mit einem Prefix versehene Eigenschaften zu definieren (z.B. -webkit-appearance: textfield; zur stressfreien Gestaltung von Suchfeldern).

Folgende CSS3 Module werden aktuell unterstützt:

  • CSS Basic Box model
  • CSS Color Module Level 3
  • CSS Backgrounds and Borders Module Level 3
  • CSS Marquee Module Level 3
  • CSS Multi-column Layout Module
  • CSS Basic User Interface Module Level 3 (CSS3 UI)
  • CSS Transforms
  • CSS Transitions
  • CSS Flexible Box Layout Module
  • CSS Fonts Module Level 3
  • CSS Text Module Level 3
  • CSS Animations

Bitte bedenkt aber, dass nur weil Thinkin’ Tags mit den CSS-Eigenschaften dieser Module umzugehen weiß, die Unterstützung seitens der Browser nicht automatisch gegeben ist. Aber es macht aus Thinkin’ Tags auch eine wunderbare kleine Spielwiese zum Testen, z.B. der verschiedenen neuen Layouttechniken von CSS3 (Flexbox und Grids Module).

Und wenn ich schon über mordernes CSS schreibe, dann muss ich natürlich auch das neue Box-Modell ansprechen (box-sizing: border-box;), welches im Internet Explorer seit Version 8, sowie in allen modernen Browsern seit längerer Zeit verfügbar ist. Thinkin’ Tags unterstützt dieses Box-Modell ab sofort, sodass auch in den komplexen Layoutmodi “structural” und “linearized” eine fehlerfreie Darstellung gewährleistet ist.

Abschließen möchte ich die Vorstellung der neuen Features mit einer Ergänzung zum Dashboard. Darin besteht nun endlich die Möglichkeit, die Namen und Beschreibungstexte gespeicherter Projekte zu editieren. Nachfolgend gibt’s eine vollständige Liste aller Neuerungen und Bugfixes. Den englischsprachigen Releasebeitrag gibt’s wie immer auf Google+.

Neue Funktionen
  • Auto-Vervollständigung für zahlreiche CSS3 Eigenschaften im CSS-Inspector
  • Automatische Erstellung der Schreibvarianten mit Vendor-Prefixes für CSS3 Eigenschaften im CSS-Inspector
  • Unterstützung für das alternative CSS3 Box-Modell “box-sizing: border-box” hinzugefügt.
  • Projektnamen und Beschreibungen bestehender Projekte können nun im Dashboard editiert werden
  • Unterstützung für das CSS Framework 960.gs hinzugefügt
  • CSS-Klassen prepend-n/append-n/push-n/pull-n für Blueprint CSS über Benutzeroberfläche steuerbar
  • CSS-Klassen prefix-n/suffix-n/push-n/pull-n für 960.gs über Benutzeroberfläche steuerbar
  • Projektvorlage “Company Profile” für 960.gs hinzugefügt
  • Projektvorlage “Company Profile” für Blueprint hinzugefügt
  • Im “Element Browser” stehen nun zahlreiche HTML5-Elemente (header, footer, ect.) per Drag & Drop zur Verfügung
Änderungen/Verbessungen bestehender Funktionen
  • Das “Dashboard” und der “Element Browser” haben eine neue, bessere Benutzeroberfläche erhalten
  • Über den “Element Browser” stehen nun verschiedene vorkonfigurierte Gridsets für Blueprint CSS and 960.gs als Drag & Drop Bausteine bereit
  • Die Trefferliste für die Auto-Vervollständigung für CSS-Eigenschaften im CSS-Inspector start nun in allen Browsern mit dem ersten Buchstaben.
  • YAML4 Grids sind nun im “structual"und “linearized” Darstellungsmodus per Drag & Drop “sortierbar”
  • Wechsel des Dienstes für Dummygrafiken von Flickholdr.com (momentan offline) zu Lorempixel.com
  • Projektvorlage “My Simple Website” (YAML) leicht überarbeitet.
  • Die allgemeinen Projektinformationen (Name, Beschreibung, Framework) befinden sich nun im File-Menü im rechten Panel.
  • Alle YAML-basierten Projektvorlagen wurden auf YAML 4.0.2 aktualsiert.
Bug Fixes
  • Element Attributes: Bei der Eingabe vonKlassennamen werden nun Punkte automatisch entfernt.
  • Element Attributes: In der Brotkrümelnavigation wurden vor Klassennamen z.T. mehrere Punkte dargestellt.
  • Workbench: Mehrere Rendering-Fehler in den Darstellungsmodi “structual” und “linearized” wurden behoben.
  • Workbench: Die Identifikation von Layoutbausteinen (Gridbausteine, HTML5 Elemente, usw.) erfolgt nun automatisch auch nach Markupänderungen
  • Workbench: Deaktierte Stylesheets wurden beim Wechsel des Darstellungsmodus versehentlich wieder aktiviert. Das wurde korrigiert.
  • Workbench: Das Sortieren von Elementen per Drag & Drop im “structural” und “linearized” Modus sollte nun wieder problemlos funktionieren.
  • Projekt Manager: Mehrere kleine Bugs in der Projektverwaltung/-speicherung korrigiert
  • UI: Das Kontext-Menü der Elmente im “structural” Darstellungsmodus wurde unter bestimmten Umständen nicht korrekt angezeigt
  • Allgmein: zahlreiche kleine und größere interne Korrekturen

 


Freitag14. Dezember 2012

Je länger es dauert, um so besser wirds. Sagt man wohl und im Falle der Videomitschnitte vom Wordcamp 2012 an der Beuth-Hochschule in Berlin, ist dem dann auch so. Die Jungs und Mädels waren nämlich so freundlich, meinen Vortrag “Browser-based Rapid Prototyping - or - I love writing code but I hate counting brackets” in voller Länge mitzuschneiden und das ist ihnen wirklich prima gelungen, denn sowohl mich als auch der Leinwandinhalt wurden abgefilmt.

Und so freue ich mich, dass ich Euch nun auf diesem Wege auch eine deutschsprachige Einführung in die zum Sinn und Zweck von Thinkin’ Tags und seiner Funktionsweise zur Verfügung stellen kann. Im ersten Drittel des Vortrags gehe ich auf die Motivation ein, das Thema WYSIWYG wieder aus der Versenkung zu holen und dabei über einige Gründe für das bisherige Scheitern dieses Ansatzes aufzuzeigen. Im Anschluss folgen ca. 25 Minuten, in denen ich Thinkin’ Tags in einer Live-Demo präsentiere. Dabei stelle ich anhand verschiedener Beispiellayouts die wichtigesten Funktionen der Applikation vor. Viel Spaß beim Anschauen uns ausprobieren.

Natürlich wurden noch weitere Vorträge gefilmt. Die vollständige Liste der verfügbaren Videos findet ihr hier.


Freitag26. Oktober 2012

Präprozessoren sind seit einigen Jahren bei vielen Frontend-Entwicklern ein beliebtes Hilfsmittel, um den Arbeitsalltag zu erleichtern. Das beginnt bei einer kompakteren Schreibweise, der Möglichkeit Variablen zu verwenden, wiederkehrende CSS-Bausteine als wiederverwendbare Module zu konfigurieren, bis hin zum automatischen Zusammenfügen und Minifizieren mehrerer CSS-Dateien für den Live-Betrieb.

Heute morgen nun habe ich meine erste Portierung meines CSS Frameworks YAML in den Präprozessor Sass als öffentliche Betafassung auf Github online gestellt. Ich habe mich bemüht, den aktuellen Stand von YAML (Version 4.0.2) vollständig abzubilden. In der jetzigen Betaphase bitte ich daher Sass-affine YAML Nutzer, sich das Projekt genau anzuschauen und nach Bugs zu durchstöbern, um es so schnell wie möglich in einen stabilen Zustand zu überführen.

Langjährige YAML Nutzer brauchen übrigens keine Angst zu haben, sich jetzt auch noch zwingend mit einem CSS-Präprozessor anfreunden zu müssen. Denn das Sass-Projekt läuft parallel zu der “statischen” Variante von YAML. Wem Sass nicht schmeckt, der darf es auch in Zukunft einfach links liegen lassen.

Vorteile der Portierung?

Sass ermöglicht eine individuelle Konfiguration des Frameworks und eine einfachere Integration des Frameworks in den Sass-Workflow. Beispielhaft seien folgende Vorteile genannt:

  • Individuelle Konfiguration der base.css: Alle Core-Module können optional abgeschaltet werden.
  • Zusammenfassen und Minifizieren der verschiedenen CSS-Bausteine eines komplexen Layouts benötigt keinen separaten Arbeitsschritt mehr
  • Vertical Rhythm: Die Schriftgrößen von Überschriften und Fließtext können vollständig über Variablen konfiguriert werden. Sämtliche abhängigen Werte (Zeilenhöhe und Abstände) werden automatisch berechnet.
  • Custom Grid Generator: Über ein Sass Mixin steht ein Generator für Custom-Grids bereit.

Abschließend eine Antwort auf die Frage, warum ich mich für Sass entschieden habe: Ich halte Sass aktuell für den am weitesten entwickelten Präprozessor mit einer äußerst aktiven Community. Die seit einigen Versionen verfügbare scss-Syntax ist üblichem CSS sehr ähnlich und macht den (Wieder-)Einstieg in ein Sass-Projekt ausgesprochen unkompliziert. Und nicht zuletzt ist Compass als Ergänzung/Aufsatz auf Sass ein Alleinstellungsmerkmal gegenüber den anderen Präprozessoren (z.B. Less oder Stylus), welches ich in im Alltag mit Sass nicht mehr missen möchte.

Also dann: Viel Spaß mit dem neuen Projekt.


Seite 2 von 44 Seiten

 <  1 2 3 4 >  Letzte »