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.3k
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
77
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
320
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
280
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
260
Designing for the Web in a Multi-Device World
Avatar for Mike Aparicio peruvianidol
2
160
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
390
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
570
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
270

Other Decks in Technology

See All in Technology
目的ファーストのハーネス設計 ~ハーネスの変更容易性を高めるための優先順位~
Avatar for Gota gotalab555
8
2.3k
コミュニティ・勉強会を作るのは目的じゃない
Avatar for uutan1108 ohmori_yusuke
0
250
今年注目する！データ分析プラットフォームでのAIの活用
Avatar for Nayuta S. nayuts
0
150
20260428_Product Management Summit_Loglass_JoeHirose
Avatar for 広瀬丈 loglassjoe
2
3.5k
260422_Sansan_Tech_Talk__関西_vol.3_データ活用のリアル__矢田__.pdf
Avatar for SansanTech sansantech
PRO
0
120
レビューしきれない？それは「全て人力でのレビュー」だからではないでしょうか
Avatar for amixedcolor amixedcolor
0
340
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
3
300
M5Stack CoreS3とZephyr(RTOS)で Edge AIっぽいことしてみた
Avatar for misoji engineer iotengineer22
0
280
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.4k
EBS暗号化に失敗してEC2が動かなくなった話
Avatar for Moe Hamaguchi hamaguchimmm
2
210
Route 53 Global Resolver で高額課金発生！
Avatar for otanikohei otanikohei2023
0
110
Chasing Real-Time Observability for CRuby
Avatar for White-Green whitegreen
0
200

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
160
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
150
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.7k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
280
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
6
35k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
890
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
130

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