💅

ドシンプルなClass無しCSS Framework作ってみた

2022/06/08に公開

CSS

Tsuika Logo

HTMLだけでシンプルで綺麗なウェブサイトを作成できるCSS Framework「Tsuika」を作った話です。new.cssと言うclass無しCSS Frameworkを見て非常に簡潔なサイト作成だなと思いました。web componentを用いて更に機能が豊富なドシンプルなClass無しCSS Frameworkを作りたいと思いました。

インスピレーションを受けたnew.css⤵︎
https://newcss.net/

プログラミングを始めて最初の方に始めて作ったものが「Trim Design Tools」という名のweb component ライブラリーでした。新しくclass無しFrameworkを作るにあたって、過去に作ったこの上から作れば、class無しのnew.cssの良さと、web componentの良さをかきあわせてさらに良いものができるのでは無いかと思い作りました。

新しく作り直すということで名前も新しくしようと考えました。
それにあたって純正HTMLの上に追加するような役割をするものとして見たので名前は「Tsuika」にしました。

https://tsuika.netlify.app/
※TsuikaのサイトはTsuikaを使っています。

Tsuikaを使い始める

NPMやモジュールバンドラーはインストールする必要なくCDNを通して簡単に使用し始めることができます。
Tsuikaを使用するには3つの種類のCDNが必要です：

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

// TsuikaのデフォルトテーマCDN（※他のテーマはTsuikaのサイトからアクセスできます）
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/theme/tsuika.css"
  rel="stylesheet"
/>

// Web component CDN（全てのコンポーネントを使用する場合）
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/index.js" defer></script>

Tsuikaはweb componentを使わず使用はできます。一つのコンポーネントだけ使いたい場合はコンポーネントごとのCDNを使用することをお勧めします：

// コンポーネント事のCDN
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/components/[コンポーネント名].js" defer></script>

// 例えば、card-normalのみを使いたい場合・・・
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/components/card-normal.js" defer></script>

シンプルなドキュメンテーションやマークダウン代わりにでも使って見てください。
GitHubリポに⭐️つけてもらうと喜びます:)

Tsuikaを使い始める

Discussion