The document details the 'Ironman' project at Trivago, focusing on a large-scale CSS refactoring to implement a pattern library-based user interface aimed at reducing technical debt and improving consistency. Key initiatives included a switch to mobile-first design, the removal of outdated CSS, and the integration of SVG icons, all completed in a tightly managed four-week timeline. The project resulted in significant code reduction and enhanced rendering performance, setting a foundation for future UI development improvements.

1. Large Scale CSS Refactoring at trivago
@pistenprinz

2. Ironman release picture
Crazy Guy
Talking to you
right now
Does something
with frontend at
trivago
Loves giving
presentations
U.Bolt
Performance
Unicorn

3. Christoph Reinartz - @pistenprinz
What is it?
A description
Project Ironman was the technical migration of the
trivago hotel search's existing CSS core to a pattern
library based user interface.*
*) business translation for #refactorAllTheThings

4. Christoph Reinartz - @pistenprinz
Ironman - the tech context
The big picture
• Establishing a Frontend / Design System
• Reduce technical debt
• Consistency in Code (and Design) over all
applications
• Provide base for modern & sustainable UI rebuild

5. Christoph Reinartz - @pistenprinz
Ironman & the pattern library
Built without Design Thinking and Atomic Design

6. Christoph Reinartz - @pistenprinz
Ironman & the pattern library
Built with Design Thinking and Atomic Design

7. Christoph Reinartz - @pistenprinz
Ironman & Atomic Design
Atomic Design in one gif
http://bradfrost.com/blog/post/atomic-design-in-one-gif/

8. Christoph Reinartz - @pistenprinz
Ironman & the pattern library
Behind the scenes - the developer playground

9. Christoph Reinartz - @pistenprinz
Before Ironman
The pain points
• IE7 support
• Layout built on reset.css
• Overly complex CSS/DOM structure
• Desktop first approach
• Inconsistency

10. Christoph Reinartz - @pistenprinz
Before Ironman
The pain points

11. Christoph Reinartz - @pistenprinz
Fifty shades of grey
Or how to prove inconsistency

12. Christoph Reinartz - @pistenprinz
Specificity graph 2012
The specificity wall

13. Christoph Reinartz - @pistenprinz
Graph before ironman
Way better, but still …
peaks at the beginning
of the stylesheet

14. Christoph Reinartz - @pistenprinz
Ironman & IE7
Disqualification

15. Christoph Reinartz - @pistenprinz
Ironman - the scope
The 3 disciplines
• Normalize.css incl. border-box switch*
• Mobile first switch*
• SVG icons instead of image sprites*
*) integrate the new CSS framework base which was developed with the
Pattern Library but retain the existing layout and design

16. Christoph Reinartz - @pistenprinz
Ironman - the scope
In detail
• Refactor > 50000 lines of Code of SCSS
• Adapt dozens of templates
• Keep IE8 support
• Remove 1200 Icons
• Extensive (Device-)Testing
• In 4 weeks!

17. Christoph Reinartz - @pistenprinz
Ironman - the challenges
The business
How to tell management that you need 4 weeks of
feature freeze and the User Interface will look exactly
the same afterwards?

18. Code / Process Audits
How to tell management that you need you need 4 weeks of feature
freeze and the User Interface will exactly look the same afterwards?

19. Christoph Reinartz - @pistenprinz
Ironman - the challenges
Possible ways to convince the business side
• Argue!
• Be a salesman- Sell it! Prove it! Show benefits!
• Do it in 3 weeks!
• Don’t only think technically!

20. Christoph Reinartz - @pistenprinz
Ironman - the challenges
The process
• How to integrate such a project into an existing
process?
• How to handle management expectation?
• How to plan and estimate?

21. Christoph Reinartz - @pistenprinz
Ironman - the challenges
Possible ways to enforce culture
• People over process
• Commitment over estimation
• Agility
• Make progress transparent
• Involve everybody
• Motivate people and let them be awesome

22. Christoph Reinartz - @pistenprinz

23. Christoph Reinartz - @pistenprinz
Ironman in numbers
People and processes
• 1 Project Team
• 9 awesome developers, 3 lovely designers
• Infinite supporters
• 3 Meetings
• 17 daily stand-ups
• 67 Post-Its on Kanban board
• 1 Slack-channel

24. Christoph Reinartz - @pistenprinz
Ironman in numbers
Code and Outcome
• ~800 Commits in 3 weeks
• 11973 LOC added
• 36668 LOC removed
• Reduced SCSS LOC from 52991 to 39755
• Infinite icons replaced with 451 SVGs
• 352 files changed

25. Code / Process Audits
• 1 Project Team
• 7 awesome developers
• infinite supporters

26. Christoph Reinartz - @pistenprinz
Showcase 1
Desktop first vs. Mobile first

29. Christoph Reinartz - @pistenprinz
Showcase 2
Sprite Wars vs. SVG beauty

32. Christoph Reinartz - @pistenprinz
Showcase 3
HTTP Requests

33. Christoph Reinartz - @pistenprinz
Showcase 3
HTTP requests

34. Christoph Reinartz - @pistenprinz
Showcase 3
HTTP requests

35. Christoph Reinartz - @pistenprinz
Ironman - At a glance
Happy times
• Foundation built to move the UI Development to
the next level
• Better rendering performance on mobile
• Shared knowledge and understanding
throughout, between all developers and the entire
design/product team

36. Christoph Reinartz - @pistenprinz
Ironman - At a glance
Happy times
• Optimized design-development process through
Atomic Design
• Changed coding guidelines and improved
structure (ITCSS, BEM, OOCSS, …)

37. Christoph Reinartz - @pistenprinz
Moved to ITCSS
Prepared base for new UI components

38. Christoph Reinartz - @pistenprinz
Graph before Ironman
Way better, but still …
peaks at the beginning
of the stylesheet

39. Christoph Reinartz - @pistenprinz
Graph after Ironman
Improved curve
New CSS
base
Adapted old UI components.
Can now be easily rebuilt!
SVG

40. Christoph Reinartz - @pistenprinz
Ready for the next steps
Automate the pattern integration

41. Christoph Reinartz - @pistenprinz
Thanks
I’m done
Christoph Reinartz
Team Lead UI/UX Engineering
@pistenprinz