Toolstrap
-
Upload
mike-aparicio -
Category
Technology
-
view
103 -
download
0
description
Transcript of Toolstrap
![Page 1: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/1.jpg)
TOOLSTRAPA front-end framework for Groupon internal tools
![Page 2: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/2.jpg)
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
![Page 3: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/3.jpg)
https://twitter.com/threedaymonk/status/174497507517267968
![Page 4: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/4.jpg)
What is Toolstrap?
http://twitter.github.com/bootstrap/ http://foundation.zurb.com/
![Page 5: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/5.jpg)
![Page 6: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/6.jpg)
https://styleguide.groupondev.com/
![Page 7: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/7.jpg)
“WTF is up with that font?”- Steven Walker, probably
![Page 8: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/8.jpg)
Layouts
![Page 9: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/9.jpg)
Tables
![Page 10: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/10.jpg)
Forms
![Page 11: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/11.jpg)
Buttons & Labels
![Page 12: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/12.jpg)
Navigation & Tabs
![Page 13: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/13.jpg)
Modules
• Modals
• Tooltips
• Alerts
• Accordions
![Page 14: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/14.jpg)
Who’s using Toolstrap?
• Coffee
• Perfect Pipeline
• Deal Estate
• Deal Wizard
• AM Workbench
• Sales Workbench
• Quantum Lead
• CS Tools
![Page 15: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/15.jpg)
Coffee
![Page 16: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/16.jpg)
Deal Wizard
![Page 17: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/17.jpg)
Sales Workbench
![Page 18: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/18.jpg)
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
![Page 19: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/19.jpg)
![Page 20: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/20.jpg)
![Page 21: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/21.jpg)
Compiled CSS/JS Only
Toolstrap Toolstrap 2
YO DAWG, I HERD YOU LIKE FOLDERS...
![Page 23: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/23.jpg)
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
![Page 24: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/24.jpg)
![Page 25: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/25.jpg)
![Page 26: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/26.jpg)
Groupon Icon Font!
![Page 27: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/27.jpg)
http://css-tricks.com/examples/IconFont/
![Page 28: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/28.jpg)
![Page 29: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/29.jpg)
![Page 30: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/30.jpg)
![Page 32: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/32.jpg)
• 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
![Page 33: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/33.jpg)
Category Icons
![Page 34: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/34.jpg)
Form Input Icons
![Page 35: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/35.jpg)
Spinner
![Page 36: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/36.jpg)
Styles for Popular UI Libraries
• jQuery UI
• Select2
• ???
![Page 37: Toolstrap](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c7adf04a7959622b8b4606/html5/thumbnails/37.jpg)
(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