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
46
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
540
Prototyping with HTML and CSS
peruvianidol
2
240
Building a Dream Team
peruvianidol
0
240
Other Decks in Technology
See All in Technology
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
130
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
230
新規事業におけるAIリサーチの活用例
ranxxx
0
140
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
290
スプリントレビューを効果的にするために
miholovesq
9
1.6k
本当にわかりやすいAIエージェント入門
segavvy
10
5.9k
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
200
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
260
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
180
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
540
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
660
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
120
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Unsuck your backbone
ammeep
671
58k
Documentation Writing (for coders)
carmenintech
72
4.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to train your dragon (web standard)
notwaldorf
96
6.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
[email protected]
http://idol.pe/toolstrap