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
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 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
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