Der moderne Workflow -
vom Photoshop zum HTML

Workshop für Designer & Developer - Lisa Gringl

Warum Noch immer Photoshop?

Wunsch

Designer = Developer
Designen in HTML

Realität

Designer und Programmierer getrennt
Kunden können sich ohne Photoshop nichts vorstellen
Schwierigkeiten Designen während dem Coden

AGENDA

Webfonts
Iconfont vs. SVG
Sass & SMACSS
Compass vs. Autoprefixer
BEM
Tools

Yeoman
Grunt
Bower

Hands on
Extra Tools

Webfonts

Free:

Google Webfonts (Link)
FontSquirrel (@font-face Generator)

Kostenpflichtig (hosted/self-hosted):

Typekit (integriert in Adobe CC für Preview)
myFonts.com
Fontspring
...

Webfonts (Tipps)

Einbindung über @font-face:

@font-face {   
font-family: 'MyWebFont';   src: url('webfont.eot'); /* IE9 Compat Modes */   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('webfont.woff') format('woff'), /* Modern Browsers */        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

IE Bug

src: local('☺')

Iconfont vs. SVG

Iconfont

SVG

Darstellung

Als Text interpretiert (anti-aliased)

Vektor

CSS Kontrolle

Ein Element (Größe über font size)

Einzelne Elemente modifizierbar

Positionierung

Wie Text (über Pseudo-Element), über line-height, vertical-align, word-spacing

Behält die Größe, Normale Positionierung

Fehler

Cross Domain-Loading, Schriftenladefehler, Windows Phone Browser hat keinen Support, Chrome-Fallback Font Bug

Wenn der Browser SVG unterstützt wird es normal angezeigt

Semantik

Über ein Pseudo Element (leeres <span>)

<svg> Tag

Erstellung

Erstellung einer eigenen Font etwas mühsam (Tools: IcoMoon, Pictos)

SVG exportieren

Browser Support

Bis IE6

IE8-, Android 2.3-

SASS & SMACSS

= Syntactically Awesome Stylesheet

=Scalable and Modular Architecture of CSS

Sass

CSS Preprocessor
macht CSS dynamisch
Variablen, Funktionen, Mixins, ...

SMACSS

Guidelines für modulare Struktur
wiederverwendbar
skalierbar

Struktur SASS nach SMACSS

stylesheets/
|
|-- _base.scss           # Partial Base Rules, can include all variables
|-- _layout.scss         # Partial Layout Rules
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _message.scss     # Module name
|   |-- _buttons.scss      # Etc...
|   ...
|
|-- _state.scss  	# Partial State Rules	
|-- _theme.scss  	# Partial Theme Rules	
|
`-- main.scss             # primary Sass file, include all Partials

Compass VS. Autoprefixer

Autoprefixer

Postprocessor CSS
fügt Browser Prefixes hinzu
basiert auf der Tabelle von Can I Use
CSS wird von alten Prefixes gesäubert
Input und Output Pfad setzten
auch mit Preprocessor anwendbar (Sass, LESS, ...)
Debugging: Javascript-Console oder Console (Terminal)
neues Projekt: Update von Autoprefixer

Compass VS. AutoPrefixer

Vorteile Autoprefixer:

Schneller als Compass
W3C Syntax
Auswahl der zu unterstützenden Browser

last 2 version, "Explorer 7"

BEM

= Block, Element, Modifier

Bennung der CSS Klassen
An objektorientierung angelehnt
Block (zb. nav)
Element (zb. nav__item)
Modifier (zb. nav__item--active)


            
                Index
                Products
                Contact

BEM

Vorteile

abstrakt & modular
Gut skalierbar
Gut wartbar
an verschiedenen Stellen benutzbar

Nachteile

Lange Klassennamen
Ungewohnte Schreibweise (-- __)

TOOLs


Baugerüst für Webapp Beinhaltet Grunt & Bower	Task Runner basiert auf Node.js automatisiert im Hintergrund	Package Manager Download und Integration zB. (jQuery)