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.

Transcript

1. SITEGEIST.

   MONOCLE
   STYLEGUIDE AND ATOMIC DESIGN IN TS2
   

   View Slide

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

   

   ficzel@sitegeist.de

   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

    ficzel@sitegeist.de 

    

    www.sitegeist.de
    we are hiring ;)
    

    View Slide