Toolstrap - A CSS framework for Groupon Internal Tools

6389097e6acf134606d06217a3c41e47?s=47 Mike Aparicio
October 24, 2012

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

Transcript

  1. 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
  2. 5.
  3. 8.
  4. 9.
  5. 10.
  6. 14.

    Who’s using Toolstrap? • Coffee • Perfect Pipeline • Deal

    Estate • Deal Wizard • AM Workbench • Sales Workbench • Quantum Lead • CS Tools
  7. 15.
  8. 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
  9. 19.
  10. 20.
  11. 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
  12. 24.
  13. 25.
  14. 28.
  15. 29.
  16. 30.
  17. 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
  18. 35.