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
110
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
事業部を超えた 開発生産性向上に挑戦する
kentakozuka
2
110
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
1.8k
Microsoft Fabric 開発ガイド
ryomaru0825
6
2.6k
【OpsJAWS】EC2 のセキュリティの運用と監視について考えてみた件
hssh2_bin
4
590
スクラムマスター不在でスクラムをやるのは(とても辛いので)やめておけ! #scrumfukuoka
nulabinc
PRO
4
890
SSMエージェントはIAMロールの夢を見るか/ Do SSM Agents Dream Of IAM Roles?
yukihirochiba
0
1.4k
[2024년 3월 세미나] 다른 회사는 퍼널 분석 어떻게 하고 있을까?
datarian
1
1.6k
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい5個のコツ - / How to start Scrum that is not written in the Scrum Guide
takaking22
14
5.2k
SmartHR プロダクトエンジニア求人ガイド 2024上期
smarthr
0
130
Uniting Rust Servers and Clients through OpenAPI
ahl
0
430
Azure AI サービス全体像と Prompt flow 紹介 - Forkwell Library
shohei1029
1
590
B+木入門:PHPで理解する データベースインデックスの仕組み/b-plus-tree-101
hanhan1978
5
2.7k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Navigating Team Friction
lara
177
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
930
The Invisible Side of Design
smashingmag
293
49k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
How to train your dragon (web standard)
notwaldorf
71
5k
Building Adaptive Systems
keathley
29
1.8k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
What the flash - Photography Introduction
edds
64
11k
It's Worth the Effort
3n
180
27k
Building Your Own Lightsaber
phodgson
97
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