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

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
Templating: Eleventy's Superpower
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
13
Lessons From the Coupon Factory: Design Systems at Scale
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
180
CSS Layout and Responsive Design
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
190
Intro to HTML and CSS
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
210
Designing for the Web in a Multi-Device World
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
88
Road to Responsive
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
310
Fun with Flexbox
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
4
470
Prototyping with HTML and CSS
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
2
180
Building a Dream Team
6389097e6acf134606d06217a3c41e47?s=48 peruvianidol
0
160

Other Decks in Technology

See All in Technology
AWS Step Functions を用いた非同期学習処理の例
227382dbd5e033db211c159edf32853c?s=48 hacarus
0
110
セキュリティ・キャンプ全国大会2022 企業紹介イベント/seccamp2022-nikkei
0e0cf8e93ddd87cf0224ae7f1ed8e46c?s=48 nikkei_engineer_recruiting
0
150
DevRel組織についての考察
57c9c4b846c73c911cbf795d211904f3?s=48 taijihagino
PRO
0
150
開発環境のセキュリティおよびCI/CDパイプラインのセキュア化
Dc03bf56cb3157b6036f9818593d7e40?s=48 rung
PRO
13
5.3k
殺虫剤のパラドックスの真実 / The Truth of The Pesticide Paradox
45b1fa2c7e781175da2a4be78bbfc1f9?s=48 kzsuzuki
1
210
Life Hacker with LINE Bot and GitHub API
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
5.7k
バッファープールが大きいMySQL v5.7でDROP DATABASEが詰まった原因と対策 / Causes and Remedies for DROP DATABASE Stuck in MySQL v5.7 with Large Buffer Pool
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
4
860
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
1
530
DeFiChain Tech Talk - DFI Uniswap Staking, DeFi Options & DeFi Meta Chain
Cae2dd246ed83dd458e4ce5f927aa2f7?s=48 uzyn
0
120
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
E7f82c6db76f340b8ccc175d4330405b?s=48 sakon310
4
480
Settlement simulation testing to ensure correct settlement processing
23e9a5be8e46efd1cf6a07694a047237?s=48 applepine1125
2
1.6k
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
41202c03511a51064abb970da0ca9fad?s=48 owlinux1000
0
320

Featured

See All Featured
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.7k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
173
8.6k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
63
10k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
6k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
11k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k
Put a Button on it: Removing Barriers to Going Fast.
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.3k

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