Was

Frontend Development

HTML, CSS & JavaScript schreiben

Design in Code übersetzen

Ideen entwickeln & umsetzen

(rapid) Prototyping

Implementationsfähige Prototypen (Ziel)

Warum

Liebe

Etwas (nachhaltiges) erschaffen

innere Getriebenheit

Berufung

Der schnöde Mammon

Wofür

richtig?

Womit

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

Video: http://vimeo.com/67476280

Atomic Design Model

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

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

index.html

    

        
        
    
    

        
Überschrift
        
Hier steht Content. Mit vielen Untermodulen
    
    


                        

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

...

Parameter Patterns

Parameter sind eine weitere Möglichkeit dynamisch Patterns einzupflegen. Hier bei wird bei der Mustache Inkludierung ein Parameter mitgegeben, der Werte füllt oder Booleanwerte ändern kann.

{{> patternType-pattern(attribute1: value, attribute2: "value string") }}
                        

Siehe: Dokumentation

    {{> atoms-message }}
    

       A bunch of extra information
    
    {{> atoms-message }}

                        

Beispielaufruf mit Parametern

    {{> atoms-message(message: "this is an alert message") }}
    

        A bunch of extra information
    
    {{> atoms-message(message: "this is an informational message") }}

                        

Beispiel

    {{# emergency }}
        
Emergency!!!
    {{/ emergency }}
    

        ... stuff ...
    

                        

Aufruf

{{> organisms-header }}


{{> organisms-header(emergency: true) }}
                        

States

• Patternlab gibt die Möglichkeit den aktuellen Stand eines Patterns festzulegen.
• Default: inprogress, inreview, complete
• Der Status wird über den Dateinamen gesetzt
• Eigener Status kann erstellt werden
• Der Status wird vererbt - ein "complete" Modul mit einem includierten Element was "inprogress" ist, wird automatisch auch "inprogress"
• Dokumentation

States: Beispiel

Standard

source/_patterns/01-molecules/02-blocks/00-media-block.mustache
                        

Mit Status:

    source/_patterns/01-molecules/02-blocks/00-media-block@inprogress.mustache
    source/_patterns/01-molecules/02-blocks/00-media-block@inreview.mustache
    source/_patterns/01-molecules/02-blocks/00-media-block@complete.mustache

Ein Konzept um Modulares SASS zu schreiben. Hier gehts zum Artikel.

Progressive Live Demo

Patternlab installieren & starten

Patternlab downloaden - pattern-lab.info oder Github

// Einmalige Generierung der Patterns
php core/builder.php -g

// Einmalige Generierung der Patterns, mit CSS
php core/builder.php -gc

// Generierung der Seite mit anschließenden Watch Task
php core/builder.php -w

// Generierung der Seite, Watch Task und Auto-Reload
php core/builder.php -wr

// Startet nur Autoreload
php core/autoReloadServer.php

// Auto Reload für alle offenen Browserfenster (auch mobil)
php core/pageFollowServer.php
                                

Patternlab mit Taskrunner starten

Wir nutzen im Patternlab Grunt.js (Gulp, Coming Soon) anstelle der Kommandozeilen. Dies bietet den Vorteil dass wir zusätzliche Tasks mitausführen können, wie z.B. Minimierung, Sass Compiling oder Konkatinierung.

Danke für's Zuhören

Fragen?