UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung
Report
Share
•0 likes•1,132 views
UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung
•0 likes•1,132 views
Report
Share
Download to read offline
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.
More Related Content
Viewers also liked
Viewers also liked(20)
UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung
- 1. AKTUELLE REVOLUTIONEN IN DER FRONTEND-ENTWICKLUNG
- 4. DAS BIN ICH Christian Reichel studiert Mensch-Computer Interaktion an der Uni Hamburg Werkstudent bei eparo GmbH Themen: Interaktionsdesign, Visuelle Gestaltung, Webentwicklung, UX
- 8. 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
- 10. WAS IST HTML?
- 11. WAS IST HTML?
- 12. WAS IST HTML?
- 13. WAS IST HTML?
- 14. 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.
- 15. 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.
- 16. WAS IST HTML? Anfang Rumpf Ende
- 17. WAS IST HTML? <p> Warum sollte man sich diesen Vortrag als User Experience Experte oder Interaktionsdesigner antun? Ganz einfach: Interdisziplinarität rockt! </p>
- 18. WAS IST CSS?
- 19. 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.
- 20. 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.
- 21. 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
- 22. WAS IST CSS? Selektoren Eigenschaften
- 23. WAS IST CSS? p { color: rgb(85, 85, 85); font-family: Gafata, sans-serif; font-size: 18px; }
- 24. DAS PROBLEM: RIESEN PROJEKTE
- 25. WO IST DAS PROBLEM? HTML CSS Selektoren Eigenschaften Anfang Rumpf Ende
- 26. WO IST DAS PROBLEM? CSS Selektoren Eigenschaften HTML Anfang Anfang Rumpf Rumpf Ende Ende Selektoren Eigenschaften
- 27. WO IST DAS PROBLEM? HTML CSS Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Rumpf Ende
- 28. 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
- 29. 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.
- 30. 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
- 31. 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
- 33. ÜBERSETZEN 100101010101 010101010101 010110100101 000101010010 101011010010 100010101000 101 … HTML-Datei CSS-Datei Browser
- 34. ÜBERSETZEN 100101010101 010101010101 010110100101 000101010010 101011010010 100010101000 101 … HTML-Datei CSS-Datei COBMroPwILsEerR
- 35. VORÜBERSETZUNG HTML-Datei CSS-Datei CSS-Datei PRECOMPILER HTML-Datei CSS-Datei
- 36. 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
- 37. 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
- 38. TOOLS
- 39. DIE TOOLS 1. SPRACHEN
- 40. LESS & SASS Selektoren Eigenschaften Selektoren Eigenschaften
- 41. LESS & SASS Selektoren Selektoren Eigenschaften Eigenschaften Eigenschaften Selektoren Selektoren Eigenschaften
- 42. LESS & SASS Selektoren Selektoren Selektoren Eigenschaften Eigenschaften Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften
- 43. LESS & SASS Selektoren Selektoren Eigenschaften Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften
- 44. DIE TOOLS 2. PRECOMPILER FÜR CSS CodeKit Hammer Wird ständig weiterentwickelt ???
- 45. DIE TOOLS 2. PRECOMPILER FÜR CSS ONLY FOR MAC CodeKit Hammer Wird ständig weiterentwickelt ???
- 46. DIE TOOLS 2. PRECOMPILER FÜR HTML Hammer ???
- 47. DIE TOOLS 2. PRECOMPILER FÜR HTML HTML-Datei HTML-Datei HTML-Datei PRECOMPILER HTML-Datei
- 48. 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
- 49. Wolf Brüning: Large Scale Interaction Pattern Library (UX Roundtable, Oktober 2013) http://uxhh.de/roundtable/archiv/index.html#Okt13
- 50. DIE STRUKTUR: ATOMIC DESIGN
- 51. ATOMIC DESIGN Atomic Design Von: Brad Frost Beyond Tellerrand Düsseldorf, 2013
- 52. ATOMIC DESIGN A D V A N C E D Atomic Design Von: Brad Frost Beyond Tellerrand Düsseldorf, 2013
- 53. PROTON
- 54. PROTON
- 55. KERN
- 56. KERN
- 57. ATOM
- 58. ATOM
- 59. MOLEKÜLE
- 60. MOLEKÜLE
- 61. ORGANISMEN
- 62. ORGANISMEN
- 65. SEITEN
- 66. ATOMIC DESIGN A D V A N C E D PROTON KERN ATOM MOLEKÜLE ORGANISMEN
- 67. ATOMIC DESIGN A D V A N C E D PROTON KERN ATOM MOLEKÜLE ORGANISMEN TEMPLATES SEITEN
- 68. DANKE! Twitter: @_Mr_Spike_ Xing: Christian Reichel
- 69. 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
Editor's Notes
- Ich wurde am Freitag gefragt, ob ich bei ToughWorks arbeite, bis ich der Person sagte, dass das der Veranstaltungsort ist :-)
- Heute geht es darum, wie man eine Frontend-Version einer Webseite…
- … mithilfe von einer Methode namens Precompiling zerlegen kann…
- … um mit diesen und weiteren Bausteinen schnell neue Webseiten bauen zu können.
- Um zu verstehen, wie das ganze überhaupt funktioniert, müssen wir einen kleinen Schritt zurück gehen und nochmal gaaaaanz kurz erklären, was HTML und CSS ist. Dann sieht man recht schnell wo das Problem von diesen Sprachen ist und wie und mit welchen Tools man die Sprache dann zerlegen kann. Struktur - wichtiges Thema, um überhaupt dann mit seinen Bausteinen klar zu kommen.
- HTML ist die Auszeichnungssprache, die für die Strukturierung von Webseiten eingesetzt wird.
- HTML ist die Auszeichnungssprache, die für die Strukturierung von Webseiten eingesetzt wird.
- HTML ist die Auszeichnungssprache, die für die Strukturierung von Webseiten eingesetzt wird.
- HTML ist die Auszeichnungssprache, die für die Strukturierung von Webseiten eingesetzt wird.
- HTML ist die Auszeichnungssprache, die für die Strukturierung von Webseiten eingesetzt wird.
- Durch Hierarchien kann man dann direkt die Struktur kleinteiliger strukturieren.
- Im Quellcode sieht HTML dann so aus, dass man einen Anfang, einen Rumpf und ein Ende hat.
- So sieht das dann im Code aus.
- CSS ist hingegen dafür zuständig, die in HTML erstellte Struktur zu gestalten.
- CSS ist hingegen dafür zuständig, die in HTML erstellte Struktur zu gestalten.
- CSS ist hingegen dafür zuständig, die in HTML erstellte Struktur zu gestalten.
- CSS wird durch so genannte Selektoren und einen Rumpf aus Eigenschaften umgesetzt. Mit dem Selektoren wählt man durch die Angabe des Namen das jeweilige Element aus, das man gestalten möchte.
- Im Rumpf stehen dann die Gestaltungsregeln
- Jetzt kommen wir zum Problem. Für ein Frontend-Projekt fange ich üblicherweise mit einer HTML und einer CSS-Datei an.
- Während ich HTML verschachteln kann, wird alles, was ich gestalten möchte, einfach in die CSS-Datei rein geklatscht - ohne Hierarchie-Informationen.
- Je größer das Projekt wird, desto unübersichtlicher wird das Ganze.
- Während man CSS-Code in einzelne Dateien aufsplitten kann, ist das mit HTML unmöglich. Und auch mit CSS kann man das nur bedingt weit treiben.
- Die Darstellung im Code ist immer noch so ziemlich von dem entfernt, wie wir Webseiten konzipieren. Es ist weit weg von Bausteinen oder Komponenten.
- Aber wenn wir Webseiten konzipieren, lassen wir uns gerne von einzelnen Bausteinen in Apps oder Webseiten inspirieren.
- … oder benutzen selbst eine Pattern Library - wie Otto die firmeneigene CoPaLi.
- Wir brauchen also irgendwas, was es uns ermöglicht, unser Design in Komponenten aufzuteilen, und was uns diese Komponenten am Ende wieder zusammen setzt.
- Bereits unser Browser arbeitet mit Komponenten. Diese werden übersetzt in Maschinencode, sodass die Webseite am Ende so dargestellt wird, wie es geplant ist.
- Diesen Vorgang nennt man auch: Compiling.
- Sowas ähnliches brauchen wir also auch, damit wir mit mehreren Komponenten arbeiten können. Wir brauchen einen Precompiler, der unsere Komponenten dann übersetzt.
- Wir können nun also unsere starren HTML- und CSS-Dateien
- …in verschiedene Komponenten aufteilen.
- Jetzt haben wir geklärt, wie das ganze theoretisch funktioniert. Für die Praxis brauchen wir allerdings noch den Precompiler selbst, als auch die Sprache, die dann übersetzt werden soll.
- Für CSS gibt es zwei Spracherweiterungen: SASS und LESS
- Beide ermöglichen Hierarchien unter den einzelnen Selektoren….
- Beide ermöglichen Hierarchien unter den einzelnen Selektoren….
- Beide ermöglichen Hierarchien unter den einzelnen Selektoren….
- … aber auch das Auftrennen von Selektoren in einzelne Bausteine.
- Es gibt zwei große Precompiler für CSS-Erweiterungen: CodeKit und Hammer. Während CodeKit ständig weiter entwickelt wird, ist das Entwicklerteam von Hammer irgendwie untergetaucht…
- Beide sind leider für Mac. Es gibt noch einen Precompiler namens Koala - der läuft auf Windows.
- Jetzt haben wir also eine Sprache und einen Precompiler für CSS. Um unsere Webseite komponentenweise aufzutrennen brauchen wir noch einen Precompiler für HTML-Dateien. Und das erledigt für uns Hammer.
- Durch Hammer ist es möglich, dass wir mehrere HTML-Dateien bauen - für die Slideshow, für den Footer, etc. - und dann in eine HTML-Datei zusammenfügen lassen.
- Damit haben wir also auch die technische Voraussetzung für unsere eigene codebasierte Pattern Library. Damit können wir nun unsere 16.000 Codezeilen auf mehrere Komponenten - oder Patterns - verteilen.
- Jetzt ist natürlich die Frage: wie strukturiert man das Ganze? Und wie kleinteilig kann / sollte man das machen? Wolf Brüning hatte mal gesagt, es gibt Bausteine und Komponenten. Dann gäbe es höchstens noch Komposition - also die Verbindung einzelner Komponenten. Aber irgendwann hört’s auch hier auf.
- Eine Idee, wie man das Ganze strukturieren kann, wäre der atomare Aufbau von Organismen.
- Brad Frost hat das Atomic Design das erste Mal auf der Beyond Tellerrand Konferenz in Düsseldorf vorgestellt.
- Wir werden heute eine kleine erweiterte Variante kennen lernen.
- Die kleinste Stufe ist das Proton. Hier sind sämtliche Helfer-Funktionen drin. SASS ermöglicht auch Variablen. Die kommen auch da rein.
- Die kleinste Stufe ist das Proton. Hier sind sämtliche Helfer-Funktionen drin. SASS ermöglicht auch Variablen. Die kommen auch da rein.
- Der Kern enthält alle Kernelemente wie Buttons, Formularfelder oder wie die Typografie. Alles, was sich so gut wie nie ändert, kommt da rein.
- Der Kern enthält alle Kernelemente wie Buttons, Formularfelder oder wie die Typografie. Alles, was sich so gut wie nie ändert, kommt da rein.
- Das Atom ist das kleinste spezifische Teilchen. Es ist sozusagen das kleinste Teilchen der Webseite, die man bauen möchte. Hier können auch Buttons näher spezifiziert werden.
- Das Atom ist das kleinste spezifische Teilchen. Es ist sozusagen das kleinste Teilchen der Webseite, die man bauen möchte. Hier können auch Buttons näher spezifiziert werden.
- Moleküle werden zusammen gesetzt aus Atomen - und genauso ist es gedacht. Es sind zusammengesetzte Komponenten, die auch meist einen bestimmten Zweck erfüllen.
- In dem Falle können es für den Newsletter-Bereich eine Zusammensetzung aus dem Formularfeld und dem Absende-Button sein.
- Organismen sind wiederum zusammen gesetzt aus Molekülen und bilden einen Teilbereich der Webseite ab.
- Hier wird gerne der Header, Footer oder Content-Bereich der Webseite definiert.
- Templates sind die Blaupausen für die resultierenden Seiten. Meistens beinhalten sie sämtliche Vorstufen vom Proton bis zu den einzelnen Organismen.
- In diesem Falle gibt’s ein einfaches Basis-Template.
- Seiten sind die letzten Elemente des Webprojektes und spezifizieren nur noch spezielle Styles von einzelnen Seiten. Meistens sind das Seiten, die durch IDs definiert werden.
- Zusammen gefasst haben wir also die fünf Gruppierungen vom kleinsten Teilchen bishin zu Organismen. Von links nach rechts bauen wir so unsere Webseite vom allgemeinen bishin zum spezifischen auf. Dementsprechend kann man Protonen und Atomkerne nach Herzenslust in diverse andere Projekte kopieren, während Moleküle und Organismen meist auf ein bestimmtes Projekt zugeschnitten sind.
- Templates und Seiten existieren wiederum nur für das Projekt und sind selten auf andere Projekte anwendbar.