Toolstrap - A CSS framework for Groupon Internal Tools

An overview of Groupon's CSS framework for internal tools.

Transcript

1. TOOLSTRAP
   A front-end framework for Groupon internal tools
   

   View Slide

2. 99 Problems
   • Developers spending time on CSS, not features
   • Designers spending time on CSS, not problem-solving
   • Inconsistency with brand, designs, etc. within apps
   • Inconsistency between apps
   • Developers blocked by lack of design/CSS
   

   View Slide

3. https://twitter.com/threedaymonk/status/174497507517267968
   

   View Slide

4. What is Toolstrap?
   http://twitter.github.com/bootstrap/ http://foundation.zurb.com/
   

   View Slide

5. View Slide

6. https://styleguide.groupondev.com/
   

   View Slide

7. “WTF is up with that font?”
   - Steven Walker, probably
   

   View Slide

8. Layouts
   

   View Slide

9. Tables
   

   View Slide

10. Forms
    

    View Slide

11. Buttons & Labels
    

    View Slide

12. Navigation & Tabs
    

    View Slide

13. Modules
    • Modals
    • Tooltips
    • Alerts
    • Accordions
    

    View Slide

14. Who’s using Toolstrap?
    • Coffee
    • Perfect Pipeline
    • Deal Estate
    • Deal Wizard
    • AM Workbench
    • Sales Workbench
    • Quantum Lead
    • CS Tools
    

    View Slide

15. Coffee
    

    View Slide

16. Deal Wizard
    

    View Slide

17. Sales Workbench
    

    View Slide

18. Mo’ Toolstrap, Mo’ Problems
    • Dependencies - Rails, JUI, SASS, Compass
    • Versioning - constantly in flux
    • Specificity - app-specific styles not abstracted out
    • Images - backgrounds, logos, icons
    • JavaScript - limited
    

    View Slide

19. View Slide

20. View Slide

21. Compiled CSS/JS Only
    Toolstrap Toolstrap 2
    YO DAWG, I HERD YOU LIKE FOLDERS...
    

    View Slide

22. http://smacss.com/
    

    View Slide

23. SMACCS - Categorizing CSS
    • Base - normalize.css; styling elements
    • Layout - grid, layouts
    • Module - reusable, modular design elements
    • State - active/inactive, hidden/visible; JS
    • Theme - added layer of design; multiple themes
    

    View Slide

24. View Slide

25. View Slide

26. Groupon Icon Font!
    

    View Slide

27. http://css-tricks.com/examples/IconFont/
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. http://icomoon.io/
    

    View Slide

32. • Groupon.eot (14k)
    Internet Explorer
    • Groupon.svg (74k)
    Webkit, Opera
    • Groupon.ttf (14k)
    Firefox 3.5, Webkit
    • Groupon.woff (26k)
    Firefox 3.6+
    • style.css (5k)
    • lte-ie7.js (4k)
    98 Icons
    

    View Slide

33. Category Icons
    

    View Slide

34. Form Input Icons
    

    View Slide

35. Spinner
    

    View Slide

36. Styles for Popular UI Libraries
    • jQuery UI
    • Select2
    • ???
    

    View Slide

37. (but CSS ain’t one)
    https://github.groupondev.com/internal-tools-bootstrap/toolstrap
    https://github.groupondev.com/maparicio/toolstrap2
    https://github.groupondev.com/maparicio/Groupon-Icon-Font
    

    View Slide

38. ?uestions?
    Mike Aparicio
    maparicio@groupon.com
    http://idol.pe/toolstrap
    

    View Slide