Made for Developers is an open-source UI developer platform that provides product engineers with consistent, responsive (mobile-first), cross-browser compatible, and accessible UI components with Made Design Tokens at its core.

Scalability
You can scale up and move faster, whatever the platform using our tech and framework agnostic Design Tokens and CSS.

Save time and resources
Build and test things once and reuse everywhere – that’s one way to speed things up. Made for Developers provides reusable Design Tokens and CSS that helps developers spin up new apps and websites quickly, rather than having to code them from scratch each time.

Flexibility
Made for Developers provides developers with Design Tokens, CSS and guidelines to help teams make quick modifications and extend components. Our code has predictable BEM naming that is:

• Reusable - as it is not coupled to HTML tag names
• Modular - styles are never dependent on other elements on a page, so you will never experience problems from cascading.
• Compatible – CSS should not conflict with other library code.

Accessibility built in
Made for Developers comes with accessibility built in and provides support for W3C's WCAG 2.1 specification.

This repo is includes:

Made for Developers provide a comprehensive set of UI components, patterns, and guidelines to help developers create digital experiences in alignment with the new Mastercard B2B Web UI design system, the standard for all web apps at Mastercard.

• Isolated class-based styling won’t affect your existing styles
• Powered by Made Design Tokens
• Provides resilient, modular components

The Made layout grid is a familiar flexbox-powered grid that gives predictable control to developers. The grid’s simple, nestable structure means any component and any layout, large or small, can implement a grid in a snap — and its mobile-first layout options make them customizable to any screen or situation.

• Similar to Bootstrap 4 and Foundation
• Uses a familiar row and column–based structure
• Built with Flexbox
• Predictable and nestable
• Designed to be mobile-first and responsive

Quickly build, extend and modify layouts and existing Made. components using new utility classes.

• You can quickly build custom design with no need to modify the existing CSS.
• Reuse classes over an over, adding consistency to your application.
• Utility classes are self-descriptive, single-purpose classes that developers can easily scan and visualize the intention of that class.

See our documentation site here for full how-to docs and guidelines.

Made is always evolving – thanks to you. Every time you share local patterns, bug fixes, components, or documentation with us, you’re helping us to understand your needs.

If you're interested, definitely check out our Contributing Guide! 👀

Check out our Changelog for the latest updates and releases.