Toolstrap is a front-end framework for building Groupon internal tools. It aims to solve common problems like developers spending too much time on CSS instead of features, and inconsistency in branding and designs across apps. Toolstrap provides pre-built layouts, components, modules and styles based on frameworks like Bootstrap and Foundation to standardize the look and speed up development. It includes a custom Groupon icon font and styles for popular UI libraries that can be compiled into a single CSS/JS file for use.

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/

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

21. Compiled CSS/JS Only
Toolstrap Toolstrap 2
YO DAWG, I HERDYOU 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

26. Groupon Icon Font!

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

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