Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sitegeist.Monocle - Inspiring Conference 2016 Lightning-Talk

Sitegeist
April 23, 2016
170

Sitegeist.Monocle - Inspiring Conference 2016 Lightning-Talk

An introduction to sitegeists approach for atomic-design in TypoScript2 plus a living styleguide in Neos based on that.

Sitegeist

April 23, 2016
Tweet

Transcript

  1. SITEGEIST.

    MONOCLE
    STYLEGUIDE AND ATOMIC DESIGN IN TS2

    View Slide

  2. SITEGEIST.MONOCLE
    WHO I AM
    » Martin Ficzel - Developer


    [email protected]
    twitter/slack: @kopfaufholz


    Neos, Flow 


    TYPO3 3.6-6.2 / ext_caretaker

    View Slide

  3. SITEGEIST.MONOCLE
    A LIVING-STYLEGUIDE FOR
    NEOS AKA
    SITEGEIST.MONOCLE
    A TYPOSCRIPT2 BASED
    APPROACH TO ATOMIC-DESIGN

    View Slide

  4. SITEGEIST.
    MONOCLE
    LIVING STYLEGUIDE FOR NEOS
    Photo by: Quinn Dombrowski

    View Slide

  5. SITEGEIST.MONOCLE
    LIVING-STYLEGUIDES
    » Render the components of a website in isolation
    » Makes styling problems visible and encourages clean
    styling
    » Example: http://patternlab.io/ by Brad Frost
    » Problems
    » Extra Code
    » diverges over time in many cases

    View Slide

  6. SITEGEIST.MONOCLE
    THERE IS A BETTER WAY
    » Use the TypoScript2 Prototypes for rendering
    » Annotate the Prototypes for the styleguide

    View Slide

  7. SITEGEIST.MONOCLE
    STYLEGUIDE ANNOTATIONS
    Styleguide-Annotation
    Dummy Data
    Meta Data
    prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) {
    @styleguide {
    path = 'atoms.basic'
    title = 'Button'
    description = 'generic Buttom Atom’
    props {
    content = 'Lorem Ipsum'

    tagName = 'a'
    }
    }
    ...
    }

    View Slide

  8. SITEGEIST.MONOCLE

    View Slide

  9. SITEGEIST.MONOCLE
    ACHIEVEMENTS
    » Render ts2-prototypes in isolation
    » No extra code … @styleguide annotations
    » Template-engine agnoistic
    » Coding-style agnoistic
    » Works very well with atomic design

    View Slide

  10. SITEGEIST.MONOCLE
    ACHIEVEMENTS
    » Render ts2-prototypes in isolation
    » No extra code … @styleguide annotations
    » Template-engine agnoistic
    » Coding-style agnoistic
    » Works very well with atomic design
    +
    BEWARE OF
    MOVING
    GROUND
    +
    ATTENTION

    View Slide

  11. SITEGEIST.MONOCLE
    ACHIEVEMENTS
    » Render ts2-prototypes in isolation
    » No extra code … @styleguide annotations
    » Template-engine agnoistic
    » Coding-style agnoistic
    » Works very well with atomic design
    +
    BEWARE OF
    MOVING
    GROUND
    +
    ATTENTION
    sitegeist/Sitegeist.Monocle

    View Slide

  12. ATOMIC.TS2
    ATOMIC DESIGN IN TYPOSCRIPT2
    Credit: CERN

    View Slide

  13. SITEGEIST.MONOCLE
    ATOMIC-DESIGN
    » Starts with basic Atoms
    » Aggregate Atoms to higher order components:
    Molecules, Organisms, Templates, Pages.
    » Made popular by Brad Frost
    » http://atomicdesign.bradfrost.com/

    View Slide

  14. SITEGEIST.MONOCLE
    prototype(Vendor.Site:Atoms.Link) < prototype(TYPO3.TypoScript:Tag) {
    tagName = 'a'
    ...
    }
    prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) {
    attributes.class = TYPO3.TypoScript:RawArray {
    button = 'btn'
    }
    ...
    }
    DEFINE & EXTEND
    COMPONENTS

    View Slide

  15. SITEGEIST.MONOCLE
    prototype(Vendor.Site:Organisms.Header) < prototype(TYPO3.TypoScript:Tag)
    {
    content = TYPO3.TypoScript:Array {
    funcNav = Vendor.Site:Mulecules.FuncNav
    mainNav = Vendor.Site:Mulecules.MainNav
    }
    }
    AGGREGATE COMPONENTS

    View Slide

  16. SITEGEIST.MONOCLE
    ACHIEVEMENTS
    » Atomic.TS2 feels great
    » just a TS2-Pattern
    » Template engine agnostic
    » No Fluid needed anymore
    » Ubiquitous component naming and structure
    » flexible and reusable Components

    View Slide

  17. SITEGEIST.MONOCLE
    ACHIEVEMENTS
    » Atomic.TS2 feels great
    » just a TS2-Pattern
    » Template engine agnostic
    » No Fluid needed anymore
    » Ubiquitous component naming and structure
    » flexible and reusable Components
    +
    UNMARKED
    OBSTACLES
    MAY EXIST
    +
    CAUTION

    View Slide

  18. CON.FUSION
    THE LONG SHOT
    Credit: Lawrence Livermore National Laboratory

    View Slide

  19. THANK
    YOU
    @kopfaufholz

    [email protected]

    www.sitegeist.de
    we are hiring ;)

    View Slide