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
classes | property |
---|---|
.ma-{n} |
margin |
.mt-{n} |
margin-top |
.mb-{n} |
margin-bottom |
.ml-{n} |
margin-left |
.mr-{n} |
margin-right |
.pa-{n} |
padding |
.pt-{n} |
padding-top |
.pb-{n} |
padding-bottom |
.pl-{n} |
padding-left |
.pr-{n} |
padding-right |
Medium viewport
classes | property |
---|---|
.m-ma-{n} |
margin |
.m-mt-{n} |
margin-top |
.m-mb-{n} |
margin-bottom |
.m-ml-{n} |
margin-left |
.m-mr-{n} |
margin-right |
.m-mr-{n} |
margin-right |
.m-pa-{n} |
padding |
.m-pt-{n} |
padding-top |
.m-pb-{n} |
padding-bottom |
.m-pl-{n} |
padding-left |
.m-pr-{n} |
padding-right |
Small viewport
classes | property |
---|---|
.s-ma-{n} |
margin |
.s-mt-{n} |
margin-top |
.s-mb-{n} |
margin-bottom |
.s-ml-{n} |
margin-left |
.s-mr-{n} |
margin-right |
.s-mr-{n} |
margin-right |
.s-pa-{n} |
padding |
.s-pt-{n} |
padding-top |
.s-pb-{n} |
padding-bottom |
.s-pl-{n} |
padding-left |
.s-pr-{n} |
padding-right |
Mixins
responsive-view($child, $left, $right)
File: assets/mixins/_chore.styl
Make inline frames such as YouTube responsive.
params | type | description |
---|---|---|
$child |
string | class name or id |
$left |
number | ratio |
$right |
number | ratio |
.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.
params | type | description |
---|---|---|
$color |
hex | placeholder color |
safe-area($type)
File: assets/mixins/_chore.styl
Safe area settings for iPhone X, etc.
params | type | description |
---|---|---|
$type |
top or bottom or left or right
|
padding type |
.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.
params | type | description |
---|---|---|
$level |
number | multiple |
$fz |
number | font size (px) |
$lh |
number | base of the line (px) |
.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.
params | type | description |
---|---|---|
$lh |
number |
line-height value |
.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
params | type | description |
---|---|---|
$min |
string |
min size |
$max |
string |
max size |
.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