<select>
На обычной кнопке
Табы
Текст
Основной текст
Заголовки
Юзерпик
Скины
Важно: всё это дело находится в активной разработке, всё может поменяться, поломаться, исправиться.
Переменные
В островных скинах используется ряд глобальных переменных, описывающих различные общие штуки. Этот список будет постепенно пополняться, по мере рефакторинга скинов.
Размеры
Отступы
Все отступы и величины лучше задавать используя эти переменные, либо используя вместе с ними множители. Все переменные изначально чётные, поэтому можно, где нужно, использовать половину той или иной переменной.
-
$islands_xs— самый маленький возможный отступ, примерно равен шести пикселям. -
$islands_s— просто маленький отступ, примерно равен десяти пикселям. -
$islands_m— средний отступ, примерно равен шестнадцати пикселям. -
$islands_l— большой отступ, примерно равен двадцати пикселям.
Если нужно задать отсупы для какого-либо блока с текстом, правильнее всего использовать вертикальные отступы на один шаг меньше, чем горизонтальные: padding: $islands_s $islands_m — такие блоки будут лучше смотреться.
Размеры шрифтов
Пока есть два стандартных размера шрифта, вынесеных в переменные. Остальные размеры, возможно, также когда-нибудь будут задаваться в переменных, но пока можно использовать соответствующие скины.
-
$islands_text_m— стандартный размер текста, примерно равен пятнадцати пикселям. -
$islands_text_s— маленький размер текста, примерно равен тринадцати пикселям.
Цвета
Цвета для фонов
-
$islands_bg_page— фон страницы, чуть серее, чем просто белый, для контрастности чистых белых блоков. -
$islands_bg_main— Обычный белый фон.
Цвета для текста
-
$islands_color_text— стандартный цвет для текста. -
$islands_color_text_misc— второстепенный цвет для текста.
Цвета для состояний
-
$islands_color_focus— Жёлтый цвет для состояний фокуса. -
$islands_color_error— Красный цвет для ошибок.
Цвета для Теней
$islands_shadow_focus— Тень для состояний фокуса, использует соответствующий цвет.$islands_shadow_error— Тень для состояния ошибки, использует соответствующий цвет.
Стрелка
Фирменная стрелка Яндекса, по умолчанию может использоваться для названия сервиса:
skin: islands-arrow
Фотки
Если необходимо сделать стрелку-ссылку, это легко сделать, используя скин ссылки:
Если же нужна поисковая стрелка, нужно использовать параметр search для правильных отступов (+ нужно поправить выравнивание поля внутри):
skin: islands-arrow search
Такая стрелка не тянется, так как там внутри просто обычные инлайн-блоки, ну а если надо сделать её тянущейся, нужно использовать kind: shrink с дополнительным враппером:
По умолчанию хвостик делается с помощью псевдоэлемента, если же нужно его отделить, можно обнулить соответствующий параметр на «теле» и вызвать tail на хвостике (и в этом случае хвостик будет отображаться и в IE).
skin: islands-arrow (__helper '')
skin: islands-arrow tail
Либо можно использовать специальный параметр-элемент, создав хвостик из вызова скина:
skin: islands-arrow red 110px (__helper '& > .arrow-tail')
Кроме того, можно настраивать как цвет, так и высоту стрелки, передавая параметры соответствующих типов:
Компания
Кнопки
Обычная кнопка:
skin: islands-button
Параметры кнопки
На данный момент скин кнопки переусложнён, в дальнейшем он будет упрощён, но основы API останутся теми же.
Почти все параметры можно комбинировать, как обычно, порядок параметров в коде не важен.
Размеры
У кнопки есть два основных размера: стандартный и small, который применяется довольно просто:
skin: islands-button small
Кроме того, есть пара «служебных» размеров: адаптивный — adaptive, и отсутствие заданных размеров — sizeless:
skin: islands-button adaptive
skin: islands-button sizeless
Адаптивный размер используется для чекбоксов и радиокнопок — он зависит от размера шрифта. Безразмерный параметр можно использовать, если необходимо сверстать кнопку с определёнными размерами, дабы не возиться с переопределениями.
«Летающая» кнопка
Если кнопка находится на каком-то абстрактном фоне, можно сделать её летающий при помоши параметра fly:
skin: islands-button fly
При нажатии такая кнопка, в отличие от обычной, «приземляется», а не вдавливается.
«Отключённая кнопка»
Делается добавлением стандартного класса .is-disabled:
Кнопка на одном элементе
Как видно из примеров выше, у кнопки должен быть внутренний элемент, например, .button-content — это нужно для правильной вёрстки «нажимания» кнопки. Но есть и альтернативный вариан: использование параметра one-element.
skin: islands-button one-element
Такую кнопку рекомендуется делать только если нет возможности в коде добавить дополнительный элемент, так как к ней гораздо сложнее добавлять какие-то сложные внутренности (даже добавление простой иконки может быть переусложнено).
Отключение активности
По умолчанию кнопка «зажимается» по маусдауну. Но если нужно убрать подобное поведение, то можно использовать параметр no-active (это используется, например, для чекбоксов):
skin: islands-button no-active
Если же после отключения активного состояния захочется его использовать вручную — при навешивании какого-либо класса, есть скин-модификатор skin-islands-button_pressed:
skin: islands-button_pressed
Кнопка-действие
Это, по сути, второй скин кнопки, в коде сейчас обе кнопки наследутся от одного общего миксина (но это не важно).
skin: islands-action-button
Эта кнопка как бы говорит: «Нажми меня!»
Конечно же, можно использовать всё те же модификаторы, что есть и у обычной кнопки:
Комбинирование модификаций
Ещё раз: не нужно в html выплёвывать все модификации. Если нужна маленькая летающая кнопка, то, конечно, можно наплодить классов вида small-fly-action-button, но, на самом деле, стоит к каждому элементу интерфейса подходить индивидуальнее, и для подобной кнопки прописать всё соответствующим образом в CSS:
Кнопка добавления файла
Для кнопки добавления файла нужно использовать kind-file-input с любой нужной кнопкой:
Тут видно, что мы задаём дополнительный отступ в 6px на родителе — для того, чтобы у файлового инпута не обрезалось состояние фокуса. Побочный эффект: кликабельная область чуть увеличивается, но это не страшно.
Внедряемая кнопка добавления файла
И второй вариант, для него нужно больше блоков, зато его можно применить и внутри уже имеющихся кнопок.
Тут нужно заметить, что требуются дополнительные стили для фокуса — возможно в будущем это как-то упростится, но пока только так.
Плюсом этого решения, помимо внедряемости — отсутствие overflow: hidden на применяемом контексте. В случае с кнопкой это позволяет иметь и фокус, и правильную кликабельную область.
Зажатая кнопка
Иногда может возникнуть необходимость сделать «нажатое» состояние кнопки, например, если она выступает в качестве импровизированного (или даже настоящего) чекбокса.
Для этого есть специальный подскин — skin-islands-button_checked, который можно применить там, где хочется сделать постоянное вжатое состояние:
skin: islands-button_checked
Имея такой отдельный скин можно его использовать для того, чтобы сделать кнопку зажимабельной через js:
И работать оно будет для любых типов кнопок:
Чуть сложнее (но всё ещё достаточно просто) сделать с помощью этого скина зажатую кнопку только на CSS:
И то же самое, только с радиобатонами вместо чекбоксов, и используя другой тип кнопок:
Видно, что для CSS-only варианта приходится использовать чуть более сложную html-структуру, но зато всё это дело получается очень гибким и это хороший пример того, как можно сверстать один и тот же блок на разной HTML-структуре и логике, но используя один скин.
Чекбоксы
skin: islands-checkbox
И чекбоксы, и радиокнопки по умолчанию масштабируются под размер шрифта.
Если же надо сделать чекбокс определённого (не зависимого от размера шрифта) размера, вне контекста, можно сделать так:
Нужно отметить, что из-за того, что имя внутреннего элемента отличается от родителя (small-radio и radio-icon) нужно при вызове явно прокидывать имя внутреннего элемента, не опираясь на дефолт.
disabled
skin: islands-disabled
Используется для визуального отключения какого-либо блока.
По умолчанию добавляет pointer-events: none, так что отпадает необходимость сбрасывать стили состояний. Если зачем-то нужно ловить ивенты на таком элементе, нужно использовать параметр with-events.
Домик
Простой домик, крыша которого автоматически подстраивается под ширину самого домика.
skin: islands-domik
По умолчанию домик блочный, если нужен инлайновый контекст, можно использовать параметр inline:
skin: islands-domik inline
У домика есть два обязательных «элемента»: крыша и контент:
skin: islands-domik (__roof '&-roof') (__content '&-content')
ДомикБолее широкий домик, с большой крышей
Пока что домик имеет одну тему, в будущем, возможно, появится возможность настройки как внешнего вида, так и размеров.
Группы
Некоторые скины, по сути, чуть настроенные алиасы к типам, группы — один из них.
Так как в островных стилях кнопки используется псевдоэлемент, нужно прокидывать соответствующие стили и на него, поэтому для групп, состоящих из кнопок и инпутов нужно использовать не kind: group, а skin: group.
У группы должен быть враппер:
skin: islands-group
Если элементы группы лежат на одном уровне, можно использовать CSS3-селекторы и применить group-item:
skin: islands-group-item
В случае если кнопка или другой блок, которому нужно задать соответствующий скин, может лежать внутри, можно воспользоваться специальным скином:
skin: islands-nested-group-item '.toggler-view'
Параметром к нему передаётся селектор элемента, к которому нужно применять соответствующий скин, например, если реализовать радиогруппу на инпутах:
Оно же, но с чекбоксами и на псевдокнопках:
В случаях когда элементы группы лежат в контейнере в неверном порядке (скажем, при использовании float и в некоторых иных случаях), можно задать соответствующим элементам групп нужные скины раздельно:
skin: islands-group-start
skin: islands-group-middle
skin: islands-group-end
Вертикальные группы
Кроме горизонтальных групп можно также применять вертикальные группы, для этого есть параметр vertical:
skin: islands-group-item vertical
skin: islands-group-start vertical
skin: islands-group-middle vertical
skin: islands-group-end vertical
Комбинируя соответствующие классы, можно добиться составных блоков почти любых форм:
Иконки
Крестик удаления/закрытия
Используется для закрытия попапов, очищения текстовых полей ввода и т.д.
Любую иконку можно сделать «активной» — добавить курсор и ховер с опасити, используя параметр with-hover
Нотификация
Иконка-баджик нотификации, с циферками.
7 42 99+
Стрелочка
skin: islands-icon_arrow
Иконка для стрелочки. Принимает большое число опциональных параметров:
- Размер: либо одно число, либо именованный параметр
size; по умолчанию —6px. - Толщина: именованный праметр
width; по умолчанию —2px. - Цвет: по умолчанию наследует цвет текста.
- Направление: одно из ключевых слов
top,right,bottom,left; по умолчанию —bottom. - Модификатор направления: можно задать дополнительные направления параметром-элементом
-direction, например(-direction '&:hover' right). - Стандартный транзишн: чтобы включить транзишн для смены направления достаточно использовать параметр
with-transition. - Смещение иконки по X и Y: именованные параметры
offset-xиoffset-y, например(offset-y -6px)
Дропдаун
Частный случай стрелочки, используется в дропдаунах.
Текст , Дропдаун
Галочка
Иконка с галочкой — для чекбоксов и аналогичных мест.
Тест на границы:
Инпуты
Простейший инпут можно сделать на одном элементе:
skin: islands-input
Он может быть маленьким — с параметром small
skin: islands-input small
Текстария — визуально тот же инпут, так что можно использовать те же скины и классы:
Сложные инпуты
Если же нужно что-то сложнее (нужно вставлять сущности внутрь, типа крестика и подобных штук) лучше использовать «составной» инпут.
Обычный скин инпута, на самом деле, составной: это объединение двух подскинов — skin-islands-input-box и skin-islands-input-view. Ну и ещё есть один подскин — для фокуса, чтобы можно было его перенести на нужный блок — skin-islands-input_focus.
skin: islands-input-box
skin: islands-input-view no-focus
skin: islands-input-focus
В минимальном обрамлении он выглядит аналогично обычному инпуту, но html-структура у него должна быть посложнее:
Но если нужно будет добавить любые контролы внутрь, это становится очень легко сделать:
Конечно же, и у сложного инпута есть параметр small:
Такой инпут легко растягивать на всю ширину:
Группировка
Для такого инпута хорошо работает группировка с кнопками:
Имя сервиса внутри инпута
Специально для использования внутри инпута есть скин для «меток», обычно они используются для имени сервиса внутри инпута:
skin: islands-input-label
Плейсхолдеры
Для сложного инпута очень просто добавить кастомный плейсхолдер:
skin: islands-input-placeholder (__inner '&-inner')
В коде сложного инпута он должен идти строго в самом начале контента.
Для маленького плейсхолдера нужно передать дополнительный параметр small:
skin: islands-input-placeholder small (__inner '&-inner')
Довольно просто сделать плесхолдер-подсказку, если использовать дополнительный элемент -ghost, в который дублировать значение инпута — это позволит расположить плейсхолдер ровно после вбитого текста:
skin: islands-input-placeholder (__inner '&-inner') (__ghost '&-ghost')
Его же можно использовать для подсказки строчного «автокомплита» (в примере работает только со словом «Абракадабра», не исчезает по блюру и т.д.):
И, конечно, всё это будет работать и с контролами по краям, а длинные тексты будут обрезаться в многоточие:
Автоувеличивающийся инпут
Со сложным инпутом становится просто сделать автоувеличивающийся по ширине инпут:
Автоувеличивающаяся текстария
Аналогично, если использовать сложный инпут + текстарию, то довольно просто сделать автоувеличивающуюся по контенту текстарию с дополнительными внутренними элементами вроде иконки очистки:
Инпут с ошибкой
Если нужно отобразить состояние неверно заполненного инпута, можно воспользоваться скином input_error
skin: islands-input_error
Тут что-то не так заполнено!
Центрированный инпут
Чтобы центрировать контент инпута достаточно добавить параметр centered:
skin: islands-input centered
Для сложных инпутов с плейсхолдерами пока простого пути нет, нужно просто прокинуть text-align: center куда нужно. Когда будет полноценный отдельный скин для сложных инпутов, станет попроще.
Острова
Стандартный блок, отличается белым фоном и тонкой тенюшкой.
skin: islands-isle
Летающий блок создан для модальных окон, выпадающих списков и прочих элементов верхнего слоя, в остальных случаях следует обходиться обычным островом.
skin: islands-isle fly
Для отступов контента можно использовать специальный параметр:
skin: islands-isle (__content '&-content')
Hello, there!
I'm a normal island.
Этот параметр также можно настроить, задав маленький отступы параметром small:
skin: islands-isle (__content '&' small)
And I'm a small one!
Также в этом примере можно увидеть, что подскин контента можно применять прямо к самому блоку.
Ссылки
skin: islands-link
Помимо обычной ссылки из коробки идут ещё два скина: для внешней ссылки и псевдоссылки:
skin: islands-outer-link
skin: islands-pseudo-link
По умолчанию ссылки (не псевдо) не подчёркнуты, для подчёркивания нужно передавать параметр underline:
skin: islands-link underline
Примеры:
.link skin: islands-link underline
.outer-link skin: islands-outer-link underline
.pseudo-link skin: islands-pseudo-link
Параметры ссылок
При определении ссылки опциональным параметром можно задать цвет:
skin: islands-link #070
По умолчанию ссылки имеют красный ховер, если ссылка должна быть без ховера, можно использовать параметр no-hover:
skin: islands-link no-hover
Кроме того, можно прямо в скине задать цвет для ховера, но только в том случае, если уже был передан параметр для цвета ссылки — второй переданный цвет станет цветом ховера:
skin: islands-link #070 #D00
Иногда может возникнуть желание перенести часть внешнего вида ссылки на внутренние элементы, в этом случае можно использовать параметр nested, в этом случае этот блок не получит ховер, цвет и курсор. Кроме того, для некоторых браузеров можно починить некликабельные промежутки между внутренними элементами, для этого нужно использовать параметр fix-gaps.
.complex-link skin: islands-link #000 fix-gaps .link-inner skin: islands-link nested underline
Меню
«Меню» — вертикальный список с различными пунктами.
skin: islands-menu
Сам скин меню по умолчанию не имеет стилей и является просто враппером для внутренних элементов, которые будут вызваны по умолчанию.
Опционально можно использовать параметр padded, это добавит соответствующие отступы сверху и снизу:
skin: islands-menu padded
Дополнительным параметром можно передать размер, пока доступно два варианта: по-умолчанию и маленький — small:
skin: islands-menu padded small
Пункт меню
Основным действующим лицом меню является его пункт: — menu-item, его можно использовать и без враппера — это нормально:
skin: islands-menu-item
По умолчанию такой пункт обладает некоторой раскладкой и подсвечивается по наведению:
И пример маленьких пунктов меню и без враппера с паддингами:
Если нужно убрать ховер с пункта меню, можно использовать параметр no-hover:
skin: islands-menu-item no-hover
По умолчанию ховер применяется на &:hover, если нужно поменять селектор, достаточно переопределить его для соответствующего элемента:
skin: islands-menu-item (_hover '&_hover_yes')
Группы пунктов меню
Пунты меню можно разделять по группам, для этого используется элемент menu-group:
skin: islands-menu-group
Две подряд идущих друг за другом группы будут разделены полоской, если есть параметр padded, то и отступами.
Разделитель
Для создания разделителя между пунктами меню можно использовать не только группы, но и отдельный элемент-разделитель.
skin: islands-menu-separator
Аналогично остальным элементам меню, разделитель может принимать как параметр padded, так и small
Выбранный пункт меню
Пункт меню может быть «выбранным», в этом случае внутри него появляется галочка:
skin: islands-menu-item_checked
Обрезание в многоточие
Если внутри пункта меню может быть много контента, нужно использовать параметр ellipsis. Он не стоит по умолчанию, так как включает overflow: hidden, что не всегда может быть нужно.
skin: islands-menu-item ellipsis
Страница
Один из ключевых скинов, задающих базовые стили для страницы.
Состоит из skin-islands-page() и skin-islands-page-body(), состоящих из базовых стилей для html и body соответственно.
Их можно применить и вручную:
html
skin: islands-page
body
skin: islands-page-body
Однако, есть «шорткат», позволяющий это сделать проще: нужно перед подключением островных скинов включить соответствующую настройку:
$init_islands_root = true
Это выполнит автоматическую инициацию вышеупомянутых скинов.
Важный момент: если не инициировать таким образом скины, то мы не можем гарантировать, что для страницы выставлены нужные шрифты, поэтому на каждом используемом блоке, где шрифт важен (например, в кнопках), шрифт будет отресечен.
Таким образом, если вы пишете проект на Стилобате с ноля — нужно инициировать базовые стили, если же вы дописываете стили в уже существующий проект, инициация может что-то сломать, так что без неё блоки будут независимее, потому нужно опустить инициирование и задать явное значение для rem.
Попапы
Хотя скин попапа — по сути скин летающего острова, есть соответствующий алиас:
skin: islands-popup
Кроме того, существует несколько скинов-помощников: -content для стилей контента, -close для закрывающего крестика и -overlay для затемняющего слоя поверх контента.
Если нужен обычный попап/дропдаун, который планируется позиционировать вручную или и вовсе класть куда-то статично, как остров, достаточно будет чего-то такого:
Большое мороженное с орехами и карамелью в вафельном рожке
Как видно в styl-исходнике выше, у попапа могут быть два элемента: контент и кнопка закрыти. Если они не нужны, можно опустить соответствующие вызовы стилей.
Элемент контента задаёт внутренние отступы у блока, поэтому если хочется, можно или перенести их напрямую к блоку попапа — если не задавать соответствующий селектор, либо использовать параметр small для уменьшения соответствующих отступов:
Большое мороженное с орехами и карамелью в вафельном рожке
Если же нужен модальный попап, лучше воспользоваться соответствующими типами семейства modal:
Попап с хвостиком
Для попапа с хвостиком («дропдауна») нужно передать соответствующий параметр при создании попапа:
skin: islands-popup (__tail '&-tail')
Пока что подразумевается, что стили для хвостиков с конкретных сторон зашиваются в модификатор на самом попапе, в будущем (когда Стайлус получит одну новую фичу), возможно, можно будет это поменять.
Попап выпал вниз
Попап выпал влево
Попап выпал вверх
Попап выпал вправо.dropdown kind: modal skin: islands-popup \ (__content '&-content' small) \ (__tail '&-tail')
По умолчанию хвостик позиционируется по центру соответствующей стороны, если надо это поменять, достаточно задать соответствующие инлайновые стили блоку хвостика:
Попап выпал вниз
Надо отметить, что сейчас хвостик позиционируется относительно своего центра, поэтому если нужно прижать его к краю, то нужно задавать соответствующую величину не меньше 11 пикселей.
Если нужно позиционировать хвостик справа или снизу, нужно не забыть переопределять top: auto или left: auto.
Пока инлайновые стили надо задавать так, но потом, возможно, этот момент можно будет как-то упростить/поправить, скорее всего появятся соответствующие модификаторы, или что-то ещё типа того.
Промо кнопка
skin: islands-promo-button
Размеры
У промо кнопки есть четыре размера: стандартный, small, large и xlarge, нестандартный размер задается параметром:
skin: islands-promo-button small
skin: islands-promo-button large
skin: islands-promo-button xlarge
«Летающая» кнопка
Как и простую кнопку, промо кнопку можно сделать летающей при помощи параметра fly:
skin: islands-promo-button fly
Псевдо-кнопка
skin: islands-pseudo-button
В отличие от обычной кнопки, псевдокнопка не имеет «активного» состояния и следующей из него необходимости иметь внутренний элемент, так что псевдокнопку можно сделать и на одном элементе:
Аналогично обычной кнопке, псевдокнопка может быть обычного размера, и маленькая — если использовать параметр small:
skin: islands-pseudo-button small
Инвертированная псевдокнопка
Так как псевдокнопка не имеет фона, то если понадобится использовать её на тёмном фоне, то нужно будет воспользоваться модификатором _inverted:
skin: islands-pseudo-button _inverted
Такой модификатор можно добавить и к уже имеющейся кнопке, или вызвав только подскин, или используя соответствующий синтаксис:
skin: islands-pseudo-button_inverted
skin: islands-pseudo-button_ _inverted
Настраиваемая прозрачность границ
Основная задача псевдокнопки — быть кнопкой, но при этом и не притягивать к себе внимание. В некоторых случаях обычная псевдокнопка может оказаться или слишком бледной, или слишком яркой, в этом случае можно исправить это, воспользовавшись параметром border-alpha, изменив значение полупрозрачности границы.
skin: islands-pseudo-button (border-alpha 0.15)
Это будет работать и для обычной псевдокнопки:
И для инвертированной:
Радиокнопки
skin: islands-radio
всё аналогично чекбоксам
Селект
На <select>
skin: islands-select
Если хочется сделать CSS-only селект, это возможно, однако код такого селекта будет не особо оптимальным: приходится городить много хардкода для правильных отступов в Опере и ФФ.
HTML селекта это, по сути, микс с кнопкой:
И маленький селект (для маленькой кнопки)
skin: islands-select small
С изменённой шириной
Но, на самом деле, всё это дикий хардкод, будет работать только для двух этих конкретных размеров, если получится сделать селекты полностью на JS, на основе обычных кнопок и попапов, это будет предпочтительнее.
На обычной кнопке
Кроме того, если хочется сделать совсем кастомный селект, то можно стилизовать любую обычную кнопку под селект — достаточно добавить в неё соответствующую иконку, вызвав её с соответствующим параметром:
Для маленькой кнопки нужен соответствующий small параметр. Ну и можно менять ширину кнопки в большую сторону, иконка будет в правильном месте:
Ну и, конечно, можно использовать в принципе любую кнопку для селекта, например, псевдокнопку:
Или кнопку действия:
Табы
Табы состоят из враппера:
skin: islands-tabs
и отдельных пунктов:
skin: islands-tabs-item
Плюс есть подскин с текущим табом:
skin: islands-tabs-item_selected
На айтемах нужные размеры задаются в em, так что достаточно задавать размер только на родителе:
skin: islands-tabs small
Можно использовать табы внутри острова, но сейчас там хардкодно, надо что-то придумать с отступами и всем таким.
Текст
Все текстовые скины могут принимать опциональный параметр reset, который будет сбрасывать соответствующие стили для соответствующих тегов, для параграфов это <p>, для заголовков — заголовки соответствующих уровней.
Кроме того, каждый текстовый скин по умолчанию имеет заданный нижний маджин, если он по какой-то причине не нужен, можно использовать параметр no-margin.
Основной текст
Для основного текста есть два скина: skin-islands-para и skin-islands-para2, для текста обычного размера и маленького (второстепенного) соответственно. Например:
skin: islands-para reset
skin: islands-para2 no-margin
Пара примеров:
Пример обычного текста — Arial 15px, высота строки — 22px
Пример второстепенного текста — Arial 13px, высота строки — 18px
Заголовки
Заголовки задаются скинами skin-islands-h1 – skin-islands-h6, например:
skin: islands-h1 reset
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Юзерпик
Стандартный круглый (в нормальных браузерах) юзерпик.
skin: islands-userpic
Картинка задаётся через инлайновый стиль style="background-image:url('foo.png')".
Для раскладки исопользуется тип icon с нужным размером, например, (size 42px)
Можно применять и к ссылкам, есть дополнительный скин-модификатор для ховера, его можно применить через соответствующий параметр:
skin: islands-userpic_ (_hover '&:hover')
Ну и пример «из шапки» — с юзернеймом и иконкой нотификации.