Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Toolstrap - A CSS framework for Groupon Internal Tools

6389097e6acf134606d06217a3c41e47?s=47 Mike Aparicio
October 24, 2012
Technology
8
3.4k

Toolstrap - A CSS framework for Groupon Internal Tools

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

6389097e6acf134606d06217a3c41e47?s=128

Mike Aparicio

October 24, 2012
Tweet

More Decks by Mike Aparicio

See All by Mike Aparicio
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
6
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
110
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
160
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
200
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
82
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
280
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
450
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
150
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
150

Other Decks in Technology

See All in Technology
88b514e6413838c0d0cfb3257cefd19d?s=48 kamata_shingo
0
340
E163ae0588e154424d78e17672076ef4?s=48 kosugitti
3
440
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
160
2559c50bf24b65eaba52fd7c75260c93?s=48 olgamaciaszek
1
160
510ec964f5d26c2724c883fd7b671e3d?s=48 cygames
0
320
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
3
1.8k
00101a1274d1f92977f4e442ef73be86?s=48 ahana
0
110
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
2k
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
230
A73e8918471bd7e3065d129e2ed75e98?s=48 ystk_hara
0
430
2219597a939c895e5db6f8b7c94e2859?s=48 pojiro
0
320
3ac512f1cbab89f8671ff4718f23d150?s=48 takewell
0
250

Featured

See All Featured
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
342
16k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
235
18k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
333
16k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
287
47k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
29
1.7k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.6k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
119
7.4k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.7k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
235
950k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
227
8.9k

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