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
4k
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
22
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
250
CSS Layout and Responsive Design
peruvianidol
0
230
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
510
Prototyping with HTML and CSS
peruvianidol
2
230
Building a Dream Team
peruvianidol
0
180
Other Decks in Technology
See All in Technology
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
750
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
307
41k
Automating Front-end Workflow
addyosmani
1362
200k
YesSQL, Process and Tooling at Scale
rocio
166
14k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
How to Ace a Technical Interview
jacobian
274
23k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Building an army of robots
kneath
301
42k
Docker and Python
trallard
37
2.9k
Happy Clients
brianwarren
94
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.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