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 Internal Tools
Search
Mike Aparicio
October 24, 2012
Technology
8
3.9k
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
19
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
250
CSS Layout and Responsive Design
peruvianidol
0
220
Intro to HTML and CSS
peruvianidol
2
220
Designing for the Web in a Multi-Device World
peruvianidol
2
120
Road to Responsive
peruvianidol
4
360
Fun with Flexbox
peruvianidol
4
500
Prototyping with HTML and CSS
peruvianidol
2
220
Building a Dream Team
peruvianidol
0
170
Other Decks in Technology
See All in Technology
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.8k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
17
3.2k
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
コードレビューを支援するAI技術の応用
akkie76
2
150
GraphQLに入門してみた
chiroruxx
2
130
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
6
720
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.6k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
270
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
450
大規模データとの戦い方
knih
1
480
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
A designer walks into a library…
pauljervisheath
199
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
A Modern Web Designer's Workflow
chriscoyier
689
190k
Optimizing for Happiness
mojombo
369
69k
Infographics Made Easy
chrislema
237
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
RailsConf 2023
tenderlove
0
510
Adopting Sorbet at Scale
ufuk
66
8.5k
Documentation Writing (for coders)
carmenintech
59
3.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
A Philosophy of Restraint
colly
195
15k
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