CSS helpers that help you styling on the fly🚀
npm install -S modoriHTML
<ul m-mr="1vg">
<li>1</li>
<li>2</li>
</ul>Styles
[m-mr~="1vg"] > * + * {
margin-top: 24px;
}HTML
<h1 m-fnt="0.5s!" m-tal="ce"></h1>Styles
[m-fnt~="0.5s"] {
font-size: 8px !important;
}
[m-tal~="ce"] {
text-align: center;
}HTML
<p m-pd="1.25 0.5b!">Text</p>Styles
[m-pd~="1.25"] {
padding: 32px;
}
[m-pd~="0.5b!"] {
padding-bottom: 12px !important;
}Attribute name format for properties: m-[shorthand name]. Where [shorthand name] is any shorthand name of css property.
m-pd // padding
m-mr // margin
m-tal // text-align
Attribute name format for utilities : m-utils.
m-utils="utils1"
m-utils="utils1 utils2"
General value naming format : [label]. Where [lable] any label that present value.
m-mr="1t" // margin-top: 24px
m-mr="0.5t" // margin-top: 12px
m-mr="-1.5t" // margin-top: -36px
m-mr="0.75t 1b" // margin-top: 18px; margin-bottom: 24px;
Name format for values with !important flag: [label]!.
m-mr="1t!" // margin-top: 24px !important
Each section contain description of helper.
Single value: yes - mean that value of attribute may be only one.
Single value: no - mean that value of attribute may be array of values.
For example, If "single value" is yes, then this construction is wrong: m-di="bl ab", but this is correct: m-di="bl". If "single value" is no, then m-di="bl ab" is correct and this m-di="bl".
Several helpers have special value shorthand format. One of them is [multiplier][param]. Where [multiplier] is number(1, 1.25, 3.5). For calculation value of property just multiply [multiplier] by the base value, where base value by default is 24px. For example, if [multipler] is 0.5, then value will be 0.5 * 24px = 12px, it`s simple. [param] is parameter or side, for example, m-mr="0.5t"(margin-top: 12px), where t is shorthand for top side.
For text value format is [text value shorthand]:[param], for example, auto:t.
- shorthand:
di - path scss:
scss/display/all.scss - path css:
css/display/all.css - single value:
yes
Value : shorthand:
block:blinline:ininline-block:inbltable:tatable-row:tartable-cell:tacflex:flnone:none
- shorthand:
pos - path scss:
scss/position/all.scss - path css:
css/position/all.css - single value:
yes
Value : shorthand:
absolute:abstatic:strelative:refixed:fi
- shorthand:
flt - path scss:
scss/float/all.scss - path css:
css/float/all.css - single value:
yes
Value : shorthand:
left:leright:rinone:none
- shorthand:
z - path scss:
scss/z-index/all.scss - path css:
css/z-index/all.css - single value:
yes
Value : shorthand:
9999:max-1:-10:01:12:23:34:45:56:67:78:89:910:10
- shorthand:
mr - paths scss:
scss/margin/all.scss- allscss/margin/short.scss- marginscss/margin/top.scss- margin-topscss/margin/left.scss- margin-leftscss/margin/right.scss- margin-rightscss/margin/bottom.scss- margin-bottomscss/margin/vertical.scss- vertical marginsscss/margin/horizontal.scss- horizontal marginsscss/margin/vgaps.scss- vertical gapsscss/margin/hgaps.scss- horizontal gaps
- paths css:
css/margin/all.css- allcss/margin/short.css- margincss/margin/top.css- margin-topcss/margin/left.css- margin-leftcss/margin/right.css- margin-rightcss/margin/bottom.css- margin-bottomcss/margin/vertical.css- vertical marginscss/margin/horizontal.css- horizontal marginscss/margin/vgaps.css- vertical gapscss/margin/hgaps.css- horizontal gaps
- single value:
no
Value : [multiplier] or value shorthand:
0::06px::0.2512px::0.518px::0.7524px::130px::1.2536px::1.542px::1.7548px::254px::2.2560px::2.566px::2.7572px::378px::3.2584px::3.590px::3.7596px::4102px::4.25108px::4.5114px::4.75120px::5126px::5.25132px::5.5138px::5.75144px::6auto::auto
Values have is`s negative variant: m-mr="-0.5t!"
Property : [param] shorthand
margin-top:tmargin-left:lmargin-right:rmargin-bottom:bmargin: omitted,m-mr="0.5"margin-top margin-bottom:vmargin-left margin-right:h
Special shorthands: vg and hg.
<ul m-mr="1vg">
<li>1</li>
<li>2</li>
</ul>Styles
[m-mr~="1vg"] > * + * {
margin-top: 24px;
}Examples
m-mr="0.5t 0.5l 0.5r 0.5b"
m-mr="0.5t 1l! 1r! 0.5b"
m-mr="-1v -1h"
m-mr="-1.25vg"
m-mr="2.25hg"
m-mr="0!"
m-mr="auto:v 5.25t"
- shorthand:
pd - paths scss:
scss/padding/all.scss- allscss/padding/short.scss- paddingscss/padding/top.scss- padding-topscss/padding/left.scss- padding-leftscss/padding/right.scss- padding-rightscss/padding/bottom.scss- padding-bottomscss/padding/vertical.scss- vertical paddingscss/padding/horizontal.scss- horizontal paddingscss/padding/vgaps.scss- vertical gapsscss/padding/hgaps.scss- horizontal gaps
- paths css:
css/padding/all.css- allcss/padding/short.css- paddingcss/padding/top.css- padding-topcss/padding/left.css- padding-leftcss/padding/right.css- padding-rightcss/padding/bottom.css- padding-bottomcss/padding/vertical.css- vertical paddingcss/padding/horizontal.css- horizontal paddingcss/padding/vgaps.css- vertical gapscss/padding/hgaps.css- horizontal gaps
- single value:
no
Value : [multiplier]:
0::06px::0.2512px::0.518px::0.7524px::130px::1.2536px::1.542px::1.7548px::254px::2.2560px::2.566px::2.7572px::378px::3.2584px::3.590px::3.7596px::4102px::4.25108px::4.5114px::4.75120px::5126px::5.25132px::5.5138px::5.75144px::6
Property : [param] shorthand
padding-top:tpadding-left:lpadding-right:rpadding-bottom:bpadding: omitted,m-pd="0.5"padding-top padding-bottom:vpadding-left padding-right:h
Examples
m-pd="0.5t 0.5l 0.5r 0.5b"
m-pd="0.5t 1l! 1r! 0.5b"
m-pd="1v 1h"
m-pd="0!"
- shorthand:
fnt - paths scss:
scss/font/all.scss- allscss/font/size.scss- font-sizescss/font/weight.scss- font-weight
- paths css:
css/font/all.css- allcss/font/size.css- font-sizecss/font/weight.css- font-weight
- single value:
no
For font size base value is 16px.
(font size) Value : [multiplier] or value shorthand:
0::04px::0.258px::0.512px::0.7516px::120px::1.2524px::1.528px::1.7532px::236px::2.2540px::2.544px::2.7548px::352px::3.2556px::3.560px::3.7564px::468px::4.2572px::4.576px::4.7580px::584px::5.2588px::5.592px::5.7596px::6inherit::in
For font weight base value is 1.
(font weight) Value : [multiplier] or value shorthand:
100::100200::200300::300400::400500::500600::600700::700800::800900::900
Property : [param] shorthand
font-size:sfont-weight:w
Examples
m-fnt="0.5s 200w"
m-fnt="5.5s 900w"
- shorthand:
lh - path scss
scss/line-height/all.scss - path css
css/line-height/all.css - single value:
yes
Value : [multiplier] or value shorthand:
0::06px::0.2512px::0.518px::0.7524px::130px::1.2536px::1.542px::1.7548px::254px::2.2560px::2.566px::2.7572px::378px::3.2584px::3.590px::3.7596px::4102px::4.25108px::4.5114px::4.75120px::5126px::5.25132px::5.5138px::5.75144px::6normal::nrinherit::in
Property : [param] shorthand
line-height: omitted
Examples
m-lh="0.5"
m-lh="3.5"
m-lh="2.75"
- shorthand:
tal - path scss:
scss/text-align/all.scss - path css:
css/text-align/all.css - single value:
yes
Value : shorthand:
left:leright:ricenter:cejustify:juinherit:in
Utilises may be one or more, for example, m-utils="utils1 crfx utils2".
No need description.
- shorthand:
crfx - path scss:
scss/utils/all.scss - path css:
css/utils/all.css
Some helpers have _settings.scss file that contain sets of variable for customization generation of it.
For example
$margin-base: 24px !dafault; // base for value
$margin-step: 1 / 4 !dafault; // step
$margin-limit: 24 !dafault; // limit of generations
$margin-import: true !dafault; // whether generate helper with !importantYou may choose what to include into your project.
Sass
@import "~modori/scss/display/all";
@import "~modori/scss/margin/top";
@import "~modori/scss/box.sccs";
@import "~modori/scss/typography.sccs";
// or all
@import "~modori/scss/all";Webpack or another bundler:
import 'modori/display/all.css';
import 'modori/margin/top.css';
import 'modori/margin/left.css';
import 'modori/margin/all.css';
// or all
import 'modori/css/all';HTML:
<script src="https://unpkg.com/modori@latest/css/all.css"></script>
<script src="https://unpkg.com/modori@latest/css/typography.css"></script>
<!--and etc-->Variables for base sizes:
$base-font-size: 16px !default; // for font-size
$base-size: 24px !default; // for margins, padding etc