Your SlideShare is downloading. ×
  • Like
Toolstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Toolstrap

  • 271 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
271
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. TOOLSTRAPA 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. https://styleguide.groupondev.com/
  • 6. “WTF is up with that font?”- Steven Walker, probably
  • 7. Layouts
  • 8. Tables
  • 9. Forms
  • 10. Buttons & Labels
  • 11. Navigation & Tabs
  • 12. Modules• Modals• Tooltips• Alerts• Accordions
  • 13. Who’s using Toolstrap?• Coffee• Perfect Pipeline• Deal Estate• Deal Wizard• AM Workbench• Sales Workbench• Quantum Lead• CS Tools
  • 14. Coffee
  • 15. Deal Wizard
  • 16. Sales Workbench
  • 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. Compiled CSS/JS OnlyToolstrap Toolstrap 2YO DAWG, I HERDYOU LIKE FOLDERS...
  • 19. http://smacss.com/
  • 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. Groupon Icon Font!
  • 22. http://css-tricks.com/examples/IconFont/
  • 23. http://icomoon.io/
  • 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. Category Icons
  • 26. Form Input Icons
  • 27. Spinner
  • 28. Styles for Popular UI Libraries• jQuery UI• Select2• ???
  • 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. ?uestions?Mike Apariciomaparicio@groupon.comhttp://idol.pe/toolstrap