SITEGEIST.
 MONOCLE STYLEGUIDE AND ATOMIC DESIGN IN TS2

SITEGEIST.MONOCLE WHO I AM » Martin Ficzel - Developer
 
 fi[email protected]
 twitter/slack: @kopfaufholz
 
 Neos, Flow 
 
 TYPO3 3.6-6.2 / ext_caretaker

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

TERMS

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.

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

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

ATOMIC.TS2 ATOMIC DESIGN IN TYPOSCRIPT2 Credit: CERN

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

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

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

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

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

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

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

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

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

SITEGEIST.MONOCLE LIVE DEMO AFTERWARDS IN CASE OF INTEREST

CONCLUSION

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

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.

FUTURE

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

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)

SITEGEIST.MONOCLE WE WANT YOUR FEEDBACK twitter/slack: @kopfaufholz
 fi[email protected] 
 


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