Toolstrap

446 views
394 views

Published on

An overview of Groupon's CSS framework for internal tools.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
446
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Toolstrap

  1. 1. TOOLSTRAPA front-end framework for Groupon internal tools
  2. 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. 3. https://twitter.com/threedaymonk/status/174497507517267968
  4. 4. What is Toolstrap?http://twitter.github.com/bootstrap/ http://foundation.zurb.com/
  5. 5. https://styleguide.groupondev.com/
  6. 6. “WTF is up with that font?”- Steven Walker, probably
  7. 7. Layouts
  8. 8. Tables
  9. 9. Forms
  10. 10. Buttons & Labels
  11. 11. Navigation & Tabs
  12. 12. Modules• Modals• Tooltips• Alerts• Accordions
  13. 13. Who’s using Toolstrap?• Coffee• Perfect Pipeline• Deal Estate• Deal Wizard• AM Workbench• Sales Workbench• Quantum Lead• CS Tools
  14. 14. Coffee
  15. 15. Deal Wizard
  16. 16. Sales Workbench
  17. 17. 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
  18. 18. Compiled CSS/JS OnlyToolstrap Toolstrap 2YO DAWG, I HERDYOU LIKE FOLDERS...
  19. 19. http://smacss.com/
  20. 20. 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
  21. 21. Groupon Icon Font!
  22. 22. http://css-tricks.com/examples/IconFont/
  23. 23. http://icomoon.io/
  24. 24. • 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
  25. 25. Category Icons
  26. 26. Form Input Icons
  27. 27. Spinner
  28. 28. Styles for Popular UI Libraries• jQuery UI• Select2• ???
  29. 29. (but CSS ain’t one)https://github.groupondev.com/internal-tools-bootstrap/toolstraphttps://github.groupondev.com/maparicio/toolstrap2https://github.groupondev.com/maparicio/Groupon-Icon-Font
  30. 30. ?uestions?Mike Apariciomaparicio@groupon.comhttp://idol.pe/toolstrap

×