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

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
2
100
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
150
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
200
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
81
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
280
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
450
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
140
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
150
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
180

Other Decks in Technology

See All in Technology
9df0566fad9c9ca3bf669917848878fe?s=48 i35_267
1
120
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
PRO
0
160
573d75e1a72107ff5c806d7e70a9e67d?s=48 michimani
0
300
7fb060398b26ed622d34921bd64e4f5d?s=48 yoshiakiyamasaki
0
120
069cd7a173dfb7d46c8b6b90624f5bf1?s=48 nasrinjp
0
460
9b2600a82821673d9d0f03cc6f7bc56e?s=48 kloudleinc
0
110
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
160
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
110
A4d5b3aae2e67f31b513c88c726514c2?s=48 smzksts
1
240
7975b9fd58c8945ae1c6b38747de7f28?s=48 line_developers_tw2
0
130
E9a13bad191688bca6cdcf4a12195bb4?s=48 hanakara_milk
0
210
D8e79ab09f15e69d600c00131bf7d2a9?s=48 yfutamura
0
400

Featured

See All Featured
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
29
990
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.7k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
28
1.1k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
776
200k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
57
5.5k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
64
3.8k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
120
8k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
35
1.7k

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