patternplate und atomic design

PATTERNPLATE & ATOMIC DESIGN

WORUM GEHT’S?

/ ATOMIC DESIGN / PATTERNPLATE / CSS-MODULES

WORUM GEHT’S?


WEBDESIGN IST SCHWER

SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 6

Responsive Design Dynamische Views Single Page Apps

RESPONSIVE DESIGN


PROBLEM

Viele verschiedene Zielgeräte, Viewports & UserAgents


ZIEL

Bestmögliche Darstellung der Inhalte auf allen Viewports, einheitliches

Aussehen gleicher Elemente

DYNAMISCHE VIEWS UND SINGLE PAGE APPS


PROBLEM

Wir können nicht mehr nur in Seiten denken, das erfasst nicht alle

möglichen Zustände


ZIEL

Greifbare Bestandteile, die man beschreiben und verstehen kann

LÖSUNG: DESIGN SYSTEME

SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 14

FÜR RESPONSIVE DESIGNDESIGN SYSTEME

/ Definition von relativen Darstellungsregeln / Mobile first, dann Weiterentwicklung für größere Viewports / Wiederkehrende Elemente, konsistentes Aussehen und Grundstyling für Basis-Elemente


FÜR DYNAMISCHE VIEWSDESIGN SYSTEME

/ Identifizieren wiederkehrender Patterns / Maximale Wiederverwendung bei wechselndem Content / Baukastensystem für Seiten-Zustände

ATOMIC DESIGN


AUFTEILUNG VON LAYOUTS IN WIEDERVERWENDBARE

KOMPONENTEN


ATOMIC DESIGN

Interfaces are made up of smaller components. This means we can break entire

interfaces down into fundamental building blocks and work up from there. That’s the

basic gist of atomic design. – Brad Frost, 2013

SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015

TRENDS IN CORPORATE WEB DESIGNEIN BLICK AUF ANDERE LEADING BRANDS

19


ATOMS

Atome sind die Grundbausteine von Materie. Im Web z. B. unsere HTML-Tags

(label, input, form…)


MOLECULES

Moleküle sind Gruppierungen von Atomen und die kleinsten

Grundeinheiten von Komponenten. Im Web bspw. eine Checkbox mit Label.


ORGANISMS

Organismen sind Gruppen von Molekülen. Sie stellen eine relativ komplexe,

individuelle Sektion eines Interfaces dar, wie bspw. ein Formular oder ein Teaser.


TEMPLATES

Templates enthalten Gruppen von Organismen, die zusammen die

Vorlage einer Seite ergeben.


PAGES

Seiten sind spezifische Instanzen von Templates, in denen die Platzhalter

durch repräsentative Inhalte ausgetauscht werden.

SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015

TRENDS IN CORPORATE WEB DESIGNEIN BLICK AUF ANDERE LEADING BRANDS

25

Atomic design gives us the ability to traverse from abstract to concrete. So, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.


ATOMIC DESIGNAM BEISPIEL DES TELEFÓNICA DASHBOARDS











STYLEGUIDES


ATOMIC DESIGN IN DER ANWENDUNG

/ Dokumentation: Wie werden Design-Komponenten isoliert dokumentiert?

/ Implementierung: Wie wird Code Duplication und Bleeding zwischen den Komponenten verhindert?

/ Integration: Wie werden die erstellten Komponenten im Zielprojekt integriert?


STYLEGUIDE BISHER

/ Wird in der Design-Phase erstellt

/ Oft als vermaßtes PDF ausgespielt

/ Spiegelt den Soll-Zustand wider

/ Veraltet schnell

/ Kann keine Interaktion abbilden

/ Kann kein Responsive-Verhalten darstellen

/ Graceful Degradation/Progressive Enhancement wird nicht veranschaulicht

WORUM GEHT’S?


SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 36

LIVING STYLEGUIDEPATTERNPLATE

BY SINNERSCHRADER

PATTERN… WHAT?!

LIVING STYLEGUIDE


LIVING STYLEGUIDE

Der Living Styleguide ist ein zentrales Repository, welches automatisch den letzten Stand aller auf der Website verwendeten Elemente anzeigt.

/ Während der (laufenden) Entwicklung, wird der Styleguide automatisch aktuell gehalten

/ Bestehende Elemente sind für jeden dokumentiert (Kunde, Designer, Entwickler, …)

/ Interaktionen, Animationen, responsives Verhalten werden in ihrer tatsächlichen Form gezeigt

/ Effektive und teamübergreifende Entwicklung durch Code-Dokumentation

/ Neue Features können einfach implementiert werden


VORTEILE EINES ZENTRALEN REPOSITORYLIVING STYLEGUIDE

LIVING STYLEGUIDEAUTOMATISIERTERBUILD PROCESSES

TRANSPARENZ FÜR ALLE PROJEKTMITGLIEDER

LIVE PREVIEW FÜR INTERAKTIONS- PATTERNS UND ELEMENTE

SCHNELLE UND EINFACHE ENTWICKLUNG SOWIE CMS INTEGRATION



BY SINNERSCHRADER


PATTERNPLATE ENTHÄLT…

/ … eine Entwicklungsumgebung zur Erstellung von Atomic Designs

/ … eine Webanwendung zur Präsentation und Dokumentation von Atomic Designs

/ … ein Build-Tool zur variablen Erzeugung von optimiertem und integrierbarem Code


PATTERNPLATE

/ Ein Ordner pro Pattern

/ JavaScript, CSS, Markup und Dokumentation in jedem Pattern

/ ReactJS als Templating-Engine und JSX als Template-Sprache

/ Unterscheidung zwischen Library- und Demo-Code

/ Dependencies zwischen Patterns sind möglich und transparent

STRUKTUR & FEATURES


DEMO



GUESS WHAT?

SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015

github.com/sinnerschrader/patternplate

46


OPEN SOURCE!

http://github.com/sinnerschrader/patternplate

START YOUR ENGINES!

WORUM GEHT’S?


SAVE CSS

SINNERSCHRADER SINNERSCHRADER | MASTER | 08.04.2015 50

CSS styling findet aktuell immer im globalen Namespace statt.

SINNERSCHRADER | MASTER | 08.04.2015 SINNERSCHRADER 51

/ Inline Styling / Naming Conventions / CSS in JS / Scoped CSS

BISHERIGE LÖSUNGSANSÄTZE


✓ Eindeutiges Scoping

✖ Kein caching ✖ Schwer zu pflegen ✖ Keine Pseudoselektoren ✖ …

INLINE STYLING

<section style="color: tomato; font-size: 13px;”> …

</section>


/ Eindeutige Namen

.my-totally-super-duper-unique-selector-yeah {…}

/ Eindeutige Ketten

html body .content .inner .inner-content .select .yeah {…}

/ BEM, OOCSS, …

.arm__hand—left {…}

NAMING CONVENTIONS


✓ Naming Conventions sind die aktuell geläufige Methode um CSS zu “scopen”

✖ können kein hundertprozentiges Scoping garantieren ✖ zu hohe Specificity ✖ erzeugen unschöne Selektorketten und unleserlichen Code ✖ hohe kognitive Belastung ✖ schwerer Einstieg für hinzukommende Entwickler

Fazit:Naming Conventions können nahezu eindeutige Selektoren erzeugen, sind für Entwickler aber schwer zu maintainen.

NAMING CONVENTIONS


.site-search__input-field——active

UND…


✓ Geläufig in der React Community ✓ Verschiedene Libraries (React Style, jsxstyle, Radium) ✓ Klares Scoping ✓ Menschen lesbare Namen

CSS IN JS

<div style={{ display: 'flex', marginLeft: 'auto', marginRight: Theme.GRID_UNIT * 10, alignItems: 'center' }}>


✖ keine Pseudoselektoren (:hover, :active, :checked, ::before, etc.) ✖ keine CSS Animations ✖ Dopplung im Code

CSS IN JS


<section> <style scoped> :scope { background: #bada55; } p { background: tomato; } </style> <p>Much scoped!</p> </section>

SCOPED CSS


✓ Teil des HTML-Spec ✓ Reines, natives Scoping

✖ Inline Style-Blöcke

SCOPED CSS

SINNERSCHRADER SINNERSCHRADER | MASTER | 08.04.2015 61

BROWSERSUPPORT

Entfernt in Chrome 43 YAY! scoped styling im shadow dom Nicht geplant


THE NEW KID ON THE BLOCK

CSS MODULES


/ CSS Scoping Library / Erzeugt gehashte Klassennamen / Basierend auf den Entwicklungen der CSS in JS Welt / Nutzt ICSS “Standard” / Aktuell verfügbar für Browserify, Webpack, JSPM / NodeJS & Ruby in Arbeit

CSS MODULES


/* components/submit-button.css */ .normal { … } .disabled { … } .error { … }

CSS MODULES

/* components/submit-button.jsx */ import styles from './submit-button.css';

<Button className={styles.normal} text=“Submit” />

GENERELL


/* dist/index.html */

<button class="components_submit_button__normal__abc5436"> Processing...

</button>

CSS MODULESGENERELL


/* components/GlobalSelectors.css */ :global .text { color: #bada55; font-size: 24px; }

CSS MODULES

/* components/global.jsx */ import styles from './GlobalSelectors.css';

<p className="text">Global Selectors</p>

GLOBALES STYLING


/* components/Compose.css */ .common { /* all the common styles you want */ }

.normal { composes: common; /* anything that only applies to Normal */ }

CSS MODULESCOMPOSES


/* colors.css */ .primary { color: #720; } .secondary { … }

CSS MODULESCOMPOSES

/* submit-button.css */ .common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; composes: primary from "../shared/colors.css"; }


/* dist/index.html*/ <button class="shared_colors__primary__fca929 components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit </button>

CSS MODULESCOMPOSES


✓ Klares Scoping durch gehashte Klassen ✓ Menschenlesbare Klassen im Source Code (nicht im Kompilat) ✓ Styling und Markup getrennt ✓ Pseudoklassen, Animationen etc.

✖ 3rd Party Library

SCOPED CSS


YAY!

VIELEN DANK FÜR EURE AUFMERKSAMKEIT!

Technology

patternplate und atomic design