AKTUELLE REVOLUTIONEN IN DER 
FRONTEND-ENTWICKLUNG
KOMPONENTENBASIERTE 
FRONTEND-ENTWICKLUNG
KOMPONENTENBASIERTE 
FRONTEND-ENTWICKLUNG
DAS BIN ICH 
Christian Reichel 
studiert Mensch-Computer Interaktion 
an der Uni Hamburg 
Werkstudent bei eparo GmbH 
Them...
GLIEDERUNG 
1. Ich hol’ euch dann mal ab! 
1. Was ist HTML? 
2. Was ist CSS? 
2. Das Problem: Riesen Projekte 
3. Die Lösu...
WAS IST 
HTML?
WAS IST HTML?
WAS IST HTML?
WAS IST HTML?
WAS IST HTML?
WAS IST HTML? 
Headline 1 
Non eram nescius, Brute, cum, quae summis ingeniis 
exquisitaque doctrina philosophi Graeco ser...
WAS IST HTML? 
Headline 1 
Non eram nescius, Brute, cum, quae summis ingeniis 
exquisitaque doctrina philosophi Graeco ser...
WAS IST HTML? 
Anfang 
Rumpf 
Ende
WAS IST HTML? 
<p> 
Warum sollte man sich 
diesen Vortrag als User 
Experience Experte oder 
Interaktionsdesigner 
antun? ...
WAS IST 
CSS?
WAS IST CSS? 
Headline 1 
Non eram nescius, Brute, cum, quae summis ingeniis 
exquisitaque doctrina philosophi Graeco serm...
WAS IST CSS? 
Headline 1 
Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco 
serm...
WAS IST CSS? 
Headline 1 
Non eram nescius, Brute, 
cum, quae summis ingeniis 
exquisitaque doctrina 
philosophi Graeco se...
WAS IST CSS? 
Selektoren 
Eigenschaften
WAS IST CSS? 
p 
{ 
color: rgb(85, 85, 85); 
font-family: Gafata, sans-serif; 
font-size: 18px; 
}
DAS PROBLEM: 
RIESEN PROJEKTE
WO IST DAS PROBLEM? 
HTML CSS 
Selektoren 
Eigenschaften 
Anfang 
Rumpf 
Ende
WO IST DAS PROBLEM? 
CSS 
Selektoren 
Eigenschaften 
HTML 
Anfang 
Anfang 
Rumpf 
Rumpf 
Ende 
Ende 
Selektoren 
Eigenscha...
WO IST DAS PROBLEM? 
HTML CSS 
Selektoren 
Eigenschaften 
Anfang 
Anfang 
Anfang 
Rumpf 
Ende 
Ende 
Selektoren 
Eigenscha...
HTML CSS Datei 1 
Selektoren 
Eigenschaften 
Anfang 
Anfang 
Anfang 
Rumpf 
Ende 
Ende 
Selektoren 
Eigenschaften 
Selekto...
HTML CSS Datei 1 
Selektoren 
Eigenschaften 
Anfang 
Anfang 
Anfang 
Rumpf 
Ende 
Ende 
Selektoren 
Eigenschaften 
Selekto...
HTML CSS Datei 1 
Selektoren 
Eigenschaften 
Anfang 
Anfang 
Anfang 
Rumpf 
Ende 
Ende 
Selektoren 
Eigenschaften 
Selekto...
HTML CSS Datei 1 
Selektoren 
Eigenschaften 
Anfang 
Anfang 
Anfang 
Rumpf 
Ende 
Selektoren 
Eigenschaften 
Selektoren 
E...
DIE LÖSUNG: 
PRECOMPILING
ÜBERSETZEN 
100101010101 
010101010101 
010110100101 
000101010010 
101011010010 
100010101000 
101 
… 
HTML-Datei 
CSS-Da...
ÜBERSETZEN 
100101010101 
010101010101 
010110100101 
000101010010 
101011010010 
100010101000 
101 
… 
HTML-Datei 
CSS-Da...
VORÜBERSETZUNG 
HTML-Datei 
CSS-Datei 
CSS-Datei 
PRECOMPILER 
HTML-Datei 
CSS-Datei
DIE IDEE 
Headline 1 
Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque 
doctrina philosophi Graeco sermone ...
DIE IDEE 
Headline 1 
Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque 
doctrina philosophi Graeco sermone ...
TOOLS
DIE TOOLS 
1. SPRACHEN
LESS & SASS 
Selektoren 
Eigenschaften 
Selektoren 
Eigenschaften
LESS & SASS 
Selektoren 
Selektoren Eigenschaften 
Eigenschaften 
Eigenschaften 
Selektoren 
Selektoren 
Eigenschaften
LESS & SASS 
Selektoren 
Selektoren 
Selektoren 
Eigenschaften 
Eigenschaften 
Eigenschaften 
Selektoren 
Eigenschaften 
S...
LESS & SASS 
Selektoren 
Selektoren 
Eigenschaften 
Eigenschaften 
Selektoren 
Eigenschaften 
Selektoren 
Eigenschaften 
S...
DIE TOOLS 
2. PRECOMPILER FÜR CSS 
CodeKit Hammer 
Wird ständig weiterentwickelt ???
DIE TOOLS 
2. PRECOMPILER FÜR CSS 
ONLY FOR MAC 
CodeKit Hammer 
Wird ständig weiterentwickelt ???
DIE TOOLS 
2. PRECOMPILER FÜR HTML 
Hammer 
???
DIE TOOLS 
2. PRECOMPILER FÜR HTML 
HTML-Datei 
HTML-Datei 
HTML-Datei 
PRECOMPILER 
HTML-Datei
DIE IDEE 
Headline 1 
Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque 
doctrina philosophi Graeco sermone ...
Wolf Brüning: Large Scale Interaction Pattern Library (UX Roundtable, Oktober 2013) 
http://uxhh.de/roundtable/archiv/inde...
DIE STRUKTUR: 
ATOMIC DESIGN
ATOMIC DESIGN 
Atomic Design 
Von: Brad Frost 
Beyond Tellerrand Düsseldorf, 2013
ATOMIC DESIGN 
A D V A N C E D 
Atomic Design 
Von: Brad Frost 
Beyond Tellerrand Düsseldorf, 2013
PROTON
PROTON
KERN
KERN
ATOM
ATOM
MOLEKÜLE
MOLEKÜLE
ORGANISMEN
ORGANISMEN
TEMPLATES 
ORGANISMEM
TEMPLATES 
ORGANISMEM
SEITEN
ATOMIC DESIGN 
A D V A N C E D 
PROTON KERN ATOM MOLEKÜLE ORGANISMEN
ATOMIC DESIGN 
A D V A N C E D 
PROTON KERN ATOM MOLEKÜLE ORGANISMEN 
TEMPLATES SEITEN
DANKE! 
Twitter: @_Mr_Spike_ 
Xing: Christian Reichel
WEITERE ANGESPROCHENE THEMEN 
HAML 
http://haml.info 
SMACSS 
https://smacss.com 
CodePen 
http://codepen.io 
Bourbon.io 
...
UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung
UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung
UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung
Nächste SlideShare
Wird geladen in …5
×

UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung

876 Aufrufe

Veröffentlicht am

In der aktuellen Frontend-Entwicklung passiert gerade furchtbar viel. Gefühlt kommt jeden Tag ein neues Tool in's Netz, das die Welt des Entwicklers vereinfachen soll.

Vor allen bei Riesen Projekten muss aber etwas passieren. Die komponentenbasierte Frontend-Entwicklung ist ein Ansatz, wie man 10.000-Zeilen große CSS-Dateien und unhandliche HTML-Prototypen durch Precompiling in kleine Komponenten aufteilen kann. Dabei orientieren sich die Komponenten an dem Prinzip, wie wir auch sonst Webseiten konzipieren.

Wie strukturiert man allerdings die ganzen Komponenten nun? Und wann teilt man Komponenten auf? Eine Antwort könnte eine Erweiterung des Atomic Design von Brad Frost sein. Durch die Erweiterung durch Protonen und Atomkern erhält das Strukturkonzept zwei kleinere Strukturierungen, die nicht nur SASS-Functions, -Mixins und -Variablen beinhalten, sondern auch Kernelemente wie die Typografie oder Formularfelder übertragbar auf jedes weitere Projekt einbinden lassen. Somit ist die Entwicklung eines HTML-Dummies nicht nur näher an der Konzeption, sondern auch modular und vielfältig erweiterbar. Dadurch können am Ende Webseiten innerhalb einiger Minuten entwickelt werden.

Veröffentlicht in: Präsentationen & Vorträge
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung

  1. 1. AKTUELLE REVOLUTIONEN IN DER FRONTEND-ENTWICKLUNG
  2. 2. KOMPONENTENBASIERTE FRONTEND-ENTWICKLUNG
  3. 3. KOMPONENTENBASIERTE FRONTEND-ENTWICKLUNG
  4. 4. DAS BIN ICH Christian Reichel studiert Mensch-Computer Interaktion an der Uni Hamburg Werkstudent bei eparo GmbH Themen: Interaktionsdesign, Visuelle Gestaltung, Webentwicklung, UX
  5. 5. GLIEDERUNG 1. Ich hol’ euch dann mal ab! 1. Was ist HTML? 2. Was ist CSS? 2. Das Problem: Riesen Projekte 3. Die Lösung: Precompiling 4. Tools 5. Die Struktur: Atomic Design Advanced
  6. 6. WAS IST HTML?
  7. 7. WAS IST HTML?
  8. 8. WAS IST HTML?
  9. 9. WAS IST HTML?
  10. 10. WAS IST HTML?
  11. 11. WAS IST HTML? Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.
  12. 12. WAS IST HTML? Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.
  13. 13. WAS IST HTML? Anfang Rumpf Ende
  14. 14. WAS IST HTML? <p> Warum sollte man sich diesen Vortrag als User Experience Experte oder Interaktionsdesigner antun? Ganz einfach: Interdisziplinarität rockt! </p>
  15. 15. WAS IST CSS?
  16. 16. WAS IST CSS? Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.
  17. 17. WAS IST CSS? Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.
  18. 18. WAS IST CSS? Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc
  19. 19. WAS IST CSS? Selektoren Eigenschaften
  20. 20. WAS IST CSS? p { color: rgb(85, 85, 85); font-family: Gafata, sans-serif; font-size: 18px; }
  21. 21. DAS PROBLEM: RIESEN PROJEKTE
  22. 22. WO IST DAS PROBLEM? HTML CSS Selektoren Eigenschaften Anfang Rumpf Ende
  23. 23. WO IST DAS PROBLEM? CSS Selektoren Eigenschaften HTML Anfang Anfang Rumpf Rumpf Ende Ende Selektoren Eigenschaften
  24. 24. WO IST DAS PROBLEM? HTML CSS Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Rumpf Ende
  25. 25. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf Ende WO IST DAS PROBLEM? CSS Datei 2
  26. 26. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf Ende WO IST DAS PROBLEM? CSS Datei 2 Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.
  27. 27. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf Ende WO IST DAS PROBLEM? CSS Datei 2
  28. 28. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf Ende WO IST DAS PROBLEM? CSS Datei 2 Wolf Brüning: Large Scale Interaction Pattern Library (UX Roundtable, Oktober 2013) http://uxhh.de/roundtable/archiv/index.html#Okt13
  29. 29. DIE LÖSUNG: PRECOMPILING
  30. 30. ÜBERSETZEN 100101010101 010101010101 010110100101 000101010010 101011010010 100010101000 101 … HTML-Datei CSS-Datei Browser
  31. 31. ÜBERSETZEN 100101010101 010101010101 010110100101 000101010010 101011010010 100010101000 101 … HTML-Datei CSS-Datei COBMroPwILsEerR
  32. 32. VORÜBERSETZUNG HTML-Datei CSS-Datei CSS-Datei PRECOMPILER HTML-Datei CSS-Datei
  33. 33. DIE IDEE Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent. HTML CSS
  34. 34. DIE IDEE Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent. header HTML header CSS main navigation HTML main navigation CSS main HTML main CSS
  35. 35. TOOLS
  36. 36. DIE TOOLS 1. SPRACHEN
  37. 37. LESS & SASS Selektoren Eigenschaften Selektoren Eigenschaften
  38. 38. LESS & SASS Selektoren Selektoren Eigenschaften Eigenschaften Eigenschaften Selektoren Selektoren Eigenschaften
  39. 39. LESS & SASS Selektoren Selektoren Selektoren Eigenschaften Eigenschaften Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften
  40. 40. LESS & SASS Selektoren Selektoren Eigenschaften Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften
  41. 41. DIE TOOLS 2. PRECOMPILER FÜR CSS CodeKit Hammer Wird ständig weiterentwickelt ???
  42. 42. DIE TOOLS 2. PRECOMPILER FÜR CSS ONLY FOR MAC CodeKit Hammer Wird ständig weiterentwickelt ???
  43. 43. DIE TOOLS 2. PRECOMPILER FÜR HTML Hammer ???
  44. 44. DIE TOOLS 2. PRECOMPILER FÜR HTML HTML-Datei HTML-Datei HTML-Datei PRECOMPILER HTML-Datei
  45. 45. DIE IDEE Headline 1 Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent. Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent. header HTML header CSS main navigation HTML main navigation CSS main HTML main CSS
  46. 46. Wolf Brüning: Large Scale Interaction Pattern Library (UX Roundtable, Oktober 2013) http://uxhh.de/roundtable/archiv/index.html#Okt13
  47. 47. DIE STRUKTUR: ATOMIC DESIGN
  48. 48. ATOMIC DESIGN Atomic Design Von: Brad Frost Beyond Tellerrand Düsseldorf, 2013
  49. 49. ATOMIC DESIGN A D V A N C E D Atomic Design Von: Brad Frost Beyond Tellerrand Düsseldorf, 2013
  50. 50. PROTON
  51. 51. PROTON
  52. 52. KERN
  53. 53. KERN
  54. 54. ATOM
  55. 55. ATOM
  56. 56. MOLEKÜLE
  57. 57. MOLEKÜLE
  58. 58. ORGANISMEN
  59. 59. ORGANISMEN
  60. 60. TEMPLATES ORGANISMEM
  61. 61. TEMPLATES ORGANISMEM
  62. 62. SEITEN
  63. 63. ATOMIC DESIGN A D V A N C E D PROTON KERN ATOM MOLEKÜLE ORGANISMEN
  64. 64. ATOMIC DESIGN A D V A N C E D PROTON KERN ATOM MOLEKÜLE ORGANISMEN TEMPLATES SEITEN
  65. 65. DANKE! Twitter: @_Mr_Spike_ Xing: Christian Reichel
  66. 66. WEITERE ANGESPROCHENE THEMEN HAML http://haml.info SMACSS https://smacss.com CodePen http://codepen.io Bourbon.io http://bourbon.io Compass http://compass-style.org Atlassian Styleguide https://design.atlassian.com/latest/ Kulturbanause http://kulturbanause.de Emmet http://emmet.io

×