Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Toolstrap - A CSS framework for Groupon Interna...
Search
Mike Aparicio
October 24, 2012
Technology
8
4.2k
Toolstrap - A CSS framework for Groupon Internal Tools
An overview of Groupon's CSS framework for internal tools.
Mike Aparicio
October 24, 2012
Tweet
Share
More Decks by Mike Aparicio
See All by Mike Aparicio
Templating: Eleventy's Superpower
peruvianidol
0
43
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
270
CSS Layout and Responsive Design
peruvianidol
0
250
Intro to HTML and CSS
peruvianidol
2
240
Designing for the Web in a Multi-Device World
peruvianidol
2
140
Road to Responsive
peruvianidol
4
370
Fun with Flexbox
peruvianidol
4
530
Prototyping with HTML and CSS
peruvianidol
2
240
Building a Dream Team
peruvianidol
0
230
Other Decks in Technology
See All in Technology
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
700
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
2
380
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.2k
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
380
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
Welcome to the LLM Club
koic
0
130
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
0
240
知識を整理して未来を作る 〜SKDとAI協業への助走〜
yosh1995
0
140
生成AIでwebアプリケーションを作ってみた
tajimon
2
120
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
53
32k
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
230
ローカルLLMでファインチューニング
knishioka
0
120
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Site-Speed That Sticks
csswizardry
10
650
Automating Front-end Workflow
addyosmani
1370
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Typedesign – Prime Four
hannesfritz
42
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Code Review Best Practice
trishagee
68
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Transcript
TOOLSTRAP A 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/
None
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
None
None
Compiled CSS/JS Only Toolstrap Toolstrap 2 YO DAWG, I HERD
YOU LIKE FOLDERS...
http://smacss.com/
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
None
None
Groupon Icon Font!
http://css-tricks.com/examples/IconFont/
None
None
None
http://icomoon.io/
• 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/toolstrap https://github.groupondev.com/maparicio/toolstrap2 https://github.groupondev.com/maparicio/Groupon-Icon-Font
?uestions? Mike Aparicio
[email protected]
http://idol.pe/toolstrap