Ограниченный доступ выйти
×

Компоненты и элементы

Кнопки

Кнопки используются через класс .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">&nbsp;</div>
  </div><!-- /.status-form-control -->
</div><!-- /.form-group -->

С ошибкой

Некорректный email
<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 -->

Выпадающий список (select2🔥)

<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>
Поисковое продвижение
Поиско́вая оптимиза́ция (англ. search engine optimization, SEO) — комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определённым запросам пользователей.
Читать далее →
<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">Читать далее &rarr;</a></div><!-- /.tip_actions -->
  </div><!-- /.tip-wrap_box -->
</div><!-- /.tip-wrap -->

Нижняя плашка в словах

Именно сейчас нужно применить внесённое изменение
Ладно, применить
Внимание!
Именно сейчас нужно применить внесённое изменение
Отменить? Сохранить
Внимание!
Неправильно введён запрос, проверьте стоп-слова
Игнорировать и продолжить Исправить ошибки
Пожалуйста, подождите!
Идёт сбор информации об объявлениях, процесс завершится через 1 минуту
Слов к продвижению
27
Прогноз переходов в месяц
860 3 527
Бюджет на месяц
7 896 
Продолжить

Для родительского блока добавили класс .error:

Слов к продвижению
27
Прогноз переходов в месяц
860 3 527
Бюджет на месяц
7 896 
Продолжить

Для родительского блока добавили класс .warning:

Слов к продвижению
27
Прогноз переходов в месяц
860 3 527
Бюджет на месяц
7 896 
Продолжить

Для родительского блока добавили класс .info:

Слов к продвижению
27
Прогноз переходов в месяц
860 3 527
Бюджет на месяц
7 896 
Продолжить

Для родительского блока добавили класс .success:

Слов к продвижению
27
Прогноз переходов в месяц
860 3 527
Бюджет на месяц
7 896 
Продолжить

Иконки

Все иконки есть в 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> на странице должен быть использован только один раз!

Многострочный заголовок <h2>, длина которого иногда бывает так некстати

Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.

<h3> Делаем заголовки нарочито длинными, чтобы убедиться в правильном интерлиньяже

Текст состоит из некоторого количества предложений. Одно предложение, даже очень распространённое, сложное, текстом назвать нельзя, поскольку текст можно расчленить на самостоятельные предложения, а части предложения сочетаются по законам синтаксиса сложного предложения, но не текста.

<h4> В первую очередь нас интересуют интерлиньяж и отступы, но не стоит забывать и про сам заголовок

Заголовок <h4> используется для большой вложенности в сложной структере документов, например, выставленные счета на оплату, отчёты или информация о полученных знаниях и сертификатах, дефферинциированных по подтипам.

Заголовок пятого уровня <h5>

Заголовок <h5> используется только для вспомогательной информации, где есть вероятность появления шестого уровня разбивки.

Низкоуровневый заголовок <h6>

Самый «нижний» заголовок <h6> предваряет такие элементы, как «Комментарий» или «Таблица».

<h2> Теперь покажем несколько двустрочных
заголовков подряд

<h3> Таким образом проверим их сочетание:
интерлиньяж и отступы

<h4> Однако, в реальной ситуации подобных скоплений
заголовков лучше избегать

Если за заголовком более низкого уровня сразу следует заголовок более высокого, это нарушает композиционную связность элементов оформления и логику повествования. Поэтому после заголовка должен следовать текст (или иной контент), который этот заголовок и подчиненные ему подзаголовки, если они есть, озаглавливают.

Списки

Списки бывают нумерованные и ненумерованые. Принципы их оформления одинаковы.

  • Если пункты списка длинные и представляют собой развернутые предложения, они должны начинаться с прописной буквы и заканчиваться точкой.
    • Если пункты списка длинные и представляют собой развернутые предложения, они должны начинаться с прописной буквы и заканчиваться точкой.
    • Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).
  • Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).
  1. Если пункты списка длинные и представляют собой развернутые предложения, они должны начинаться с прописной буквы и заканчиваться точкой.
  2. Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).

Короткие пункты

Для использования такого списка необходимо на элемент <ul> добавить класс .list-short.

  • с небольшими отступами;
  • без маркеров;
  • с цветовым выделением.

Оформление текста

Наиболее простыми способами выделения информации являются полужирное и курсивное начертания. Подробнее: § 79. Делать фонт болдом или италиком?

На этом сайте есть дополнительный способ выделения при помощи подсвечивания, для чего используется элемент «Подсвеченный» (класс .highlighted).

Комментарий

Элемент «Комментарий» (класс .comment) применяется к пояснительному тексту. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.

Важно

Элемент «Важно». (класс .important), который используется для выделения особо важной информации. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.

Надстрочные и подстрочные индексы

Важно следить за тем, чтобы элементы надстрочных и подстрочных индексов не увеличивали высоту строки, потому что это портит вид текстового блока. Пример: 23. Еще пример: H2SO4. В обоих случаях высота строки от индексов не должна меняться. Если отступ между первой и второй строками увеличился, значит, что-то1 сделано неправильно.

Ссылки

На сайте может встречаться несколько видов ссылок. Например, ссылка на Яндекс является внешней. Внутренние ссылки могут открываться по умолчанию в текущем окне (например, переход на главную страницу) или в новом окне (например, для показа изображений в оригинальном размере). Подробнее: § 171. Правила оформления ссылок.

Стиль псевдоссылки обеспечивается добавлением к нужному элементу класса .pseudo.

Цитата

Я увидел всю сущность нашей правящей системы. Там было много очень послушных дураков и неучей.

— Л. Н. Толстой. Из письма к Л. Андрееву от 02.09.1902

Раскрывающийся контент

Элемент «Раскрывающийся» (класс .foldable) используется для формирования раскрывающихся элементов. Например, для вопросов и ответов.

Показать раскрывающийся контент

Элемент «Раскрывающийся» уместо использовать там, где скрываемая часть контента является больше вспомогательной по отношению к основному содержимому, чем смысловой.

Контент прячется скриптом при инициализации страницы и в дальнейшем показывается по клику на контрол. Управляется классами .foldable__content и .foldable__link.