Settings
Gutters / Gaps
サイトで利用する共通のgutter/gapの変数です。
デザインに応じて適宜変更してください。
こちらで定義されている変数は、utility classと連携しています。
Gutters
/path/to/floncss/settings/gutters.css
1:root {
2 /** base gutter */
3 --gutter-base: 40px;
4
5 /** other gutters */
6 --gutter-2xl: 120px;
7 --gutter-xl: 100px;
8 --gutter-lg: 80px;
9 --gutter-md: 60px;
10 --gutter-sm: 20px;
11 --gutter-xs: 10px;
12 --gutter-2xs: 5px;
13}Useage
utility class
1<div class="mt mr:md mb:lg ml:xl">...</div>
2<div class="pt pr:md pb:lg pl:xl">...</div>css
1.selector {
2 margin-top: var(--gutter-base);
3}Gaps
/path/to/floncss/settings/gaps.css
1:root {
2 /** base gap */
3 --gap-base: 40px;
4
5 /** other gaps */
6 --gap-2xl: 120px;
7 --gap-xl: 100px;
8 --gap-lg: 80px;
9 --gap-md: 60px;
10 --gap-sm: 20px;
11 --gap-xs: 10px;
12 --gap-2xs: 5px;
13}Useage
utility class
1<div class="cols gap gap:lg@md">...</div>css
1.selector {
2 gap: var(--gap-base);
3}