Toolstrap

May 4, 20130 likes557 views

Toolstrap is a front-end framework for building Groupon internal tools. It aims to solve common problems like developers spending too much time on CSS instead of features, and inconsistency in branding and designs across apps. Toolstrap provides pre-built layouts, components, modules and styles based on frameworks like Bootstrap and Foundation to standardize the look and speed up development. It includes a custom Groupon icon font and styles for popular UI libraries that can be compiled into a single CSS/JS file for use.

TOOLSTRAP
A front-end framework for Groupon internal tools

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

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

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

Modules
• Modals
• Tooltips
• Alerts
• Accordions

Who’s using Toolstrap?
• Coffee
• Perfect Pipeline
• Deal Estate
• Deal Wizard
• AM Workbench
• Sales Workbench
• Quantum Lead
• CS Tools

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

Compiled CSS/JS Only
Toolstrap Toolstrap 2
YO DAWG, I HERDYOU LIKE FOLDERS...

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

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

• 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

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
maparicio@groupon.com
http://idol.pe/toolstrap

This document provides advice for getting a first job in UX design. It recommends showcasing your UX process and portfolio, which should include deliverables from each stage of the design process like personas, user flows, prototypes, and test results. Examples of portfolio websites from other UX designers are provided, as well as a list of common UX job roles. Generalist roles that combine skills are suggested as a good fit for beginners seeking their first job.

Introduction to an UX tool _ Axure_Liz XuLiz Xu

��

This document discusses the UX design tool Axure and its uses for wireframing and prototyping. It begins with an overview of what Axure is and its basics like widgets, masters, interactions and export features. It then covers the pros of Axure like its ease of use, libraries, and ability to include interactions. The cons discussed are issues with panels, limited image/font editing. The document also outlines how Axure can be used through a project lifecycle from concepts to prototypes. It concludes by mentioning some other common UX tools like Balsamiq, Keynote and OmniGraffle Pro.

Part4 Transition to UXRamya Ramaswamy

��

Lose Your Head! Re-imagining WordPress's Role in Content PresentationJeremy Ward

��

Since the introduction of the REST API, developers have been seeking ways to leverage the benefits of WordPress for content creation, while offering new options for presenting that information on the client side. Native mobile apps, JavaScript front-ends, static sites – the possibilities are endless. Let’s take a closer look at the benefits and limitations of going “headless” with WordPress, find out what the hype is about, and determine whether this approach is something that could benefit you or your clients.

Prototyping with Axure for the web and beyondLuke Perman

��

- The document outlines an agenda for a workshop on prototyping with Axure software. It will include introductions, an overview of Axure features, when to use Axure, examples, and a first prototype exercise. - Axure is a tool for planning, wireframing, prototyping, and documentation. It can be used for desktop, web, and mobile applications but is not a visual design or development tool. - The workshop leader will provide an overview of Axure capabilities and differences between Mac and PC versions before having participants build their first prototype of a form with validation. Resources for continuing with Axure will also be shared.

Transition to UX Part 3: Life of a UX DesignerRamya Ramaswamy

��

Mobile prototyping kaziak - Codemotion Rome 2015Codemotion

��

The document provides tips and guidelines for effective mobile prototyping. It discusses including plenty of pictures and using the right tools. It also covers different navigation patterns like hierarchical, flat, and using the up or back buttons appropriately. Specific controls like the action bar, tabs, spinners, and navigation drawers are examined with recommendations on when each should and should not be used. Contact information is provided at the end for any additional questions.

Site Builders: Let's clean up our UIs!cherryhillco

��

Standard kecergasan fizikal kebangsaanisza76

��

This document appears to be a record of physical fitness test results for students in Grade 4 at a Malaysian school. It includes the students' names, class, height, weight, and results from various physical fitness tests like pushups, situps, flexibility, and long jump. The tests were conducted to assess the students' physical fitness as part of the Malaysian National Physical Fitness Standard for School Students program.

87199913 prosedur-segakMohd Izwan Baidawi

��

Rumusan keseluruhan ujian segakAtan Pomen

��

Borang rekod segak dan bmiDak Iwan

��

Keputusan ujian keseluruhan segakKaren Kayny

��

Pengiraan skor pajsk PAKLONG CIKGU

��

Kad laporan ini memberikan ringkasan prestasi dan penglibatan murid bernama Ahamad Nesfu bin Zain dalam aktiviti sukan, kokurikulum dan ekstrakurikulum di sekolah serta pendidikan jasmani. Ia menyenaraikan jenis aktiviti yang diikuti, tarikh, jawatan yang disandang, komitmen, penyertaan dan pencapaian murid. Borang ini digunakan untuk menilai pencapaian murid dalam bidang kocurikulum dan pendidikan jasmani.

Basic Principles of Kinesiologyjoldham5

��

Kinesiology is the study of human movement. It involves the analysis of motion from anatomical, mechanical, and physiological perspectives. Key topics covered in the chapter include osteokinematics, which describes bone motion; arthrokinematics, which describes joint motion; and kinetics, which describes the forces that produce movement. Proper understanding of these biomechanical principles is important for analyzing and evaluating human movement.

MBA Internship ReportAjesh U Bhanu

��

The document is an organizational study report on Star PVC pipes & fittings conducted during an internship in 2011. It provides an overview of the company, including its background, vision, mission, products, departments, and production centers. Star Plastics is a leading manufacturer of PVC pipes and fittings in South India, with the vision to provide high-quality products and meet customer needs through research and innovation. The company has seven departments and five production centers across India and Dubai.

Rapid prototyping front end librariesMichal Taberski

��

Rapid prototyping front end libraries provide skeleton code for CSS, HTML, and JavaScript that developers can use for common UI elements in a project. Two popular options are Bootstrap and Foundation. Both provide a grid system, styles for forms, buttons, tables and other common patterns. They also include modal windows, image grids, drop down menus and other pre-built components. The main differences are that Bootstrap has a more polished, product-like appearance with transitions while Foundation provides a more raw foundation for customization and extension.

Bootstrap UI Library IntroductionVardot

��

This document provides an overview of Bootstrap, a popular front-end framework for building responsive, mobile-first websites. It discusses what Bootstrap is, why it's commonly used, how to get started with it, and some helpful tools for working with Bootstrap. Specifically, it notes that Bootstrap provides common web design patterns through CSS and widgets/functionality through optional JavaScript. It also highlights some of Bootstrap's key features like its mobile-first grid system, base CSS, components, and customization options.

Bootstrap Crash Course 20180717Haim Michael

��

Ready? Bootstrap! Go! (SOTR 2013) copyGuust Nieuwenhuis

��

Bootstrap (www.getbootstrap.com) is a sleek, intuitive, and powerful open source front-end framework for faster and easier web development. After it's initial release in August 2011, it quick gained popularity in the web development community and currently it's the most popular project on GitHub. Numerous projects, components and tools are build around it and both small and big companies are using it. Get introduced to Bootstrap and the ecosystem around it. Your front-end development will never be the same again!

Web technologies-course 06.pptxStefan Oprea

��

Bootstrap Workout 2015Rob Davarnia

��

This document provides an overview of Bootstrap, a popular front-end framework for building responsive mobile-first websites. It discusses what Bootstrap is, how it makes front-end development faster through its libraries and code organization. The document also covers how to get started with Bootstrap, including using its grid system and components like buttons, images, and typography. Hands-on examples are provided for key Bootstrap features like grids, visibility classes, buttons, and alignments.

bootstrap_slidesfor bootstrapthingyise.pdfmohamedalisadek27102

��

Scalable front-end architecture with Bootstrap 3 + Atomic CSSHayden Bleasel

��

Bootstrap training basics tutorial | Bootstrap EssentialsQA TrainingHub

��

Twitter Bootstrap, or why being a PHP Developer is a bad ideaJason Lotito

��

The document discusses Twitter Bootstrap, an open-source front-end web development framework. It begins with an introduction to Bootstrap, explaining that it is a front-end framework made up of HTML, CSS, and JavaScript that makes web design and development easy. It then provides examples of basic HTML templates using Bootstrap and demonstrates how to easily create common front-end elements like navigation bars, headers and columns. The document suggests that Bootstrap provides pre-built styles and components that simplify the process of building responsive and mobile-first websites.

Bootstrap Jump StartHaim Michael

��

RWD - BootstrapJasvinder Singh

��

This document discusses responsive web design and frameworks like Bootstrap. It explains that responsive design allows sites to adapt to different devices like mobile versus desktop. It provides an overview of Bootstrap, including that it is an open source framework for building responsive sites using HTML, CSS and JavaScript. Popular frameworks like Bootstrap have pre-built components that save development time compared to building sites from scratch.

Bootstrap Framework and DrupalJim Birch

��

Like Drupal, Bootstrap is an open source project that can be used by front end developers and site builders in a wide variety of ways, from beginner to advanced. This presentation reviews: What makes up the Bootstrap framework. The advantages and disadvantages of using the Bootstrap framework. Using the Bootstrap contributed theme as a base theme for your project. Compiling your own Bootstrap framework using Grunt. Creating your own theme with the Bootstrap framework.

Treeshaking your CSSJames Stone

��

Tree shaking is a technique to remove unused code from bundles to reduce file size. It analyzes import and export statements to determine unused code, which can then be excluded from the bundle. CSS frameworks like Bootstrap often include unused code by default that tree shaking tools can remove to minimize file size. Tools like UnCSS analyze CSS usage on a page to remove unused styles, but have limitations and an easier alternative is to only import needed components from frameworks during the build process.

More Related Content

Viewers also liked (8)

Standard kecergasan fizikal kebangsaanisza76

��

87199913 prosedur-segakMohd Izwan Baidawi

��

Rumusan keseluruhan ujian segakAtan Pomen

��

Borang rekod segak dan bmiDak Iwan

��

Keputusan ujian keseluruhan segakKaren Kayny

��

Pengiraan skor pajsk PAKLONG CIKGU

��

Basic Principles of Kinesiologyjoldham5

��

MBA Internship ReportAjesh U Bhanu

��

Standard kecergasan fizikal kebangsaanisza76

��

87199913 prosedur-segakMohd Izwan Baidawi

��

Rumusan keseluruhan ujian segakAtan Pomen

��

Borang rekod segak dan bmiDak Iwan

��

Keputusan ujian keseluruhan segakKaren Kayny

��

Pengiraan skor pajsk PAKLONG CIKGU

��

Basic Principles of Kinesiologyjoldham5

��

MBA Internship ReportAjesh U Bhanu

��

Similar to Toolstrap (20)

Rapid prototyping front end librariesMichal Taberski

��

Bootstrap UI Library IntroductionVardot

��

Bootstrap Crash Course 20180717Haim Michael

��

Ready? Bootstrap! Go! (SOTR 2013) copyGuust Nieuwenhuis

��

Web technologies-course 06.pptxStefan Oprea

��

Bootstrap Workout 2015Rob Davarnia

��

bootstrap_slidesfor bootstrapthingyise.pdfmohamedalisadek27102

��

Scalable front-end architecture with Bootstrap 3 + Atomic CSSHayden Bleasel

��

Bootstrap training basics tutorial | Bootstrap EssentialsQA TrainingHub

��

Twitter Bootstrap, or why being a PHP Developer is a bad ideaJason Lotito

��

Bootstrap Jump StartHaim Michael

��

RWD - BootstrapJasvinder Singh

��

Bootstrap Framework and DrupalJim Birch

��

Treeshaking your CSSJames Stone

��

Ready? bootstrap. go! (cf objective 14 05-2014)ColdFusionConference

��

The document is a presentation by Guust Nieuwenhuis about the Bootstrap front-end web development framework. It provides an overview of what Bootstrap is, its features such as the grid system and components, examples of using Bootstrap, and the ecosystem of third-party plugins and tools that extend Bootstrap's capabilities. It also includes brief biographical information about Nieuwenhuis as an expert in CFML and the Mura CMS.

Bootstrap 3.0Youwe Drecomm OOIP

��

This document discusses how Bootstrap 3.0, an open source CSS framework, can help a design/development team work more efficiently. It proposes using Bootstrap components like grids and pre-built elements to streamline the design, development, and project management processes. This would allow more collaboration between roles and faster website creation using a shared framework across projects. The document argues that adopting Bootstrap could help teams standardize processes, produce higher quality websites in less time, and increase profits without requiring additional costs or learning new skills.

Introduction to Twitter's Bootstrap 2Julien Renaux

��

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee

��

Sexy HTML with Twitter BootstrapKarthik Gaekwad

��

This document discusses using Twitter Bootstrap to create HTML applications and interfaces for APIs. It provides an introduction to Bootstrap, outlines basic steps for using it which include choosing a theme, designing the site, and integrating it with APIs. Alternatives to Bootstrap like Foundation are also mentioned. The document aims to help non-front end engineers easily create good looking HTML interfaces for their APIs using Bootstrap.

Bootstrap BootcampWilliam Simms

��

Rapid prototyping front end librariesMichal Taberski

��

Bootstrap UI Library IntroductionVardot

��

Bootstrap Crash Course 20180717Haim Michael

��

Ready? Bootstrap! Go! (SOTR 2013) copyGuust Nieuwenhuis

��

Web technologies-course 06.pptxStefan Oprea

��

Bootstrap Workout 2015Rob Davarnia

��

bootstrap_slidesfor bootstrapthingyise.pdfmohamedalisadek27102

��

Scalable front-end architecture with Bootstrap 3 + Atomic CSSHayden Bleasel

��

Bootstrap training basics tutorial | Bootstrap EssentialsQA TrainingHub

��

Twitter Bootstrap, or why being a PHP Developer is a bad ideaJason Lotito

��

Bootstrap Jump StartHaim Michael

��

RWD - BootstrapJasvinder Singh

��

Bootstrap Framework and DrupalJim Birch

��

Treeshaking your CSSJames Stone

��

Ready? bootstrap. go! (cf objective 14 05-2014)ColdFusionConference

��

Bootstrap 3.0Youwe Drecomm OOIP

��

Introduction to Twitter's Bootstrap 2Julien Renaux

��

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee

��

Sexy HTML with Twitter BootstrapKarthik Gaekwad

��

Bootstrap BootcampWilliam Simms

��

Recently uploaded (20)

MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashBluebash

��

Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Impelsys Inc.

��

Web accessibility is a fundamental principle that strives to make the internet inclusive for all. According to the World Health Organization, over a billion people worldwide live with some form of disability. These individuals face significant challenges when navigating the digital landscape, making the quest for accessible web content more critical than ever. Enter Artificial Intelligence (AI), a technological marvel with the potential to reshape the way we approach web accessibility. AI offers innovative solutions that can automate processes, enhance user experiences, and ultimately revolutionize web accessibility. In this blog post, we’ll explore how AI is making waves in the world of web accessibility.

Soulmaite review - Find Real AI soulmate reviewSoulmaite

��

Looking for an honest take on Soulmaite? This Soulmaite review covers everything you need to know—from features and pricing to how well it performs as a real AI soulmate. We share how users interact with adult chat features, AI girlfriend 18+ options, and nude AI chat experiences. Whether you're curious about AI roleplay porn or free AI NSFW chat with no sign-up, this review breaks it down clearly and informatively.

ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxAyilurRamnath1

��

How to Detect Outliers in IBM SPSS Statistics.pptxVersion 1 Analytics

��

“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...Edge AI and Vision Alliance

��

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/how-qualcomm-is-powering-ai-driven-multimedia-at-the-edge-a-presentation-from-qualcomm/ Ning Bi, Vice President of Engineering at Qualcomm Technologies, presents the “How Qualcomm Is Powering AI-driven Multimedia at the Edge” tutorial at the May 2025 Embedded Vision Summit. In this talk, Bi explores the evolution of multimedia processing at the edge, from simple early use cases such as audio and video processing powered by algorithm-centric approaches to modern sophisticated capabilities such as digital human avatars that are transmitted over the communication channel, powered by data-driven AI. He explains how Qualcomm is applying AI and generative AI technologies on the edge to enrich computer vision for new and high-quality visual solutions. He also shows how Qualcomm enables a broad range of OEMs, ODMs and third-party developers to harness innovative technologies via initiatives such as the Qualcomm AI Hub, which provides a library of optimized machine learning models to enable developers to quickly incorporate AI into their applications.

DevOps in the Modern Era - Thoughtfully Critical PodcastChris Wahl

��

7 Salesforce Data Cloud Best Practices.pdfMinuscule Technologies

��

Bridging the divide: A conversation on tariffs today in the book industry - T...BookNet Canada

��

A collaboration-focused conversation on the recently imposed US and Canadian tariffs where speakers shared insights into the current legislative landscape, ongoing advocacy efforts, and recommended next steps. This event was presented in partnership with the Book Industry Study Group. Link to accompanying resource: https://bnctechforum.ca/sessions/bridging-the-divide-a-conversation-on-tariffs-today-in-the-book-industry/ Presented by BookNet Canada and the Book Industry Study Group on May 29, 2025 with support from the Department of Canadian Heritage.

Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Anish Kumar

��

Presented by: Anish Kumar LinkedIn: https://www.linkedin.com/in/anishkumar/ This lightning talk dives into real-world GenAI projects that scaled from prototype to production using Databricks’ fully managed tools. Facing cost and time constraints, we leveraged four key Databricks features—Workflows, Model Serving, Serverless Compute, and Notebooks—to build an AI inference pipeline processing millions of documents (text and audiobooks). This approach enables rapid experimentation, easy tuning of GenAI prompts and compute settings, seamless data iteration and efficient quality testing—allowing Data Scientists and Engineers to collaborate effectively. Learn how to design modular, parameterized notebooks that run concurrently, manage dependencies and accelerate AI-driven insights. Whether you're optimizing AI inference, automating complex data workflows or architecting next-gen serverless AI systems, this session delivers actionable strategies to maximize performance while keeping costs low.

Dancing with AI - A Developer's Journey.pptxElliott Richmond

��

In this talk, Elliott explores how developers can embrace AI not as a threat, but as a collaborative partner. We’ll examine the shift from routine coding to creative leadership, highlighting the new developer superpowers of vision, integration, and innovation. We'll touch on security, legacy code, and the future of democratized development. Whether you're AI-curious or already a prompt engineering, this session will help you find your rhythm in the new dance of modern development.

cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfAmirStern2

��

Improving Developer Productivity With DORA, SPACE, and DevExJustin Reock

��

AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationChristine Shepherd

��

AI agents are reshaping logistics and supply chain operations by enabling automation, predictive insights, and real-time decision-making across key functions such as demand forecasting, inventory management, procurement, transportation, and warehouse operations. Powered by technologies like machine learning, NLP, computer vision, and robotic process automation, these agents deliver significant benefits including cost reduction, improved efficiency, greater visibility, and enhanced adaptability to market changes. While practical use cases show measurable gains in areas like dynamic routing and real-time inventory tracking, successful implementation requires careful integration with existing systems, quality data, and strategic scaling. Despite challenges such as data integration and change management, AI agents offer a strong competitive edge, with widespread industry adoption expected by 2025.

vertical-cnc-processing-centers-drillteq-v-200-en.pdfAmirStern2

��

Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMAnchore

��

Over 70% of any given software application consumes open source software (most likely not even from the original source) and only 15% of organizations feel confident in their risk management practices. With the newly announced Anchore SBOM feature, teams can start safely consuming OSS while mitigating security and compliance risks. Learn how to import SBOMs in industry-standard formats (SPDX, CycloneDX, Syft), validate their integrity, and proactively address vulnerabilities within your software ecosystem.

FME Beyond Data Processing Creating A Dartboard Accuracy AppSafe Software

��

At Nordend, we want to push the boundaries of FME and explore its potential for more creative applications. In our office, we have a dartboard, and while improving our dart-throwing skills was an option, we took a different approach: What if we could use FME to calculate where we should aim to achieve the highest possible score, based on our accuracy? Using FME’s Geometry User parameter, we designed a custom solution. When launching the FME Flow app, the map is now a dartboard. The centre of the map is always fixed on the same area of the world, where we pinned a PNG picture of a dartboard as a basemap through a self-created WMS. This visual setup allowed us to draw polygons—each with three points—where our darts landed, using the Geometry parameter. These polygons get processed through an FME workspace, which translates the coordinates from the map into exact X and Y positions on the dartboard. With this accurate data, we calculate all sorts of statistics: rolling averages, best scores, and even standard deviations. The results get displayed on a dashboard in FME Flow, giving us insights into how we could maximize our scores, based purely on where we actually tend to throw. Join us for a live demonstration of the app! The takeaway? FME isn’t just a powerful data processing tool; with a bit of imagination, it can be used for far more creative and unconventional applications. This project demonstrates that the only limit to what FME can do is the creativity you bring to it.

“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...Edge AI and Vision Alliance

��

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/state-space-models-vs-transformers-for-ultra-low-power-edge-ai-a-presentation-from-brainchip/ Tony Lewis, Chief Technology Officer at BrainChip, presents the “State-space Models vs. Transformers for Ultra-low-power Edge AI” tutorial at the May 2025 Embedded Vision Summit. At the embedded edge, choices of language model architectures have profound implications on the ability to meet demanding performance, latency and energy efficiency requirements. In this presentation, Lewis contrasts state-space models (SSMs) with transformers for use in this constrained regime. While transformers rely on a read-write key-value cache, SSMs can be constructed as read-only architectures, enabling the use of novel memory types and reducing power consumption. Furthermore, SSMs require significantly fewer multiply-accumulate units—drastically reducing compute energy and chip area. New techniques enable distillation-based migration from transformer models such as Llama to SSMs without major performance loss. In latency-sensitive applications, techniques such as precomputing input sequences allow SSMs to achieve sub-100 ms time-to-first-token, enabling real-time interactivity. Lewis presents a detailed side-by-side comparison of these architectures, outlining their trade-offs and opportunities at the extreme edge.

Oracle Cloud Infrastructure Generative AI ProfessionalVICTOR MAESTRE RAMIREZ

��

ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....Jasper Oosterveld

��

Sensitivity labels, powered by Microsoft Purview Information Protection, serve as the foundation for classifying and protecting your sensitive data within Microsoft 365. Their importance extends beyond classification and play a crucial role in enforcing governance policies across your Microsoft 365 environment. Join me, a Data Security Consultant and Microsoft MVP, as I share practical tips and tricks to get the full potential of sensitivity labels. I discuss sensitive information types, automatic labeling, and seamless integration with Data Loss Prevention, Teams Premium, and Microsoft 365 Copilot.

MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashBluebash

��

Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Impelsys Inc.

��

Soulmaite review - Find Real AI soulmate reviewSoulmaite

��

ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxAyilurRamnath1

��

How to Detect Outliers in IBM SPSS Statistics.pptxVersion 1 Analytics

��

“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...Edge AI and Vision Alliance

��

DevOps in the Modern Era - Thoughtfully Critical PodcastChris Wahl

��

7 Salesforce Data Cloud Best Practices.pdfMinuscule Technologies

��

Bridging the divide: A conversation on tariffs today in the book industry - T...BookNet Canada

��

Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Anish Kumar

��

Dancing with AI - A Developer's Journey.pptxElliott Richmond

��

cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfAmirStern2

��

Improving Developer Productivity With DORA, SPACE, and DevExJustin Reock

��

AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationChristine Shepherd

��

vertical-cnc-processing-centers-drillteq-v-200-en.pdfAmirStern2

��

Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMAnchore

��

FME Beyond Data Processing Creating A Dartboard Accuracy AppSafe Software

��

“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...Edge AI and Vision Alliance

��

Oracle Cloud Infrastructure Generative AI ProfessionalVICTOR MAESTRE RAMIREZ

��

ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....Jasper Oosterveld

��

Toolstrap

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/

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

21. Compiled CSS/JS Only Toolstrap Toolstrap 2 YO DAWG, I HERDYOU 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

26. Groupon Icon Font!

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

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 maparicio@groupon.com http://idol.pe/toolstrap

�ݺ�ߣ

Toolstrap

Recommended

More Related Content

Viewers also liked (8)

Similar to Toolstrap (20)

Recently uploaded (20)

Toolstrap