Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Toolstrap - A CSS framework for Groupon Interna...

Avatar for Mike Aparicio Mike Aparicio
October 24, 2012
Technology
8
4.2k

Toolstrap - A CSS framework for Groupon Internal Tools

An overview of Groupon's CSS framework for internal tools.
Avatar for Mike Aparicio

Mike Aparicio

October 24, 2012
Tweet

More Decks by Mike Aparicio

See All by Mike Aparicio
Templating: Eleventy's Superpower
Avatar for Mike Aparicio peruvianidol
0
44
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
270
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
250
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
240
Designing for the Web in a Multi-Device World
Avatar for Mike Aparicio peruvianidol
2
140
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
370
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
540
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
240
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
230

Other Decks in Technology

See All in Technology
asken AI勉強会(Android)
Avatar for 佐藤忠 tadashi_sato
0
140
怖くない！はじめてのClaude Code
Avatar for Shinya Masadome（東京AI祭） shinya337
0
290
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
Avatar for すてにゃん stefafafan
0
150
Liquid Glass革新とSwiftUI/UIKit進化
Avatar for Fumiya Sakai fumiyasac0921
0
300
AI専用のリンターを作る #yumemi_patch
Avatar for 弁護士ドットコム bengo4com
3
1.8k
FOSS4G 2025 KANSAI　QGISで点群データをいろいろしてみた
Avatar for kou_kita kou_kita
0
170
Beyond Kaniko: Navigating Unprivileged Container Image Creation
Avatar for Felix Dreissig f30
0
100
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
67k
作曲家がボカロを使うようにPdMはAIを使え
Avatar for Takuya Ito itotaxi
0
380
ドメイン特化なCLIPモデルとデータセットの紹介
Avatar for tattaka tattaka
1
440
ビギナーであり続ける/beginning
Avatar for 小田中育生 ikuodanaka
1
180
Zephyr RTOSを使った開発コンペに参加した件
Avatar for misoji engineer iotengineer22
0
130

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
300
51k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k

Transcript

  1. TOOLSTRAP A front-end framework for Groupon internal tools

  2. 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

  3. https://twitter.com/threedaymonk/status/174497507517267968

  4. What is Toolstrap? http://twitter.github.com/bootstrap/ http://foundation.zurb.com/

  5. None

  6. https://styleguide.groupondev.com/

  7. “WTF is up with that font?” - Steven Walker, probably

  8. Layouts

  9. Tables

  10. Forms

  11. Buttons & Labels

  12. Navigation & Tabs

  13. Modules • Modals • Tooltips • Alerts • Accordions

  14. Who’s using Toolstrap? • Coffee • Perfect Pipeline • Deal

    Estate • Deal Wizard • AM Workbench • Sales Workbench • Quantum Lead • CS Tools

  15. Coffee

  16. Deal Wizard

  17. Sales Workbench

  18. 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
  19. None
  20. None

  21. Compiled CSS/JS Only Toolstrap Toolstrap 2 YO DAWG, I HERD

    YOU LIKE FOLDERS...

  22. http://smacss.com/

  23. 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
  24. None
  25. None

  26. Groupon Icon Font!

  27. http://css-tricks.com/examples/IconFont/

  28. None
  29. None
  30. None

  31. http://icomoon.io/

  32. • 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

  33. Category Icons

  34. Form Input Icons

  35. Spinner

  36. Styles for Popular UI Libraries • jQuery UI • Select2

    • ???

  37. (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

  38. ?uestions? Mike Aparicio [email protected] http://idol.pe/toolstrap