Getting started
Installation
FlonCSSは、最小限のutility-first CSSと、ITCSSベースのstyle設計を合わせたハイブリットなフレームワークです。
デザイナー、エンジニアにとって品質の安定とより自由なスタイリングを実現します。
Download FlonCSS
Download FlonCSS
Download template
Setup
1. Edit various settings
カラーやフォントサイズなど、サイトの基本設定に関するcss変数を定義します。
1--color-primary: #49b7ed;
2--color-secondary: #0041c0;
3--color-tertiary: #74d2ff;
4--color-quaternary: #6bacd3;また、ブレイクポイントを設定します。デザインに応じて適宜変更してください。
使用しないブレイクポイントはコメントアウトしてください。
1@custom-media --media-sm only screen and (min-width: 640px);
2
3/* @custom-media --media-md only screen and (min-width: 768px); */
4
5/* @custom-media --media-lg only screen and (min-width: 1024px); */
6
7@custom-media --media-xl only screen and (min-width: 1280px);2. Edit "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");global.cssをコンパイラーを用いてビルドし、サイトに読み込ませませてください。
1<head>
2 ...
3 <link rel="stylesheet" href="/path/to/floncss/global.css">CSS Architecture
その他、ディレクトリ構成やスタイル設計の詳細についてはこちらをご確認ください。
CSS Architecture