mn-presets v0.0.38

Minimalist Notation Default Presets

The MN library includes this default presets if other is not seated.

• Auto prefixes
• Media queries
• Other default settings
• States
• Side names
• Essences of styles
• Normalize

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

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}

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