Типы
Привет, мир!1
Привет, мир!1
Тип для выравнивания по базовой линии блоков, для которых не оно не работает (например, блоков с overflow: hidden).
Базовый тип задаёт инлайн-блочное поведение, да само выравнивание:
kind: baseliner
Контент, который хочется выравнивать, нужно обернуть в элемент -content:
kind: baseliner (-content '&-content')
По умолчанию у бейзлайнера создаётся элемент -helper на :before, если необходимо, это можно поменять:
kind: baseliner (-helper '&-helper') (-content '&-content')
kind: block
Стандартный тип для любого обычного блока. Делает элемент блочным, кроме того добавляет ему явное позиционирование.
По умолчанию kind-block имеет относительное позиционирование. В редких случаях может возникнуть необходимость в статичном позиционировании, и в этом случае важно его задавать явно, для этого есть модификатор static:
kind: block static
По умолчанию kind-block имеет display: block, в случае, если этот блок нужен в инлайновом контексте, необходимо применять модификатор inline:
kind: block inline
Это даст display: inline-block и вертикальное выравнивание по умолчанию
По умолчанию инлайновые блоки имеют vertical-align: top, если хочется это поменять, можно передать соответствующий параметр:
kind: block inline baseline
kind: block inline middle
kind: block inline bottom
(дописать что-нибудь о том, что кнопка наследует pill)
kind: button
Стандартный тип для кнопок. Задаёт все необходимые любой кнопке стили, в том числе делает и соответствующий ресет.
Если же применяется к блоку, гарантированно никогда не могущим быть тегом <button> в HTML, можно применить параметр no-reset, который даст всё, полагающееся кнопке, но не будет применять к блоку ресет.
kind: button no-reset
По умолчанию кнопки имеют vertical-align: baseline, если хочется это поменять, можно передать соответствующий параметр:
kind: button middle
kind: button top
kind: button bottom
kind: centering
Сложный тип для центрирования чего-либо внутри чего-то другого.
Враппер, задаваемый kind: centering задаёт контект центрирования.
Чтобы указать какие элементы будут подвергаться центрированию, нужно или использовать параметр-элемент -item, или вызвать соответствущий элемент вручную:
.menu
kind: centering (-item '&-item')
или
.menu-item
kind: centering-item
Для центрирования используется метод на инлайн-блоках, поэтому для этого нужен какой-то дополнительный элемент. По умолчанию это псевдоэлемент :before, но если это потребуется изменить, можно применить соответствующий параметр-элемент -helper:
.menu
kind: centering (-helper '&-helper')
или же вызвать его на нужном элементе вручную:
.menu-helper
kind: centering-helper
kind: clear
Этот тип используется в качестве клеарфикса. Используется метод микроклеарфикса, поэтому по умолчанию элемент клирится и сверху, и снизу.
По умолчанию блок клирится псевдоэлементами, если же необходимо сделать это обычным элементом (или применить на сам блок), можно воспользоваться параметрами-элементами -before и -after:
kind: clear (-after '& > .clearfix')
Если нужно заклирить только с одной стороны, можно использовать параметры after или before:
kind: clear (-before '')
kind: clear (-after '')
kind: content 1em
Сложный тип для «умного» контента. Принимает от одного до четырёх численных параметров (как padding или margin), после чего даёт элементу соответствующие отступы, но так, что верхний и нижний отступ будут «сквозными», то есть они могут съедаться соответствующими маджинами расположенных около них элементов.
По умолчанию сквозные отступы создаются псевдоэлементами (а в IE они не применяются, становясь обычными паддингами), если же необходимо использовать для этого обычные элементы, можно использовать соответствующие параметры-элементы -before и -after:
kind: content 1em (-after '&-helper')
Если не нужно применять сквозные отступы, можно обнулить соответствующие стороны с помощью пустых селекторов для соответствующих параметров -before или -after, в этом случае соответствующая сторона получит обычный паддинг.
kind: content 1em (-before '')
kind: disabled
Тип для «отключения» тех или иных блоков. Делает блок полупрозрачным и убирает курсор и все события по ховеру с блока.
По умолчанию блок становится полупрозрачным на 50%, если нужно это изменить, достаточно передать соответствующее значение opacity параметром:
kind: disabled 0.6
Этот тип по умолчанию можно применять и для родителей: в этом случае опасити не будет применяться для детей.
Если нужно это отлючить или же возникнет желание поменять селектор, с помощью которого это делается, нужно переопределить элемент -nested:
kind: disabled (-nested '')
По умолчанию на отключенный элемент ставится pointer-events: none, чтобы это отключить нужно задать параметр with-events:
kind: disabled with-events
Тип для добавления многоточия для длинного однострочного текста.
kind: ellipsis
Если нужно заодно сделать элемент инлайновым — можно добавить модификатор _inline:
kind: ellipsis _inline
kind: fill
Тип для расположения элемента поверх другого элемента, используя абсолютное позиционирование.
Этот тип может принимать до четырёх численных параметров (как padding или margin), задающих соответствующие отступы по сторонам (свойства top, right, bottom и left):
kind: fill 10px 20px 30px 40px
Аналогично свойствам вроде padding можно использовать шорткаты для задания одинаковых значений разным сторонам:
kind: fill 10px 20px
Естественно, допустимо использовать и отрицательные значения:
kind: fill -1px
Опционально можно передать параметром цвет или строку. В случае цвета это значение станет цветом фона элемента:
kind fill red
Cтрока обрамится в url() и получит некоторые дефолтные стили фона:
kind fill 'pattern.png'
(нужно сделать вариант с сущностью url(), иначе оно не будет работать там, где нужен резолвер)
Цвет и изображение можно совмещать:
kind fill -1px rgba(0,0,0, 0.5) 'pattern.png'
Изначально переданное изображение не будет повторяться (no-repeat), для изменения этого можно передать параметром соответствующее значение повторения фона:
kind fill 'pattern.png' repeat
kind fill 'pattern.png' repeat-x
kind fill 'pattern.png' repeat-y
«Группа» это набор разных элементов, соединённых в один элемент. Обычно такие элементы располагаются вплотную друг к другу, например, кнопка и тексовое поле ввода.
Базовый тип group почти ничего не задаёт кроме запрета переноса для внутренних элементов:
kind: group
Элементы группы можно разделить на три типа: абстрактные group-item, а также конкретные group-start, group-middle и group-end.
Абстрактные элементы group-item, по сути, являются шорткатами для конкретных, записанных через CSS-селекторы :first-child и :last-child. Их имеет смысл применять если список элементов однородный и унифицированный:
kind: group-item
Если же визуальный порядок элементов будет отличаться от их порядка в DOM, лучше применять конкретные обозначения начала, середины и конца группы:
kind: group-start
kind: group-middle
kind: group-end
Элементы группы можно настроить: по умолчанию таким элементам на стыках сбрасываются скругления и элементы сдвигаются внахлёст на один пиксель. Сброс скруглений можно отключить параметром no-radius, а нахлёст — no-margin.
Кроме того, если визуальное отображение элемента находится внутри айтема, можно переопределить селектор, на котором будут сбрасываться стили на стыках, в этом же селекторе можно сбрасывать стили на нескольких блоках, скажем, на псевдоэлементах:
kind: group-item '& > .complex-button-inner, & > .complex-button-inner:before'
kind: guide
Этот тип расширяет тип fill, делая блок некликабельным. Для определения элементов, которые будут кликабельны, нужно задать их параметром-элементом:
kind: guide (-item '&-item')
По умолчанию необходимая функциональность достигается с помощью применения visibility: hidden на враппере и visibility: visible на элементах. Если необходимо использовать этот тип внутри другого элемента, использующего visibility, или если нужно использовать визуальное отображение враппера, можно использовать параметр visible — в этом случае изменения кликабельности будет достигаться с помощью свойства pointer-events.
kind: guide visible
kind: hidden
Этот тип используется для гарантированного скрытия элемента через display: none !important;.
Если по каким-то причинам нужно скрыть блок только «визуально», но так, чтобы он был виден в структуре документа, например, для устройств-помощников типа Voice Over, можно использовать параметр visually:
kind: hidden visually
kind: icon
Этот тип используется для иконок и подобных сущностей. Он наследует стили от блочного типа с инлайновым параметром, а также задаёт небольшой сдвиг вверх для компенсации визаульного расположения иконок бок о бок с текстом.
Если нужно задать иконке явный размер, можно передать именованный параметр size, где первое число — ширина иконки, второе — высота.
kind: icon (size 16px 18px)
Если передать одно число, оно будет использованно и для ширины, и для высоты.
kind: icon (size 16px)
(нужно сделать вариант с сущностью url(), иначе оно не будет работать там, где нужен резолвер)
Опционально можно передать параметром строку. В этом случае строка будет использованна как url() для изображения.
kind: icon 'send.png'
По умолчанию изображение не повторяется и выравнивается по центу иконки.
По умолчанию, если не были переданны размеры иконки, но был передан адрес изображения, иконка получит размеры по размерам изображения, если оно будет найдено в файловой системе. Для отключения этого поведения можно использовать параметр sizeless:
kind: icon 'send.png' sizeless
По умолчанию иконка наследует выравнивание от блочного типа с инлайновым параметром, если хочется это поменять, можно передать соответствующий параметр:
kind: icon baseline
kind: icon middle
kind: icon bottom
Иногда может возникнуть необходимость заменить изображение, заданное <img src="…"/> на другое, в этом случае, помимо размеров, можно передать и параметр replace-image, с помощью которого оригинальное изображение скроется, а размеры нового изображения будут заданы паддингами.
kind: input
Стандартный тип для инпутов. Задаёт минимально необходимые инпутам стили, в том числе делает и соответствующий ресет.
По умолчанию ширина инпута равна примерно 400 пикселям, плюс применяется максимальная ширина в 100%. Если необходимо задать иную явную ширину инпуту, можно передать любое числовое значение параметром — оно задаст ширину.
kind: input 10em
Если же применяется к блоку, гарантированно никогда не могущим быть тегами <input> или <textarea> в HTML, можно применить параметр no-reset, который даст всё, полагающееся игпуту, но не будет применять к блоку ресет.
kind: input no-reset
По умолчанию инпуты имеют vertical-align: baseline, если хочется это поменять, можно передать соответствующий параметр:
kind: input middle
kind: input top
kind: input bottom
kind: link
Это стандартный тип для ссылок. По умолчанию такие ссылки подчёркиваются и окрашены в синий, а по наведению становятся красными. Всё это можно очень гибко настроить.
Чтобы убрать подчёркивание у ссылки, достаточно передать пустой модификатор _underline:
kind: link (_underline '')
Если нужно подчёркивать ссылку не всё время, а только по наведению, достаточно добавить селектор к модификатору:
kind: link (_underline '&:hover')
По умолчанию ссылка будет становиться красной по ховеру, чтобы убрать это поведение, достаточно передать пустой селектор соответствующему модификатору:
kind: link (_hover '')
Чтобы сменить цвет ссылки достаточно передать цвет параметром:
kind: link #22C
Это сменит только цвет ненаведённой ссылки, так что если захочется сменить цвет ссылки по ховеру, нужно передать соответствующий цвет в соответствующий модификатор (не забыв указать селектор):
kind: link #22C (_hover '&:hover' #D00)
Чтобы сделать псевдо-ссылку, достаточно применить модификатор _pseudo:
kind: link _pseudo
Часто может возникнуть необходимость применить подчёркивание только ко внутреннему элементу, чтобы оставить без подчёркивания какие-либо внешние символы или не делать подчёркивание между текстом ссылки и иконкой. Для этого достаточно применить соответствующие параметры подчёркивания или псевдоссылки для соответствующего элемента:
kind: link (_underline '&-inner')
kind: link (_pseudo '&-inner')
kind: modal-wrap
Тип для создания модального элемента (поверх всех элементов на странице), отвечает за позиционирование.
Расширяет типы guide и centering
Если указан параметр no-elements, то клеарфиксы не будут сгенерированы
kind: modal-wrap no-elements
kind: modal
Тип для создания содержимого модального элемента. Заполняет весь размер обертки kind: modal-wrap.
Расширяет типы guide-item и centering-item
kind: modal-overlay
Тип для создания на странице панаржи, закрывающие все элементы.
Расширяет типы guide-item и fill
Тип схлопывания полезен если нужно от какого-то блока с контентом «отъедать» ширину другими блоками, расположенными слева/справа.
По сути это всего лишь враппер над поведением флоатов, включающий в себя клерфикс и дополнительные правки для инлайнового поведения.
Основным типом — shrink — отмечается блок, который нужно схлопывать:
kind: shrink
Если для текста внутри этого блока нужно отображать многоточие при обрезании, достаточно добавить тип ellipsis:
kind: shrink, ellipsis
Если схлопывающийся блок хочется сделать инлайновым, надо добавить параметр inline:
kind: shrink inline
Если вы делаете блок инлайновым или вам просто нужно его заклирить, нужно обернуть этот блок в shrink-wrap:
kind: shrink-wrap
или
kind: shrink-wrap inline
Теперь нужно присвоить подтипы для блоков, которые, собственно, будут отъедать место от основного блока. Это подтипы shrink-left и shrink-right.
Важный момент: в DOM эти блоки должны идти до блока с kind: shrink, иначе магия не сработает.
kind: shrink-left
kind: shrink-right