Atomic Design & PatternLab

Viele Frameworks vorhanden

• Bootstrap
• Foundation
• Pure CSS

Solche Frameworks bringen viele Vorteile

• Schnelles Prototyping
• Viele Best-Practices
• Hohe Browser Kompatiblität
• etc.

• Konventionen, Benennung & Struktur anderer muss übernommen werden
• "one-size-fits-all" aka. Massenlösungen
• Code Bloat
• niemals perfekt für die eigene Lösung
• schlecht skalierbar

Tiny bootstraps for every client

siehe: Responsive Deliverables

• Zeitaufwand
• Zweites zusätzliches Projekt
• Erstellung erfolgt meistens nach dem Launch
• Abstrakt
• Design / Devtool

Patternlab

https://github.com/pattern-lab/patternlab-php

Quelle: ♡ andreasdantz

Video: http://vimeo.com/67476280

Quelle: http://joshduck.com/periodic-table.html

H₂ + O = H₂O

Überschrift + Text + Link + Bild = Teaserelement

Merkmale

• PHP basierender Static Site Generator
• Webserver nicht zwingend
• Mustache Template Engine
• Live Reload
• Multi Browser Multi Device Testing

Kommende / Wiederkehrende Features

• Annotationen
• Direkt Ansicht
• Code Ansicht

Mustache

index.html

    

        
        
    
    

        
Überschrift
        
Hier steht Content. Mit vielen Untermodulen
    
    


                        

index.mustache

patterns/templates/10-index.mustache

    {{> organisms-header }}
    

        {{> atoms-headline-big }}
        {{> molecules-paragraph}}
        ...
        {{> molecules-slideshow}}
        {{> molecules-otherthings}}
    
    {{> organisms-footer}}

Dynamische Inhalte

data/data.json

{
    "headline" : {
        "short" : "Lorem ipsum dolor sit (37 characters)",
        "medium" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)"
    },
    "nav":{
        "linkname" : "Link",
        "linksource" : "http://www.hmmh.de"
    }
}

{{ nav.linkname }}

Noch dynamischere Inhalte

patterns/01-template/01-index.mustache

...

    
{{> atoms-link-elem }}
    
{{> atoms-link-elem }}
    
{{> atoms-link-elem }}

...

patterns/01-pages/01-index.mustache

...

    {{# real-navigation}}
        
{{> atoms-link-elem }}
    {{/ real-navigation}}

...

patterns/01-pages/01-index.json

{
    "real-navigation" : [
        {
            "nav":{
                "linkname" : "Startseite",
                "linksource" : "index.html"
            }
        },
        {
            "nav":{
                "linkname" : "Portfolio",
                "linksource" : "projects.html"
            }
        },
        {
            "nav":{
                "linkname" : "About",
                "linksource" : "about.html"
            }
        }
    ]
}

...

    
Startseite
    
Portfolio
    
About

...

PatternLab ist...

• ... eine Komponentenbibliothek
• ... ein Starter Kit für eigene Bibliotheken
• ... eine Design System Software
• ... ein Responsive Design Tester
• ... ein "Living Styleguide"
• ... ein "Design Annotation Tool"

PatternLab ist nicht...

• ... ein UI Framework
• ... abhänging von Sprachen, Bibliotheken, Stil
• ... unfassbar starr

Nicht nur PHP

Prinzip: Du willst kein PHP, mach dein eigenes

• Node https://github.com/midnightspecial/patternlab-node
• Jekyll https://github.com/zakkain/patternlab-jekyll
• Tapestry https://github.com/PebbleRoad/tapestry

Danke für's Zuhören

Fragen?