웹 컴포넌트의 힘으로 강화된 클래스 없는 CSS 프레임워크인 Tsuika를 만들었습니다.

new.css라는 클래스 없는 CSS 프레임워크의 단순성에 대해 배운 후, 나는 web components의 힘으로 훨씬 더 다재다능할 수 있는 비슷한 것을 만들도록 영감을 받았습니다.

new.css 사이트 링크:
https://newcss.net/

프로그래밍을 시작했을 때 작업한 첫 번째 프로젝트 중 하나는 "Trim Design Tools"라는 웹 구성 요소 라이브러리였습니다. 이 아이디어는 개발자가 단일 HTML 요소로 모달과 팝업 메뉴를 쉽게 구현할 수 있다는 점에서 훌륭했습니다. 그러나 실제로 프레임워크 친화적이지 않았고 다양한 미학에 맞게 사용자 정의할 수 없었기 때문에 실제로 잘 맞지 않았습니다.

클래스 없는 CSS 프레임워크의 나만의 버전을 개발하려고 생각하면서 클래스 없는 CSS 프레임워크의 용이성과 일관된 디자인을 모두 결합하므로 이전에 만든 것 위에 빌드하는 것이 쉬울 것이라고 생각했습니다. 여전히 개발자에게 다양한 구성 요소 세트를 제공합니다.

이 새 버전을 구축하면서 새 이름이 필요했습니다. "Tsuika"라는 이름은 일본어 "追加"에서 파생된 것으로 "더하기"를 의미합니다. 개인적으로 Tsuika를 바닐라 HTML의 확장으로 보았기 때문에 이 이름이 적합하다고 생각했습니다. Tsuika는 진지한 CRUD 앱에는 적합하지 않지만 문서 페이지의 간단한 포트폴리오 사이트에는 확실히 적합합니다.

Tsuika로 만든 Tsuika 웹사이트:
https://tsuika.netlify.app/

Tsuika GitHub 리포지토리에 대한 링크:
https://github.com/501A-Designs/tsuika

츠이카 시작하기

Tsuika는 단순한 CDN에 지나지 않습니다.
모듈 번들러나 npm 없이도 쉽게 시작할 수 있습니다. index.html 파일을 만들고 HTML 파일의 head 태그에 다음을 첨부하십시오.

Tsuika를 사용하려면 3가지 유형의 CDN이 필요합니다.

// Global stylesheet
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/global.css"
  rel="stylesheet"
/>

// Tsuika's default theme CDN
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/themes/tsuika.css"
  rel="stylesheet"
/>

// Import all web components
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/index.js" defer></script>

웹 구성 요소가 Tsuika를 고유하게 만드는 요소이지만 웹 구성 요소를 사용하지 않고도 시작할 수 있습니다(모든 웹 구성 요소를 가져오는 CDN만 제거하면 됩니다). 선택적으로 하나의 웹 구성 요소만 사용하려는 경우 아래 CDN을 사용하여 하나만 가져올 수 있습니다.

// Import by component
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/components/[NAME OF COMPONENT].js" defer></script>

// Example
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/components/card-normal.js" defer></script>

관심이 있거나 Tsuika의 아이디어가 마음에 든다면 주저하지 말고 ⭐️ the repo에 별표를 표시하세요!