Кнопки используются через класс .btn
. В кнопку можно превратить ссылку, обычную кнопку и инпут (ну и на самом деле вообще всё). У кнопок существуют разные модификации. Прмеры — ниже.
<a href="" class="btn">Кнопка</a>
<a href="" class="btn btn-outline">Кнопка</a>
<a href="" class="btn btn-blue">Кнопка</a>
<a href="" class="btn btn-dark">Кнопка</a>
<a href="" class="btn btn-red">Кнопка</a>
<a href="" class="btn btn-orange">Кнопка</a>
<a href="" class="btn disabled">Кнопка</a>
<a href="" class="btn btn-outline disabled">Кнопка</a>
<a href="" class="btn btn-blue disabled">Кнопка</a>
<a href="" class="btn btn-dark disabled">Кнопка</a>
<a href="" class="btn btn-red disabled">Кнопка</a>
<a href="" class="btn btn-orange disabled">Кнопка</a>
<a href="" class="btn btn-progress">Кнопка</a>
<a href="" class="btn btn-outline btn-progress">Кнопка</a>
<a href="" class="btn btn-blue btn-progress">Кнопка</a>
<a href="" class="btn btn-dark btn-progress">Кнопка</a>
<a href="" class="btn btn-red">Кнопка</a>
<a href="" class="btn btn-orange btn-progress">Кнопка</a>
Размеры управляются через добавчные классы. Есть три размера: стандартный, большой — .btn-big
, маленький — .btn-mini
. Также есть класс, который растянет кнопку на 100% ширины родительского блока: .btn-full
.
<a href="" class="btn btn-blue">Кнопка</a>
<a href="" class="btn btn-dark btn-big">Кнопка</a>
<a href="" class="btn btn-green btn-mini">Кнопка</a>
<a href="" class="btn btn-red btn-full"">Кнопка</a>
<div class="btn-group">
<a href="#" class="btn btn-outline">Не реагировать</a>
<a href="#" class="btn btn-outline btn-active">Моментально</a>
<a href="#" class="btn btn-outline">Плавно</a>
</div>
Для календаря использем Date Range Picker. Документация на сайте плагина.
<div class="form-group">
<input type="text" name="daterange" class="form-control" value="01/01/2015 - 01/31/2015" />
</div>
<div class="form-group progressing">
<div class="status-form-control">
<input type="text" id="ui-email" class="form-control disabled" placeholder="email" value="moof37@ya">
<div class="status-form-control-type"></div><!-- /.status-form-control-type -->
<div class="help-text"> </div>
</div><!-- /.status-form-control -->
</div><!-- /.form-group -->
<div class="form-group has-error">
<div class="status-form-control">
<input type="text" id="ui-email" class="form-control" placeholder="email" value="moof37@yandex.-ru">
<div class="status-form-control-type" aria-hidden="true">
<i class="f-ico i-shout"></i>
</div><!-- /.status-form-control-type -->
<div class="help-text">Некорректный email</div>
</div><!-- /.form-group__status -->
</div><!-- /.form-group -->
<div class="form-group">
<div class="select select-support-subject">
<select class="form-control">
<option value="1">Техническая поддержка</option>
</select>
</div><!-- /.select -->
</div><!-- /.form-group -->
<div class="form-group">
<div class="select select-support-subject">
<select class="form-control">
<optgroup label="Group Name 1">
<option value="">Nested option</option>
<option value="">Nested option</option>
<option value="">Nested option</option>
</optgroup>
</select>
</div><!-- /.select -->
</div><!-- /.form-group -->
<div class="form-group">
<div class="status-form-control">
<input type="text" id="ui-email" class="form-control" placeholder="email" value="moof37@yandex.ru">
<div class="status-form-control-type" aria-hidden="true">
<i class="f-ico i-check-small green"></i>
</div><!-- /.status-form-control-type -->
<div class="help-text"></div>
</div><!-- /.form-group__status -->
</div><!-- /.form-group -->
Для пользовательских масок ипользуется плагин Input Mask plugin (есть в npm), исходный код и документация — есть на ГитХабе. Для VueJS рекомендую использовать Text Mask.
<div class="form-check">
<input type="checkbox" name="group2" id="credit-limit1">
<label for="credit-limit1">
<span class="form-check-control">Согласен, сука?</span>
</label>
</div>
<div class="form-check">
<input type="checkbox" name="group2" id="credit-limit" checked>
<label for="credit-limit">
<span class="form-check-control">Нет</span>
</label>
</div>
<label class="switch">
<input type="checkbox" class="switch__control" checked>
<span class="switch__slider"></span>
<span class="switch__text">Семинары</span>
</label>
<label class="switch">
<input type="checkbox" class="switch__control" checked disabled>
<span class="switch__slider"></span>
<span class="switch__text">Семинары</span>
</label>
<label class="switch">
<input type="checkbox" class="switch__control" disabled>
<span class="switch__slider"></span>
<span class="switch__text">Семинары</span>
</label>
<label class="switch">
<input type="checkbox" class="switch__control">
<span class="switch__slider"></span>
<span class="switch__text">Семинары</span>
</label>
<a href="" class="undo"><span class="undo-icon"><i class="f-ico i-refresh"></i></span><span class="undo-text">Сбросить изменения</span></a>
<a href="" class="remove-link"><span class="remove-link-icon"><i class="f-ico i-close"></i></span><span class="remove-link-text">Сбросить изменения</span></a>
<a href="" class="pseudo">Быстрые ссылки</a>
Для подсказок используем плагин qTip
<a href="" class="pseudo" data-tooltip="Пример подсказки">Быстрые ссылки</a>
<div class="tip-wrap">
<div class="tip-wrap_box">
<div class="tip_name">Заголовок</div><!-- /.tip_name -->
<div class="tip_text">Описание</div><!-- /.tip_text -->
<div class="tip_actions"><a class="btn btn-mini" href="" target="_blank">Читать далее →</a></div><!-- /.tip_actions -->
</div><!-- /.tip-wrap_box -->
</div><!-- /.tip-wrap -->
Для родительского блока добавили класс .error
:
Для родительского блока добавили класс .warning
:
Для родительского блока добавили класс .info
:
Для родительского блока добавили класс .success
:
Все иконки есть в CSS. Работают через тег <i>
. Цвета иконок меняются классами цветов, полный список есть в файле app/styles/base/icons.pcss
.
<i class="f-ico i-info"></i>
<i class="f-ico i-statistics"></i>
<i class="f-ico i-loupe"></i>
<i class="f-ico i-recommendation"></i>
<i class="f-ico i-settings"></i>
<i class="f-ico i-controlling"></i>
<i class="f-ico i-plus-in-circle"></i>
<i class="f-ico i-minus-in-circle"></i>
<i class="f-ico i-filter"></i>
<i class="f-ico i-ok-good"></i>
<i class="f-ico i-pause"></i>
<i class="f-ico i-user"></i>
<i class="f-ico i-alert"></i>
<i class="f-ico i-plus"></i>
<i class="f-ico i-minus"></i>
<i class="f-ico i-logo-google"></i>
<i class="f-ico i-logo-yandex"></i>
<i class="f-ico i-bell"></i>
<i class="f-ico i-message"></i>
<i class="f-ico i-refresh"></i>
<i class="f-ico i-attach"></i>
<i class="f-ico i-attach"></i>
<i class="f-ico i-eyes"></i>
<i class="f-ico i-mouse"></i>
<i class="f-ico i-loupe-strikeout"></i>
<i class="f-ico i-wrench"></i>
<i class="f-ico i-play-in-circle"></i>
<i class="f-ico i-no"></i>
<i class="f-ico i-chevron"></i>
<i class="f-ico i-check-small"></i>
<i class="f-ico i-close"></i>
<i class="f-ico i-arrow"></i>
<i class="f-ico i-shout"></i>
Лид — это первый абзац статьи, информативный отрывок позволяющий захватить внимание читателя на данном материале. Необязательный элемент.
Эта страница создана для демонстрации блоков и элементов, которые используются на сайте, и служит руководством для всех, кто работает над ним. Дизайнеры и технологи отрабатывают здесь стили, чтобы добиться приемлемых результатов в различных сочетаниях блоков и элементов. Контент-менеджеры и редакторы используют страницу в качестве справочника по верстке типовых страниц. Здесь же рассказывается о некоторых общих правилах оформления контента.
Заголовок <h1> на странице должен быть использован только один раз!
Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.
Текст состоит из некоторого количества предложений. Одно предложение, даже очень распространённое, сложное, текстом назвать нельзя, поскольку текст можно расчленить на самостоятельные предложения, а части предложения сочетаются по законам синтаксиса сложного предложения, но не текста.
Заголовок <h4> используется для большой вложенности в сложной структере документов, например, выставленные счета на оплату, отчёты или информация о полученных знаниях и сертификатах, дефферинциированных по подтипам.
Заголовок <h5> используется только для вспомогательной информации, где есть вероятность появления шестого уровня разбивки.
Самый «нижний» заголовок <h6> предваряет такие элементы, как «Комментарий» или «Таблица».
Если за заголовком более низкого уровня сразу следует заголовок более высокого, это нарушает композиционную связность элементов оформления и логику повествования. Поэтому после заголовка должен следовать текст (или иной контент), который этот заголовок и подчиненные ему подзаголовки, если они есть, озаглавливают.
Списки бывают нумерованные и ненумерованые. Принципы их оформления одинаковы.
Для использования такого списка необходимо на элемент <ul>
добавить класс .list-short
.
Наиболее простыми способами выделения информации являются полужирное и курсивное начертания. Подробнее: § 79. Делать фонт болдом или италиком?
На этом сайте есть дополнительный способ выделения при помощи подсвечивания, для чего используется элемент «Подсвеченный» (класс .highlighted
).
Элемент «Важно». (класс .important
), который используется для выделения особо важной информации. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.
Важно следить за тем, чтобы элементы надстрочных и подстрочных индексов не увеличивали высоту строки, потому что это портит вид текстового блока. Пример: 23. Еще пример: H2SO4. В обоих случаях высота строки от индексов не должна меняться. Если отступ между первой и второй строками увеличился, значит, что-то1 сделано неправильно.
На сайте может встречаться несколько видов ссылок. Например, ссылка на Яндекс является внешней. Внутренние ссылки могут открываться по умолчанию в текущем окне (например, переход на главную страницу) или в новом окне (например, для показа изображений в оригинальном размере). Подробнее: § 171. Правила оформления ссылок.
Стиль псевдоссылки обеспечивается добавлением к нужному элементу класса .pseudo
.
Я увидел всю сущность нашей правящей системы. Там было много очень послушных дураков и неучей.
Элемент «Раскрывающийся» (класс .foldable
) используется для формирования раскрывающихся элементов. Например, для вопросов и ответов.
Контент прячется скриптом при инициализации страницы и в дальнейшем показывается по клику на контрол. Управляется классами .foldable__content
и .foldable__link
.
Элемент «Комментарий» (класс
.comment
) применяется к пояснительному тексту. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.