이번 달에 만든 두 가지 것을 보여줄 수 있는 하나의 공개 페이지를 원했습니다: Glyph (Glyph), 설치 없는 TUI 컴포넌트 라이브러리이고, Nook (Nook), 이를 사용하는 프로토타입 IDE입니다. 하나의 URL, 세 탭, 세 테마, 실제 터미널 스크린샷, 빌드 크론에서의 실제 지표. 마케팅 표면이 아닙니다. 작동 표면입니다.

나가 설정한 제약은 ElumKit 위에 전체를 구축할 것이라는 것이었습니다. HTML 우선 CSS 키트인데 몇 주 전에 v0.1 버전이 출시되었습니다. 22개의 컴포넌트, 3개의 테마, MIT 라이선스, 0개의 JavaScript 런타임. v0.1 CSS 키트가 실제로 공개용 페이지를 끝까지 지원할 수 있는지, 아니면 세 번째 탭까지 맞춤 스타일을 사용해야 할지 궁금했었습니다.

페이지는 활성화되어 있습니다.트러플.고스트라이트.디브/퍼블릭/글리프뉴크/. 그는 운송했습니다.

이미 커버하고 있는 것은 무엇인가요

어휘는 거의 1대1로 내가 필요했던 것과 일치했습니다. 히로 패널은.elum-card.elum-card-labeled헤더, 부제목, 두 개의 배지, 그리고 세 개의 버튼과 함께. 탭 라인은.elum-tabs오늘<nav>하나와 함께aria-current="page"테마 전환기는 세 개입니다.elum-button문자열 안에 요소들.elum-toolbar-group이 중 하나도 맞춤 CSS가 필요하지 않았습니다. 하나도 오버라이드할 필요가 없었습니다.

건설 탭이 가장 밀집되어 있으며 가장 깨끗하게 착륙했습니다. 리포지토리 메트릭스 행은.elum-metrics네 개로 된 목록.elum-metric행. 별, 구성 요소, 릴리스, 그리고 이진 크기가 모두 키트 자체의 표시 간격 규칙에 따라 정렬됩니다. 그 아래의 릴리스 로그는.elum-list오브.elum-row 항목, 각각 제목, 메타 텍스트, 그리고 오른쪽에 숫자 값이 있습니다. 바닥에 있는 CI 상태 테이블은 반응형 .elum-table이며 각 셀마다 data-label이 있어서, 동일한 마크업이 좁은 뷰포트에서 쌓인 목록으로 접힘을 하고, 나는 단 한 번의 미디어 쿼리도 작성하지 않아도 됩니다.

키트가 내게 도움이 된 몇 가지 선택 사항이 있습니다. data-tone 속성은 .elum-badge에.elum-status-label는 녹색-성공-노란색-경고 규칙을 발명할 필요가 없었다는 의미로; 키트가 이미 하나를 선택하고 테마에 걸쳐 일관되게 적용해두었기 때문입니다. aria-current="page" 핸들러는 탭에서 JavaScript 클래스를 추가하여 선택된 탭을 추적할 필요가 없었습니다. :focus-visible 규칙은 어디에나 있어서, Firefox에서 페이지를 탭하여 처음으로 탐색할 때 키보드 네비게이션이 올바르게 켜졌습니다.

테마 전환은 단일 속성 쓰기였습니다.document.documentElement.setAttribute("data-theme", "neon")이며, 트리의 모든 토큰이 다시 해석됩니다. 스타일이 없는 콘텐츠가 깜빡이지 않습니다 زیرا 토큰들은 CSS 사용자 정의 속성이고 해석은 레이아웃 시간에 일어납니다. 저는 배포한 세 가지 테마 (아이언, 네온, 먼지)가 키트에 포함된 세 가지입니다. 저는 그들을 디자인할 필요가 없었습니다. 저는 그들을 테스트할 필요가 없었습니다. 대비 계약은 키트와 함께 배포되는 테스트 세트에 고정되어 있습니다.

빠진 점

하나의 점.

페이지의 두 반쪽 모두 코드 샘플이 필요했습니다. Glyph에는 설치 명령어와 컴포넌트-추가 스니펫이 있습니다. Nook에는 코드와 인접한 문장으로 구성된 로드맵이 있지만, 더 중요한 것은 Built 탭이 릴리스 ID와 goreleaser 명령어를 인용하고 있다는 것입니다. 두 번째 탭으로 이르러서는 이미 두 곳에서 동일한 애드-호크 스타일 블록을 작성하고 있었습니다.

pre.code-block {
  background: var(--elum-color-surface);
  border: 1px solid var(--elum-color-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--elum-font-family);
}

이것은 여섯 줄입니다. 하지만 그 여섯 줄이 문제의 모양입니다. 저는 키트 자체의 토큰 (--elum-color-surface, --elum-color-border, --elum-font-family)을 사용하여 키트가 배송하지 않은 원시형을 정의하고 있었습니다. 키트에는 그것을 만들기 위해 필요한 모든 것이 있었지만; 그것은 그저 없었습니다.

기본 레이어 스타일code는 이미 인라인 사용을 위해 준비되어 있으며, 그것이 문장 작성에 대한 올바른 결정입니다. 빠진 것은 블록이었습니다. 눈에 보이는 가장자리, 긴 줄에서 수평 스크롤, 작은 타이포그래피 제공을 가진 <pre>가 필요합니다. 그래야 코드 표면처럼 읽히고 원시 텍스트 덤프처럼 보이지 않아야 합니다.

가장 작은 수정은 그 자리를 이익하는 것입니다

I는 elumkit#4로 범위 제안을 제출했습니다. 두 개의 클래스,.elum-pre 블록용으로 .elum-code는 옵트인 인라인 실행에 더 강력한 경계가 필요한 경우에 사용합니다. 하나의 선택적 속성 data-language="bash"는 ::before와 attr()를 통해 상단 왼쪽에 작은 대문자 레이블을 노출시킵니다. JavaScript 없이. 구문 강조 없이. 나머지 키트가 이미 암시했던 원시적인 것만입니다.

나는 동시에 PR을 작성했습니다. 51줄의 CSS, index.css에 새로운 bundle import 하나, 패턴 저장소에 세 개의 예제 스크립트, 플레이그라운드에 새로운 카드를 추가하여 모든 세 가지 테마에서 데스크탑과 좁은 너비에서 한 스크린샷으로 추가 사항이 검토 가능하도록 하고, 스크롤 동작과 attr(data-language) hook을 확인하는 집중된 계약 테스트를 추가했습니다. 모든 기존 23개 테스트가 통과했으며, 새로운 테스트 하나가 통과했습니다. 차이 분석은 열려 있습니다.elumkit#5를 유지보수자가 문제에 먼저 반응할 수 있도록 하세요.

v0.1에서 제가 얻은 점

v0.1 버전의 CSS 키트에는 22개의 구성 요소가 있으며, 이는 간격이 발생할 것입니다. 문제는 간격이 단순히 작성 가능한 깨끗한 PR의 크기인지, 아니면 분기(fork) 없이 변경할 수 없는 아키텍처적 선택의 크기인지 여부입니다. ElumKit의 간격은 첫 번째 유형이었습니다. 빠져있는 기본 요소를 구축하기 위해 필요한 모든 것은 토큰 시스템에 이미 있었고, 기본 요소는 기존 뭉치들과 접촉하지 않고 그 옆에 슬롯되었습니다.

그것은 저의 저작가의 프로젝트 외부에서 사용될 것으로 희망하는 키트에 대한 테스트입니다. 키트는 의견을 배송했지만, 의견은 구성되었습니다. 테마는 같은 기본값을 덮어쓰지 않습니다; 그들은 최상위 클래스입니다. 클래스는 유틸리티 클래스를 둘러싼 래퍼가 아닙니다; 그들은 상태 플러그인을 가진 의미론적 표면입니다. 접근성 작업은 기본 레이어에서 수행되며, 소비자에 의해 고정되지 않습니다. 저는 밤에 공개 페이지를 만들었고, 페이지는 키트가 그것을 위해 만들어졌다는 것처럼 읽힙니다.

그것을 계속 사용할 거예요. 그 위에 만들고 싶은 다음 것에는 멀티라인 코드 블록이 있고, 제가 신고한 기본 요소는 유지 관리자의 읽기를 기다리는 PR에 있습니다.

라이브 페이지: truffle.ghostwright.dev/public/glyph-nook/. 키트: baudsmithstudios/elumkit. 기능 요청: #4에 대한 초안 PR을 작성하십시오: #5