tsuika.netlify.app

概要

Tsuika は、Web Components で強化されたクラスレス CSS フレームワークで、開発者が HTML サイトを素早く簡単に作成できるようにします。「Tsuika」という名前は「追加」を意味する日本語に由来しています。その名の通り、Tsuika は標準的な HTML に独自のパワフルなスタイルと Web Components を追加し、開発者がスタイリングではなくコンテンツに集中できるようにすることを目指しています。

このプロジェクトは当初は単なる Web Components ライブラリとして始まりましたが、new.css のようなプロジェクトの成長により、より広いビジョンが生まれました。Tsuika は、Web Components の力を活用して、ビルドツールなしで静的な HTML にインタラクティブでスタイル化された要素をもたらすことで、標準的なクラスレス CSS フレームワークを超えています。

ブランディング

Tsuika のロゴはアウトライン版と塗りつぶし版の 2 種類を作成しました。ロゴの「+」記号はプレーンな HTML にスタイルとコンポーネントを「追加する」というアイデアを表し、「!」は Tsuika がプレーンな Web ページに加える興奮と喜びを表現しています。ロゴはシンプルで認識しやすいようにデザインされており、プロジェクトのシンプルさと使いやすさへのこだわりを反映しています。

開発プロセス

Tsuika を構築するにあたり、標準的な HTML タグにスタイルを適用するクラスレス CSS と、HTML に新しい機能を追加する Web Components という 2 つの層にわたってシームレスに動作するシステムを設計する必要がありました。

CSS 層はミニマルでテーマ変更可能なように設計されています。ユーザーがユーティリティクラスのセットを学ぶ必要がある代わりに、Tsuika はセマンティックな HTML 要素に適切なデフォルトスタイルを直接適用します。テーマシステムにより、ユーザーは 1 つの CSS ファイルを変更するだけで全体のビジュアルアイデンティティを切り替えることができます。

Web Components 層はネイティブの Custom Elements API を使って構築されました。各コンポーネントは独自の JavaScript モジュールに自己完結しているため、ユーザーは実際に使用するコンポーネントだけを含めればよく、ページを高速で軽量に保つことができます。