Kategorien
JavaScript & jQuery Programmierung

Einmal hin, alles drin: Munee verwaltet und optimiert Website-Assets auf Basis von PHP

Cody Lundquist, Australier mit schwedisch klingendem Namen, stellt mit Munee ein kostenlos verwendbares Asset-Management auf der Basis von PHP 5.3 vor. Der Funktionsumfang des Tools ist durchaus beachtlich, verlangt aber eine entsprechende Anpassung der eigenen Web-Projekte. Mit Munee kann nahezu jedwede Form von denkbarem Asset, seien es Bilder und andere Dateien, JavaScript, CSS, LESS, SCSS oder CoffeeScript verwaltet werden.

munee

Munee: Caching als Herzstück

Munee ist in der Lage, viele SEO-relevante Fragestellungen zufriedenstellend zu bearbeiten. So kombiniert es auf Wunsch etwa sämtliche JS- und CSS-Dateien in jeweils eine einzelne Datei und stellt diese minified und gzipped zur Verfügung. Ebenso ist es möglich, LESS und SCSS ohne vorherige Kompilierung bereitzustellen und die Erstellung des CSS Munee zu überlassen. Gleiches erlaubt Munee mit Blick auf CoffeeScript. Dieses kann zur Laufzeit nach JavaScript übersetzt werden.

Alle Dateien werden auf Client- und auf Server-Seite gecacht. Im Falle des Aufrufes checkt Munee die Aktualität der Caches und liefert nur im Veränderungsfalle neue Versionen aus.

Mit Blick auf Bilddateien liefert Munee noch mehr Möglichkeiten. Bilder können zur Laufzeit nach verschiedenen Kriterien in der Größe verändert werden. Die so veränderten Bilddateien werden wiederum im Cache gehalten. Neben der Größenveränderung ist zusätzlich die Verwendung gängiger Fotofilter vorgesehen. Möchte man seine Designs zunächst nicht mit echten Bildern, sondern lediglich mit Platzhaltern versehen, so kann man ebenfalls zu Munee greifen, welches verschiedene Platzhalter-Services zu integrieren imstande ist.

Munee: So funktioniert’s

Einmal installiert und per Rewrite-Rule verfügbar gemacht, steht Munee serverweit zur Verfügung. Die Funktionalität wird über entsprechende Parameter angesprochen. So würde man etwa folgendes schreiben, wollte man ein SCSS zu CSS machen und minifiziert ausliefern:

Parameter lassen sich kombinieren, wie dieses Beispiel eines größenreduzierten und mit einem Fotofilter bearbeiteten Bildes zeigt:


Die Kombination mehrerer CSS oder auch LESS/SCSS oder gemixt in ein auszulieferndes CSS-File erledigt man, indem man alle Dateien in eine einzige Script-Source-Angabe schreibt und dabei mit Komma trennt:

Entsprechendes gilt für den Einsatz von mehreren JavaScript-Dateien.

Munee sollte am sinnvollsten via Rewerite in der .htaccess getriggert werden. Alternativ ist es ebenso möglich, bei jedem Aufruf den Pfad zu Munee beizugeben. Das sähe dann beispielsweise so aus:

Munee steht unter MIT-Lizenz auf Github zur freien Verwendung in privaten, wie kommerziellen Projekten bereit.

Munee: die Zielgruppe

Schön und gut. Das Featureset von Lundquists PHP-Tool ist nicht schlecht. Aber es ist natürlich nicht alternativlos.

Fangen wir beim CSS an und nehmen JavaScript auf dem Weg gleich mit. Sicherlich, Munee nimmt CSS, LESS und SCSS, kompiliert wo erforderlich, schreibt in eine Datei und liefert minifiziert aus. Das klingt nicht schlecht. Wie oft jedoch ändern wir was an unseren CSS-Dateien und was hindert uns daran, LESS und SCSS vorab zu kompilieren. Wieso sollten wir die Ergebnisse dann nicht in einer Datei zusammenführen und auch noch einen Minifier drüber jagen?

Ebenso verhält es sich mit JavaScript und CoffeeScript. Warum soll mein CoffeeScript erst zur Laufzeit nach JavaScript kompiliert werden, wenn ich das genauso gut vorab manuell erledigen kann?

Das sind im Normalfall einer kleinen Website Tätigkeiten, die man ein einziges Mal zu leisten hat und die dann Bestand haben. Gut, Munee verspricht, im Zweifel serverseitig zu cachen und den Cache auszuliefern. Man kann also vermuten, wenn alles funktioniert, dass auch Munee weitgehend einmalig kompilieren wird.In überschaubaren Projekten würde ich jedoch vom Gefühl her stets die manuelle Methode vorziehen.

Zum Thema Resizing von Bildern im responsiven Webdesign gibt es ebenfalls Alternativen, noch dazu standardkonforme. Munee kann da schon deshalb nicht mithalten, weil es gar nicht vollresponsiv arbeiten kann. Hier sehe ich außer dem Caching im Grunde keine Vorteile auf Seiten des PHP-Tools.

Was bleibt? Es bleiben größere Websites, die von verschiedenen Personen bearbeitet werden, aber dennoch weitgehend optimiert erscheinen sollen. Ich betreue selbst ein entsprechend passendes Projekt. Dort werden fünf verschiedene Bereiche unter einer gemeinsamen Oberfläche von Designern und Developern verantwortet, die sich teils nicht einmal kennen.

Wenn hier eine Zusammenführung der unterschiedlichen Bemühungen via Munee erfolgte, wäre allen damit geholfen, denn hier wäre sonst der zentrale Projektverantwortliche immer wieder gefragt, die beschriebenen Tätigkeiten manuell zu erledigen, vor allem deren Erfordernis zu überwachen. Munee kann hier dafür sorgen, dass etwaige Veränderungen zur Laufzeit berücksichtigt werden, ohne dass man sich untereinander verständigen würde müssen.

Wie sehen Sie das? Können Sie sich Munee im Einsatz in einem Ihrer Projekte vorstellen?

Links zum Beitrag

Kategorien
Design HTML/CSS UI/UX

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

JavaScript- und Ruby-Entwickler Alex Wolfe aus San Francisco legt mit Buttons eine CSS-Bibliothek vor, die sich um nichts anderes als um die einfache, aber variantenreiche Gestaltung von Schaltflächen auf Websites kümmert. Buttons entsteht unter Verwendung von Sass und Compass, wobei man von diesen beiden Begriffen nur dann etwas gehört haben muss, wenn man die Buttons-Bibliothek an seine persönlichen Bedürfnisse anpassen will. Will man das nicht, reichen CSS-Grundkenntnisse…

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons: Einfach mit CSS, etwas aufgemotzt mit Font Awesome und getunt mit jQuery

Neun verschiedene Button-Styles erstellte Wolfe, darunter auch einen Satz im beliebter werdenden Flat Design. Die Verwendung aller verfügbaren Varianten ist sehr einfach. Hierzu bedarf es lediglich des Befolgens der vorgegebenen Syntax. Button-Styles werden als Klassen übergeben. Wolfe hat sich dabei dafür entschieden, normal sprachliche Bezeichnungen zu verwenden. Darüber lässt sich streiten. Grundsätzlich zeigen sich alle virteullen Knöpfe in diesem Farbschema:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wieso die farbigen Buttons nun auf die Bezeichner primary, action, highlight, caution und royal hören, ist letztlich nicht vollständig nachvollziehbar. Insbesondere die Kombination des Bezeichners royal mit der Farbe Violett gibt mir doch Rätsel auf. Aber gut, betrachten wir es als eine Art Vokabeln. Die muss man nicht verstehen, die muss man nur wissen.

Neben den Knöpfen im Flat Design gibt es noch welche mit Glow-Effekt (einem farbigen Schein außen rum), gewölbte, runde und etliche mehr. Will man Icons innerhalb der Elemente einsetzen, ist es erforderlich, Font Awesome mit einzubinden. Die erforderlichen Dateien werden mitgeliefert.

Um Schaltflächen mit Drop-Down-Optionsmenüs zu verwenden, auch das bietet das Framework, ist es erforderlich, die mitgelieferte JavaScript-Datei einzubinden. jQuery wird nicht mitgeliefert, aber ebenfalls vorausgesetzt. Natürlich lassen sich alle Varianten kombinieren.

Zusätzlich enthält das Framework noch einige Wrapper, mit denen man beispielsweise die skeuomorphe Optik einer Türklingel nachbilden kann.

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wollen Sie sich mit den von Wolfe gelieferten Standards nicht zufrieden geben, benötigen Sie Sass und Compass nebst der entsprechenden Kenntnisse, um im Sourcecode rumzuschrauben. Wolfe erweitert sein Projekt allerdings ebenfalls kontinuierlich. Vielleicht tut es schon etwas Geduld.

So sehen die bisher verfügbaren Schaltflächen im Überblick aus:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons steht auf Github zum kostenlosen Download und unter Apache Lizenz 2.0 zur kostenfreien Verwendung auch in kommerziellen Projekten zur Verfügung.

Links zum Beitrag

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Die 29 besten HTML/PSD-Themes & UI-Elemente des Sommers 2013

Auch wenn Sie nicht mit WordPress arbeiten, brauchen Sie designtechnisch nicht unter einem Stein zu leben oder sich an anderen Orten zu verstecken. Wir haben folgend eine Liste zusammengestellt, die Themes, Vorlagen und Elemente enthält, mit denen Sie sich zum einen die Arbeit erleichtern und zum anderen einen Schub Inspiration holen können. Unsere Sammslung enthält Themes auf Basis von HTML/CSS, aber auch mit Photoshop umgesetzte Entwürfe und – nicht zuletzt – etliche fertige UI-Elemente und ganze Sets für Web- und mobiles Development. Schauen Sie rein. Da ist sicherlich für jeden was dabei…

A. HTML/CSS-Themes und Templates

 

Strongly Typed: Responsive HTML5 Site Template.

Erstellt von: HTML5 UP
Features: Basiert auf SKELJS, einem leichtgewichtigen Framework zur Erstellung responsiver Themes

strongly typed a responsive html5 site template

Infinite: This is a Small HTML/CSS Template for a Design Blog.

Erstellt von: Nathan Brown
Features: Theme im responsiven Grid-Layout mit schicken Effekten

Infinite – A Design Blog Template HTML/CSS

Megacorp: Black and White Flat Business Theme.

Erstellt von: HTML5Templates.com
Features: Minimalistisches Theme mit verschiedenen Layouts, sowie Versionen für Desktop, Tablet und andere mobile Geräte

Megacorp HTML Theme.

Photoartwork: This Template is Written Entirely in HTML5 and CSS3.

Erstellt von: css3templates.co.uk
Features: Simples, farb-orientiertes Template mit fester Breite

PHOTOARTWORK HTML Theme.

zParalexy: Responsive Theme with Portfolio Page Made in HTML5 and CSS3.

Erstellt von: Zerotheme.com
Features: Flat Design, responsiv, Seiten-Vorlagen

zParalexy – Free Responsive Html5 Theme

Heavyindustry: Industry Inspiration Red Theme.

Erstellt von: HTML5emplates.com
Features: Minimalistisches Theme mit verschiedenen Layouts, sowie Versionen für Desktop, Tablet und andere mobile Geräte

heavyindustry HTML5 template

Zboommusic: Music Artist Inspiration Responsive  Black Theme.

Erstellt von: Zerotheme.com
Features: Responsiv, dunkel, flat, mit verschiedenen Seitenentwürfen

zBoomMusic – Free Responsive Html5 Theme

CSS3_gallery_garden: Simple Two Column Fixed Width Template.

Erstellt von: css3templates.co.uk
Features: Minimalistisches Theme mit fester Breite und eingebautem Accordeon-Slider

CSS3_gallery_garden template

Parallelism: Responsive Portfolio Site Template.

Erstellt von: HTML5up
Features: Portfolio Template mit horizontalem Scroller und Lightbox

parallelism  a responsive portfolio site template

B. PSD Website-Templates

Designer haben häufig ein gutes Auge für die Bedürfnisse des Kunden. So ist es nicht ungewöhnlich, dass sich Entwickler gern an Designentwürfen orientieren. Diese findet man nicht selten in der Form von Photoshop-Dateien. Und genau das finden Sie hier:

.Rufio: Multipurpose Responsive Template.

Erstellt von: Rufio
Features: Theme im Flat Design, das sowohl als HTML, wie auch als PSD vorliegt

Rufio Free Homepage PSD

Classic: Clean & Minimal Blog Design Template.

Erstellt von: Designer First
Features: Minimalistisches PSD-Design mit mehreren Seiten

Clean & Minimal Blog Design

Revenant: Blue and White Color Combination with Clean Grid to Display Your Products.

Erstellt von: premiumcoding.com
Features: PSD-Template für Unternehmens-Websites; Flat Design

Template home page

E-commerce: Template for Online Bookstore.

Erstellt von: cssauthor.com
Features: PSD-Template mit mehreren Seiten, passend hauptsächlich im Ecommerce-Umfeld

E-commerce Template PSD

Portfolio: Template for the 3 Column Portfolio Page.

Erstellt von: premiumcoding.com
Features: Portfolio-Template im Flat Design mit dezenter Farbgebung

Portfolio page in 3 columns

Illustrate: Flat, Black and White Theme for Designers.

Erstellt von: blazrobar.com
Features: Grid-basiertes Flat Design mit stark zurückgenommenem Farbschema

Free Flat Design PSD Template

Webfolio: Minimal Portfolio Template with Mobile Version.

Erstellt von: CSS author
Features: Portfolio-Layout im Flat Design

Minimal Portfolio Template

C. UI-Elemente und komplette Sets

UI-Elemente kann man immer gebrauchen. Vor allem im Bereich der mobilen Entwicklung sind die Sets zu den einzelnen Plattformen von großem Wert. Aber auch ansonsten schadet ein Blick über den eigenen Horizont nie, und wenn es nur zu Inspirationszwecken dient.

Crystal: Free Mobile Application UI Design in PSD.

Erstellt von: CSS author
Features: Basis-Set mit den notwendigsten Elementen einer mobilen App

Mobile Application UI

Nexus 4 GUI: Android UI Design Kit PSD to Version 4.2.2.

Erstellt von: Chirag Dave
Features: 768*1280 UI-Set, unter anderem für Nexus 4 geeignet 

Nexus 4 GUI psd

Window 8 Metro: 100+ Awesome Window 8 Metro Style Icon and  App GUI Kit.

Erstellt von: Redesign Case
Features: Metro UI als PSD in 300 dpi

Window8 Metro GUI

Metro Vibes: Modern Metro UI Kit That Will Help You Shape Your Website.

Erstellt von: pixelkit.com
Features: UI im Stile der Windows 8 Modern UI

Metro Vibes UI Kit

iOS 7 GUI: Photoshop Template of GUI Elements Found in the Beta 1 Release of iOS 7.

Erstellt von: teehanlax.com
Features: Schon legendäre UI-Sammlung von TeehanLax, jetzt auch für iOS 7

iOS 7 GUI PSD

Flat GUI: Amazing Set with More Than 500 Elements Totally Editable Files

Erstellt von: DesignShock.com
Features: Mehr als 500 Elemente und 100 Icons im Google-Style

Flat GUI PSD

iOS 7 UI Kit: Start Designing iOS 7 Apps Today with This Comprehensive GUI Kit

Erstellt von: MediaLoot
Features: Minimalistisches, sauber wirkendes Interface mit einem Grund-Set voll bearbeitbarer Elemente

Free iOS 7 UI Kit

Metro UI Kit: Metro Style Elements Collection

Erstellt von: tempees.com
Features: Farbenfrohe GUI im vormals Metro genannten Look von Windows 8 

Metro UI kit

Vertical Infinity: Mega Flat Style UI Kit in PSD

Erstellt von: CSS author
Features: Retina-optimiertes, plakatives Flat Interface mit unterschiedlichen Varianten jeden Elementes

Vertical Infinity

Minimal GUI Set: Huge Plastic GUI Pack with More Than a Thousand Elements

Erstellt von: wpthemegenerator.com
Features: Minimalistische GUI mit mehr als tausend Elementen, voll bearbeitbar und kommerziell frei nutzbar

Minimal GUI Set

Transparent UI: Full PSD Free Transparent Layered UI Kit

Erstellt von: blugraphic.com
Features: Transparentes Interface im beliebten Glossy-Look

Transparent Ui Kit (Psd)

Flat UI Kit: Red  and Blue Flat and curvy UI Kit.

Erstellt von: Zachary VanDeHey
Features: Schwungvolles, minimalistisches Interface-Konzept mit starken Kontrasten

Flat Ui Kit

Ecommerce Flat: PSD Ecommerce UI Kit with Flat Design.

Erstellt von: graphicsfuel.com
Features: Alle notwendigen Elemente für eine Ecommerce-Anwendung im Flat Design

Ecommerce Flat UI Kit

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt, ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XTML-Themes.

(dpe)

Kategorien
Design HTML/CSS

Killer-Websites: Die 10 besten Erweiterungen für Twitters Bootstrap

Bootstrap ist der Star am Himmel der Frameworks und erhält ungebrochen viel Aufmerksamkeit. Nicht einmal der Hersteller, Twitter, wird zur Geburtsstunde im August 2011 geahnt haben, wie groß das Projekt noch werden würde. Selbst heute, im Juli 2013, ist Bootstrap immer noch das beliebteste Projekt auf Github und vereinigt über 52k Stars und über 16k Forks auf sich. Bootstrap ist in sich schon beeindruckend genug. Kaum war es je einfacher, komplexe Webseiten zu erstellen. Wie sollte man solch ein System noch verbessern? Gibt es Werkzeuge, die Bootstrap noch besser machen? Ja, die gibt es in der Tat und im folgenden Beitrag zeige ich Ihnen die nach meiner Meinung 10 besten ihrer Art.

1. Jetstrap

image002_0000-w550

DER Twitter Bootstrap Builder: Das ist nicht nur ein Mock-Up Tool, Jetstrap ist das Tool der Wahl zur Erstellung von Bootstrap-Interfaces.

Glauben Sie mir, das ist wirklich keine Übertreibung. Wenn Sie etwas Unterstützung bei der Erstellung von Bootstrap-Oberflächen benötigen, oder es sich einfach einfacher machen wollen, dann ist Jetstrap genau das Tool, das Sie verwenden werden.

Jetstrap erklärt selbst warum: “Das Leben ist zu kurz, um sich durch Dokumentationen zu wühlen, wenn man einfach nur Websites bauen will. Schnappen Sie sich Schnipsel sauberen Codes und bringen so simpel auch komplexe Komponenten an den Start. Kommen Sie einfach schneller in die Gänge!” Und genau so ist es auch. Da es so einfach zu verwenden ist, ist es perfekt sowohl für Designer, wie auch Entwickler geeignet. Das Konzept ähnelt dem des Mitbewerbers Divshot. Gelangen Sie per Drag and Drop zu genau dem Ergebnis, das Sie benötigen.

Wie es funktioniert: Das simple Drag-and-Drop-Interface erlaubt es, eine Seite schnell mit Bootstrap-Elementen zu bevölkern. Haben Sie die Seite zusammengeschoben, exportieren Sie den Code und … gehen in die Stadt oder an den See oder ins Kino…
Preismodell: Kommerziell, beginnt bei 16 USD monatlich.
Video: http://youtu.be/AuTo_6id3J8
Website: http://www.jetstrap.com

2. Kickstrap

image004_0000-w550

Ein kompletter Werkzeugkasten für Website-Design: Als erstes seiner Art ist Kickstrap ein installationsloses Frontend-Framework mit Apps, Themes und anderen Extras.

Auf den ersten Blick ähnelt Kickstrap dem eben genannten Jetstrap, ist dabei aber durchaus deutlich anders. Es zielt nämlich primär darauf ab, Bootstrap zu erweitern. So fügt es Bootstrap etwa JavaScript-Bibliotheken wie Raphael.js (Demo mit Kickstrap), Extras wie Font Awesome und sogar Themes aus Bootswatch hinzu.

Wie es funktioniert: Denken Sie sich Kickstrap wie eine Mehrfachsteckdose für eine typische Bootstrap-Seite. Men steckt verschiedene Komponen hinein und alle funktionieren gleichzeitig.
Preismodell: frei verwendbar (Stand: Juli 2013)
Video: http://vimeo.com/55423707#at=0
Website: http://getkickstrap.com/

3. Paintstrap

image006_0000-w550

Paintstrap generiert sehenswerte Twitter Bootstrap-Themes aus Adobe Kuler- / COLOURlovers-Paletten

Dieses Tool ist zu Unrecht zu unbekannt, hat aber großes Potenzial. Warum? Nun, Bootstrap kommt zwar mit Farben daher, nur wie oft passen diese wirklich zum gewünschten Farbsetting? Ich sage es Ihnen: Im Grunde nie. Typischerweise legt der Kunde etwas zielgebendes vor, und wenn es nur das Logo ist. Vielfach bestehen aber auch bereits zum CI gehörige Farbpaletten, an denen man nicht vorbei kommt.

Paintstrap arbeitet nun nicht nur mit diesen Vorgaben, sondern integriert COLOURlovers und Adobe Kuler in den Prozess, um die Paletten CI-gerecht zu erweitern. Das produziert im Regelfall großartige Ergebnisse.

Wie es funktioniert: Übergeben Sie die Kuler Theme-ID oder COLOURlovers Paletten-ID, dann wählen Sie die gewünschten Farben für die verschiedenen Elementen anhand einer Live-Preview. Haben Sie alles beisammen, exportieren Sie nach CSS oder LESS.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://paintstrap.com/

4. Divshot

image008-w550

Ein weiterer Interface-Builder für Web-Apps: Drag-And-Drop, exportiert responsives HTML & CSS, befindet sich noch in Beta.

Divshot ist ein direkter Wettbewerber zu Jetstrap. Die Ziele und Funktionalität sind sehr ähnlich. Auch in Divstrap zieht und schiebt man sich seine App zusammen und erhält am Ende den entsprechenden Code. Der wesentliche Unterschied besteht darin, dass Divstrap von sich selbst behauptet, den saubersten Code zu produzieren und die beste Bootswatch-Integration zu bieten. Der wesentlichste Unterschied indes ist der Preis. Divstrap kostet nämlich nichts.

Wie es funktioniert: Lesen Sie weiter oben unter Jetstrap nach ;-)
Preismodell: frei verwendbar (Stand: Juli 2013). Ich erwarte allerdings ein kommerzielles Angebot, sobald die Beta-Phase beendet ist.
Video: http://youtu.be/g9KhSUgf38A
Website: http://www.divshot.com/

5. Fancyboot

image010-w550

Fancyboot: Bootstrap anpassen leicht gemacht. Dieses Tool ist für echte Bootstrap-Liebhaber gedacht.

Wenn Sie gern an Ihren Bootstrap-Dateien feilen und dabei eine permanente Live-Preview zu schätzen wissen, dann ist Fancyboot auf jeden Fall einen näheren Blick wert. Es gibt neben Echtzeit-Previews noch Farbwähler und weitere Variablen. Fancyboot ist gut geeignet, um schnell Veränderungen an einer bestehenden Bootstrap-Seite vorzunehmen.

Wie es funktioniert: Wählen Sie die Plugins und Komponenten, die Sie in das Projekt nehmen wollen. Dann wählen Sie über das seitlich angeordnete Menü die Farbpalette. Sie erhalten direkt eine Echtzeit-Preview, die es Ihnen ermöglicht, unmittelbar ins Finetuning einzusteigen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://fancyboot.designspebam.com/

6. Bootswatch

image012-w550

Bootswatch:
Freie Themes für Twitter Bootstrap

Wenn Sie bis hierhin gelesen haben, dann ist Ihnen Bootswatch schon ein paar Mal begegnet. Das liegt daran, dass es sich so gut in andere Bootstrap-Anwendungen integriert. Bootswatch hat einen sehr einfachen Anwendungszweck. Es liefert kostenlose Themes für Bootstrap. Alle sind vorgefertigt bis zu dem Punkt, an dem Sie gar nichts mehr tun müssen…

Wie es funktioniert: Laden Sie das CSS herunter und verwenden Sie es.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://bootswatch.com/

7. Bootsnipp

image014-w550

Bootsnipp: Design-Elemente und Code-Snippets für Bootstrap

Bootstrap macht die Verwendung von Elementen in Seiten schon ziemlich einfach. Manchmal würde man aber gern mehrere wiederkehrende Elemente auf ein und derselben Seite einsetzen. Hier kam bislang der Entwickler ins Spiel. Mit Bootsnipp kann jeder Designer diese Dinge selbst erledigen. Bootsnipp erlaubt es, nützliche Schnipsel von Bootstrap-Code einfach in die Seite einzukopieren. Beispielschnipsel beinhalten Preisübersichten, Adress- und Bezahlformulare, Anmeldefeatures und vieles mehr.

Wie es funktioniert: Klicken Sie auf den gewünschten Schnipsel und wählen Sie den Quellcode aus. Kopieren Sie ihn in Ihre Site, fertig.
Preismodell: frei verwendbar (Stand: Juli 2013), um ein kleines Trinkgeld wird gebeten
Website: http://bootsnipp.com/

8. Form Helpers

image016-w550

Bootstrap Form Helpers: erweitert Bootstraps Komponenten um 12 jQuery-Plugins.

Wenn Ihnen Bootstrap im Auslieferungszustand nicht genug Funktionalität bietet, dann wenden Sie sich vertrauensvoll an die Bootstrap Form Helpers. Auch hier fügen Sie sehr einfach Codeschnipsel in Ihre Projekte ein und erhalten dadurch so schicke Features wie Länderlisten, die sich automatisch befüllen, Select-Boxen mit Filtern oder automatisch formatierte Telefonnummern und vieles mehr.

Wie es funktioniert: Der Einsatz besteht im Wesentlichen daraus, das Tool herunter und wieder herauf zu laden. Wollen Sie Gebrauch von weiteren Parametern machen, die Website bietet ausführliche Anleitungen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://vincentlamanna.com/BootstrapFormHelpers/

9. Bootstrap Lightbox

image018-w550

Bootstrap Lightbox: ein simples Lightbox-Plugin, basierend auf Bootstraps Modal-Plugin.

Dieses hier ist einfach, aber dennoch wertvoll. Es bläst nämlich die vorhandene Lightbox-Funktionalität auf der Basis des Modal-Plugins zu etwas deutlich sehenswerterem auf. Probieren Sie es selbst. Sie werden mir zustimmen.

Wie es funktioniert: Der Einsatz besteht im Wesentlichen daraus, das Tool herunter und wieder herauf zu laden. Wollen Sie Gebrauch von weiteren Parametern machen, die Website bietet ausführliche Anleitungen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://jbutz.github.io/bootstrap-lightbox/

10. Built with Bootstrap

image020-w550

Ein Showcase von Sites und Apps, die mit Twitter Bootstrap erstellt wurden

Unsere letzte Vorstellung zeigt Ihnen, wie echte, hochglanzpolierte Bootstrap-Seiten aussehen können. Built with Bootstrap ist im Grunde eine Galerie von Websites, die in der ein oder anderen Weise Gebrauch von Bootstrap machen. Ich finde die Beispiele ausgesprochen gelungen und verwende die Site stets zu Inspirationszwecken. Schon mehr als einmal habe ich mir dort neue Ideen geholt.

Wie es funktioniert: Schauen Sie selbst auf http://builtwithbootstrap.com/
Preismodell: frei verwendbar (Stand: Juli 2013), aber voller Werbung
Website: http://builtwithbootstrap.com/

Ich hoffe, diese 10 Bootstrap-Ressourcen gefallen Ihnen so sehr wie mir. Kennen Sie weitere, die ich unbedingt auch kennen sollte? Lassen Sie es mich wissen, hier unten, in den Kommentaren.

Der Autor:

Ryan Boog ist Eigentümer von Happy Dog Web Productions, einer Firma, die sich die Entwicklung von mobilen und Web-Apps, sowie die Unterstützung in Sachen SEO auf die Fahnen geschrieben hat. Wollen Sie mehr von HDWP lesen, dann folgen Sie dem Unternehmen auf Twitter oder Facebook.

(dpe)

Kategorien
Design HTML/CSS Inspiration Showcases Tutorials

Webdesigners Mitnahme-Markt: 40 CSS-Buttons, Beispiele, Tutorials und Code-Schnipsel

Reine CSS-Button und -Menüs benötigen keine Grafiken mehr, sondern formen sich aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn Sie an eine umfassende Browser-Kompatibilität denken. Wie gut, dass es Tutorials, fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir die besten Beispiele auch gleich in diesem Beitrag präsentieren.

Lust auf eine Dosis Photoshop?

Alle Buttons sind für private und kommerzielle Zwecke freigegeben. Da sich Nutzungsbedingungen stets ändern können, sollten Sie vor der konkreten Verwendung die aktuelle Lizenz noch einmal überprüfen. Sicher ist sicher.

CSS Buttons with Pseudo-elements

Urheber: Sergio Camalich
Website: tympanus.net

Sergio zeigt gleich die Entstehung einer ganzen Button-Serie. In einem Tutorial werden diese erklärt und eine Demo, wie auch der Sourcecode, zum Herunterladen angeboten.

css-button1

© Sergio Camalich

Animated CSS3 Buy now Button

Urheber: Mike
Website: nublue.co.uk

In diesem Einsteiger-Tutorial können wir die Entstehung eines animierten Shop-Buttons verfolgen. So wird der Preis noch einmal angezeigt, wenn der Anwender über der Schaltfläche steht.

css-button2

© Mike

CSS Deck

Urheber: Bartos Lazarski
Website: cssdeck.com

CSS Deck bietet uns verschiedenste CSS-Generatoren an, wobei ich Ihnen diesen schönen Shop-Button vorstellen möchte. HTML- und CSS-Code können leicht kopiert werden.

css-button3

© Bartos Lazarski

How to Create CSS3 Buttons

Urheber: Valeriu Timbuc
Website: designmodo.com

Valeriu Timbuc stellt uns eine ovale Buttonform in verschiedenen Farbvarianten vor. Schritt für Schritt werden in diesem Tutorial die HTML- und CSS-Abschnitte erklärt.

css-button4

© Valeriu Timbuc

Code an Awesome Animated Download Button With CSS3

Urheber: Joshua Johnson
Website: designshack.net

In diesem Tutorial zeigt Joshua Johnson, wie ein Button zwei weitere Flächen bei MouseOver präsentieren kann. Zunächst wird das Konzept erklärt, dann der CSS-Code.

css-button5

© Joshua Johnson

Animated Buttons with CSS3

Urheber: Mary Lou
Website: tympanus.net

In diesem Tutorial wird ein Button in verschiedenen Farbvarianten und mit unterschiedlichen Icons als Blickfang vorgestellt. Sieben Beispiele werden mit dem kompletten CSS-Code durch gespielt.

css-button6

© Mary Lou

40+ CSS Buttons from codepen

Urheber: Codepen
Website: saaraan.com

Gleich 40 verschiedene Buttons werden uns in dieser Kollektion vorgestellt. Da gibt es ganz einfach 2D-Button, bis hin zu komplexen Versionen, wie etwa diese runden Button hier.

css-button7

© Codepen

CSS3 Animated Bubble Buttons

Urheber: Martin Angelov
Website: tutorialzine.com

Der Bubble Button von Martin Angelov zeigt beim MouseOver eine kleine Animation. Ganz dem Namen entsprechend, laufen einige Bubbles schnell über die Fläche des Buttons ab.

css-button8

© Martin Angelov

BonBon

Urheber: simurai
Website: simurai.com

Süße CSS-Button im BonBon-Stil. Eine experimentelle Demo mit 3D-Formen und Glanzeffekten.

css-button9

© simurai

Create a Circle Social Button in CSS3

Urheber: Anli
Website: azmind.com

Runde Social-Buttons mit zentrierten Icons werden in diesem Tutorial beschrieben. Als Besonderheit erscheint um den Button eine Kontur, die farbig umgesetzt wurde.

css-button10

© Anli

CSS3 Buttons With a Glass Edge

Urheber: Rob Alan
Website: robalan.com

Eine neutrale, graue Version und eine knallige, rote Version eines CSS-Buttons hat Rob Alan programmiert. HTML- und CSS-Code werden im Beitrag präsentiert.

css-button11

© Rob Alan

Tutorial: CSS3 push-down Buttons

Urheber: Jo
Website: joquery.com

Die CSS3-Button von Jo stehen zunächst dreidimensional hervor, um bei einem Klick wie die Tasten einer Tastatur zu reagieren.

css-button12

© Jo

Super Awesome Buttons with CSS3 and RGBA

Urheber: Mark
Website: zurb.com

In diesem Tutorial kommen CSS3- und RGBa-Tricks zum Einsatz, um eine ganze Serie von Buttons in verschiedenen Farben zu gestalten.

css-button13

© Mark

CSS3 Minimalistic Navigation Menu

Urheber: Martin Angelov
Website: tutorialzine.com

Ein CSS3-Menü mit Animation stellt uns Martin Angelov vor. Eine Demo und ein Download stehen neben dem Tutorial bereit, uns zu begeistern.

css-button14

© Martin Angelov

CSS3 Tutorial: Sleek Card Pockets using CSS Only

Urheber: Vince Angeloni
Website: creativefan.com

Im CSS3-Tutorial von Vince Angeloni können wir die Entstehung eines Buttons verfolgen, der zunächst nur teilweise sichtbar ist. Erst beim MouesOver sehen wir den Inhalt des Buttons.

css-button15

© Vince Angeloni

How to Build a Simple Button with CSS Image Sprites

Urheber: Chris Spooner
Website: line25.com

Chris Spooner stellt in diesem Tutorial eine einfache Variante eines CSS-Buttons vor, der Sprites als Basis einsetzt.

css-button16

© Chris Spooner

CSS3 Speech Bubble

Urheber: Sean
Website: sublimeorange.com

Die Demo zeigt, wie aus einem Button schnell eine Sprechblase werden kann. Auch der Code dazu wird präsentiert.

css-button17

© Sean

Advanced CSS Menu

Urheber: Nick La
Website: webdesignerwall.com

In diesem Tutorial finden Sie eine Demo, die Daten als Download und eine ausführliche Beschreibung des Autors, wie dieses Grunge-Menü entstanden ist.

css-button18

© Nick La

3D Buttons in CSS

Urheber: Elad Shechter
Website: coderwall.com

Elad Shechter simuliert die Tastankappen einer Tastatur. Grau, leicht dreidimensional und bei Anklicken der typische Effekt des Reindrückens.

css-button19

© Elad Shechter

How To Create Shiny CSS Buttons

Urheber: Paulund
Website: paulund.co.uk

Etwas HTML, viel mehr CSS und schon steht dieser Button. Als kleine Besonderheit sorgt ein CSS-Schein für ein Highlight.

css-button20

© Paulund

Sliding Tags

Urheber: Thibaut
Website: cssflow.com

Auf cssflow.com können Sie Tags in Button-Form entdecken. Es gibt eine Demo, einen Download und auch einen Artikel, der die Entstehung beschreibt.

css-button21

© Thibaut

Codepen

Urheber: Codepen
Website: codepen.io

Auf codepen.io werden zahlreiche CSS-Buttons und -Menüs vorgstellt. So auch dieses dreidimensionale Menü mit Icons.

css-button22

© Codepen

Inset Side Navigation

Urheber: CSSFlow
Website: cssflow.com

Ein vertikales Menü mit einzelnen Buttons, die auf einer Grundfläche liegen, präsentiert uns CSSFlow. Schauen Sie sich die Demo an oder klicken Sie gleich auf den Download-Button.

css-button23

© CSSFlow

Button Maker

Urheber: CSS-Tricks
Website: css-tricks.com

CSS-Tricks ist ein Button-Generator, der sich über Schieberegler sehr einfach bedienen lässt. Neben der Größe und der Rundheit können Sie Verläufe und MouseOver-Zustände definieren.

css-button24

© CSS-Tricks

App Navigation with Notification Badges

Urheber: CSSFlow
Website: cssflow.com

Eine Menüleiste mit kleinen Badges zur Information, ob es neue Profile oder Nachrichten gibt. Eine Demo und ein Download warten auf Sie.

css-button25

© CSSFlow

CSS Menu Maker

Urheber: CSS Menu Maker
Website: cssmenumaker.com

Der CSS Menu Maker zeigt eine Auswahl von Stilen, die nach einem Klick angepasst werden können. Die Unterteilung erfolgt in Drop Down, Flyout, Vertical, Horizontal und Tabbed.

css-button26

© CSS Menu Maker

Share Buttons

Urheber: CSSFlow
Website: cssflow.com

Schöne 3D-Social-Buttons, die zum Anklicken reizen. Die Anzahl der Empfehlungen in den sozialen Netzen wird dabei angezeigt.

css-button27

© CSSFlow

CSS Menu Generator

Urheber: mycssmenu.com
Website: mycssmenu.com

Wählen Sie aus zahlreichen Vorgaben eine Menügrundlage aus. Diese passen Sie dann in wenigen Schritten an.

css-button28

© mycssmenu.com

Social Buttons

Urheber: CSSFlow
Website: cssflow.com

Einfache Social-Media-Buttons zur leichten Anpassung. Eine Demo und ein Download unterstützen den Anwender.

css-button29

© CSSFlow

Glossy Buttons

Urheber: CSSFlow
Website: cssflow.com

Glänzende CSS-Buttons in verschiedenen Farbvarianten. Demo und Download sind nur einen Klick entfernt.

css-button30

© CSSFlow

Dark and Light Dropdown Lists

Urheber: CSSFlow
Website: cssflow.com

Ein CSS-Button in zwei Varianten: eine helle und eine dunkle Version. Demo und Download sind natürlich auch hier vorhanden.

css-button31

© CSSFlow

CSS Menu Builder

Urheber: CSS Menu Builder
Website: cssmenubuilder.com

Der CSS Menu Builder bietet uns einige fertige horizontale und vertikale Menüs zur Auswahl an. In nur vier Schritte können diese angepasst werden, bis hin zur Beschriftung.

css-button32

© CSS Menu Builder

Dark Button Navigation Using CSS3

Urheber: Monji Dolon
Website: devgrow.com

Nach der Online-Demo und un den Downloaddateien werden CSS- und HTML-Code beschrieben. So entsteht ein vertikales Menü mit einzelnen Buttons auf einer Fläche.

css-button33

© Monji Dolon

Build Awesome Practical CSS3 Buttons

Urheber: Jeffrey Way
Website: tutsplus.com

Jeffrey Way erklärt in diesem Tutorial auf net.tutsplus.com die Programmierung eines CSS-Buttons mit Icon. Auch ein Video-Tutorial unterstützt uns beim Lernen.

css-button34

© Jeffrey Way

Awesome Animated CSS Button Tutorial and Source Code

Urheber: Jay Patel
Website: way2tutorial.com

Sehr schön ist hier der Wechsel vom normalen Button hin zur angeklickten Version zu sehen. Im Tutorial wird das Konstrukt ausführlich erklärt.

css-button35

© Jay Patel

CSS3 Gradient Buttons

Urheber: Nick La
Website: webdesignerwall.com

Nick La zeigt an seiner Webdesignerwall eine Massenproduktion von CSS-Button in verschiedensten Farben und mit unterschiedlichen Rundungen und Größen.

css-button36

© Nick La

Awesome CSS3 & JQUERY Slide Out Button

Urheber: Mary Lou
Website: tympanus.net

Immer öfter wird die Option verwendet, sich über einen bestehenden Account bei Diensten wie Twitter oder Facebook bei neuen Diensten einzuloggen. Dazu wird hier ein passender Button angeboten.

css-button37

© Mary Lou

Nice Menu : CSS Animation & jQuery Animate

Urheber: Hidayat Sagita
Website: webstuffshare.com

Hidayat Sagita stellt nach der Download- und Demo-Option seinen Button in zwei Varianten vor: einmal mit CSS- und einmal mit jQuery-Animation.

css-button38

© Hidayat Sagita

CSS Button Me

Urheber: Caleb Ogden
Website: cssbutton.me

Der Generator CSS Button Me bietet zahlreiche Regler an, etwa zu Border, Gradients, Box Shadow, Font und einige mehr.

css-button39

© Caleb Ogden

Pure CSS social media icons

Urheber: Nicolas Gallagher
Website: nicolasgallagher.com

Reine Social-CSS-Button sind je nach Komplexität sehr schwierig zu gestalten. Nicolas Gallagher zeigt, wie es geht.

css-button40

© Nicolas Gallagher

(dpe)

Kategorien
Design HTML/CSS Responsive Design

CIKONSS 1.0: Responsive Icons mit purem CSS, die sogar im IE funktionieren

Icons auf der Basis von PNG, GIF oder meinetwegen auch JPG sind nichts neues. Neuer ist die Vorgehensweise, PNG-Icons in einer Datei als sog. Sprites zu versammeln, um so einiges an Requests zu sparen. Noch interessanter ist es aber, Icons nur mit purem CSS zu erstellen und so auf Overhead komplett zu verzichten. CIKONSS setzen diesen Gedanken um, wobei sie ungewöhnlicherweise auf CSS2 basieren. Auf diese Weise funktionieren die Symbole sogar im Internet Explorer 8.

cikonss-startpage-550

CIKONSS: Und es hat Zzap gemacht

Milana Cap aus Serbien arbeitet seit 5 Jahren als Webdesignerin unter dem Namen Zzap. Daneben ist sie klassische Musikerin am serbischen Nationaltheater. Man kann sicher sagen, dass ihr sehr um die schönen Künste gelegen ist. Von sich selbst sagt sie, dass sie alles, was sie heute über das Web weiß und kann, von der Open Source Community gelernt hat. Das Projekt CIKONSS hat sie aufgelegt, um eben dieser Community etwas zurück zu geben. Meiner Meinung nach ist dieser Versuch durchaus als gelungen zu bezeichnen.

CIKONSS: 43 Icons in unterschiedlichen Größen und Formen

Da die CIKONSS auf CSS2 basieren, sind sie hinsichtlich ihrer Vielfalt etwas eingeschränkt, funktionieren dafür browser-übergreifend, insbesondere auch im ansonsten stets etwas widerspenstigen Internet Explorer. Milana Cap erstellte insgesamt 43 Icons, die allesamt dem UI-Design zuzurechnen sind. Jedes Icon steht in fünf Größen und drei Stilen zur Verfügung.

Die Einbindung in die eigene Website ist simpel. Ich gehe davon aus, dass Sie sich die CIKONSS von Github heruntergeladen und wieder auf Ihren Webspace hochgeladen haben. Nun binden Sie sie wie folgt ein:

Unter Verwendung der Kombination verschiedener Klassen platzieren Sie nun die Icons an beliebiger Stelle Ihrer Website. Das kann zum Beispiel so passieren:

Im Ergebnis sähe das dann so aus:

icon-mail

Jedes Icon wird über die Kombination zweier Span-Elemente definiert. Das erste Span besteht aus der Angabe der Klasse icon, eventuell in Kombination mit einer Größenangabe wie icon-mid für ein Symbol mittlerer Größe. Das zweite Span definiert dann das eigentliche Symbol, in unserem Beispiel einen Briefumschlag als Icon für Mail, hier icon-mail.

Innerhalb des ersten Span kann als dritter Parameter noch ein Stil angegeben werden. Unterbleibt die Angabe, erscheinen die Icons ohne umgebenden Rahmen. Will man die Symbole indes mit einem quadratischen oder runden Rahmen versehen, würde man icon-square oder icon-rounded hinzufügen.

icon-variants
Alle zur Verfügung stehenden Stile

Die definierten Größen der Symbole sind im mitgelieferten CSS einfach anzupassen, so man das möchte. Sie basieren auf em. Für die Icons mittlerer Größe sieht die Standarddefinition so aus:

.icon-mid {
    font-size: 2em;
}

CIKONSS 1.0 steht auf Github, wie auch auf der Projektwebsite zum kostenlosen Download bereit. Es kann unter der MIT-Lizenz sowohl für persönliche, wie auch kommerzielle Zwecke frei eingesetzt werden. Das Projekt ist knappe zwei Wochen alt, also noch ganz frisch. Get it while it’s hot…

Links zum Beitrag

Kategorien
Apps Design HTML/CSS JavaScript & jQuery Programmierung

Fries: Kostenloses Framework für die Entwicklung von Android-Apps mit HTML, CSS und JavaScript

Fries von Jaune Sarmiento liegt seit wenigen Tagen in der Version 1.0 vor. Fries stellt ein Framework zur Entwicklung von Web Apps zur Verfügung, die dem Look and Feel der Android UI entsprechen. Verwender der 4er Linie von Android werden sich direkt heimisch fühlen, wenn sie sich die Demos ansehen. In der aktuellen Version ist Fries optimiert auf die Zusammenarbeit mit PhoneGap, kann also nativ wirkende Apps hervor bringen.

fries-homepage

Fries will nicht nur das Prototyping beschleunigen

Vorneweg sei erwähnt, dass Fries unter der liberalen MIT-Lizenz steht, mithin für private und kommerzielle Zwecke verwendet werden darf. Das Projekt wird auf Github gehostet, kann aber auch auf der eigens eingerichteten Demo-Website heruntergeladen werden.

Fries bringt im entpackten Zustand gerade mal runde 470 KB auf die Waage, wovon die eigentlichen Framework-Bestandteile nochmal 100 KB weniger benötigen. Der Rest wird von Beispiel-HTML-Dateien belegt. In Version 1 verwendet Fries die offiziellen Android-Icons, was den authentischen Look der mit Fries erstellten Apps garantiert.

Fries setzt auf HTML, CSS und JavaScript, das Framework besteht im Wesentlichen aus CSS-Dateien und einigen Funktionalitäten, die mit JavaScript realisiert sind und als entsprechende Script-Dateien vorliegen. Fries ist modular aufgebaut. Jede Funktion steckt in einer eigenen Scriptdatei, die erforderlichenfalls von einer korrespondierenden CSS-Datei ergänzt wird. So ist die kollaborative Entwicklung weiterer Features einfach möglich, Sarmiento selber hat auch schon ein gutes Dutzend Ideen für weitere Funktionen.

Die Grundfunktionalität, also das „Übereinanderladen“ der einzelnen Seiten einer App wird vom JavaScript Stacks.js geleistet, das Sarmiento aus Ratchets Push.js entlehnte. Push.js ist nur für iOS tauglich. Stacks.js also sorgt nun für das Laden der Seitenelemente, wie auch der Inhalte über Ajax.

Fries: Simples Komponentensystem mit klarer Aufgabenteilung

Der Aufbau einer Fries-App ist von der Theorie her simpel. Alle Befehlselemente werden in ein Div der Klasse page gepackt, alle Inhaltselemente werden in ein Div der Klasse content geschrieben. Stacks.js kümmert sich um Zuordnung und erforderliche Ladevorgänge. Zusätzlich sorgt es für die Android-typischen Übergangseffekte mittels CSS3 Transforms.

Grundsätzlich kann eine Fries-App via Web-Server ausgeliefert werden, was während der Entwicklungsphase sicherlich der gängigste Weg sein dürfte. Ist die Entwicklung abgeschlossen, empfiehlt es sich spätestens, die App nach Adobe PhoneGap zu überführen, weil dadurch verschiedene Beschränkungen umgangen werden können. Die wichtigste dürfte dabei der Umstand sein, dass sich der Android-Browser nicht komplett wegblenden lässt, so dass die eigene App nicht den vollen Bildschirm nutzen könnte. Das ist nicht kritisch, aber wirkt nicht so professionell, wie es könnte. Zudem unterstützt PhoneGap alle gerätespezifischen APIs, die Android bereit stellt.

Derzeit bietet Fries fertige Komponenten für Action-Bars, Tabs, Schaltflächen, Listen und Formulare. Mittels der Komponente Spinners lässt sich eine Auswahlliste platzsparend unterbringen.

fries-spinners
Spinner im Einsatz

Alle Komponenten können auf der Demo-Website im Einzelnen getestet werden. Wie erwähnt steht Fries unter MIT-Lizenz, PhoneGap unter Apache-Lizenz zum kostenlosen Download bereit. Damit bilden die beiden Projekte ein Team, das den ambitionierten Entwickler ohne zusätzliche Kosten in die Lage versetzt, professionell wirkende Apps im Android Look & Feel zu erstellen.

Wenn ich jetzt noch verstünde, was die Assoziation Fries, zu deutsch Fritten, bedeuten soll, dann bliebe für mich keine Frage offen…

Links zum Beitrag

Kategorien
Design HTML/CSS

CSS Matic – „What You See Is What You Get“ für die CSS-Entwicklung

Die Zeiten, in denen CSS rein mit der Hand geschrieben werden musste, sind schon seit einiger Zeit vorbei. In den letzten Jahren konnten sich immer mehr kleine Helferlein etablieren, die einzelne Aspekte des CSS-Design visuell unterstützen. Aus Spanien kommt eine neue Web-App, die vier Teilbereiche komfortabel abzudecken versteht. Die Entwickler des Dienstes CSS Matic sind alte Bekannte.

cssmatic-homepage

Freepik.com und Thumbr.it zeichnen für CSS Matic verantwortlich

Dr. Web-Leserinnen und -Leser kennen die Suchmaschine Freepik.com. Im Sommer 2012 stellten wir den Service vor. Wir konnten Freepik mit Einschränkungen empfehlen. Positiv erschien uns die hohe Zahl gefundener Ressourcen für die verschiedenste Bedarfslagen und Desktop-Softwares. Weniger erwärmen konnten wir uns für das Konzept der Drittverlinkung. So ist es bei Freepik stets erforderlich, die Lizenz der gefundenen Ressource noch einmal gründlich auf deren Quell-Website gegen zu checken. Freepik selber hostet (zumindest in der Regel) den entsprechenden Download nicht.

freepik-startseite

Seit einigen Wochen ist das Freepik-Team sehr aktiv mit der Erstellung eigenen Contents beschäftigt. Man darf gespannt sein, ob es da nicht bald etwa zu einem exklusiven Freebie für die Leser von Dr. Web und Noupe Magazine kommen könnte ;-)

Nach eigenen Aussagen wollte der Gründer von Freepik, der Spanier Alejandro Sánchez Blanes, der Design Community etwas zurück geben für die große Unterstützung, deren er und sein Team sich in den letzten Jahren erfreuen durften. CSS Matic ist dieses Geschenk an die Community.

Ursprünglich ersonnen, um Standardaufgaben des Freepik-Teams rationeller zu gestalten, kann die Tool-Sammlung CSS Matic seit kurzem von jedermann kostenlos verwendet werden. Und in der Tat ist CSS Matic in der Lage, so manches andere Tool locker zu ersetzen. Mir persönlich gefällt dabei am besten, dass man den Werkzeugen anmerkt, dass sie einen frischen Ansatz, schon von der UI her, verfolgen. CSS-Tools gibt es immerhin einige, darunter viele, die offenbar seit Jahren von ihren Entwicklern nicht mehr angeschaut wurden.

CSS Matic – Verläufe erstellen, Rahmen gestalten, Schlagschatten definieren, Texturen entwerfen

Zugegebenermaßen ist nicht jedes Helferlein aus dem Vierkant-Portfolio CSS Matics gleichermaßen nützlich oder gleichermaßen hochwertig umgesetzt. Die Reihenfolge der Präsentation auf der Website wird der Wertigkeit der Tools in etwa gerecht.

CSS Matic – Gradient Generator

cssmatic-gradient-generator

Der Verlaufs-Generator ist mit Abstand das ausgefeilteste Tool der Sammlung. Verläufe lassen sich auf der Basis etlicher Presets oder komplett from scratch entwickeln. Dabei sind auch Verläufe über mehrere Farben möglich und werden visuell über Ankerpunkte zurecht geschoben. Der Farbraum ist wählbar, Sättigungswerte und weiteres sind anpassbar. Der fertige Verlauf kann als CSS oder sogar als Sass exportiert werden. Mitexportiert werden können auf Anforderung auch die Code-Kommentare, die etwa das Prefixing erläutern. Nützlich für Entwickler, die CSS nicht atmen.

CSS Matic – Border Radius

cssmatic-border-radius

Weit weniger aufwändig, dabei aber nicht minder nützlich, ist das Tool „Border Radius“. Dieses erlaubt die Erstellung von CSS-Rahmen, die für jede Ecke unterschiedlich, aber auch simpel rundherum einheitlich visuell definiert werden können. Der entstehende CSS-Code ändert sich bei Manipulationen live mit und kann über die Zwischenablage in das eigene Projekt übernommen werden.

CSS Matic – Noise Texture

cssmatic-noise-texture

Unter dem Punkt „Noise Texture“ schiebt man sich eine Textur auf einem farbigen oder transparenten Hintergrund zusammen, die dann als PNG mit dem entsprechenden CSS exportiert werden kann. Die Farbe des Hintergrunds, die Farbe des Rauschens, sowie Transparenzen und Dichte des Rauscheffekts kann ebenso definiert werden, wie die Pixelwerte des zu erzeugenden PNG.

CSS Matic – Box Shadow

cssmatic-box-shadow

Natürlich darf auch der Klassiker unter den CSS-Tools nicht fehlen, der Schlagschatten-Generator. Jeder Entwickler kennt mittlerweile bald ein halbes Dutzend davon. Die gute Nachricht: Der Schlagschatten-Generator von CSS Matic braucht sich nicht zu verstecken. Alle wichtigen Parameter stehen zur Konfiguration bereit. Der CSS-Code kann über die Zwischenablage auskopiert werden und berücksichtigt, wie alle anderen Tools des Kastens das auch tun, etwa erforderliches Browser-Prefixing.

Alles in allem sollte CSS Matic in der Bookmark-Liste engagierter Web Developer einen festen Platz erhalten. Man spart sich ein paar weitere Dienste. Zudem entwickelt Freepik in letzter Zeit einen Drive, der soviel Elan repräsentiert, dass es mich nicht wundern würde, wenn CSS Matic funktional noch lange nicht am Ende der Fahnenstange angekommen wäre. Insofern lohnt es sicher, den Service im Auge zu behalten.

Links zum Beitrag

  • The Ultimate CSS Tools For Developers | CSS Matic
  • Freepik: Suchmaschine für kostenlose Design-Ressourcen | Dr. Web Magazin

Kategorien
(Kostenlose) Services Design Essentials HTML/CSS

Ungewöhnlicher Codechecker: Holmes prüft HTML auf Validität, nutzt dafür CSS

Bei jedem Web-Projekt ist es angebracht und sinnvoll, den Quelltext auf Fehler und Einhaltung der Standards zu überprüfen. Statt seine Seite durch einen der vielen Validatoren zu schicken, kann man mit dem Diagnostik-Tool Holmes seine Website auch mit einer CSS-Datei auf eine nicht-valide und fehlerhafte HTML-Auszeichnung überprüfen.

holmes
Holmes

CSS-Datei einbinden und Seite checken

Um Holmes nutzen zu können, muss die entsprechende Stylesheet-Datei im Kopf des zu überprüfenden HTML-Dokumentes eingebunden werden. Außerdem ist das BODY-Element mit der Klasse holmes-debug zu versehen. Anschließend markiert Holmes alle HTML-Elemente rot, bei denen Fehler aufgetreten sind – zum Beispiel fehlende Pflichtattribute wie das ALT-Attribut bei Bildern.

Bei Elementen, für die es eine bessere oder sinnvollere Auszeichnung gibt – beispielsweise bei der Raute (#) als Link im A-Element – gibt Holmes eine Warnung aus, indem das Element gelb hervorgehoben wird. Außerdem markiert das Tool alle veralteten Elemente wie das CENTER– oder FONT-Element grau.

So funktioniert Holmes

Das Besondere an Holmes ist, dass es ohne Programmiersprache auskommt. Es nutzt die verschiedenen Selektor-Möglichkeiten von CSS, um Elemente aufgrund unterschiedlicher Kriterien hervorzuheben. Das Nichtvorhandensein des ALT-Attributes bei Bildern wird wie folgt per CSS festgestellt:

.holmes-debug img:not([alt]) {
  outline: 2px solid red;
}

Das Auftreten einer Raute als Link findet Holmes so heraus:

.holmes-debug a[href="#"] {
  outline: 2px solid #fd0;
}

Da Holmes auf teils recht neue CSS-Möglichkeiten wie die Pseudoklasse :not() setzt, lässt sich das Tool nicht mit allen Browsern anwenden. Aktuell funktioniert Holmes in Chrome, Firefox, Opera und Safari. Auch wenn es vom Entwickler nicht im Internet Explorer 10 getestet wurde, so kann ich nach eigenen Tests sagen: läuft.

Fazit: Holmes kann zwar nicht mehr als andere Validatoren, es geht aber einen anderen Weg. Es zeigt dem Entwickler direkt auf der Website, an welchen Stellen fehlerhafter oder verbesserungsfähiger Quelltext steht. Besonders hilfreich kann Holmes sein, wenn man ihn auf einer Website anwendet, die schon etwas betagt ist und die man nicht selbst erstellt hat.

HTML validieren – Links zum Beitrag

  • The CSS Markup Detective | Holmes

(dpe)

Kategorien
Design HTML/CSS

Typeplate: Starterkit sorgt für ordentliche Typografie – unabhängig vom Website-Design

Typografie im Webdesign ist so eine Sache. Ist man sich möglicherweise noch schnell einig, dass ordentliches Schriftbild begrüßenswert ist, so scheitert es dann doch zumeist in der konkreten Umsetzung. Schön designte Websites mit weniger schöner Typografie sind entsprechend eher die Regel, denn die Ausnahme. Das selbsternannte Starterkit Typeplate tritt an, das zu ändern.

typeplate-homepage

Typeplate: Sass, LESS, Stylus, CSS

Typeplate steht in verschiedenen Geschmacksrichtungen, die unterschiedlich schnell Updates erfahren, zur Verfügung. Ursprünglich gestartet als Sass-Projekt, kann das Starterkit mittlerweile zusätzlich als LESS- und als Stylus-Variante verwendet werden. Natürlich ist auch eine statische CSS-Version verfügbar. Mit Blick auf das reine CSS empfehlen die Entwickler nicht die Einbindung des Stylesheets als Datei, sondern die Übernahme der einzelnen Definitionen in das Stylesheet der betreffenden Site. Das Projekt liegt ganz aktuell in Version 1.0.1 vor.

Typeplate mit zeitloser Gestaltungsphilosophie

Typeplate setzt eine klare Philosophie um. Heraus kommt eine sehr klassische Umsetzung eines Schriftdesign, das zweifellos elegant, wenn auch nicht unbedingt modern daher kommt. Immerhin kann jeder das Starterkit als Grundlage für eigene Modifikationen nehmen und entsprechend nach Wunsch modernisieren.

typeplate-feature

Überschriften, Einzüge, Umbrüche, Silbentrennung, Kapitälchen und Anfangsbuchstaben, die über mehrere Zeilen gehen. Um all diese Themen kümmert sich Typeplate. Dazu kommt die Behandlung von Zitaten, Codeblöcken, Definitionen, Fußnoten und einfachen Tabellen, sowie die Darstellung kleiner Texte.

Typeplate befindet sich extrem reger Entwicklung. Während ich den Artikel schreibe, finden laufend Änderungen am Repo statt. Das Projekt steht auf Github zum kostenlosen Download bereit. Nutzer von Bower finden eine besonders einfache Installationsmethode.

Neben dem unmittelbaren Nutzen, der sich aus der vorgesehenen Nutzung von Typeplate ergibt, gefällt mir persönlich der Fortbildungsaspekt fast noch besser. An dem Projekt lässt sich anhand von überschaubar nachvollziehbaren Ergebnissen der Umgang mit Sass in direktem Vergleich zu LESS und Stylus erlernen. Wer die ersten Gehversuche mit den Präprozessoren gewagt hat, findet in Typeplate eine sehr übersichtliche Möglichkeit, den nächsten Schritt zu gehen.

Links zum Beitrag:

Kategorien
Design HTML/CSS

The Heads-Up Grid und SpryMedia Grid – Gitternetzoverlays für das Webdesign im Browser

Es ist ja schön und gut, dass gängige Grid-Frameworks, wie etwa das 960.gs, die Definition und Verwendung gridbasierter Layouts vereinfachen. Eine optische Prüfmöglichkeit, um auch an den Details arbeiten zu können, bringen diese Frameworks jedoch nicht mit. So muss man sich auf die eigenen Augen verlassen und natürlich auf die Codequalität des Gridsystemlieferanten. Wer sein Grid frei baut, also ohne Toolunterstützung, weiß womöglich noch eher, wovon ich rede. Die beiden Tools aus dem folgenden Beitrag versprechen, bei der Positionierung der Designdetails behilflich zu sein…

grid-artikelbild

Grid-Framework: The Heads-Up Grid muss in die Website eingebaut werden

The Heads-Up Grid ist interessanter, als es der Name vermuten lässt. Baut man die Javascripte und Stylesheets, die das Heads-Up Grid ausmachen, in eine Website während der Designphase ein, so erzeugt man ein Gitternetzoverlay, welches das Design erheblich vereinfacht, live auf der Website. Dabei ist die Verwendung völlig unkompliziert.

The Heads-Up Grid – Overlay frei konfigurierbar

Eine Lösung, die so einfach und unkompliziert ist wie das Heads-Up Grid kommt daher jedenfalls mir wie gerufen. Ein kleines Script wird in den Head-Bereich der zu erstellenden Website gepackt, die Dateien des Grid-Tools in ein anpassbares Unterverzeichnis, fertig. Beim nächsten Aufruf der Website erscheint ein sichtbares Gitternetzoverlay. Bestes Beispiel dafür ist die Produktseite zum Heads-Up Grid selber:

theheadsupgrid-homepage
The Heads-Up Grid in Aktion: Sichtbares Gitternetzoverlay auf der Website

Ohne weitere Anpassungen zeigt The Heads-Up Grid ein Grid mit 6 Spalten und einer Breite von 960 Pixeln an. Alle relevanten Werte lassen sich jedoch sehr einfach innerhalb der kurzen Scriptpassage, die in den Head kopiert wurde, ändern. Sogar die Maßeinheit kann angepasst werden, so dass auch mit Prozentwerten gearbeitet werden kann. Per Default verwendet das Tool Pixel. Über den Wert Zeilenhöhe lässt sich ein Baseline Grid definieren, wichtig für Typografiefreunde.

Sogar responsive Layouts können mit dem Heads-Up Grid unterstützt werden. Der hierzu erforderliche Code ist allerdings etwas komplexer, da er verschiedene Screengrößen abfragen und bedienen muss.

Um die im Designprozess befindliche Website zwischendurch auch ohne Gridoverlay prüfen zu können, spendierte der Entwickler dem Tool einen am rechten oberen Rand des Browserfensters platzierten On-/Off-Button. The Heads-Up Grid liegt aktuell in der Version 1.7 vor und kann frei auf der Website des Entwicklers Jason Simanek heruntergeladen werden.

Grid-Framework: SpryMedia Grid – Bookmarklet legt Grid auf beliebige Websites

Der Schotte Allan Jardine liefert ein Grid-Framework, das per JavaScript-Bookmarklet auf beliebige Websites angewendet werden kann. Das ist bequem, aber ist es auch gut?

SpryMedia Grid legt ein Standard-Grid über die Website, auf der es aufgerufen wird. Das funktioniert unterschiedlich zufriedenstellend. In meinen Tests endete das Grid sehr häufig am Ende des sichtbaren Bereichs, wurde also nur auf den aktuellen Viewport angewendet. Vielfach wurde überhaupt kein Grid generiert. Getestet habe ich im aktuellsten Chrome Stable auf dem Mac.

sprymedia-grid

Dafür ist das SpryMedia Grid über das modale Fenster, das nach Klick auf das Bookmarklet erscheint, extrem flexibel zu konfigurieren. Neben den grundlegenden Optionen, wie der Gesamtbreite und Höhe des Grids, der Zahl der Spalten und Zeilen mit ihren jeweiligen Weiten und Höhen, sowie etwaigen Abständen, sieht SpryMedia Grid zusätzlich die farbliche Anpassung der einzelnen Teile des Grid vor. Im Prinzip ist das also eine ganz nützliche Angelegenheit.

Nur die einwandfreie Funktionalität, die kann halt nicht garantiert werden. Im Chrome unter Windows 7 konnte ich beispielsweise nicht einmal die Einheiten wechseln, war somit auf die Standard-Units festgelegt. Grundsätzlich ist der freie Wechsel zwischen em, ex,pxund % ausdrücklich vorgesehen. Übrigens: Ausblenden lässt sich das Grid, indem man schlicht erneut auf das Bookmarklet klickt. Die zuvor getätigten Einstellungen bleiben erhalten.

Wer bereit ist, sich mit den vielfältigen Konfigurationsmöglichkeiten auseinander zu setzen, ohne die Garantie zu haben, dass das Ergebnis den Aufwand rechtfertigt, kann SpryMedia Grid gern mal ausprobieren. Ich habe mich für The Heads-Up Grid entschieden und empfehle Ihnen das auch.

Links zum Beitrag:

Quellennachweis Artikelbild: striatic via photopin cc

Kategorien
Design HTML/CSS

Neue Tools: CSS-Preprozessor Roole und HTML-Umwandler Markdown.css

Ist es nicht immer wieder erstaunlich, mit welchen Tools die Entwicklercommunity aufwartet? Während sich darunter viele sehr nützliche, teils unverzichtbare finden, gehören auf der anderen Seite auch etliche dazu, deren Sinn sich nicht auf den ersten, vielfach ebenso wenig auf den zweiten Blick erschließt. Heute habe ich je ein Tool von beiden Enden des Spektrums für Sie.

roole

Roole: CSS-Preprozessor auf der Basis von JavaScript

Aus der Rubrik „Nützliche Tools“ macht der neue CSS-Preprozessor Roole auf sich aufmerksam. Roole steht in der Tradition von Sass und LESS, wirkt also auf den ersten Blick wie die Neuerfindung des Rades.

Roole ist jedoch insofern anders, als es auf reinem JavaScript fußt und auf diese Weise direkter als die genannten Alternativen implementiert werden kann. Wie LESS kann es per Node.js serverseitig lauffähig gemacht werden, auf der Client-Seite funktioniert es ohne weitere Zusätze, vorausgesetzt, JavaScript ist nicht deaktiviert. In letzterem Falle funktionierte allerdings der Laufzeitcompiler von LESS ebenfalls nicht. Sass erfordert zudem ohnehin mehr Aufwand, wenn man es zur Laufzeit kompilieren wollte.

Roole verbindet die Vorteile der Logik einer Programmiersprache mit der Erstellung von Stylesheets und erlaubt so einfache, wie komplexe Vorgänge zeit- und codesparend zu verwirklichen. Auf der Demoseite finden sich zahlreiche Beispiele.

Roole kümmert sich um das leidige Vendor-Prefixing selber, so dass kurze standard-konforme Anweisungen ausreichen, wie das folgende Beispiel zeigt:

Roole schreibt Vendor Prefixe selber

Unter Roole.org/test lässt sich prüfen, ob der verwendete Browser fähig ist, Roole zu interpretieren, was bei meinem unter Windows 8 Pro installierten Chrome-Browser vollumfänglich gegeben war. Roole steckt noch in den Kinderschuhen und steht in Version 0.1.2 unter der MIT-Lizenz auf Github zum Download bereit.

Auf der Website zum Produkt kann mit einem Live-Editor experimentiert werden, will man sich mit Roole näher auseinander setzen. Im Vergleich zu den älteren Wettbewerbern LESS und Sass steht Roole funktional noch etwas im Abseits. Einen CSS-Compiler nativ mit JavaScript zu erstellen, ist jedoch vom Ansatz her durchaus interessant. Roole sollte man im Auge behalten.

Markdown.css: HTML wie Markdown aussehen lassen

Auf der anderen Seite des Spektrums findet sich ganz aktuell eine Neuentwicklung, die auf den ersten Blick nützlicher erscheint als sie es auf den zweiten dann ist. Die Rede ist von Peter Coles Markdown.css, einem Stylesheet, das aus einem HTML-Dokument ein Markdown-formatiertes Dokument macht. Nein, halt, das wäre ja nützlich.

Markdown.css macht nicht Markdown aus HTML, sondern lässt HTML aussehen wie Markdown. Das verdeutliche ich am besten visuell. Diese Optik:

Vor Markdownify

Sieht nach Anwendung von Markdown.css so aus:

Nach Markdownify

Die Lesbarkeit ist erhöht. So weit so gut. Nützlich wäre nun, wenn man den entstandenen Markdown-Text auskopieren und zu Bearbeitungszwecken gebrauchen könnte. Genau das ist jedoch nicht möglich. Beim Auskopieren wird der gesamte Markdown-Anteil nicht mitgenommen.

markdown.css
Markdown.css: Ein Ausschnitt

So ist Markdown.css, das mit LESS realisiert wurde, nicht mehr als ein Experiment. Ich finde dabei besonders den Fortbildungsaspekt interessant. Durch die Auseinandersetzung mit Markdown.css und seiner LESS-Basis bin jedenfalls ich zu neuen Ansätzen inspiriert worden. Das ist ja nicht etwa nichts.

Markdown.css steht übrigens zusätzlich als Bookmarklet zur Verfügung, mit dessen Hilfe man beliebige Websites in Markdown-Optik versetzen kann.

Links zum Beitrag:

Kategorien
Design HTML/CSS

„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten wie px, em und % gibt es mit rem einen neuen Bewerber, der das Beste der anderen Einheiten in sich vereint.

Von der Wurzel her betrachtet

Früher mal Standard: Schriftgrad per em oder %

Bis etwa 2008 galt es als weitgehend als Best Practice, den Schriftgrad im CSS so flexibel wie möglich zu definieren. Dazu wurden die Einheiten em oder % eingesetzt, relativ zur Standardeinstellung im Browser, die normalerweise bei 16px liegt.

Diese flexible Mischung servierte den Nutzern damals das beste Lese-Erlebnis, denn viele Browser hatten noch keinen Seitenzoom und der IE6 konnte mit px definierten Text überhaupt nicht zoomen, jedenfalls nicht ohne einen Eingriff in die Systemeinstellungen.

Sowohl bei em als auch % gab es in der Praxis aber Probleme mit der Vererbung der Schriftgrößen. Eine Prozentangabe ist immer relativ zu irgendetwas, meist zum Eltern-Element, und bei em ist das nicht anders:

  • Bei einer Box-Modell-Eigenschaft wie margin-bottom orientiert sich em an der Schriftgröße des Elements selbst. Ändert sich die Schriftgröße, ändert sich der Abstand, was zum Beispiel im Fließtext häufig ein gewünschter Effekt ist.
  • Bei der Schriftgröße hingegen gilt als Basis für ein em die Schriftgröße des Eltern-Elements. Eine Angabe von zum Beispiel 0.875em wird also bei jeder Verschachtelung ein Stückchen kleiner.

Fast wie bei Alice im Wunderland. Mal zu groß, mal zu klein, aber so richtig passen tut’s dann doch nie.

Die vorübergehende Emanzipation des px

Im Februar 2009 hielt Jens Grochtdreis in seinem Blogartikel „Die leidige Sache mit der Schriftskalierung“ ein kurzes Plädoyer für die Pixel. Moderne Browser hatten damals einen Seitenzoom und der IE6 wurde als Gegenargument immer weniger wichtig.

Ein Jahr später veröffentlichte Gerrit van Aaken einen Beitrag mit dem Titel „Warum ich Pixel für CSS-Schriftgrade verwende„. In der Diskussion unter Gerrits Bekenntnis zu px ging es hoch her, aber besonders bemerkenswert ist Kommentar #22 , in dem eine Einheit namens rem erwähnt wird, die den meisten Webdesignern bis dahin weitgehend unbekannt war.

Das „root em“: rem als neuer Stern am Schriftgrad-Himmel

Seit etwa 2011 wird das rem langsam aber sicher bekannter, denn es vereint die Vorteile von pxund em. Es ist genauso flexibel wie sein älterer Bruder em, umgeht aber dessen Nachteile bei der Vererbung, weil sich das „root em“ immer auf das Stammelement <html> bezieht (nicht auf <body>).

Um den Wert für rem zu erhalten, teilt man einfach die gewünschte Pixelgröße durch den Ausgangswert 16. Im CSS könnte eine solche Schriftgrad-Definition wie folgt aussehen:

html { font-size: 100%; } /* Browserdefault, 16px  */   
h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */  
h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */   
p { font-size: 0.875rem; } /* 14/16 = 0.875 */     

Auf diese Weise lässt sich ganz einfach eine Kaskade von Schriftgraden aufbauen. Um den Schriftgrad irgendwann einmal größer oder kleiner zu machen, muss man nur die Basis ändern. Das Verhältnis von Fließtext zu Überschrift bleibt dabei immer gleich.

Das Fallback für alte Browser mit px

Das klingt fast zu gut um wahr zu sein, aber tatsächlich hat die Geschichte nur einen einzigen Haken: Alte Browser, wie immer. Auf http://caniuse.com/rem kann man sich einen guten Überblick verschaffen, und der sieht gar nicht so schlecht aus:

Can I use Rem units?

Die eigentlichen Schwachpunkte liefern der IE vor Version 9 sowie Opera Mini. Für diese beiden und alle anderen alten Browserkollegen kann man in seinen Stylesheets ein Pixel-Fallback einbauen, dass für das obige Beispiel so aussehen könnte:

html { font-size: 100%; }   
h1 { 
font-size: 28px; 
font-size: 1.75rem; 
}   
h2 { 
font-size: 22px; 
font-size: 1.375rem; 
}    
p { 
font-size: 14px; 
font-size: 0.875rem; 
}    

Moderne Browser lesen und überschreiben im Rahmen der Kaskade den px-Wert mit dem rem-Wert, ältere hingegen nehmen die px-Anweisung und ignorieren die zweite Zeile. Perfekt.

Links zum Beitrag:

(dpe)

Kategorien
Design HTML/CSS

CSS Ratiocinator und Trashman: Müllabfuhr für Stylesheets?

Es ist ein markiger Slogan, mit dem Joe Nelson aka Begriffs seinen Qualitätsverbesserer für CSS-Stylesheets ins Rennen schickt. „CSS Ratiocinator – because your CSS is garbage“, behauptet er. So, unser CSS ist also Mist, Abfall, Unrat? Neben dem Slogan relativiert Nelson diese Behauptung zwar und wenn man dann tiefer einsteigt, ist man sogar geneigt, ihm – bei allen körperlichen Schmerzen, die diese Erkenntnis verursacht – wenigstens bei stark evolutionär verlaufenden Kundenprojekten teilweise zuzustimmen. Am Ende erkennt man, dass Ratiocinator ein wertvolles Tool ist, dass man nicht mehr missen möchte…

css-ratiocinator-01

CSS-Stylesheets und ihre Tendenz zu verwildern

Ich muss schon sagen, dass ich mich zunächst einer gewissen Verärgerung über Nelsons vollmundige Generalabwertung nicht entziehen konnte. Wer hört schon gern, dass er Abfall produziert, speziell dann, wenn es quasi um die schönen Künste geht… Lässt man sich dann jedoch etwas auf das Thema ein und reflektiert einige seiner älteren Projekte, so, zumindest ging es mir so, erscheint die Aussage zwar noch überzogen, aber nicht an den Haaren herbeigezogen.

Ich betreue verschiedene Projekte, die schon sehr alt sind. Und mit sehr alt meine ich zehn Jahre und älter. Natürlich hatten diese Projekte zum Zeitpunkt der Fertigstellung eine ordentliche Ausstattung mit CSS-Stylesheets. Aus einem Guss waren die, möchte ich behaupten, andere Meinungen mag es da aber auch geben.

css-ratiocinator-02

Mit der Zeit kamen die Veränderungen, wie neues Logo, andere Farben, weitere Serviceangebote, mobile Version und was nicht alles im Laufe der Jahre auf so einer Website passieren kann. Schön, wenn man einen Kunden hat, der bereit ist, auch immer brav die Generalanpassung des Grunddesigns zu bezahlen. Meiner Erfahrung nach ist das jedoch extrem selten der Fall. Und so geschieht, was geschehen muss. Das CSS wird – sagen wir – punktuell und auf die Neuerungen isoliert erweitert.

Dies führt dazu, und das konstatiert Nelson versöhnlicherweise schlussendlich auch, dass das Stylesheet eben nicht mehr aus einem Guss ist, sich Anweisungen teilweise widersprechen, aufheben und/oder unnötig komplex verschachtelt sind, so dass es zu ulkigen Effekten kommen kann.

CSS Ratiocinator schreibt das Stylesheet neu

An dieser Stelle kommt Nelsons Werkzeug CSS Ratiocinator, das er selbst als Code-Quality-Tool bezeichnet, ins Spiel. Der Ratiocinator schreibt ein homogenes Stylesheet völlig neu und berücksichtigt dabei den aktuellen Stand der Technik. Zu diesem Zweck nimmt er nicht etwa das bereits bestehende Stylesheet, analysiert und optimiert es. Vielmehr liest er direkt aus dem DOM und baut daraus ein eigenständiges, die bisherigen Definitionen nur quasi optisch berücksichtigendes Stylesheet zusammen.

Um als Verwender von Ratiocinator zu profitieren, kann man einen von drei Wegen gehen. Um die Prüfung und das Rewriting lokal durchführen zu können, ist es erforderlich PhantomJS zu installieren, das Ratiocinator-Repository zu klonen und dann in PhantomJS aufzurufen. So wird das optimierte CSS erzeugt. Einfacher ist der Weg über ein JavaScript, das als Bookmarklet hinterlegt wird und den gleichen Effekt erzielen soll. Dieser Weg hat jedoch in meinen Tests nicht sauber funktioniert.

css-ratiocinator-03

Die einfachste Methode, die auch die wenigsten manuellen Zwischenschritte benötigt, stellt der Aufruf der zu optimierenden Website über deren URL im Webservice CSS Trashman dar. Dieser Weg ist für ältere Projekte, die auch den Hauptanwendungsfall darstellen dürften, natürlich gangbar. In Entwicklung befindliche Seiten, die nur lokal existieren, sollten über den PhantomJS-Weg behandelt werden.

css-trashman-results

Der Webservice CSS Trashman integriert neben Ratiocinator auch direkt das Tool Sass-Convert, bietet mithin als Ergebnis nicht nur ein optimiertes CSS, sondern auch ein optimiertes Sass-File an. Die Möglichkeit, sich Seite an Seite das bisherige und das neue CSS anzeigen zu lassen, ist zwar schon vorgesehen, aber noch nicht funktional.

CSS Ratiocinator steht unter der liberalen MIT Lizenz sowohl für private, wie auch kommerzielle Zwecke zum Download auf Github bereit. Das Tool wird auf jeden Fall einen Stammplatz in meinem Werkzeugkasten bekommen und wenn es letztlich nur dazu dient, eine zweite Meinung einzuholen.

Links zum Beitrag:

Kategorien
Design HTML/CSS Responsive Design

Focal Point: Intelligentes Beschneiden von Bildern in responsivem Webdesign

Responsives Webdesign zielt darauf, dass eine Website dank unterschiedlicher Layouts auf verschieden großen Displays ordentlich dargestellt wird. Bilder werden dabei in der Regel auf eine bestimmte Breite herunterskaliert. Gerade bei detailreichen Darstellungen kann es dann schon mal vorkommen, dass ein Bild schlecht erkennbar erscheint. Das CSS-Framework Focal Point sorgt für ein intelligentes Beschneiden von Bildern ab bestimmten Größen, damit nur ein Ausschnitt des Bildes – der aber dafür größer – angezeigt wird.


Beispiel für die Festlegung des Focal Point

Da sich der inhaltliche Mittelpunkt eines Bildes nicht immer in der tatsächlichen Bildmitte befindet, kann es passieren, dass nach dem Beschneiden eines Bildes ein wichtiger Bildbestandteil außerhalb des Bildes liegt. Mit Focal Point wird ein Bereich definiert, der den inhaltlichen Fokus eines Bildes darstellt und beim Beschneiden des Bildes auf jeden Fall erhalten bleiben soll.

Focal Point festlegen

Das Prinzip von Focal Point ist einfach: Jedes Bild wird in Raster von zwölf mal zwölf Einheiten unterteilt. Per CSS definiert man nun eine Einheit des Rasters als inhaltlichen Mittelpunkt, den Focal Point. Ist beispielsweise auf einem Bild eine Person abgebildet, lässt sich der Kopf dieser Person als Focal Point definieren. Selbst wenn sich diese Person am Bildrand befindet, fällt sie der Bildbeschneidung nicht zum Opfer.

Um den Focal Point festzulegen, weist man dem Bild zwei Klassen zu, welche die horizontale und vertikale Position des Focal Point innerhalb des Rasters angeben. Gezählt wird von der Rastermitte. Es gibt daher je sechs Klassen, die nach oben, unten, rechts und links zählen.

<div class="focal-point left-3 up-2">
 <div>
   <img src="bild.jpg" width="400" height="300" alt="" />
 </div>
</div>

Im Beispiel wird der Focal Point drei Rastereinheiten nach links und zwei nach oben festgelegt. Die Angabe der Klasse „focal-point“ ist ebenso obligatorisch, wie der zusätzliche DIV-Container um das Bild.

Standardmäßig beschneidet das Framework ein Bild, sobald das Browserfenster kleiner als 767 Pixel ist. Dieser Wert kann in der übersichtlichen Stylesheet-Datei aber leicht angepasst werden.

Funktionsweise von Focal Point

Die Funktionsweise ist leicht erklärt: Über die unterschiedlichen CSS-Klassen wird das Bild über negative margin-Werte beschnitten. Als Einheit wird em verwendet. Die besten Ergebnisse werden erzielt, wenn das Bild ein Seitenverhältnis von 4:3 im Querformat hat. Für hochformatige Bilder im Verhältnis 3:4 sollte die zusätzliche Klasse portrait vergeben werden.

Fazit: Focal Point verfolgt einen interessanten Ansatz für eine bessere Darstellung von Bildern bei kleinen Auflösungen. Das Framework besteht zudem nur aus einer einzelnen, dabei sehr übersichtlichen CSS-Datei und ist daher schnell angewendet.

(dpe)

Kategorien
Design HTML/CSS

CSS: Scrollleisten in Chrome individuell gestalten

Vom Internet Explorer kannte man die Möglichkeit bereits, die Scrollleisten des Browsers individuell anzupassen. Bereits seit der uralten Version 5.5 ist es möglich, die Farbe der Leiste und ihrer Bestandteile zu ändern. Mittlerweile erlauben Webkit-Browser (beispielsweise Chrome und Safari) ebenfalls, die Leisten zu individualisieren. Allerdings geht Webkit hier noch einen Schritt weiter – nicht nur die Farbe lässt sich ändern.


Beispiele für individuelle Scrollleisten

Farbe, Breite, Rahmen

Verschiedene Pseudoelemente können verwendet werden, um alle Bestandteile der Scrollleiste ganz individuell zu gestalten. Wie bei normalen HTML-Elementen auch besteht die Möglichkeit, die Hintergrund- und Vordergrundfarbe sowie den Rahmen anzupassen. Selbst gepunktete und abgerundete Scrollbar-Tracks sowie Hintergrundgrafiken können erstellt bzw. implementiert werden.

Folgende Pseudoelemente stehen zum Anpassen zur Verfügung:

::-webkit-scrollbar { } /* gesamte Scrolleiste */
::-webkit-scrollbar-button { } /* Pfeil-Buttons */
::-webkit-scrollbar-track { } /* Bereich für den Schieberegler */
::-webkit-scrollbar-thumb { } /* Schieberegler */
::-webkit-scrollbar-corner { } /* Größenregler (bei TEXTAREA sichtbar) */

Wie gewöhnliche HTML-Elemente kann man die einzelnen Pseudoelemente nun gestalten:

::-webkit-scrollbar {
  width: 20px;
  background: yellow;
}
::-webkit-scrollbar-thumb {
  border: 2px dotted green;
  border-radius: 10px;
}

Das Beispiel färbt den gesamten Bereich für die Scrollbar gelb ein und setzt ihn auf eine Breite von 20 Pixel. Der Schieberegler wird mit einer grünen gepunkteten Linie versehen und erhält abgerundete Ecken. Zusätzlich kann man mit entsprechenden Pseudoklassen das Aussehen bei Interaktion mit der Maus verändern:

::-webkit-scrollbar-thumb:hover {
  background: red;
}
::-webkit-scrollbar-thumb:active {
  background: blue;
}

Nur eine Sache beherrschen die Pseudoelemente nicht: Es lassen sich keine CSS3-Transitions anwenden. Weiche Übergänge zwischen den Zuständen („hover“ und „active“) sind – zumindest derzeit – nicht möglich. Ansonsten sind der Kreativität keine Grenzen gesetzt. Von dezent bis schillernd bunt ist alles machbar.

Zusätzliche Pseudoklassen

Wer möchte, kann mit zusätzlichen Pseudoklassen das Aussehen weiter individualisieren. So gibt es die Klasse „:inactive-window“, mit der das Aussehen jedes Pseudoelementes für ein inaktives Fenster angepasst werden kann. Die beiden Klassen „:horizontal“ und „:vertical“ erlauben die unterschiedliche Gestaltung horizontaler und vertikaler Leisten:

::-webkit-scrollbar-thumb:horizontal {
  height: 12px;
}

Fazit: Gerade für mehrzeilige Formularfelder ist es schön, wenn diese gestalterisch ans Seitenlayout angepasst werden können. Hier bieten die Webkit-Browser mit den Pseudoelementen interessante Möglichkeiten.

(dpe)