0.0.3 • Published 6 years ago
atomic-reset v0.0.3
Для работы вы должны установить Stylus в свой проект
Например
$ npm install --save-dev gulp-stylus
И подключить его следуя инструкциям к gulp-stylus
Дальше Вы устанавливаете atomic-reset:
$ npm install atomic-reset --save-dev
В любом .styl файле своего проекта вы можете подключить atomic-reset и миксины будут работать:
@import './node_modules/atomic-reset'
Миксины
r-offset()
Сбрасывает наружние и внешние отступы
Параметры: -
p
r-offset()
p {
margin: 0;
padding: 0;
}
r-clearfix()
Сбрасывает псевдоэлементы before
и after
Параметры: -
p
r-clearfix()
p:before,
p:after {
content: '';
content: none;
display: none;
}
r-bs()
Сбрасывает стиль box-sizing
Параметры:
- @param $r-bs:
- border-box: В размеры блока входят padding и border
- content-box: В размеры блока не входят margin, padding и border
- padding-box: В размеры блока входит только padding
- inherit: Наследует значение родителя
div
r-bs()
div {
box-sizing: border-box;
}
r-outline()
Сбрасывает стиль outline
Параметры: -
button
r-outline()
button {
outline: none;
}
r-b()
Параметры:
- @param $r-bs:
- border-box: В размеры блока входят padding и border
- content-box: В размеры блока не входят margin, padding и border
- padding-box: В размеры блока входит только padding
- inherit: Наследует значение родителя.
span
r-b()
span {
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
}
... to be continued ...