Spectrum CSS란?

Adobe가 메인 커미터가 되어 개발되고 있는 OSS의 CSS 컴퍼넌트 라이브러리입니다(OSS이므로 타이틀의 「Adobe제」라고 하는 것은 엄밀하게는 잘못되어 있을지도 모릅니다). Apache-2.0 라이센스로 공개됩니다.
GitHub의 Stars도 660과 Bootstrap 등의 유명 유사 라이브러리에 비하면 아직 메이저는 아니지만, 과연 천하의 Adobe, 디자인이 꽤 멋지고 있습니다.
게다가 다른 라이브러리에서는 보이지 않는 컴퍼넌트도 몇개인가 라인 업 되고 있습니다.

펜바세. 이오 에서 보면 이런 느낌입니다.


라이브러리의 이름이기도 한 "Spectrum"이란 Adobe의 디자인 시스템의 총칭입니다. 자세한 내용은 여기

재미있는 구성 요소

버튼이나 폼 등 일반적인 컴퍼넌트는 일대로 갖추어져 있으므로, 여기에서는 변종을 소개합니다.

액션 바

Gmail 메일리스트 등과 같이 정리하여 조작하는 시스템의 구성 요소입니다.

Banner

숫자를 넣을 수 있는 Badge는 자주 보지만 Banner는 드물네요.

코치 마크

초기 기동시의 인스트럭션등으로 표시되는 예의 마커입니다.

Dial

손잡이입니다. 이 컴포넌트는 Adobe 소프트웨어에서 자주 볼 수 있습니다.

슬라이더

과연 Adobe. 슬라이더는 색상도 지원합니다.

Tree View

있을 것 같고 좀처럼 없는 트리 뷰도.


이상 독단과 편견에서의 변종 컴포넌트 소개였습니다.
모든 컴포넌트는 이 페이지 에서 실제로 움직여 볼 수 있습니다.

기타

다크 모드 대응

라이트, 어두운 테마 파일이 있습니다.

어디까지나 컴포넌트만

Spectrum CSS 은 컴퍼넌트만의 제공으로 레이아웃에 관련되는 CSS는 제공하고 있지 않는 것 같습니다. 자전으로 노력할까 Simple Grid 등의 Grid 레이아웃 전용 라이브러리와 조합하면 잘 사용할 수 있을 것 같습니다.

IE11 미만에서는 사용할 수 없다

문서 에 이하의 기재가 있었습니다.

This has the lowest bundle size and the simplest usage, but is incompatible with < IE 11

또한 IE11에서 사용하는 경우 legacy usage documentation을 참조해야하는 것 같습니다.

이상, 자신도 아직 실제로 짜넣어 보지 않았기 때문에, 사용감등은 리포트 할 수 없습니다만 디자인만 보면 향후의 상용 라이브러리가 될 수 있을 것 같은 생각이 들었습니다.