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
31
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
260
CSS Layout and Responsive Design
peruvianidol
0
240
Intro to HTML and CSS
peruvianidol
2
230
Designing for the Web in a Multi-Device World
peruvianidol
2
130
Road to Responsive
peruvianidol
4
360
Fun with Flexbox
peruvianidol
4
530
Prototyping with HTML and CSS
peruvianidol
2
230
Building a Dream Team
peruvianidol
0
220
Other Decks in Technology
See All in Technology
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
290
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
JavaにおけるNull非許容性
skrb
2
2.7k
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
170
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.5k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.1k
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
430
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Adopting Sorbet at Scale
ufuk
75
9.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Designing for Performance
lara
605
68k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Typedesign – Prime Four
hannesfritz
41
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
A better future with KSS
kneath
238
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
RailsConf 2023
tenderlove
29
1k
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 maparicio@groupon.com http://idol.pe/toolstrap