$30 off During Our Annual Pro Sale. View Details »

Sitegeist.Monocle - Inspiring Conference 2016 Lightning-Talk

Sitegeist
April 23, 2016
180

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

More Decks by Sitegeist

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