Marketplace/Design Style Guide

The Marketplace has been placed into maintenance mode. It is no longer under active development. You can read complete details here.

Overview

The Design/UX team began a design style guide in July of 2014. This was to establish a design system that all Marketplace properties could use.

This is still a work-in-progress, and the design itself has evolved since the style guide was last updated.

The development effort of this style guide is an attempt to standardize the aesthetic in code at https://marketplace-styleguide-dev.allizom.org/, and to work with UX to adjust the design components for feasibility of implementation.

Goal

• consistent code for Marketplace properties, via shared components
• ability to quickly bootstrap a new project
• ease of developing, making a standard and common development approach for front-end

Implementation Plan

1. Grid
2. Media queries
3. Header
4. Footer
5. Navigation
6. Notifications
7. Buttons
8. Pills
9. Forms (field types, fieldsets, errors, focus, labels, placeholder text)
10. Elements (modals, tooltips, pagination)
11. Tables
12. Images
13. Video
14. Usage of z-index
15. Feed

Integration

Initially, integrating it with the shared repositories (for all future projects):

• https://github.com/mozilla/marketplace-core-modules
• https://github.com/mozilla/marketplace-elements
• https://github.com/mozilla/marketplace-template

And then, gradually, updating existing properties that use those components.