Как улучшить внешний вид личного кабинета на сайте - элементы стилизации в разметке страниц Falcon Space

Вся стилизация Falcon Space строится строго на Bootstrap 4. Используйте по максимуму возможности Bootstrap 4 для упрощения поддержки проекта. Это означает, что вы используете в разметке классы Bootstrap 4 с минимумом подключения CSS. 

В этом руководстве мы рассмотрим какие элементы вы можете использовать в рамках разработки на Falcon Space. 

Здесь мы не будем касаться возможностей настроек компонентов платформы. Они описаны в документации по платформе и руководстве по юзабилити Falcon Space. 

Ключевые принципы

Минимум кастома CSS, JS - используйте по максимуму существующие возможности платформы и Bootstrap 4. Это сильно упростит поддержку проекта в дальнейшем, а также снизит риск внедрения кривого решения.

Ориентация на цели пользователя - весь интерфейс должен создаваться с учетом того, что пользователь пришел на страницу с какой-то целью. Наша задача - побыстрее сделать свою задачу. 

Не переборщить - имея много инструментов, так и подрывает их все использовать по максимуму. Навороченный красивый интерфейс перегружает внимание пользователя. Интерфейс должен быть максимально простым и незаметным, но при этом не отталкивать пользователя. 

Не создавайте хрупких решений - если решение работает через раз - нужно выкинуть такое решение. Чем меньше наворотов, тем надежнее работает интерфейс. Все ненадежное следует исключить из проекта. Если решение работает плохо в одном из популярных браузеров - его точно не нужно использовать. 

Кнопки

• Используйте стандартные кнопки вида btn btn-primary (success, warning и т.д.).
• Создавайте кнопки с окантовкой -  btn btn-outline-primary 
• Создавайте кнопки с иконками: 

<a href="#" class="btn btn-success"><i class="fa fa-cube"></i> Button 1</a>

• Создавайте кнопки панели с иконкой - btn-square (кастом стиль)  https://yadi.sk/i/8VUFq74rO3Dm3g
• Меняйте размеры кнопок  - btn-sm (xs, lg,xl).

Подробнее про кнопки https://getbootstrap.com/docs/4.0/components/buttons/

Иконки

Используйте иконки для создания более приятного и понятного дизайна

<i class="fa fa-check"></i>

Изменение цвета иконки: 

<!-- пример хорошо подходит для отображения статуса элемента в таблице -->
<i class="fa fa-circle" style="color: #f00"></i>

Изменение размера иконки: 

<i class="fa fa-check fa-3x"></i>

Для поиска иконок можно использовать этот инструмент: https://faicons.com/

Цветовые выделения элементов

Цвет - отличный помощник сфокусировать внимание человека на нужном элементе. 

Используйте простую схему: красный  - ошибка или стоп, желтый - внимание, зеленый - все хорошо, синий - в работе, серый неактульно. 

В Bootstrap цвет имеет смысловые названия - primary, danger, secondary, dark и т.д. Важно! Используйте только эти цвета. В этом случае ваш интерфейс будет более однородным и последовательным. 

Цвет текста - text-white, text-primary и т.д.

Цвет форма - bg-danger и т.д.

Значимые элементы можно выделить через badge или pills -  badge badge-primary 

https://getbootstrap.com/docs/4.0/components/badge/

Серый второстепенный текст можно написать как small text-muted 

Про цвета Bootstrap https://getbootstrap.com/docs/4.0/utilities/colors/

Отступы

Важно управлять отступами между элементами - именно это и определяет опрятность дизайна. 

• Внешние отступы элемента (от рамки вовне) - mt-1, my-2, m-3, mb-5 (m - margin; t, b, l, r - в какую сторону отступ, число - это размер отступа)
• Внутренние поля элемента (от рамки внутрь - p-1, pt-2). 

https://getbootstrap.com/docs/4.4/utilities/spacing/

Обязательно учитывайте вертикальное выравнивание элементов.

Визуально группируйте рядом логически связанные элементы (например, заголовок, текст и картинка к ним).

Элементы оформления блока на странице 

Блок на странице должен быть явно выделен и понятен пользователю как единое целое на странице. 

При этом важно не переусердствовать с рамками, т.к. сильно затруднит изучение страницы. 

Рамки позволяют явно сгруппировать элементы в единый блок - border border-primary 

https://getbootstrap.com/docs/4.0/utilities/borders/

Скругление - rounded, rounded-circle. Используйте скругление для последовательного дизайна (если все остальные элементы имеют округлую форму в вашем проекте)

Тени - shadow, shadow-lg, shadow-sm. Тени позволяют акцентировать внимание на определенном элементе (как бы выдвигая его вперед). Используйте очень дозированно и только для самой важной информации на странице. 

Простая панель с тенью: 

<div class="shadow-lg p-3 mb-5 bg-white rounded">
    <div class="as-dashboard" data-code="forAdmin"></div>
</div>

https://getbootstrap.com/docs/4.1/utilities/shadows/

Состояние прогресса

Некую числовую величину в процентах можно отразить через прогресс-бар (здесь он через CSS заужен):

<div class="as-progress progress mt-2" style="height: 3px; width: 100%; background-color:transparent;">
   <div class="progress-bar bg-light" role="progressbar" style="width: 0%; transition:
      width 30000ms linear 0s !important;" aria-valuenow="100" aria-valuemin="0" aria-="" valuemax="100"></div>
</div>

Скрытие элементов под разные разрешения экрана 

Зачастую необходимо упростить интерфейс приложения на мобильных устройствах. Для этого просто указываем классы Bootstrap, которые скроют элемент, если он выводится на малом экране. 

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

d-block d-sm-none - показывает элемент блочным на мобильных, а на всех что sm и выше - скрывает его.

d-none d-md-inline-block - скрываем на смартфонах и планшетах, но показываем на md и больше экранах. 

https://getbootstrap.com/docs/4.0/utilities/display/

Скелет разметки

Используйте для структурирования данных на странице возможности Bootstrap 4. 

Не используйте таблицы для этого - это будет не адаптивно под мобильные экраны. 

Используйте в большинстве случаев подобные блоки (структуру разметки, обязательно col в row, и никак иначе):

<div class="row">
    <div class="col-12 col-md-8">
      A
    </div>
    <div class="col-12 col-md-4">
      B
    </div>
  </div>

Можно создавать вложенные элементы (т.е. вместо A написать еще такой же блок из row и вложенных col).

col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 - это значит, что на мобильных ячейка будет занимать 12/12 от строки (т.е. всю строку), на sm-разрешении (планшет) будет занимать 6/12 строки, на md разрешении будет занимать 4/12 экрана, а на больших lg и xl будет занимать 2/12 строки.  

Если указано просто col-12 col-lg-2, то для всех ниже lg будут работать правила нижнего уровня - т.е. 12. А для всех выше lg  (т.е. lg и xl) будет действовать 2.

Подробнее про Boostrap Grid - https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works

Вывод карточек элементов

Данный вид есть как режим работы таблицы. В случае необходимости вывести кастомную разметку (например, в List или Catalog) для каких-то элементов, рассмотрите вариант использования Bootstrap cards.

Card позволяет вывести все что необходимо по элементу: картинка, подложка, заголовок, ссылки, текст, кнопки и т.д.

https://getbootstrap.com/docs/4.0/components/card/

Анимация

Анимация позволяет сгладить субъективные паузы в работе, а также улучшить пользовательский опыт работы с приложением.

Важно, чтобы анимация не была раздражающим фактором для пользователя. Если он слишком часто обращает на нее внимание при работе, значит ее нужно убрать.

Для анимации вы можете использовать следующие классы: animated  + какой тип анимации будет + по необходимости указываем задержку в воспроизведении.

<div class="animated bounceIn delay-1s p-3 mb-5 bg-white rounded">
    <div class="as-dashboard" data-code="forAdmin"></div>
</div> 

Перечень классов анимации - https://animate.style/

Анимация иконок

Для этого на иконку указываем специальный класс: faa-[type] animated

<a href="#" class="btn btn-primary faa-parent animated-hover">
  <i class="fas fa-wrench faa-wrench"></i>
  &nbsp;faa-wrench
</a>

Управление анимацией появления формы или таблицы - https://falconspace.ru/docs/upravlenie-animaciey-dlya-form--tablic

Анимация числовых данных (крутящийся счетчик)

В форме вы можете использовать такую разметку для показа растущих чисел:

<span class="as-growNum" data-min="0" data-max="122" data-duration="1000">111</span> 

Для полей input значения будут браться из value:

<input type="text" class="as-growNum" value="100">

Показ увеличенных картинок (для галереи изображений)

Данный способ позволит по клику показывать полноразмерную версию фото в модальном окне с возможностью перехода на следующее фото. 

<div class="as-lightbox">
    <a href="#" class="as-lightbox-item" data-url="{bigImgURL}" data-title="{title}">
        <img data-src="{thumbUrl}">
        <h5>{title}</h5>
    </a>
    <a href="#" class="as-lightbox-item" data-url="{bigImgURL}" data-title="{title}">
        <img data-src="{thumbUrl}">
        <h5>{title}</h5>
    </a>
    ....
</div>