Christoph Reinartz - @pistenprinz .gradient_bright_hover:hover, .gradient_bright_hover:hover *, .gradient_dark_hover:hover, .gradient_dark_hover:hover * { color:#fff !important } Show me your CSS Based on a true story
Christoph Reinartz - @pistenprinz Code / Process Audits • IE7 support • Layout built on reset.css • too complex CSS structure Specificity graph 2012 The specificity wall
Christoph Reinartz - @pistenprinz Code / Process Audits • IE7 support • Layout built on reset.css • too complex CSS structure Specificity graph 2012 The specificity wall
Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer One of our footers
Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer And yes, another one
Christoph Reinartz - @pistenprinz Code / Process Audits • Establishing a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer A first try of the unified footer
Christoph Reinartz - @pistenprinz Code / Process Audits • Establishing a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer Unified version not unified
Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications Atomic Design Atomic Design in one gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/
Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications The Pattern Library Behind the scenes - the web view
Christoph Reinartz - @pistenprinz The Q&A Session The question „And how do we update the applications? How do we roll-out the code from the pattern library?“
Christoph Reinartz - @pistenprinz Code / Process Audits • IE7 support • Layout built on reset.css • too complex CSS structure The roll-out Vision The more self-explanatory version
Christoph Reinartz - @pistenprinz Code / Process Audits • IE7 support • Layout built on reset.css • too complex CSS structure Test Driven Development Hahaha
Christoph Reinartz - @pistenprinz Code / Process Audits • IE7 support • Layout built on reset.css • too complex CSS structure Specificity graph 2012 The specificity wall