Frontend Mentor - Shortly URL

Страница челленджа на сайте Frontend Mentor

Проект поставляется как есть.

Протестировано во всех современных браузерах и доступных устройствах.

Любые баги, недочеты, пожелания и исправления принимаются с благодарностью!

Верстка:

проходит валидацию,
соответствует БЭМ-нотации наименования классов
основана на философии независимых, изолированных модулей и единиц.

Все скрипты в данном проекте присутствуют только для демонстрации работы функциональных классов. Никаких иных практических целей они не выполняют и должны быть удалены.

Струтктурные классы

.wrapper - глобальная обертка, в которой живет верстка основного лайаута за исключением футера. Прижимает футер к низу сайта.

.footer- обертка футера. Всегда внизу, всегда ЗА ПРЕДЕЛАМИ экрана.

.container - глобальная обертка. Задает предельную ширину контенту. Центрует контент. Задает поля от границ экрана на мобильных устройствах.

Любой блок с постфиксом *row - имеет флекс/грид дисплей.

.nav - класс обертки главного меню.

Адаптер/Респонсив

Верстка выполнена в технике респонсива с 2 переломными точками на ширине 800 и 700 пикс.

Данные экраны выбраны из соображений читаемости и удобства восприятия контента.

Дизайн для таблетки не был предоставлен.

Главное меню сворачивается в "бургер" на экране в 700 пикс.

.menu-trigger - класс кнопки-бургера для открытия мобильного меню. Скрыт до экрана в 700 пикс.

Функциональные классы

Мобильное меню

.active - накидывается на обертку меню .nav и бургер .menu-trigger для открытия мобильной версии меню

.no-scroll - накидывается на body, для предотврашения скролла при открытом меню

Форма-обработчик

Форма реализована с помощью тега form. Имеет атрибуты: id, name, method, action. В стилизации атрибуты не участвуют.

.app__form.form - классы формы. Не участвуют в стилизации. Могут быть использованы с любыми целями. Нужны как точка отсчета для БЭМ-нейминга.

.form__input - инпут формы. Имеет атрибуты: id, name. В стилизации атрибуты не участвуют. Обернут в лейбл, как обертку для стилизации.

.form__label - Лейбл инпута. Обертка, контролирует размеры инпута. Задает стили визуальному полю для ввода инф-ции.

Состояние "ошибка ввода/отправки"

Для отображения состояния ошибки применяется класс .error на лейбле инпута .form__label.

.form__label.error - класс-лист лейбла, если происходит ошибка отправки данных. В данном состоянии становится видно сообщение об ошибке.

.error-msg - класс сообщения об ошибке. Появляется только если есть сочетание классов .form__label.error на инпуте формы.

Результат работы приложения

Результатом работы приложения является блок с исходной и результирующей/укороченной ссылкой и кнопкой копирования этой, короткой, ссылки.

.app__result.result - обертка для списка результатов. Все результаты должны появляться в ней.

.result__item - отдельный пункт списка результатов. Имеет отступ снизу от соседа. У последнго элемента отступа нет.

.result__original-link - класс для вывода исходной ссылки. Видимая длинна ссылки обрезается, по достижению границы с блоком короткой ссылки, тремя точками.

.result__shorter-link - класс для вывода результирующей, короткой ссылки.

Я посчитала избыточным для user experience делать оба этих блока именно "ссылками". Блоки могут быть переиначены в ссылки, по желанию разработчика. Стиллизация не пострадает.

.copy-result - класс для кнопки "копировать", не участвует в стилизации. Использован в скриптах для демонстрации. Может быть удален/заменен без искажения разметки.

Кнопка "копировать" при клике получает дополнительный класс .active.

Присутствующие на данный момент в верстке .result__item нужны исключительно для демонстрационных целей. Для генерации в разметке вшит пустой темплейт, который может быть использован по желанию разработчика или удален.

Темплейт/шаблон для генерации отдельного результата.

  <template id="result-messages">
    <div class="result__item">
      <div class="result__container">
        <div class="result__link">
          <span class="result__original-link"></span>
        </div>
        <div class="result__action">
          <span class="result__shorter-link"></span>
          <button class="btn  btn--primary copy-result" type="button">Copy</button>
        </div>
      </div>
    </div>
  </template>

Кнопки

Все кнопки оформлены как тег <button> c родительским классом .btn.

Родительский класс можт быть применен к любому блоку для получения внешнего вида "кнопки".

Внешний вид кнопки контролируется следующими классами и модификаторами

.btn - глобальный, родительский класс. Блок по БЭМ. Придает основные визуальные стили кнопке.

.btn-lg - дополнительный класс. Придает большой размер кнопке.

.btn--round - модификатор, придает пропроциональный бордер-радиус.

.btn--clean - модификатор, придает прозрачный бекграунд.

.active - дополнительный класс. Придает темный фон. В дизайне использован для кнопки "копировать".

bugoaneo / url-shortening