toolstrap - sitewise - web design and development, chicago
TRANSCRIPT
TOOLSTRAPA front-end framework for Groupon internal tools
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
https://twitter.com/threedaymonk/status/174497507517267968
What is Toolstrap?
http://twitter.github.com/bootstrap/ http://foundation.zurb.com/
https://styleguide.groupondev.com/
“WTF is up with that font?”- Steven Walker, probably
Layouts
Tables
Forms
Buttons & Labels
Navigation & Tabs
Modules
• Modals
• Tooltips
• Alerts
• Accordions
Who’s using Toolstrap?
• Coffee
• Perfect Pipeline
• Deal Estate
• Deal Wizard
• AM Workbench
• Sales Workbench
• Quantum Lead
• CS Tools
Coffee
Deal Wizard
Sales Workbench
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
Compiled CSS/JS Only
Toolstrap Toolstrap 2
YO DAWG, I HERD YOU LIKE FOLDERS...
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
Groupon Icon Font!
http://css-tricks.com/examples/IconFont/
• 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
Category Icons
Form Input Icons
Spinner
Styles for Popular UI Libraries
• jQuery UI
• Select2
• ???
(but CSS ain’t one)
https://github.groupondev.com/internal-tools-bootstrap/toolstraphttps://github.groupondev.com/maparicio/toolstrap2
https://github.groupondev.com/maparicio/Groupon-Icon-Font
