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

Toolstrap - A CSS framework for Groupon Interna...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
330
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
590
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
290

Other Decks in Technology

See All in Technology
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
7
19k
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
Avatar for SMS tech sms_tech
1
260
Agent 時代の Kaggle 展望 / kaggle-in-the-agentic-era
Avatar for Shotaro Ishihara upura
1
720
同じWAFが、攻撃の“形”は弾く── 正当な“形”の不正は通す
Avatar for kuroneko kuroneko13
0
190
【CEDEC2026】グラフィックスエンジニアのためのニューラルシェーディング入門
Avatar for Cygames, Inc. cygames
PRO
0
150
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k
老害フォレンジッカーはAI羊の夢を見るか？
Avatar for tadmaddad tadmaddad
0
320
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
2
7.7k
MIRU 2026 チュートリアル
Avatar for Keisuke Fujii keisuke198619
0
910
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
19k
社内の7割が使うデータ基盤を、 データチーム2人で回すためにやったこと
Avatar for KOH koh_yoshi
4
1.3k
ハーレムエンジニアリング
Avatar for yamachan kazuma777777
0
150

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.1k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
910
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
430
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
890
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
480
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k

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