モジュール計画 – モジュールサンプル

このページ以下で公開しているモジュールは以下の計画によって作られています。

モジュールの原則

Atomic Design の文脈でいうところの、「Atoms」「Molecules」レベルのモジュールを作る。これらのレベルのモジュールは、機能は持つが特定のコンテキストには依存しない。ここでは少し読み変えて特定のプロジェクトやウェブサイトの「都合」を考えていない、としている。すなわち、ここに公開されているモジュールは、計画中のウェブサイトになんの修正もしないまま取り込むことはできない。文脈やそのサイトの「デザインルール」に従って修正を加える必要があることに留意されたい。

一方でUIとして、デバイスに対してはある程度の配慮をしている。つまり画面幅に対するモジュールの機能や振る舞いの適切さについてはある程度検討している。「ある程度」なのは、どんなデバイスやどんな画面幅に対応するかは結局プロジェクトやウェブサイトの「都合」によって違うからである。

細かい要件については、以下のようなものがある。

左から右へ読む言語
IE11への対応を考えない
開発自体はSASSを使う環境である

モジュールの分類

CSS設計としてPRECSSを採用しているので、モジュールの分類はこれに準じる。ここでは主に「レイアウト」「エレメント」「ブロック」「ヘルパー」に分類している。当然ながら「ユニーク」は存在しない。

モジュールの利用について

特に制限は設けていない。ここに書かれているコードは何にどのように使っても構わない。一方でいかなる保証もしない。また、ここで公開されているモジュールは常に書き換えられている。今のところ、リビジョンや以前のバージョンを管理公開する予定はない。
モジュールのページには、サンプル用にうちのスタッフ（猫）の画像を利用しているが、これに関しては個人で愛でる以外の利用はしないでもらいたい。

C-Labo. の基本モジュールセットは下記のものを使う。

https://modules.ccc-labo.net/usage/cat/ccc-labo_basic/

モジュール一覧

レイアウト

基本のコンテンツ幅（公開中※）
- 少し狭いコンテンツ幅（公開中※）
- 少し広いコンテンツ幅（公開中※）

エレメント

スペーサー（公開中※）
ステッカー付きヘッドライン（公開中※）
英字アイキャッチ見出し（公開中※）
矢印（公開中※）
ラベル（公開中※）
セクション余白区切り線（公開中※）
ページの先頭に戻るボタン（公開中※）
矢印付きテキストリンク（公開中※）
（フォームの）必須バッジ（公開中※）
メニューボタン（ハンバーガー）（公開中※）
メニューボタン（2本線文字入り）（公開中※）
クリップメディア（公開中※）
- 子要素を4：3に（公開中※）
- 子要素を16：9に（公開中※）
- 丸く切り抜く（公開中※）
非公開: 見出しスタイル [ ]（定義中）
見出しスタイル (bar)（公開中※）
ボタン（公開中※）
- 色違いボタン（公開中※）
- サイズ違いボタン（公開中※）
ボタン WP向け（公開中※）
- アウトラインボタン（公開中※）
半円ボタン（アウトライン）（公開中※）
スクリーンリーダ（公開中※）
スキップリンク（公開中※）

ブロック

スクロールを促す（公開中※）
水平ナビ（公開中※）
イメージボード（公開中※）
注釈ブロック（公開中※）
ページヘッダー（公開中※）
カラムレイアウト（公開中※）
グリッドレイアウト（公開中※）
フレックスカラム（公開中※）
表組み（公開中※）
- スマホ時スクロール（公開中※）
- スマホ時カラム落ち（公開中※）
記事リンク（1行）リスト（公開中※）
記事リンク（1行）（公開中※）
ページネーション（SVG使用）（廃止）
ページネーション（CSS描画アイコン）（公開中※）
記事ダイジェスト（ユニット）（公開中※）
記事ダイジェスト（公開中※）
番号なしリスト（公開中※）
リンクリスト（公開中※）
ソーシャルリンク（公開中※）
前後記事ナビ（公開中※）
パンくずナビゲーション（公開中※）
非公開: token タグ（定義中）
ステップナビ（公開中※）
カバーバナー（公開中※）
ドット付きリスト（公開中※）
順序なしリスト（行頭記号がハイフン）（公開中※）
番号ありリスト（公開中※）
カード（公開中※）
- カードで使うNewバッジ（公開中※）
- カードで使うブクマじるし（公開中※）
非公開: カードユニット（定義中）
非公開: FAQ（JSで開閉）（定義中）
非公開: FAQ（JSで開閉しない）（定義中）