Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Toolstrap - A CSS framework for Groupon Internal Tools
Mike Aparicio
October 24, 2012
Technology
8
3.6k
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
13
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
2
180
CSS Layout and Responsive Design
peruvianidol
0
190
Intro to HTML and CSS
peruvianidol
2
210
Designing for the Web in a Multi-Device World
peruvianidol
2
88
Road to Responsive
peruvianidol
4
310
Fun with Flexbox
peruvianidol
4
470
Prototyping with HTML and CSS
peruvianidol
2
180
Building a Dream Team
peruvianidol
0
160
Other Decks in Technology
See All in Technology
AWS Step Functions を用いた非同期学習処理の例
hacarus
0
110
セキュリティ・キャンプ全国大会2022 企業紹介イベント/seccamp2022-nikkei
nikkei_engineer_recruiting
0
150
DevRel組織についての考察
taijihagino
PRO
0
150
開発環境のセキュリティおよびCI/CDパイプラインのセキュア化
rung
PRO
13
5.3k
殺虫剤のパラドックスの真実 / The Truth of The Pesticide Paradox
kzsuzuki
1
210
Life Hacker with LINE Bot and GitHub API
line_developers_tw
PRO
0
5.7k
バッファープールが大きいMySQL v5.7でDROP DATABASEが詰まった原因と対策 / Causes and Remedies for DROP DATABASE Stuck in MySQL v5.7 with Large Buffer Pool
line_developers
PRO
4
860
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
nulabinc
PRO
1
530
DeFiChain Tech Talk - DFI Uniswap Staking, DeFi Options & DeFi Meta Chain
uzyn
0
120
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
sakon310
4
480
Settlement simulation testing to ensure correct settlement processing
applepine1125
2
1.6k
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
owlinux1000
0
320
Featured
See All Featured
Practical Orchestrator
shlominoach
178
8.7k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Bootstrapping a Software Product
garrettdimon
296
110k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
What the flash - Photography Introduction
edds
63
10k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Three Pipe Problems
jasonvnalue
89
8.7k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Infographics Made Easy
chrislema
233
17k
Facilitating Awesome Meetings
lara
29
4.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
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