FlonCSS
最小限のutility-first CSSと、ITCSSベースのstyle設計を合わせたハイブリットなフレームワークです。
デザイナー、エンジニアにとって品質の安定とより自由なスタイリングを実現します。
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>CSS Architecture
簡単なレイアウトや装飾はutility classを用いて素早く構築し、
複雑な装飾はITCSSに基にコンポーネントを定義、あるいはページごとにcssを記述していきます。
Settings
カラーやフォントサイズなど、サイトの基本設定に関するcss変数を定義します。
1--color-primary: #49b7ed; 2--color-secondary: #0041c0; 3--color-tertiary: #74d2ff; 4--color-quaternary: #6bacd3;Objects
レイアウト目的パーツやこれ以上細分化できないUIパーツなどを定義します。
1<button class="o-button:primary"> 2 Get started 3</button>Components
装飾のスタイルを持つUIパーツ。Objectsレイヤーよりも明示的なクラス名をつけます。
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 を格納しています。
Settings
カラーやフォントサイズなどサイトの基本設定項目をデザイナー/エンジニア間の共通言語とし、
デザインから実装までをより効率的かつ一貫性を持って進めることができます。
1/** main colors */
2--color-primary: #49b7ed;
3--color-secondary: #0041c0;
4--color-tertiary: #74d2ff;
5--color-quaternary: #6bacd3;
6...1/* default font size */
2--font-size-2xl: 48px;
3--font-size-xl: 30px;
4--font-size-lg: 24px;
5--font-size-md: 20px;
6...Responsive Design
あらかじめ用意されている4つのブレイクポイントを用い、
素早くレスポンシブデザインを構築することができます。
すべてのutility classにはブレイクポイントごとにスタイルを適用させることができる接尾辞（@sm、@md、@lg、@xl）が用意されています。
1<section class="mt:sm mt@sm">
2 <h2 class="font:lg font:xl@sm mb">
3 Responsive Design
4 </h2>
5 <p class="mb:sm mb@sm">
6 あらかじめ用意されている4つのブレイクポイント...
7 </p>
8 <div class="mb:sm mb@sm">
9 <img src="image.jpg">
10 </div>
11
12 <div class="cols gap:sm gap@md">
13 <div class="cols:6">
14 utility class は、末尾に :sm、:md、:lg、...
15 </div>
16 ...12 columns layout
1<div class="cols gap:xs gap@sm">
2 <div class="cols:7 cols:3@md cols:3@lg">
3 <img src="image_01.jpg">
4 </div>
5 <div class="cols:7 cols:3@md cols:3@lg">
6 <img src="image_02.jpg">
7 </div>
8 <div class="cols:8 cols:3@md cols:2@lg">
9 <img src="image_03.jpg">
10 </div>
11 <div class="cols:4 cols:3@md cols:5@lg">
12 <img src="image_04.jpg">
13 </div>
14</div>12カラムのグリッドシステムを採用しています。
レスポンシブに対応させることで様々なレイアウトを構築することができます。
また、utility classの “gap” や “row-gap” と組み合わせることでカラム間ギャップを細かく設定することができます。