Stylus Utilities
Набор готовых к использованию миксинов для ускорения и упрощения процесса вёрстки.
Документация
container(width)
Задаёт блоку определённую ширину и центрирует его по горизонтали.
.container
container(960px)
center-both(width)
Задаёт блоку указанную ширину и центрирует его по вертикали и горизонтали.
.centered
center-both(300px)
clearfix()
Сбрасывает обтекание у элемента, в который вложены плавающие блоки.
.parent
clearfix()
.child
float left
justify()
Применяется для выравнивания нескольких потомков по ширине родителя.
justify-child(font-size = 16px)
Применяется к потомкам блока, к которому применён justify
. Если значение размера шрифта не задано, то размер шрифта по умолчанию равен 16 пикселям.
.justified
justify()
li
.justify-child(14px)
placeholder-color(color)
Задаёт цвет плейсхолдера.
input[type="text"]
placeholder-color(#ccc)
opacity(level)
Задаёт степень непрозрачности для нормальных браузеров и для IE8.
.block
opacity(0.5)
rems(value)
Задаёт размер шрифта в rem
с фоллбэком в px
.
p
rems(18px)
bgi(path)
Задаёт блоку фоновую картинку при условии, что размер блока должен совпадать с размерами картинки.
Важно: следует в начале файла с миксинами прописать пути к директории с картинками: абсолютный путь в переменную path-to-images
, путь относительно данного файла с миксинами в переменную path-to-images-from-this
.
.btn
bgi("btn.png")
clearlist()
Сброс стандартных стилей у списков. Полезно при вёрстке различных меню.
text-overflow()
Обрезает лишний текст, оставляя многоточие.
hidetext()
Делает текст в блоке невидимым.
noselection()
Запрещает выделение текста.
gpu()
Хак для включения аппаратного ускорения при анимациях.