modori

v1.0.0

Published

3 years ago

CSS helpers that help you styling on the fly

Downloads

0High
0Medium
0Low

hokid

css sass scss lib utils helpers styling markup fast frontend

Installing

npm install -S modori

Playground

Examples

HTML

<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;
}

Notation

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

Helpers

Properties

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.

display

shorthand: di
path scss: scss/display/all.scss
path css: css/display/all.css
single value: yes

Value : shorthand:

block: bl
inline: in
inline-block: inbl
table: ta
table-row: tar
table-cell: tac
flex: fl
none: none

position

shorthand: pos
path scss: scss/position/all.scss
path css: css/position/all.css
single value: yes

Value : shorthand:

absolute: ab
static: st
relative: re
fixed: fi

float

shorthand: flt
path scss: scss/float/all.scss
path css: css/float/all.css
single value: yes

Value : shorthand:

left: le
right: ri
none: none

z-index

shorthand: z
path scss: scss/z-index/all.scss
path css: css/z-index/all.css
single value: yes

Value : shorthand:

9999: max
-1: -1
0: 0
1: 1
2: 2
3: 3
4: 4
5: 5
6: 6
7: 7
8: 8
9: 9
10: 10

margin

shorthand: mr
paths scss:
- scss/margin/all.scss - all
- scss/margin/short.scss - margin
- scss/margin/top.scss - margin-top
- scss/margin/left.scss - margin-left
- scss/margin/right.scss - margin-right
- scss/margin/bottom.scss - margin-bottom
- scss/margin/vertical.scss - vertical margins
- scss/margin/horizontal.scss - horizontal margins
- scss/margin/vgaps.scss - vertical gaps
- scss/margin/hgaps.scss - horizontal gaps
paths css:
- css/margin/all.css - all
- css/margin/short.css - margin
- css/margin/top.css - margin-top
- css/margin/left.css - margin-left
- css/margin/right.css - margin-right
- css/margin/bottom.css - margin-bottom
- css/margin/vertical.css - vertical margins
- css/margin/horizontal.css - horizontal margins
- css/margin/vgaps.css - vertical gaps
- css/margin/hgaps.css - horizontal gaps
single value: no

Value : [multiplier] or value shorthand:

0: : 0
6px: : 0.25
12px: : 0.5
18px: : 0.75
24px: : 1
30px: : 1.25
36px: : 1.5
42px: : 1.75
48px: : 2
54px: : 2.25
60px: : 2.5
66px: : 2.75
72px: : 3
78px: : 3.25
84px: : 3.5
90px: : 3.75
96px: : 4
102px: : 4.25
108px: : 4.5
114px: : 4.75
120px: : 5
126px: : 5.25
132px: : 5.5
138px: : 5.75
144px: : 6
auto: : auto

Values have is`s negative variant: m-mr="-0.5t!"

Property : [param] shorthand

margin-top: t
margin-left: l
margin-right: r
margin-bottom: b
margin: omitted, m-mr="0.5"
margin-top margin-bottom: v
margin-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"

padding

shorthand: pd
paths scss:
- scss/padding/all.scss - all
- scss/padding/short.scss - padding
- scss/padding/top.scss - padding-top
- scss/padding/left.scss - padding-left
- scss/padding/right.scss - padding-right
- scss/padding/bottom.scss - padding-bottom
- scss/padding/vertical.scss - vertical padding
- scss/padding/horizontal.scss - horizontal padding
- scss/padding/vgaps.scss - vertical gaps
- scss/padding/hgaps.scss - horizontal gaps
paths css:
- css/padding/all.css - all
- css/padding/short.css - padding
- css/padding/top.css - padding-top
- css/padding/left.css - padding-left
- css/padding/right.css - padding-right
- css/padding/bottom.css - padding-bottom
- css/padding/vertical.css - vertical padding
- css/padding/horizontal.css - horizontal padding
- css/padding/vgaps.css - vertical gaps
- css/padding/hgaps.css - horizontal gaps
single value: no

Value : [multiplier]:

0: : 0
6px: : 0.25
12px: : 0.5
18px: : 0.75
24px: : 1
30px: : 1.25
36px: : 1.5
42px: : 1.75
48px: : 2
54px: : 2.25
60px: : 2.5
66px: : 2.75
72px: : 3
78px: : 3.25
84px: : 3.5
90px: : 3.75
96px: : 4
102px: : 4.25
108px: : 4.5
114px: : 4.75
120px: : 5
126px: : 5.25
132px: : 5.5
138px: : 5.75
144px: : 6

Property : [param] shorthand

padding-top: t
padding-left: l
padding-right: r
padding-bottom: b
padding: omitted, m-pd="0.5"
padding-top padding-bottom: v
padding-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!"

font

shorthand: fnt
paths scss:
- scss/font/all.scss - all
- scss/font/size.scss - font-size
- scss/font/weight.scss - font-weight
paths css:
- css/font/all.css - all
- css/font/size.css - font-size
- css/font/weight.css - font-weight
single value: no

For font size base value is 16px.

(font size) Value : [multiplier] or value shorthand:

0: : 0
4px: : 0.25
8px: : 0.5
12px: : 0.75
16px: : 1
20px: : 1.25
24px: : 1.5
28px: : 1.75
32px: : 2
36px: : 2.25
40px: : 2.5
44px: : 2.75
48px: : 3
52px: : 3.25
56px: : 3.5
60px: : 3.75
64px: : 4
68px: : 4.25
72px: : 4.5
76px: : 4.75
80px: : 5
84px: : 5.25
88px: : 5.5
92px: : 5.75
96px: : 6
inherit: : in

For font weight base value is 1.

(font weight) Value : [multiplier] or value shorthand:

100: : 100
200: : 200
300: : 300
400: : 400
500: : 500
600: : 600
700: : 700
800: : 800
900: : 900

Property : [param] shorthand

font-size: s
font-weight: w

Examples

m-fnt="0.5s 200w"
m-fnt="5.5s 900w"

line-height

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: : 0
6px: : 0.25
12px: : 0.5
18px: : 0.75
24px: : 1
30px: : 1.25
36px: : 1.5
42px: : 1.75
48px: : 2
54px: : 2.25
60px: : 2.5
66px: : 2.75
72px: : 3
78px: : 3.25
84px: : 3.5
90px: : 3.75
96px: : 4
102px: : 4.25
108px: : 4.5
114px: : 4.75
120px: : 5
126px: : 5.25
132px: : 5.5
138px: : 5.75
144px: : 6
normal: : nr
inherit: : in

Property : [param] shorthand

line-height: omitted

Examples

m-lh="0.5"
m-lh="3.5"
m-lh="2.75"

text-align

shorthand: tal
path scss: scss/text-align/all.scss
path css: css/text-align/all.css
single value: yes

Value : shorthand:

left: le
right: ri
center: ce
justify: ju
inherit: in

Utilises

Utilises may be one or more, for example, m-utils="utils1 crfx utils2".

clearfix

clearfix

No need description.

shorthand: crfx
path scss: scss/utils/all.scss
path css: css/utils/all.css

Customization

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 !important

You 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Installing

Examples

Notation

Helpers

Properties

display

position

float

z-index

margin

padding

font

line-height

text-align

Utilises

clearfix

Customization