Coral Spectrum

screenshot of Coral Spectrum

Coral Spectrum

A JavaScript library of Web Components following Spectrum design patterns.

Overview:

The Coral Spectrum Web Components is a project that aims to develop the Adobe Spectrum design language using web components, ES-Modules, and modern browser standards. It provides a JavaScript library of web components that follow Spectrum design patterns. The project focuses on consistency and compatibility with major frameworks like Angular, React, and Vue.js. Coral Spectrum is designed to support multiple browsers and includes built-in accessibility and internationalization support.

Features:

  • Component Examples: Showcase of various Coral Spectrum components in action.
  • API References: Detailed API documentation covering properties, events, and more for all components.
  • Playground: A sandboxed environment to experiment and preview code with the latest version of Coral Spectrum. Code can be shared by copy-pasting the URL.
  • Default Theme: Implementation of the Spectrum design specifications, providing elements and tools to help product teams work efficiently and make Adobe's applications more cohesive.
  • Compatibility with Major Frameworks: Compatible with Angular, React, and Vue.js, providing a complete and easy-to-use library of HTML components.
  • Browser Support: Designed to support the latest versions of Chrome, Safari, Firefox, Edge, IE 11, iOS 7+, and Android 4.4+.
  • Theme Options: Supports different themes like light, dark, lightest, and darkest, with the ability to specify the theme class at a higher level.
  • Large Scale Support: Supports larger tap targets on mobile controls by specifying the class coral--large at a higher level.
  • Built-in Accessibility and Keyboard Support: Every Coral Spectrum component is designed to be accessible and usable for all users.
  • Internationalization Support: Provides a robust internal system for internationalizing strings, supporting multiple languages.
gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.