Toolstrap - A CSS framework for Groupon Internal Tools

Transcript

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

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. https://twitter.com/threedaymonk/status/174497507517267968

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

5. None

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

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

8. Layouts

9. Tables

10. Forms

11. Buttons & Labels

12. Navigation & Tabs

13. Modules • Modals • Tooltips • Alerts • Accordions

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

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

15. Coffee

16. Deal Wizard

17. Sales Workbench

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. None
20. None

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

    YOU LIKE FOLDERS...

22. http://smacss.com/

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. None
25. None

26. Groupon Icon Font!

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

28. None
29. None
30. None

31. http://icomoon.io/

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. Category Icons

34. Form Input Icons

35. Spinner

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

    • ???

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. ?uestions? Mike Aparicio maparicio@groupon.com http://idol.pe/toolstrap