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.3k
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
48
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
290
CSS Layout and Responsive Design
peruvianidol
0
260
Intro to HTML and CSS
peruvianidol
2
240
Designing for the Web in a Multi-Device World
peruvianidol
2
140
Road to Responsive
peruvianidol
4
370
Fun with Flexbox
peruvianidol
4
540
Prototyping with HTML and CSS
peruvianidol
2
240
Building a Dream Team
peruvianidol
0
240
Other Decks in Technology
See All in Technology
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
Git in Team
kawaguti
PRO
3
370
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
290
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
170
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
フレームワークを意識させないワークショップづくり
keigosuda
0
180
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
770
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
310
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
210
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Done Done
chrislema
185
16k
Statistics for Hackers
jakevdp
799
220k
Mobile First: as difficult as doing things right
swwweet
224
10k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Speed Design
sergeychernyshev
32
1.2k
The Cost Of JavaScript in 2023
addyosmani
55
9k
How to Ace a Technical Interview
jacobian
280
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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