Getting started
Installation
FlonCSSは、最小限のutility-first CSSと、ITCSSベースのstyle設計を合わせたハイブリットなフレームワークです。
デザイナー、エンジニアにとって品質の安定とより自由なスタイリングを実現します。
Install FlonCSS
1. Install
npmまたはyarnを使用してFlonCSSをインストールします。
1npm install floncss2. Initialize（推奨）
CLIを使用してプロジェクトにFlonCSSのテンプレートファイルをコピーします。
これにより、カスタマイズ可能な設定ファイルとディレクトリ構造が作成されます。
1# プロジェクト直下に 'floncss' ディレクトリを構成
2npx floncss init
3
4# ディレクトリを指定して構成する場合
5npx floncss init ./path/to/floncssこのコマンドにより、以下のファイルとディレクトリが作成されます：
1./floncss/
2├── settings/ # カスタマイズ可能な設定（色、フォント、サイズなど）
3├── generic/ # 追加リセット用（オプション）
4├── base/ # 追加要素スタイル用（オプション）
5├── objects/ # 再利用可能なUIパーツ
6├── components/ # プロジェクト固有のコンポーネント
7└── global.css # エントリーポイント
8
9./postcss.config.js # PostCSS設定（プロジェクト直下に配置）Download template
または、以下からテンプレートをダウンロードできます。
Setup & Customization
1. Settings - デザイントークンのカスタマイズ
settings/ディレクトリ内で、カラーやフォントサイズなど、サイトの基本設定に関するCSS変数を定義します。
1/* settings/colors.css */
2:root {
3 --color-primary: #49b7ed;
4 --color-secondary: #0041c0;
5 --color-tertiary: #74d2ff;
6 --color-quaternary: #6bacd3;
7}2. Objects - 再利用可能なUIパーツ
objects/ディレクトリには、ボタン、ボックス、タイトルなど、再利用可能なUIパーツを定義します。
必要に応じて追加・編集してください。
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}3. Components - プロジェクト固有のコンポーネント
components/ディレクトリには、ナビゲーション、ヘッダー、フッターなど、プロジェクト固有のコンポーネントを作成します。
1/* components/header.css の例 */
2.c-header {
3 position: sticky;
4 top: 0;
5 left: 0;
6 width: 100vw;
7 background-color: var(--color-000);
8 height: var(--height-header);
9}4. global.css - レスポンシブユーティリティの選択
global.cssで、使用するレスポンシブユーティリティを選択します。
不要なブレイクポイントはコメントアウトしてファイルサイズを削減できます。
1/* global.css */
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");5. ビルドと読み込み
PostCSSを使用してglobal.cssをビルドし、サイトに読み込ませます。
1<head>
2 <link rel="stylesheet" href="/path/to/floncss/global.css">
3</head>postcss.config.jsは自動的にプロジェクト直下に配置されます。
既存の設定がある場合はスキップされるので、必要に応じて手動で統合してください。
CSS Architecture
ディレクトリ構成やITCSS設計の詳細、各レイヤーの役割については、Architectureページをご確認ください。
CSS Architecture