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()

Хак для включения аппаратного ускорения при анимациях.