Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Toolstrap - A CSS framework for Groupon Interna...

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

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
Tweet

More Decks by Mike Aparicio

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

Other Decks in Technology

See All in Technology
ブラウザ拡張のセキュリティの話 / Browser Extension Security
Avatar for GMO Flatt Security flatt_security
0
220
"なるべくスケジューリングしない" を実現する "PreferNoSchedule" taint
Avatar for Kazuki Suda superbrothers
0
120
.NET 10 のパフォーマンス改善
Avatar for neno nenonaninu
2
2k
都市スケールAR制作で気をつけること
Avatar for segur segur
0
210
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6k
IPv6-mostly field report from RubyKaigi 2026
Avatar for Sorah Fukumori sorah
0
230
MAP-7thplaceSolution
Avatar for yukichi0403 yukichi0403
2
210
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
Avatar for uhyo uhyo
1
110
インフラ室事例集
Avatar for MIXI ENGINEERS mixi_engineers
PRO
2
130
Pandocでmd→pptx便利すぎワロタwww
Avatar for meow meow_noisy
2
1.1k
SRE視点で振り返るメルカリのアーキテクチャ変遷と普遍的な考え
Avatar for foostan foostan
2
3.1k
命名から始めるSpec Driven
Avatar for Kurowi kuruwic
3
700

Featured

See All Featured
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.3k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
690

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