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

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
8
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
140
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
170
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
210
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
84
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
290
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
450
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
160
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
150

Other Decks in Technology

See All in Technology
Fad1e9ed293fc5b3ec7d4abdffeb636f?s=48 auxesis
0
880
1b031ccbf968811f157cf7a892dddfed?s=48 geshan
1
300
0886c70b5ecf3b0b0ee6500c5e47884d?s=48 ecoopnet
0
190
93dcbac1a838bbec898747bb92aa47cc?s=48 sadonosake
0
1.7k
A64ac825509279a770c13c6fc517f11a?s=48 kawaguti
PRO
4
3k
Ba839fb9b340517b63cb518c8b9c26bd?s=48 simosako
4
3.7k
36bb9dcd778d2a9621d44e92425d0907?s=48 hhiroshell
1
560
13d936e697fe0f4fa96f926d0a712f6c?s=48 sansanbuildersbox
PRO
1
350
20ddbe9b7cfdde5e2dfeb8d8714d5de8?s=48 tarugoconf
0
2.5k
A64ac825509279a770c13c6fc517f11a?s=48 kawaguti
PRO
0
200
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
0
280
476e7a02d660b5dd640cb020ec0a9085?s=48 taka66
1
1.7k

Featured

See All Featured
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
23
1.3k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
212
7.3k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.3k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
337
30k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.4k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.6k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
33
3.2k
282d599b414022eba5096510f675b6e2?s=48 chrislema
232
16k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
7.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