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.1k
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
26
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
520
Prototyping with HTML and CSS
peruvianidol
2
230
Building a Dream Team
peruvianidol
0
210
Other Decks in Technology
See All in Technology
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
330
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
非機能品質を作り込むための実践アーキテクチャ
knih
3
870
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
UI State設計とテスト方針
rmakiyama
2
420
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
840
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
220
.NET 9 のパフォーマンス改善
nenonaninu
0
710
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Being A Developer After 40
akosma
87
590k
How to Ace a Technical Interview
jacobian
276
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.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
[email protected]
http://idol.pe/toolstrap