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
2. SITEGEIST.MONOCLE WHO I AM » Martin Ficzel - Developer
 
 ficzel@sitegeist.de
 twitter/slack: @kopfaufholz
 
 Neos, Flow 
 
 TYPO3 3.6-6.2 / ext_caretaker
3. SITEGEIST.MONOCLE A LIVING-STYLEGUIDE FOR NEOS AKA SITEGEIST.MONOCLE A TYPOSCRIPT2 BASED APPROACH TO ATOMIC-DESIGN
4. SITEGEIST. MONOCLE LIVING STYLEGUIDE FOR NEOS Photo by: Quinn Dombrowski
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
6. SITEGEIST.MONOCLE THERE IS A BETTER WAY » Use the TypoScript2 Prototypes for rendering » Annotate the Prototypes for the styleguide
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' } } ... }
8. SITEGEIST.MONOCLE
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
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
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
12. ATOMIC.TS2 ATOMIC DESIGN IN TYPOSCRIPT2 Credit: CERN
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/
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
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
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
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
18. CON.FUSION THE LONG SHOT Credit: Lawrence Livermore National Laboratory
19. THANK YOU @kopfaufholz
 ficzel@sitegeist.de 
 
 www.sitegeist.de we are hiring ;)