Utilities
Gutters
/path/to/floncss/trumps/gutters/gutters.css
| Class | Properties |
|---|---|
| margin | |
| mg | margin: var(--gutter-base); |
| mg:2xl | margin: var(--gutter-2xl); |
| mg:xl | margin: var(--gutter-xl); |
| mg:lg | margin: var(--gutter-lg); |
| mg:md | margin: var(--gutter-md); |
| mg:sm | margin: var(--gutter-sm); |
| mg:xs | margin: var(--gutter-xs); |
| mg:2xs | margin: var(--gutter-2xs); |
| mg:none | margin: 0; |
| mg:auto | margin: auto; |
| margin top | |
| mt | margin-top: var(--gutter-base); |
| mt:2xl | margin-top: var(--gutter-2xl); |
| mt:xl | margin-top: var(--gutter-xl); |
| mt:lg | margin-top: var(--gutter-lg); |
| mt:md | margin-top: var(--gutter-md); |
| mt:sm | margin-top: var(--gutter-sm); |
| mt:xs | margin-top: var(--gutter-xs); |
| mt:2xs | margin-top: var(--gutter-2xs); |
| mt:none | margin-top: 0; |
| mt:auto | margin-top: auto; |
| margin right | |
| mr | margin-right: var(--gutter-base); |
| mr:2xl | margin-right: var(--gutter-2xl); |
| mr:xl | margin-right: var(--gutter-xl); |
| mr:lg | margin-right: var(--gutter-lg); |
| mr:md | margin-right: var(--gutter-md); |
| mr:sm | margin-right: var(--gutter-sm); |
| mr:xs | margin-right: var(--gutter-xs); |
| mr:2xs | margin-right: var(--gutter-2xs); |
| mr:none | margin-right: 0; |
| mr:auto | margin-right: auto; |
| margin bottom | |
| mb | margin-bottom: var(--gutter-base); |
| mb:2xl | margin-bottom: var(--gutter-2xl); |
| mb:xl | margin-bottom: var(--gutter-xl); |
| mb:lg | margin-bottom: var(--gutter-lg); |
| mb:md | margin-bottom: var(--gutter-md); |
| mb:sm | margin-bottom: var(--gutter-sm); |
| mb:xs | margin-bottom: var(--gutter-xs); |
| mb:2xs | margin-bottom: var(--gutter-2xs); |
| mb:none | margin-bottom: 0; |
| mb:auto | margin-bottom: auto; |
| margin left | |
| ml | margin-left: var(--gutter-base); |
| ml:2xl | margin-left: var(--gutter-2xl); |
| ml:xl | margin-left: var(--gutter-xl); |
| ml:lg | margin-left: var(--gutter-lg); |
| ml:md | margin-left: var(--gutter-md); |
| ml:sm | margin-left: var(--gutter-sm); |
| ml:xs | margin-left: var(--gutter-xs); |
| ml:2xs | margin-left: var(--gutter-2xs); |
| ml:none | margin-left: 0; |
| ml:auto | margin-left: auto; |
| margin left & right | |
| mx | margin-left: var(--gutter-base); margin-right: var(--gutter-base); |
| mx:2xl | margin-left: var(--gutter-2xl); margin-right: var(--gutter-2xl); |
| mx:xl | margin-left: var(--gutter-xl); margin-right: var(--gutter-xl); |
| mx:lg | margin-left: var(--gutter-lg); margin-right: var(--gutter-lg); |
| mx:md | margin-left: var(--gutter-md); margin-right: var(--gutter-md); |
| mx:sm | margin-left: var(--gutter-sm); margin-right: var(--gutter-sm); |
| mx:xs | margin-left: var(--gutter-xs); margin-right: var(--gutter-xs); |
| mx:2xs | margin-left: var(--gutter-2xs); margin-right: var(--gutter-2xs); |
| mx:none | margin-left: 0; margin-right: 0; |
| mx:auto | margin-left: auto; margin-right: auto; |
| margin top & bottom | |
| my | margin-top: var(--gutter-base); margin-bottom: var(--gutter-base); |
| my:2xl | margin-top: var(--gutter-2xl); margin-bottom: var(--gutter-2xl); |
| my:xl | margin-top: var(--gutter-xl); margin-bottom: var(--gutter-xl); |
| my:lg | margin-top: var(--gutter-lg); margin-bottom: var(--gutter-lg); |
| my:md | margin-top: var(--gutter-md); margin-bottom: var(--gutter-md); |
| my:sm | margin-top: var(--gutter-sm); margin-bottom: var(--gutter-sm); |
| my:xs | margin-top: var(--gutter-xs); margin-bottom: var(--gutter-xs); |
| my:2xs | margin-top: var(--gutter-2xs); margin-bottom: var(--gutter-2xs); |
| my:none | margin-top: 0; margin-bottom: 0; |
| my:auto | margin-top: auto; margin-bottom: auto; |
| Class | Properties |
|---|---|
| padding | |
| padding: var(--gutter-base); | |
| padding: var(--gutter-2xl); | |
| padding: var(--gutter-xl); | |
| padding: var(--gutter-lg); | |
| padding: var(--gutter-md); | |
| padding: var(--gutter-sm); | |
| padding: var(--gutter-xs); | |
| padding: var(--gutter-2xs); | |
| padding: 0; | |
| padding top | |
| padding-top: var(--gutter-base); | |
| padding-top: var(--gutter-2xl); | |
| padding-top: var(--gutter-xl); | |
| padding-top: var(--gutter-lg); | |
| padding-top: var(--gutter-md); | |
| padding-top: var(--gutter-sm); | |
| padding-top: var(--gutter-xs); | |
| padding-top: var(--gutter-2xs); | |
| padding-top: 0; | |
| padding right | |
| padding-right: var(--gutter-base); | |
| padding-right: var(--gutter-2xl); | |
| padding-right: var(--gutter-xl); | |
| padding-right: var(--gutter-lg); | |
| padding-right: var(--gutter-md); | |
| padding-right: var(--gutter-sm); | |
| padding-right: var(--gutter-xs); | |
| padding-right: var(--gutter-2xs); | |
| padding-right: 0; | |
| padding bottom | |
| padding-bottom: var(--gutter-base); | |
| padding-bottom: var(--gutter-2xl); | |
| padding-bottom: var(--gutter-xl); | |
| padding-bottom: var(--gutter-lg); | |
| padding-bottom: var(--gutter-md); | |
| padding-bottom: var(--gutter-sm); | |
| padding-bottom: var(--gutter-xs); | |
| padding-bottom: var(--gutter-2xs); | |
| padding-bottom: 0; | |
| padding left | |
| padding-left: var(--gutter-base); | |
| padding-left: var(--gutter-2xl); | |
| padding-left: var(--gutter-xl); | |
| padding-left: var(--gutter-lg); | |
| padding-left: var(--gutter-md); | |
| padding-left: var(--gutter-sm); | |
| padding-left: var(--gutter-xs); | |
| padding-left: var(--gutter-2xs); | |
| padding-left: 0; | |
| padding left & right | |
| padding-left: var(--gutter-base); padding-right: var(--gutter-base); | |
| padding-left: var(--gutter-2xl); padding-right: var(--gutter-2xl); | |
| padding-left: var(--gutter-xl); padding-right: var(--gutter-xl); | |
| padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); | |
| padding-left: var(--gutter-md); padding-right: var(--gutter-md); | |
| padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); | |
| padding-left: var(--gutter-xs); padding-right: var(--gutter-xs); | |
| padding-left: var(--gutter-2xs); padding-right: var(--gutter-2xs); | |
| padding-left: 0; padding-right: 0; | |
| padding top & bottom | |
| padding-top: var(--gutter-base); padding-bottom: var(--gutter-base); | |
| padding-top: var(--gutter-2xl); padding-bottom: var(--gutter-2xl); | |
| padding-top: var(--gutter-xl); padding-bottom: var(--gutter-xl); | |
| padding-top: var(--gutter-lg); padding-bottom: var(--gutter-lg); | |
| padding-top: var(--gutter-md); padding-bottom: var(--gutter-md); | |
| padding-top: var(--gutter-sm); padding-bottom: var(--gutter-sm); | |
| padding-top: var(--gutter-xs); padding-bottom: var(--gutter-xs); | |
| padding-top: var(--gutter-2xs); padding-bottom: var(--gutter-2xs); | |
| padding-top: 0; padding-bottom: 0; | |
Useage
margin
ml
mt
mr
mb
mg
1<div class="ml">ml</div>
2<div class="mt">mt</div>
3<div class="mr">mr</div>
4<div class="mb">mb</div>
5<div class="mg">mg</div>padding
pl
pt
pr
pb
pd
1<div class="pl">pl</div>
2<div class="pt">pt</div>
3<div class="pr">pr</div>
4<div class="pb">pb</div>
5<div class="pg">pg</div>Settings
各種値については "settings/gutters.css" で定義します。
Learn more