Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Toolstrap - A CSS framework for Groupon Interna...

Avatar for Mike Aparicio Mike Aparicio
October 24, 2012
Technology
4.4k
8

Toolstrap - A CSS framework for Groupon Internal Tools

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

Avatar for Mike Aparicio

Mike Aparicio

October 24, 2012

More Decks by Mike Aparicio

See All by Mike Aparicio
Templating: Eleventy's Superpower
Avatar for Mike Aparicio peruvianidol
0
100
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
340
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
290
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Designing for the Web in a Multi-Device World
Avatar for Mike Aparicio peruvianidol
2
170
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
400
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
600
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
280
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
300

Other Decks in Technology

See All in Technology
MCPをつなげて作る組織横断のAIエージェント基盤(の開発工程)
Avatar for Yuta Matsumura tsubakimoto_s
0
130
synctest時代のhttptest Go 1.27で変わるHTTPサーバテストの裏側 / go conference2026 synctest and httptest
Avatar for Yoichiro Shimizu budougumi0617
1
3k
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
Avatar for みのるん minorun365
PRO
27
20k
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
Avatar for 10xinc 10xinc
0
1.9k
作品が生態系になった ─ Mini Tokyo 3D から世界へ
Avatar for 草薙昭彦 nagix
0
190
2026_devsumi_ozono.pdf
Avatar for O3(ozono) o3
3
500
DEFCON34-Write-up_HYCu-MYCu
Avatar for okzkey daikiokazaki
0
160
AI時代の「技術的負債」の変質ー概念の終焉と再解釈、エージェントと共に向かう先
Avatar for nwiizo nwiizo
0
2.6k
AIエージェントの自己改善をどう設計するか / How to Design Self-Improvement for AI Agents
Avatar for 223 22mi
23
15k
幾何アルゴリズムで なめらかなピン操作を / iOSDC Japan 2026 / smoothpin
Avatar for nade kazumanagano
0
350
株式会社シーエーシー　エンジニア向け会社紹介資料
Avatar for 株式会社シーエーシー cac
0
57k
AIネイティブプロダクトで顧客価値を最大化するプロダクトエンジニアとFDEの協働
Avatar for RightTouch righttouch
PRO
0
310

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
870
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
230
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
420
HDC tutorial
Avatar for Michiel Stock michielstock
2
870
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
450
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k

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 [email protected] http://idol.pe/toolstrap