sprucecss

Spruce CSS는 Sass를 기반으로 구축된 오픈 소스 CSS 디자인 시스템 및 프레임워크입니다. npm을 통해 배포되며 MIT 라이선스로 출시되었으며, 완전한 컴포넌트 키트라기보다 프로젝트에 추가할 수 있는 로우레벨 기반으로 포지셔닝하고 있습니다. README 및 문서에 설명된 특징은 다음과 같습니다: - Sass 기반 툴링: 이 프레임워크는 Sass 변수, 믹스인 및 함수를 중심으로 구축되었으며, 임포트를 위해 네임스페이스와 함께 @use를 사용하는 Sass 모듈 시스템을 채택했습니다. - 작은 유틸리티 표면: 의도적으로 소수의 클래식 유틸리티 클래스에만 의존하며, README에 따르면 클래식 그리드 시스템은 포함되어 있지 않습니다. 프로젝트 측은 이 프레임워크가 상대적으로 작고(gzip 압축 시 약 7KB), 코드베이스가 작아 학습 곡선이 낮다고 명시하고 있습니다. - CSS 작성자 대상: 제작자들은 Spruce를 마크업 중심의 유틸리티 클래스를 조합하는 것보다 CSS 작성을 선호하는 사람들에게 좋은 선택지라고 소개하며, 프로젝트마다 수동으로 옮겨 다녔던 코드라고 설명합니다. - 테마: 테마는 CSS 사용자 정의 속성으로 구축되었으며 다크 모드 지원이 포함되어 있습니다. 다른 색상 테마도 동일한 방식으로 생성할 수 있습니다. - 도구와 출력의 분리: 생성된 CSS는 프레임워크와 분리되어 유지되므로, 생성된 스타일을 가져오지 않고도 변수, 믹스인 및 함수를 사용할 수 있습니다. - 문서 테마: 문서는 커스터마이징, Sass 기초, 타이포그래피, 테이블, 버튼, 폼 및 미디어에 대한 요소 페이지와 더불어 접근성 및 포용성, 국제화 및 인쇄를 다룹니다. - 컴포넌트의 분리: 즉시 사용 가능한 UI 컴포넌트는 코어 프레임워크 내부가 아닌 별도의 프로젝트인 Spruce UI에서 유지 관리됩니다. 시작하기: README는 sprucecss.com 문서, 특히 설치 페이지를 안내하며, 기존 Sass 사용자를 위한 주요 변경 사항은 최신 모듈 시스템이라고 언급합니다. 동반 프로젝트인 Eleventy 스타터 템플릿(sprucecss-eleventy-starter)은 기본 컴파일 설정이 포함된 보일러플레이트를 제공합니다. 추가로 두 가지 템플릿이 나열되어 있습니다. Eleventy로 제작된 문서 템플릿인 Spruce Docs와 표준 뷰 및 많은 컴포넌트를 갖춘 관리자 템플릿인 Root입니다. 문서 및 기여: 전체 문서는 sprucecss.com에서 호스팅되며 별도의 저장소에서 유지 관리되며, 문서 내에 기여 가이드가 포함되어 있습니다. 또한 README는 GitHub 릴리스, npm 패키지 및 테스트 워크플로우 링크를 제공하며, 프로젝트 자체 에셋에 사용되는 라이트/다크 로고에 대해 언급합니다.