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
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
890
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
860
統計的学習理論読み Chapter 2
kmatsui
1
270
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.7k
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
550
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
20240321_生成AI時代のDevOps
kzkmaeda
2
610
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.5k
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
170
こんなに簡単!AWSマルチアカウント
takuya_terada
0
120
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
42
6.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
In The Pink: A Labor of Love
frogandcode
137
21k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Navigating Team Friction
lara
177
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Debugging Ruby Performance
tmm1
68
11k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.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