Toolstrap - A CSS framework for Groupon Internal Tools

Transcript

1. 1.

   TOOLSTRAP A front-end framework for Groupon internal tools

2. 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
3. 3.

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

4. 4.

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

5. 5.

   None
6. 6.

   https://styleguide.groupondev.com/

7. 7.

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

8. 8.

   Layouts

9. 9.

   Tables

10. 10.

    Forms

11. 11.

    Buttons & Labels

12. 12.

    Navigation & Tabs

13. 13.

    Modules • Modals • Tooltips • Alerts • Accordions

14. 14.

    Who’s using Toolstrap? • Coffee • Perfect Pipeline • Deal

    Estate • Deal Wizard • AM Workbench • Sales Workbench • Quantum Lead • CS Tools
15. 15.

    Coffee

16. 16.

    Deal Wizard

17. 17.

    Sales Workbench

18. 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
19. 19.

    None
20. 20.

    None
21. 21.

    Compiled CSS/JS Only Toolstrap Toolstrap 2 YO DAWG, I HERD

    YOU LIKE FOLDERS...
22. 22.

    http://smacss.com/

23. 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
24. 24.

    None
25. 25.

    None
26. 26.

    Groupon Icon Font!

27. 27.

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

28. 28.

    None
29. 29.

    None
30. 30.

    None
31. 31.

    http://icomoon.io/

32. 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
33. 33.

    Category Icons

34. 34.

    Form Input Icons

35. 35.

    Spinner

36. 36.

    Styles for Popular UI Libraries • jQuery UI • Select2

    • ???
37. 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

38. 38.

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