Skip to content

Latest commit

 

History

History
74 lines (51 loc) · 3.79 KB

README.md

File metadata and controls

74 lines (51 loc) · 3.79 KB
Raw

Made. for Developers

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.

If you're just getting started, check out mastercard.github.io/made

Benefits

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.

Design tokens

Made Design Tokens are the common building blocks of visual design decisions (like color, typescale, and spacing units) that all Mastercard projects share. By using design tokens, designers and developers spend more time solving problems and less time fussing over pixels, eyedroppering hex codes, and redlining.

  • Design Tokens help scale design decisions across the organization.
  • By centralizing design decisions in one place they make products more consistent & maintainable.
  • Product teams get design updates automatically through their build process. Saving lots of time!
  • Designers and developers now have a common language. Designers reference the design tokens in the design and developers can reference design tokens in their code. The more we use them, the more everyone will get used to referencing them.
  • Design tokens are tech agnostic, so ensure brand consistency across multiple platforms & languages.
  • Added bonus of theming – since everything is dynamic, all you need to do is load a different set of design tokens e.g dark theme, compact theme, new brand

Reusable UI components

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

12-column layout grid

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

Utility classes

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.