README
Minimalist Notation Default Presets
The MN library includes this default presets if other is not seated.
Auto prefixes
See source:
mn-presets/prefixes.js
mn-presets/runtime-prefixes.js
Media queries
See source:
mn-presets/medias.js
module.exports = (mn) => {
const {media, utils} = mn;
const {forEach} = utils;
forEach([
// mobile
['m', '(max-width: 992px)'],
['m2', '(max-width: 768px)'],
['m3', '(max-width: 640px)'],
['m4', '(max-width: 480px)'],
['m5', '(max-width: 360px)'],
['m6', '(max-width: 320px)'],
['m2-', '(min-width: 768px) and (max-width: 992px)'],
['m3-', '(min-width: 640px) and (max-width: 992px)'],
['m4-', '(min-width: 480px) and (max-width: 992px)'],
['m5-', '(min-width: 360px) and (max-width: 992px)'],
['m6-', '(min-width: 320px) and (max-width: 992px)'],
// desktop
['d', '(min-width: 992px)'],
['d2', '(min-width: 1200px)'],
['d3', '(min-width: 1600px)'],
['d4', '(min-width: 1920px)'],
['-d4', '(min-width: 992px) and (max-width: 1920px)'],
['-d3', '(min-width: 992px) and (max-width: 1600px)'],
['-d2', '(min-width: 992px) and (max-width: 1200px)'],
// if has mouse, touch pad, advanced stylus digitizers
['mouse', '(pointer: fine) and (hover: hover)'],
], (v, i) => {
media[v[0]] = {query: v[1], priority: i};
});
// user agents
forEach([
'linux', 'mozilla', 'firefox', 'opera', 'trident', 'edge',
'chrome', 'ubuntu', 'chromium', 'safari', 'msie', 'WebKit', 'AppleWebKit',
'mobile', 'ie', 'webtv', 'konqueror', 'blackberry', 'android', 'iron',
'iphone', 'ipod', 'ipad', 'mac', 'darwin', 'windows', 'freebsd',
], (name) => {
media[name] = {selector: '.' + name};
});
};
Examples:
<div class="ph15 ph10@m w1100@d2">...</div>
.ph15 {
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 992px) {
.ph10\@m {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 1200px) {
.w1100\@d2 {
width: 1100px;
}
}
<div class="bgE bgF@safari dB@ie">...</div>
.bgE {
background: #eee;
}
.safari .bgF\@safari {
background: #fff;
}
.ie .dB\@ie {
display: block;
}
States
See source:
mn-presets/states.js
State name | Selectors |
---|---|
a | :active |
с | :checked |
f | :focus |
h | :hover |
i | ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::placeholder |
even | :nth-child(2n) |
odd | :nth-child(2n+1) |
n | :nth-child |
first | :first-child |
last | :last-child |
Examples:
<a class="o70:h">link</a>
.o70\:h:hover {
opacity: .7;
}
<div class="bg01:odd">...</div>
.bg01\:odd:nth-child(2n+1) {
background: #000;
background: rgba(0,0,0,.07);
}
<div class="bg01:n[3n+1]">...</div>
.bg01\:n\[3n\+1\]:nth-child(3n+1) {
background: #000;
background: rgba(0,0,0,.07);
}
<div class="bg01:not[.anyClass]">...</div>
.bg01\:not\[\.anyClass\]:not(.anyClass) {
background: #000;
background: rgba(0,0,0,.07);
}
<div class="bg01:not[[class*=any]\:hover]">...</div>
.bg01\:not\[\[class\*\=any\]\\\:hover\]:not([class*=any]:hover) {
background: #000;
background: rgba(0,0,0,.07);
}
Other default settings
See source:
mn-presets/main.js
module.exports = (mn) => {;
mn.css({
html: {
'-webkit-tap-highlight-color': '#000',
},
});
mn.assign({
'*, *:before, *:after': 'bxzBorderBox',
html: 'ovxHidden tsa',
body: 'm0 ovxHidden',
a: 'crPointer@mouse',
img: 'wmax dBlock mhAuto b0',
iframe: 'dBlock b0',
'aside, article, main, section, header, footer, nav, video, canvas, input, textarea':
'dBlock',
});
};
Side names
How sides named in the names of the essences, if such clarification may take place for the attribute in question
Base format: {baseName}{sideName}{value}
Side suffix | Sides | Description |
---|---|---|
t | top | |
b | bottom | |
l | left | |
r | right | |
v | top, bottom | vertical |
vl | top, bottom, left | vertical and left |
vr | top, bottom, right | vertical and right |
h | left, right | horizontal |
ht | top, left, right | horizontal and top |
hb | bottom, left, right | horizontal and bottom |
lt | left, top | |
rt | right, bottom | |
lb | left, bottom | |
rb | right, bottom |
const defaultSides = reduce({
'': [ '' ],
t: [ 'top' ],
b: [ 'bottom' ],
l: [ 'left' ],
r: [ 'right' ],
v: [ 'top', 'bottom' ],
vl: [ 'top', 'bottom', 'left' ],
vr: [ 'top', 'bottom', 'right' ],
h: [ 'left', 'right' ],
ht: [ 'left', 'right', 'top' ],
hb: [ 'left', 'right', 'bottom' ],
lt: [ 'top', 'left' ],
rt: [ 'top', 'right' ],
lb: [ 'bottom', 'left' ],
rb: [ 'bottom', 'right' ]
}, (dst, sides, sideKey) => {
dst[sideKey] = reduce(sides, sidesIteratee, {});
return dst;
}, {});
Examples:
<div m="p5"></div>
[m~="p5"]{
padding: 5px;
}
<div m="pl10"></div>
[m~="pl10"]{
padding-left: 10px;
}
<div m="pv15"></div>
[m~="pv15"]{
padding-top: 15px;
padding-bottom: 15px;
}
<div m="prb15"></div>
[m~="prb15"]{
padding-right: 15px;
padding-bottom: 15px;
}
Essences of styles
See source:
mn-presets/styles.js
See docs:
styles.minimalist-notation.org
Normalize
This is a fork of the normalize.css v8.0.1
See source:
mn-presets/normalize.js