@io-arc/preset-stylus v1.3.0

preset-stylus

Assets preset for stylus.

Install

$ npm i -g @io-arc/preset-stylus

# yarn
$ yarn global add @io-arc/preset-stylus

Usage

Just type a command in the directory where you want to expansion.
If you want to extract into <project>/src/css.

$ cd <project>/src/css
$ preset-stylus

By default, if a file with the same name exists, it will be skipped.
The following parameter will delete and overwrite the existing file with the same name.

# overwrite the file
$ preset-stylus --overwrite
# or
$ preset-stylus -o

Variables

Create a variable file by purpose.
assets/const/_xxx.styl.

Utility classes

margin, padding

File: components/utility/_space.styl

Margin and padding classes.
.ma-{n}, .mt-{n} ...

{n} is 0 to 24.
Calculate the radix multiplied by $spacer.

$spacer is assets/const/_space.styl.

Example $spacer is 4px.
.ma-0 is margin: 0;.
.ma-1 is margin: 4px;

Default

Medium viewport

Small viewport

Mixins

responsive-view($child, $left, $right)

File: assets/mixins/_chore.styl

Make inline frames such as YouTube responsive.

.iframe
  responsive-view('.iframe-container', 16, 9)

Compile to:

.iframe {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

placeholder-color($color)

File: assets/mixins/_chore.styl

Placeholder color in the input tag.

safe-area($type)

File: assets/mixins/_chore.styl

Safe area settings for iPhone X, etc.

.safe-area
  safe-area(top)

Compile to:

.safe-area {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

vertical-rythum($level, $fz, $lh)

File: assets/mixins/_chore.styl

Configuration using vertical rhythm.

.vr
  line-height: vertical-rhythm(1, 16, 24)

Compile to:

.vr {
  line-height: 1.5;
}

line-height-crop($lh)

File: assets/mixins/_chore.styl

Cut off the top and bottom margins of the line-height.

.foo
  font-size: 20px
  line-height: 1.5
  line-height-crop(1.5)

.bar
  font-size: 20px
  line-height: 30px
  line-height-crop(30 / 20)

Compile to:

.foo {
  font-size: 20px;
  line-height: 1.5;
}
.foo::before {
  display: block;
  content: '';
  width: 0;
  height: 0;
  margin-top: calc((1 - 1.5) * 0.5em);
}
.foo::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  margin-bottom: calc((1 - 1.5) * 0.5em);
}

.bar {
  font-size: 20px;
  line-height: 30px;
}
.bar::before {
  display: block;
  content: '';
  width: 0;
  height: 0;
  margin-top: calc((1 - 1.5) * 0.5em);
}
.bar::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  margin-bottom: calc((1 - 1.5) * 0.5em);
}

min-max-large-size($min, $max), min-max-medium-size($min, $max), min-max-small-size($min, $max)

Range of size value (font-size, padding, margin etc.)
* Using clamp that not available for IE

.size
  font-size: min-max-large-size(12px, 20px)

Compile to:

.size {
  font-size: clamp(14px, 0.875rem + ((1vw - 7.56px) * 1.2821), 18px);
}

File: assets/mixins/_size.styl

Others

• Images operation