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

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
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
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
Avatar for Kazuki Adachi k_adachi_01
1
470
Amplify Gen2でbackend.tsにCDKを定義する/しない事によるCDKの挙動の違いとユースケース
Avatar for Makky12 smt7174
1
480
Jitera Company Deck
Avatar for Jitera Inc. jitera
0
270
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
110k
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい！Databricksのai_queryについて調べてみた
Avatar for Kamoshika kamoshika
1
270
VPCセキュリティ対応の最新事情
Avatar for nagisa_53 nagisa53
1
170
20260720_クラウド女子会×PyLadiesTokyoコラボ Amazon Bedrock ハンズオン用資料
Avatar for yuuuka yuuka51
1
110
Type-safe IaC for Dart
Avatar for Nozomi Koborinai coborinai
0
180
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
74k
AI x 開発生産性を取り巻く予算戦略と投資対効果
Avatar for Masato Ishigaki / 石垣雅人 i35_267
7
2.8k
書籍セキュアAPIについて
Avatar for RiiiM(りむ) riiimparm
0
130
AI時代におけるテストの基礎の再定義 / Rethinking the Fundamentals of Testing in the AI Era
Avatar for Matsu mineo_matsuya
12
3.8k

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
380
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
220
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
220
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
250
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
280
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.5k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k

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