Settings
Gutters / Gaps
サイトで利用する共通のgutter/gapの変数です。
デザインに応じて適宜変更してください。
こちらで定義されている変数は、utility classと連携しています。
Gutters
/path/to/floncss/settings/gutters.css
1:root {
2 /** default gutters */
3 --gutter-base: 32px;
4 --gutter-2xl: 128px;
5 --gutter-xl: 80px;
6 --gutter-lg: 64px;
7 --gutter-md: 48px;
8 --gutter-sm: 16px;
9 --gutter-xs: 8px;
10 --gutter-2xs: 4px;
11}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 /** default gaps */
3 --gap-base: 40px;
4 --gap-2xl: 96px;
5 --gap-xl: 80px;
6 --gap-lg: 64px;
7 --gap-md: 48px;
8 --gap-sm: 32px;
9 --gap-xs: 24px;
10 --gap-2xs: 16px;
11 --gap-3xs: 8px;
12}Useage
utility class
1<div class="cols gap gap:lg@md">...</div>css
1.selector {
2 gap: var(--gap-base);
3}