Getting started
CSS Architecture Based on ITCSS
ITCSSは、CSS Wizardy の Harry Roberts氏が提唱したCSSの詳細度を管理する設計思想です。
「Inverted Triangle CSS (逆三角形のCSS)」の略で、設定の詳細度順に階層化して記述します。
7つのレイヤーが定義されており、この記述が逆三角形として可視化されます。
FlonCSS
FlonCSSは、ITCSSの設計思想と最小限のutility-first CSSを合わせたハイブリットなフレームワークです。
デザイナー、エンジニアにとって品質の安定とより自由なスタイリングを実現します。
1floncss
2 ├── settings
3 │ ├── colors.css
4 │ ├── fonts.css
5 │ └── ...
6 ├── generic
7 │ ├── reset.css
8 │ └── ...
9 ├── base
10 │ ├── base.css
11 │ └── ...
12 ├── objects
13 │ ├── botton.css
14 │ ├── title.css
15 │ └── ...
16 ├── components
17 │ ├── header.css
18 │ ├── footer.css
19 │ └── ...
20 ├── trumps
21 │ ├── colors.css
22 │ ├── fonts.css
23 │ └── ...
24 ├── global.css
25 │
26 ├── home.css
27 ├── contact.css
28 └── ...global.css
floncssの内容をインポートしたエントリーファイルです。
1@import url("./settings");
2@import url("./generic");
3@import url("./base");
4@import url("./objects");
5
6/**
7 * trumps
8 */
9@import url("./trumps");
10@import url("./trumps/media-sm");
11@import url("./trumps/media-md");
12@import url("./trumps/media-lg");
13@import url("./trumps/media-xl");このglobal.cssをコンパイラーを用いてビルドし、サイトに読み込ませませてください。
1<head>
2 ...
3 <link rel="stylesheet" href="/path/to/floncss/global.css">利用しないブレイクポイントはコメントアウト
サイトのデザインによっては利用しないブレイクポイントがあるかもしれません。
利用していないことを明示的にするためコメントアウトしてください。
ビルドファイルのサイズを小さくするため、実装時の混乱を避けるために重要です。
1@import url("./trumps/media-sm");
2/* @import url("./trumps/media-md"); */
3/* @import url("./trumps/media-lg"); */
4@import url("./trumps/media-xl");ブレイクポイントの設定についてはこちらをご確認ください。
Learn morehome.css, contact.css, etc
ページごとのエントリーファイルです。
コンポーネントでは表現できないスタイルを定義する必要がある場合は新たなエントリーファイルを作成してください。
1@import url("@floncss/settings/custom-media");
2
3/** 以下、homeページにしか適用しないスタイルを記述します */このファイルをビルドし、利用するページに読み込ませませてください。
1<head>
2 ...
3 <link rel="stylesheet" href="/path/to/floncss/home.css">Settings
カラーやフォントサイズなど、サイトの基本設定に関するcss変数を定義します。
1--color-primary: #49b7ed;
2--color-secondary: #0041c0;
3--color-tertiary: #74d2ff;
4--color-quaternary: #6bacd3;Tools
@mixin, functionなどを定義します。
FlonCSSのスタートアップセットには含まれていません。利用する場合はフォルダ、ファイルを追加してください。
Generic
reset.cssなどを定義します。
Base
要素セレクターの対するスタイルを定義します。
FlonCSSでは、htmlやbodyなどサイトの基本となるスタイルも定義します。
1html {
2 font-family: var(--font-family-primary);
3 font-size: var(--font-size-default);
4 font-variant-numeric: tabular-nums;
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-000);
12 ...Objects
レイアウト目的パーツやこれ以上細分化できないUIパーツなどをコンポーネントとして定義します。
接頭辞には "o-" を付与します。
1<button class="o-button:primary">
2 Get started
3</button>Components
装飾のスタイルを持つUIパーツをコンポーネントとして定義します。Objectsレイヤーよりも明示的なクラス名をつけます。
headerやfooterなど抽象度が低いコンポーネントが該当します。
接頭辞には "c-" を付与します。
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>Trumps
utility class を格納しています。
1<section class="mt:primary">
2 <h1 class="font:xl mb:primary">FlonCSS</h1>
3
4 <p class="font:sm mb:secondary">
5 It is a hybrid framework that combines a utility...
6 </p>
7
8 <div class="cols gap">
9 <div class="cols:6">
10 message message message message.
11 </div>
12 <div class="cols:6">
13 message message message message.
14 </div>
15 </div>
16</section>