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

Sitegeist.Monocle - Flow & Neos Meetup HH, No 7

Sitegeist.Monocle - Flow & Neos Meetup HH, No 7

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

Sitegeist

April 06, 2016
Tweet

More Decks by Sitegeist

Other Decks in Programming

Transcript

  1. SITEGEIST.

    MONOCLE
    STYLEGUIDE AND ATOMIC DESIGN IN TS2

    View full-size 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 full-size slide

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

    View full-size slide

  4. SITEGEIST.MONOCLE
    ATOMIC DESIGN
    » Starts with basic Atoms
    » Aggregate higher order components: Molecules, Organisms,
    Templates.
    » Made popular by Brad Frost
    » http://atomicdesign.bradfrost.com/
    THE WORDING IS A WEIRD MIX OF PHYSICAL AND
    BIOLOGICAL TERMS BUT THE GENERAL IDEA IS GREAT AND
    STICKING TO THE COMMON TERMS HELPS.

    View full-size slide

  5. SITEGEIST.MONOCLE
    STYLEGUIDES
    » Renders the components of a website in isolation.
    » http://patternlab.io/

    » Pro: makes Styling Problems visible and encourages
    clean Styling
    » Con: extra Markup -> Duplicated Work / diverge over time

    View full-size slide

  6. SITEGEIST.MONOCLE
    MOTIVATION
    » Sitegeist already uses Atomic design for styles and
    js(react-components)
    » No styleguide that matched our needs
    » RE.A.L (RawEstimates, Agile, Lean)
    WE WANTED TO USE ATOMIC DESIGN AS A COMMON
    PRINCIPLE TROUGH OUR ENTIRE WORKFLOW

    View full-size slide

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

    View full-size slide

  8. SITEGEIST.MONOCLE
    DEFINE AND EXTEND ATOMS
    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'
    }
    ...
    }

    View full-size slide

  9. SITEGEIST.MONOCLE
    AGGREGATE ATOMS TO HIGHER
    ORDER COMPONENTS
    prototype(Vendor.Site:Molecules.ButtonGroup) < prototype(TYPO3.TypoScript:Tag) {
    content = TYPO3.TypoScript:Array {
    button1 = Vendor.Site:Atoms.Button
    button2 = Vendor.Site:Atoms.Button
    }
    prototype(Vendor.Site:Atoms.Button) {
    attributes.class.buttonGroup = 'buttonGroup'
    }
    }

    View full-size slide

  10. 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 ATOMS TO HIGHER
    ORDER COMPONENTS

    View full-size slide

  11. SITEGEIST.MONOCLE
    prototype(Vendor.Site:Templates.Page) < prototype(TYPO3.Neos:Page) {
    content = TYPO3.TypoScript:Array {
    header = Vendor.Site:Organisms.Header
    main = TYPO3.Neos:PrimaryContent
    footer = Vendor.Site:Organisms.Header
    }
    }
    AGGREGATE ATOMS TO HIGHER
    ORDER COMPONENTS

    View full-size slide

  12. SITEGEIST.MONOCLE
    USE TEMPLATE FOR PAGE
    RENDERING
    page = TYPO3.TypoScript:Case {
    specificPage {
    condition = ${q(documentNode).is('[instanceof Vendor.Site:SpecificPageMixin]')}
    renderPath = Vendor.Site:Templates.PageSpecific
    }
    default {
    condition = true
    renderer = Vendor.Site:Templates.Page
    }
    }

    View full-size slide

  13. SITEGEIST.MONOCLE
    USE ORGANISM FOR CUSTOM
    CR-NODE
    prototype(Vendor.Site:ExampleNode) < prototype(Vendor.Site:Molecules.Example) {
    # this has to be done because of auto generated TS
    templatePaths = NULL
    # map node properties
    exampleProperty = ${q(node).property('propertyName')}
    }

    View full-size slide

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

    View full-size slide

  15. SITEGEIST.MONOCLE
    ASSIGN ITEMS TO THE
    STYLEGUIDE
    prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) {
    @styleguide {
    path = 'atoms.basic'
    title = 'Button'
    description = 'generic Buttom Atom'
    }
    ...
    }

    View full-size slide

  16. SITEGEIST.MONOCLE
    DEFINE DUMMY-DATA
    prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) {
    @styleguide {
    ...
    props {
    content = 'Lorem Ipsum'

    tagName = 'a'
    }
    }
    ...
    }

    View full-size slide

  17. SITEGEIST.MONOCLE
    LIVE DEMO AFTERWARDS IN CASE OF INTEREST

    View full-size slide

  18. SITEGEIST.MONOCLE
    ACHIEVEMENTS
    » Atomic.TS2 feels great
    » Template engine agnostic
    » Ubiquitous component naming and structure
    » Very flexible and reusable
    » Sitegeist.Monocle - Living stileguide
    » No extra code
    » Isolated rendering
    » Frontend is running with default TS
    ALREADY MISS ATOMIC.TS2 IN FLUID PROJECTS

    View full-size slide

  19. SITEGEIST.MONOCLE
    OBSTACLES
    » Interferences with autocreated-ts
    » Missing TS-Objects
    » Missing Best Practices
    » Providing Dummy data for Menus
    NO BIGGER PROBLEM OCCURED AND THE EXISTING
    OBSTACLES COULD BE OVERCOME EASILY.

    View full-size slide

  20. SITEGEIST.MONOCLE
    SITEGEIST.MONOCLE
    » Add some App Feeling
    » Selectors for DeviceWidth, Site and Language
    » Release to github/packagist soonish

    View full-size slide

  21. SITEGEIST.MONOCLE
    ATOMIC.TYPOSCRIPT
    » Create and document best-practices
    » Menus, Pages, Widgets
    » Improve neos-core
    » Autogenerated TS
    » Add missing TS-Objects
    » Unified components (TS2, SASS, JS)

    View full-size slide

  22. SITEGEIST.MONOCLE
    WE WANT YOUR FEEDBACK
    twitter/slack: @kopfaufholz

    [email protected]

    View full-size slide

  23. THANK
    YOU
    www.sitegeist.de
    we are hiring ;)

    View full-size slide