Kevin Heil

münchbremberger, grafikcoder & clownfisch

Florenz Heldermann

Frontend enthusiast, coffee addicted & videogame junkie.

Hände hoch!

Previously

Viele Frameworks vorhanden

• Bootstrap
• Foundation
• Pure CSS

Solche Frameworks bringen viele Vorteile

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

Aber...

• 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

siehe: Responsive Deliverables

"Pattern Libraries" sind keine neue Idee

Viele Bibliotheken bereits vorhanden

aber

Mo' Patterns

Mo' Problems

• 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

Atome

Moleküle

Organismen

Template

Pages

H2 + O = H2O

Überschrift + Text + Link + Bild = Teaserelement

Wenn man alles richtig macht fühlt man sich etwas wie ....

Brad Frost

Dave Olsen

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

<div class="container">
    <header>
        <img src="logo.jpg" alt="Mein tolles Logo">
        <nav>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <h2>Überschrift</h2>
        <div>Hier steht Content. Mit vielen Untermodulen</div>
    </div>
    <footer>
        <p>© 2013 — Beispiel AG</p>
    </footer>
</div>

index.mustache

patterns/templates/10-index.mustache

<div class="container">
    {{> organisms-header }}
    <div class="content">
        {{> atoms-headline-big }}
        {{> molecules-paragraph}}
        ...
        {{> molecules-slideshow}}
        {{> molecules-otherthings}}
    </div>
    {{> organisms-footer}}
</div>

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"
    }
}

<a href="{{ nav.linksource }}">{{ nav.linkname }}</a>

Noch dynamischere Inhalte

patterns/01-template/01-index.mustache

...
<ul>
    <li><a href="#">{{> atoms-link-elem }}</a></li>
    <li><a href="#">{{> atoms-link-elem }}</a></li>
    <li><a href="#">{{> atoms-link-elem }}</a></li>
</ul>
...

patterns/01-pages/01-index.mustache

...
<ul>
    {{# real-navigation}}
        <li><a href="#">{{> atoms-link-elem }}</a></li>
    {{/ real-navigation}}
</ul>
...

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"
            }
        }
    ]
}

...
<ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
</ul>
...

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

• ... 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?