❤Neil Patrick's Mansion

npm

Sign UpSign In
Have ideas to improve npm?Join in the discussion! »

mn-presets

0.0.38 • Public • Published

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

Keywords

Install

npm i mn-presets

DownloadsWeekly Downloads

40

Version

0.0.38

License

MIT

Unpacked Size

77.2 kB

Total Files

12

Homepage

github.com/mr-amirka/mn-presets#readme

Repository

Gitgithub.com/mr-amirka/mn-presets

Last publish

Collaborators

  • avatar
Try on RunKit
Report malware