designFlonCSSv1.0.1

Utilities

Gutters

/path/to/floncss/trumps/gutters/gutters.css

ClassProperties
margin
mgmargin: var(--gutter-base);
mg:2xlmargin: var(--gutter-2xl);
mg:xlmargin: var(--gutter-xl);
mg:lgmargin: var(--gutter-lg);
mg:mdmargin: var(--gutter-md);
mg:smmargin: var(--gutter-sm);
mg:xsmargin: var(--gutter-xs);
mg:2xsmargin: var(--gutter-2xs);
mg:nonemargin: 0;
mg:automargin: auto;
margin top
mtmargin-top: var(--gutter-base);
mt:2xlmargin-top: var(--gutter-2xl);
mt:xlmargin-top: var(--gutter-xl);
mt:lgmargin-top: var(--gutter-lg);
mt:mdmargin-top: var(--gutter-md);
mt:smmargin-top: var(--gutter-sm);
mt:xsmargin-top: var(--gutter-xs);
mt:2xsmargin-top: var(--gutter-2xs);
mt:nonemargin-top: 0;
mt:automargin-top: auto;
margin right
mrmargin-right: var(--gutter-base);
mr:2xlmargin-right: var(--gutter-2xl);
mr:xlmargin-right: var(--gutter-xl);
mr:lgmargin-right: var(--gutter-lg);
mr:mdmargin-right: var(--gutter-md);
mr:smmargin-right: var(--gutter-sm);
mr:xsmargin-right: var(--gutter-xs);
mr:2xsmargin-right: var(--gutter-2xs);
mr:nonemargin-right: 0;
mr:automargin-right: auto;
margin bottom
mbmargin-bottom: var(--gutter-base);
mb:2xlmargin-bottom: var(--gutter-2xl);
mb:xlmargin-bottom: var(--gutter-xl);
mb:lgmargin-bottom: var(--gutter-lg);
mb:mdmargin-bottom: var(--gutter-md);
mb:smmargin-bottom: var(--gutter-sm);
mb:xsmargin-bottom: var(--gutter-xs);
mb:2xsmargin-bottom: var(--gutter-2xs);
mb:nonemargin-bottom: 0;
mb:automargin-bottom: auto;
margin left
mlmargin-left: var(--gutter-base);
ml:2xlmargin-left: var(--gutter-2xl);
ml:xlmargin-left: var(--gutter-xl);
ml:lgmargin-left: var(--gutter-lg);
ml:mdmargin-left: var(--gutter-md);
ml:smmargin-left: var(--gutter-sm);
ml:xsmargin-left: var(--gutter-xs);
ml:2xsmargin-left: var(--gutter-2xs);
ml:nonemargin-left: 0;
ml:automargin-left: auto;
ClassProperties
padding
pdpadding: var(--gutter-base);
pd:2xlpadding: var(--gutter-2xl);
pd:xlpadding: var(--gutter-xl);
pd:lgpadding: var(--gutter-lg);
pd:mdpadding: var(--gutter-md);
pd:smpadding: var(--gutter-sm);
pd:xspadding: var(--gutter-xs);
pd:2xspadding: var(--gutter-2xs);
pd:nonepadding: 0;
padding top
ptpadding-top: var(--gutter-base);
pt:2xlpadding-top: var(--gutter-2xl);
pt:xlpadding-top: var(--gutter-xl);
pt:lgpadding-top: var(--gutter-lg);
pt:mdpadding-top: var(--gutter-md);
pt:smpadding-top: var(--gutter-sm);
pt:xspadding-top: var(--gutter-xs);
pt:2xspadding-top: var(--gutter-2xs);
pt:nonepadding-top: 0;
padding right
prpadding-right: var(--gutter-base);
pr:2xlpadding-right: var(--gutter-2xl);
pr:xlpadding-right: var(--gutter-xl);
pr:lgpadding-right: var(--gutter-lg);
pr:mdpadding-right: var(--gutter-md);
pr:smpadding-right: var(--gutter-sm);
pr:xspadding-right: var(--gutter-xs);
pr:2xspadding-right: var(--gutter-2xs);
pr:nonepadding-right: 0;
padding bottom
pbpadding-bottom: var(--gutter-base);
pb:2xlpadding-bottom: var(--gutter-2xl);
pb:xlpadding-bottom: var(--gutter-xl);
pb:lgpadding-bottom: var(--gutter-lg);
pb:mdpadding-bottom: var(--gutter-md);
pb:smpadding-bottom: var(--gutter-sm);
pb:xspadding-bottom: var(--gutter-xs);
pb:2xspadding-bottom: var(--gutter-2xs);
pb:nonepadding-bottom: 0;
padding left
plpadding-left: var(--gutter-base);
pl:2xlpadding-left: var(--gutter-2xl);
pl:xlpadding-left: var(--gutter-xl);
pl:lgpadding-left: var(--gutter-lg);
pl:mdpadding-left: var(--gutter-md);
pl:smpadding-left: var(--gutter-sm);
pl:xspadding-left: var(--gutter-xs);
pl:2xspadding-left: var(--gutter-2xs);
pl:nonepadding-left: 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