designFlonCSSv2.0.0

Getting started

CSS Architecture Based on ITCSS

ITCSSは、CSS Wizardy の Harry Roberts氏が提唱したCSSの詳細度を管理する設計思想です。
「Inverted Triangle CSS (逆三角形のCSS)」の略で、設定の詳細度順に階層化して記述します。
各レイヤーは上から下に向かって詳細度が高くなり、この構造が逆三角形として可視化されます。

SettingsToolsGenericBaseObjectsComponentsTrumps

FlonCSS のディレクトリ構成

FlonCSSは、ITCSSの設計思想に基づいてディレクトリが構成されています。
各レイヤーは明確な役割を持ち、上から下に向かって詳細度が増加します。

1floncss/
2├── settings/         # 1. CSS変数とデザイントークン
3│   ├── colors.css
4│   ├── fonts.css
5│   ├── sizes.css
6│   ├── custom-media.css
7│   └── ...
8├── generic/          # 2. ブラウザリセット（オプション）
9│   ├── reset.css
10│   └── index.css
11├── base/             # 3. HTML要素のデフォルトスタイル（オプション）
12│   ├── base.css
13│   └── index.css
14├── objects/          # 4. 再利用可能なUIパーツ
15│   ├── button.css
16│   ├── box.css
17│   ├── title.css
18│   └── ...
19├── components/       # 5. プロジェクト固有のコンポーネント
20│   ├── header.css
21│   ├── footer.css
22│   ├── card.css
23│   └── ...
24└── global.css        # エントリーポイント

global.cssがすべてのレイヤーを統合するエントリーポイントとなります。

global.css - エントリーポイント

すべてのレイヤーを統合するメインファイルです。
カスタマイズ可能な設定とFlonCSSコア、レスポンシブユーティリティを読み込みます。

1/* カスタマイズ可能なレイヤー */
2@import url("./settings");
3@import url("./generic");
4@import url("./base");
5@import url("./objects");
6@import url("./components");
7
8/* FlonCSSコア（Generic, Base, Trumps） */
9@import url("floncss/core");
10
11/* レスポンシブユーティリティ（必要なものを有効化） */
12@import url("floncss/trumps/media-sm");
13@import url("floncss/trumps/media-md");
14@import url("floncss/trumps/media-lg");
15@import url("floncss/trumps/media-xl");

PostCSSを使用してこのglobal.cssをビルドし、サイトに読み込ませてください。

1<head>
2  <link rel="stylesheet" href="/path/to/floncss/global.css">
3</head>

レスポンシブユーティリティのカスタマイズ

不要なブレイクポイントはコメントアウトすることで、ビルドファイルのサイズを削減できます。
プロジェクトで使用するブレイクポイントのみを有効化してください。

1/* 使用するブレイクポイントのみを有効化 */
2@import url("floncss/trumps/media-sm");
3/* @import url("floncss/trumps/media-md"); */
4/* @import url("floncss/trumps/media-lg"); */
5@import url("floncss/trumps/media-xl");

ブレイクポイントの設定方法については、Custom Mediaページをご確認ください。

Learn more

ページ固有のスタイル（オプション）

特定のページにのみ適用したいスタイルがある場合は、ページごとのエントリーファイルを作成できます。
例：home.css、contact.css など

1/* home.css の例 */
2@import url("floncss/settings/custom-media");
3
4/* ホームページ専用のスタイル */
5.home-hero {
6  background-image: linear-gradient(to bottom, var(--color-primary), var(--color-secondary));
7  padding: var(--gutter-xl);
8}
9
10@media (--media-md) {
11  .home-hero {
12    padding: var(--gutter-2xl);
13  }
14}

このファイルをビルドし、該当するページにのみ読み込ませてください。

1<head>
2  <link rel="stylesheet" href="/path/to/floncss/global.css">
3  <link rel="stylesheet" href="/path/to/floncss/home.css">
4</head>

1. Settings

プロジェクト全体で使用するグローバル変数とデザイントークンを定義します。

1/* settings/colors.css */
2:root {
3  --color-primary: #49b7ed;
4  --color-secondary: #0041c0;
5  --color-tertiary: #74d2ff;
6  --color-quaternary: #6bacd3;
7}
8
9/* settings/fonts.css */
10:root {
11  --font-family-primary: "Noto Sans JP", sans-serif;
12  --font-size-sm: 0.875rem;
13  --font-size-base: 1rem;
14  --font-size-lg: 1.25rem;
15}
Learn more

2. Generic

ブラウザのデフォルトスタイルをリセット・正規化し、一貫性のある基盤を提供します。
基本の reset.css は floncss に組み込まれています。
追加が必要な場合に記述してください。

1/* FlonCSSコアに含まれる基本リセット */
2*, *::before, *::after {
3  box-sizing: border-box;
4  margin: 0;
5  padding: 0;
6}
7
8/* generic/reset.css（追加が必要な場合） */
9button {
10  background: none;
11  border: none;
12  cursor: pointer;
13}

3. Base

要素のデフォルトスタイルを定義し、プロジェクト全体の基本的な見た目を統一します。
必要最低限の指定は floncss に組み込まれています。
必要に応じて記述を追加してください。

1/* FlonCSSコアに含まれる基本スタイル */
2html {
3  font-family: var(--font-family-primary);
4  font-size: var(--font-size-default);
5  -webkit-font-smoothing: antialiased;
6}
7
8body {
9  line-height: var(--line-height-base);
10  font-size: var(--font-size-base);
11  color: var(--color-text);
12  background-color: var(--color-100);
13}
14
15/* base/base.css（追加が必要な場合） */
16a {
17  color: var(--color-link);
18  text-decoration: underline;
19}
20
21a:hover {
22  color: var(--color-link-hover);
23}

プロジェクト固有の要素スタイルが必要な場合は base/ ディレクトリに追加してください。

4. Objects

レイアウト目的パーツやこれ以上細分化できないUIパーツなどをコンポーネントとして定義します。
Objectsレイヤーのコンポーネントは自己完結的であり、外部のレイアウトに影響を与えないようにします。
接頭辞には "o-"を付与します。

1/* objects/box.css */
2.o-box {
3  padding: var(--gutter-md);
4  background-color: var(--color-100);
5  border-radius: var(--radius-md);
6}
7
8.o-box:primary {
9  background-color: var(--color-primary-light);
10  border: 1px solid var(--color-primary);
11}
12
13/* objects/title.css */
14.o-title {
15  font-size: var(--font-size-xl);
16  font-weight: bold;
17  line-height: var(--line-height-sm);
18}

使用例：

1<div class="o-box primary">
2  <h2 class="o-title">見出しタイトル</h2>
3  <p>コンテンツが入ります。</p>
4</div>

5. Components

装飾のスタイルを持つ UI パーツをコンポーネントとして定義します。
Objects レイヤーよりも明示的なクラス名をつけます。
header や footer など抽象度が低いコンポーネントが該当します。
接頭辞には "c-"を付与します。

1/* components/card.css */
2.c-card {
3  padding: var(--gutter-md);
4  background: white;
5  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
6  border-radius: var(--radius-md);
7}
8
9/* components/header.css */
10.c-header {
11  position: sticky;
12  top: 0;
13  left: 0;
14  width: 100vw;
15  background-color: var(--color-000);
16  height: var(--height-header);
17}

使用例：

1<header class="c-header">
2  <div class="c-header_inner">
3    <a class="c-header_logo" href="/">
4      <img src="logo.svg">
5    </a>
6  </div>
7</header>

6. Trumps (utility class)

Trumpsには utility classが格納されていますが、その記述は全てfloncssに組み込まれており、global.cssで読み込むのみとなっています。

使用例：

1<section class="mt mb">
2  <h1 class="font:xl font:bold color:primary mb:md mb:lg@md">
3    FlonCSS
4  </h1>
5
6  <p class="font:sm mb:sm mb:md@md">
7    最小限のutility-first CSSとITCSSを組み合わせたフレームワーク
8  </p>
9
10  <div class="flex gap row-gap:md">
11    <div class="cols:12 cols:6@md">
12      <div class="o-box">コンテンツ1</div>
13    </div>
14    <div class="cols:12 cols:6@md">
15      <div class="o-box">コンテンツ2</div>
16    </div>
17  </div>
18</section>
Learn more