TsuikaはWebコンポーネントとクラスレスCSSフレームワークの良さを取り入れたシンプルなCSSフレームワークです。開発者がHTMLサイトを素早く簡単に作成できるようにするためのものです。Tsuikaは、Webコンポーネントの力を活用し、より機能豊富なクラスレスCSSフレームワークです。なお、「Tsuika」という名前は、通常のHTMLに「追加する」という意味でつけられました。
Tsuikaに関する記事をZennで投稿させていただきました：Zennの記事はこちら
「Webコンポーネントの力を活用」とはどういう意味なのか？Tsuikaで作成されたサイトを見ればすぐ理解することができます。上記にあるレオナルド・ダ・ヴィンチの名言はたったひとつのウェブコンポーネントを使用して作られたものです。（以下のコードスニピットも！）
このように、Tsuikaを使用するとCSSに一切触れる必要がありません！また、通常のクラス無しCSS frameworkとは異なり、あらゆるテーマやウェブコンポーネントを通し自分にあったサイトの作成に励むことができます。要するにサイトを作る作業をコンテンツにさくことが出来ます。
NPMやモジュールバンドラーを使用していないためレンダリングをする必要無く非常に速いサイトが出来上がります。
タグにクラスをつける必要も無く、web componentsのおかげで、今までは時間掛けて作っていたモーダル、カルーセルは全てコンポーネントとして完結！
Tsuikaは間違いなくシンプルです。そのシンプリシティーは出来上がるサイトだけでなく、裏で構築されているコードまで分かりやすく設計されています。
コンポーネントをモジュールとして別々にインポートする選択肢があるため、必要なJavaScriptファイルのみを使用することができます。このツリーシャカブルアーキテクチャにより、高速かつ高性能を実現しています。
| コンポーネント | 概要 | プロパティ | 値 |
|---|---|---|---|
card-normal |
カードコンポーネント（新たなdiv） |
borderType |
boxShadowborder |
card-p |
テキストに適したカードコンポーネント | type |
bannerquote |
card-glance |
長文等をまとめてくれるモーダルコンポーネント | btnStartbtnStart |
ボタンの名前 (String値) |
card-carousel |
横スクロール型のカルーセル | N/A | N/A |
graph-bar |
横に伸びる棒グラフを表示するコンポーネント | % |
Integerをstringとして入力 |
README.mdのファイルに載っています。global.cssファイル、そして最後にweb componentの使用が可能となるJavaScriptファイルテーマを選択し、それを使ってウェブサイトの外観をカスタマイズすることができます。
テーマを全て見る