Front-end Style Guide

Відступи та форматування:

editorconfig

Ось інструкції щодо застосування файлу .editorconfig для кожного з вказаних вами редакторів:

Для PhpStorm і WebStorm:

1. Помістіть файл .editorconfig в кореневу теку вашого проекту, якщо його ще немає.

2. Відкрийте ваш проект в PhpStorm або WebStorm.

3. У налаштуваннях редактора знайдіть розділ "Editor" (редактор) або "Code Style" (стиль коду).

4. У налаштуваннях редактора знайдіть розділ "File and Code Templates" (шаблони файлів і коду).

5. Переконайтеся, що опція "Enable EditorConfig support" (увімкнути підтримку EditorConfig) увімкнена.

6. PhpStorm і WebStorm автоматично застосують налаштування з файлу .editorconfig при відкритті файлів проекту.

Для Visual Studio Code (VSCode):

1. Переконайтеся, що встановлено розширення "EditorConfig for VS Code". Якщо його немає, встановіть його з магазину розширень.

2. Помістіть файл .editorconfig в кореневу теку вашого проекту, якщо його ще немає.

3. Відкрийте ваш проект в VSCode.

4. VSCode автоматично застосує налаштування з файлу .editorconfig при відкритті файлів проекту.

Якщо ви хочете перевірити, чи застосовуються налаштування з файлу .editorconfig, ви можете відкрити файл в VSCode та перевірити, чи відповідають відступи та інші стилі вказаним у .editorconfig.

Щоб файли автоматично форматувалися відповідно до налаштувань з .editorconfig під час коміту. Для цього ви можете використовувати вбудовані інструменти для роботи з git та налаштування кодування. Ось як це зробити:

Налаштування кодування:

В вашому редакторі (WebStorm або PhpStorm):

1. Відкрийте налаштування (Settings).

2. В розділі Editor (або Code Style) переконайтеся, що налаштування кодування відповідають вашим вимогам. Якщо потрібно, ви можете налаштувати відступи, стиль коду та інші параметри.

3. Переконайтеся, що опція "Detect and use existing file indents for editing" вимкнена, щоб редактор не використовував вже існуючі відступи в файлах.

4. Збережіть зміни.

Налаштування автоматичного форматування під час коміту:

1. У налаштуваннях редактора перейдіть до розділу Version Control (або VCS).

2. Виберіть Git (або іншу систему керування версіями, яку ви використовуєте).

3. Переконайтеся, що опція "Reformat code" увімкнена для комітів (вона повинна бути позначена галочкою).

4. Також переконайтеся, що опція "Perform code analysis" увімкнена, щоб також виконувалися аналізи коду під час коміту.

5. Збережіть зміни.

Тепер, коли ви робите коміт у вашому репозиторії, файли будуть автоматично відформатовані відповідно до налаштувань з .editorconfig перед тим, як вони будуть зафіксовані. Це забезпечить однорідність стилю коду у вашому проекті та покращить читабельність коду для вас та ваших колег.

Ви можете налаштувати Visual Studio Code (VSCode) так, щоб файли автоматично форматувалися відповідно до налаштувань з файлу .editorconfig при коміті. Для цього вам знадобиться розширення, яке автоматично виконує форматування, наприклад, EditorConfig for VS Code. Ось як це зробити:

1. Встановлення розширення:

   • Відкрийте VSCode та перейдіть у Магазин розширень (Extensions).

   • Введіть "EditorConfig" у поле пошуку та знайдіть розширення EditorConfig for VS Code.

   • Клацніть "Install" для встановлення розширення.

2. Налаштування розширення:

   • Перейдіть у налаштування VSCode, натиснувши на іконку шестеренки у лівому нижньому куті та оберіть "Settings".

   • У полі пошуку введіть "format on save" та переконайтеся, що опція "Editor: Format On Save" встановлена в значення "on". Це дозволить автоматично форматувати файли при збереженні.

   • Поверніться до налаштувань та знайдіть "Editor: Default Formatter" (Редактор: Стандартний форматувальник). Виберіть "EditorConfig" зі списку форматувальників.

   • Збережіть налаштування.

Тепер, коли ви зберігаєте файл у VSCode, він буде автоматично форматуватися відповідно до налаштувань з файлу .editorconfig. Це полегшить підтримку стилю коду в вашому проекті та зробить вашу роботу більш зручною.

Найменування класів та ідентифікаторів:

• Використовуйте осмислені імена класів та ідентифікаторів, які відображають їх призначення чи вміст.

• Уникайте використання надто загальних або надто специфічних імен.

• Використовуєм методологію БЕМ https://ru.bem.info/methodology/quick-start/

• Обов’язковий моменд додавати унікальний клас на саму секцію виходячи з назви до прикладу: .info__section

• Зараз на беку виділення кольору частини серед заголовку підставляє тег <mark> замість <span> (як ми звикли), якщо треба змінити font-weight: для частини заголовку – використовуєм <strong>

<section class="info info_black" id="infoSection">
    <div class="container">
        <div class="info__row">
            <div class="info__content">
                <h1 class="h1-title">Don't let <mark>your pet get</mark> fleas and worms.</h1>
                <h2 class="h1-title">Don't let your pet get fleas and worms.</h2>
                <p>Get individually tailored treatments direct from your trusted vet.</p>
                <a href="" class="btn btn_large btn_primary">Get started</a>
            </div>
            <div class="info__img">
                <img src="images/img01.jpg" width="300" height="250"  alt="img">
            </div>
        </div>
    </div>
</section>

Виділю що для майже в усіх тайтлів повинен бути свій клас від .h1-title … .h6-title

h1, .h1-title {
  font-weight: 800;
  font-size: 75px;
  line-height: 100%;
  text-transform: uppercase;
}
h2, .h2-title {
  font-weight: 800;
  font-size: 75px;
  line-height: 100%;
  text-transform: uppercase;
}

...

.info {
  &__row {
  }
  &_right {
  
  }
}

для дескріпшинів типу які відрізняються від звичайної <p>, можна використовувати .sub-title_large, .sub-title_small

Угруповання та порядок правил CSS/SCSS:

• Групуйте правила CSS логічно за функціональністю.

• Підтримуйте єдиний порядок властивостей у правилах CSS, наприклад спочатку позиціонування, потім відображення, потім друкарня і т.д.

• використовуйте @mixin з нашої збірки, усі px перекладайте у rem

/* Приклад SCSS згідно БЕМ та попередього прикладу */
.info {
  border-top: 1px solid #000;
  &__row {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 16px;
  }
  &__content {
    padding: 12px;
  }
  &__img {
    max-width: 400px;
    img {
      display:block;
    }
  }
}

Коментарі:

• Використовуйте коментарі, щоб пояснити складні або ключові частини коду.

• Позначте тимчасові рішення або області для покращення коментарів TODO або FIXME.

/* Приклад CSS */
/* TODO: Додати стилі для мобільних пристроїв */
.selector {
    property: value;
}
<!-- Приклад HTML -->
<!-- FIXME: Необхідно виправити вирівнювання -->
<div class="container">
  <p>Text</p>
</div>
// Приклад для JS
// тут ми додаємо віскі
for(let i = 0; i < 10; i++) {
  let drop = getWhiskey();
  smell(drop);
  add(drop, glass);
}

• Робіть css змінні  для root в файлі _variable.scss де потім перевизначте у scss змінні для зручності

:root {
  --color-primary: #235ad1;
}
$primary: var(--color-primary);

Класи для JS

• Основні елементи до яких буде звернення та анімування з використанням JS треба дописувати спеціальний js-class

• Використовуйте осмислені імена класів та ідентифікаторів, які відображають їх призначення чи вміст.

• Уникайте використання надто загальних або надто специфічних імен.

• До цих класів СSS стилі не використовуєм !!!

 <div class="faq__item">
    <div class="faq__header h3-title js-accordion-header active">What are the premium benefits?</div>
    <div class="faq__body js-accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

//faq
$('.js-accordion-header').on('click', function () {
    $(this).toggleClass('active').siblings('.js-accordion-body').slideToggle();
})

Компонентний підхід

Компонентний підхід – це методологія розробки веб-сторінок, яка базується на розбитті інтерфейсу на окремі компоненти або модулі. Кожен компонент представляє собою незалежну частину інтерфейсу, яка може бути використана багаторазово і перенесена з одного проекту в інший.

Всю цю базову розбивку ви побачите у нашому стартовому проекті

.js/.css для фронт підключення .min.js/.min.css для бекендів

Приклад розмітки home.php

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Home</title>
	<?php include('../components/head/_head.php') ?>
	<link rel="stylesheet" href="../assets/libs/swiper/swiper.min.css" />
	<link rel="stylesheet" href="../assets/css/element-swiper.min.css">
	<link rel="stylesheet" href="../assets/css/element-articleCard.min.css">
	<link rel="stylesheet" href="../assets/css/section-hero.min.css">
	<link rel="stylesheet" href="../assets/css/section-steps.min.css">
	<link rel="stylesheet" href="../assets/css/section-statistic.min.css">
	<link rel="stylesheet" href="../assets/css/section-schedules.min.css">
	<link rel="stylesheet" href="../assets/css/section-diagram.min.css">
	<link rel="stylesheet" href="../assets/css/section-hits.min.css">
	<link rel="stylesheet" href="../assets/css/section-logos.min.css">
</head>
<body>
	<!-- Use with element-menuToggler.min.js -->
	<?php include('../components/header/_header.php') ?>
	<main>
		<?php include('../components/sections/hero.php') ?>
		<?php include('../components/sections/steps.php') ?>
		<?php include('../components/sections/statistic.php') ?>
		<!-- Use with libs/swiper/swiper.min.css | element-swiper.min.css | libs/swiper/swiper.min.js -->
		<?php include('../components/sections/schedules.php') ?>
		<!-- Use with libs/chart/chart.min.js -->
		<?php include('../components/sections/diagram.php') ?>
		<!-- Use with libs/swiper/swiper.min.css | element-swiper.min.css | libs/swiper/swiper.min.js -->
		<?php include('../components/sections/hits.php') ?>
		<!-- Use with libs/swiper/swiper.min.css | element-swiper.min.css | libs/swiper/swiper.min.js -->
		<?php include('../components/sections/logos.php') ?>
		<!-- Use with libs/swiper/swiper.min.css | element-swiper.min.css | libs/swiper/swiper.min.js | element-articleCard.min.css -->
		<?php include('../components/sections/news.php') ?>
	</main>
	<?php include('../components/footer/_footer.php') ?>
	<script src="../assets/libs/swiper/swiper.min.js"></script>
	<script src="../assets/libs/chart/chart.min.js"></script>
	<script src="../assets/js/element-menuToggler.min.js"></script>
	<script src="../assets/js/section-schedules.min.js"></script>
	<script src="../assets/js/section-diagram.min.js"></script>
	<script src="../assets/js/section-hits.min.js"></script>
	<script src="../assets/js/section-logos.min.js"></script>
	<script src="../assets/js/section-news.min.js"></script>
</body>
</html>

Використання svg для іконок

<svg id="test" class="icon">
    <use href="../assets/icons/sprite.svg?v=1#cloud-fog-svgrepo-com"></use>
</svg>

Іконки svg додаються в папку src/icons/ потім треба згенерувати спрайти з них, або перезавантажте збірку вебпак або в окремій консолі npm run prod
На виході отримаєм одну svg іконку /assets/icons/sprite.svg в якій усі дефолтні fill / stroke переписуються на currentColor
айді спрайта = назві іконки в src/icons/

також обовʼязково додаєм .icon { fill: currentColor; stroke: currentColor;}

Тепер достатньо родичу прописати color: red; і іконка успадковує цей колір

?v=1 – використовується для того щоб не кешувався спрайт, бо зазвичай на нього впливає дуже сильне кешування

Використання нашого uiKit

У папці frontend > ui-library > components буде знаходитись все що ми накопичили з нашого досвіду.
Усі ці скрипти обовʼязкові до використання або як база для ваших більш складних.

Зауважу на таких файлах як:

• cf7-example.html

• header.html

• pagination.html

• breadcrumbs.html

Ці заготовлені структури повинні використовуватись у всіх проектах під WordPress для швидкого адаптуання беків

CheckList перевірки проекту для продакшена

1. Перевірка на PixelPerfect

   • https://chromewebstore.google.com/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ru

2. Кроссбраузерність:

   • Перевірте, що верстка коректно відображається в останніх версіях основних браузерів (Chrome, Firefox, Safari, Edge).

   • Переконайтеся, що верстка також працює в старих версіях браузерів, якщо це потрібно.

3. Відгук на різні розміри екрану (Responsive Design):

   • Перевірте, що верстка адаптується під різні розміри екранів (мобільні пристрої 320-767, планшети 768-1280, десктопи 1280++). Рекомендую завантажити https://responsively.app/

   • Переконайтеся, що контент коректно масштабується і розташовується на різних пристроях.

   • Кращім варіантом проклацати сайт на своєму смартфоні або використати https://www.lambdatest.com/lp/automation-testing

4. Валідність коду:

   • Перевірте HTML та CSS код на відповідність стандартам W3C. https://validator.w3.org/

   • Переконайтеся, що немає помилок та попереджень у консолі розробника.

5. Семантичність HTML:

   • Перевірте, що HTML елементи використовуються згідно їх семантичного призначення (наприклад, використання заголовків <h1>, <h2>, списків <ul>, <ol> тощо).

6. Оптимізація зображень:

   • Перевірте, що зображення оптимізовані для мінімального часу завантаження сторінки.

   • Використовуйте сучасні формати зображень, та які ідеально підходять для кожного з використань.

7. Тестування інтерактивності:

   • Переконайтеся, що всі інтерактивні елементи (кнопки, посилання, меню тощо) працюють коректно.

   • Перевірте анімації та ефекти на відповідність дизайну та продуктивності.

   • Coverage https://developer.chrome.com/docs/devtools/coverage?hl=ru

   • якщо дизайном не було передбачено ховери або інші положення, то або узгоджуйте с PM або робіть дефолтні ( як приклад для ховеру opacity:0.8)

8. Підтримка ретіни:

   • Переконайтеся, що зображення підтримують пристрої з високою щільністю пікселів (Retina) і виглядають чітко на таких екранах. ()

9. SEO-оптимізація:

   • Перевірте, що ключові елементи для SEO (метатеги, заголовки сторінок, альтернативні тексти для зображень тощо) присутні і відповідають вимогам.

10. Кроссплатформена сумісність:

    • Переконайтеся, що верстка коректно відображається на різних операційних системах (Windows, macOS, Linux, iOS, Android тощо).

11. Тестування на реальних даних:

    • Перевірте, що верстка коректно відображається з реальними даними та контентом, включаючи довгі тексти, зображення різного розміру тощо.

12. Перевірка швидкості завантаження:

    • Використовуйте інструменти для аналізу продуктивності та швидкості завантаження сторінки (наприклад, Google PageSpeed Insights) та оптимізуйте верстку для швидкого завантаження.

    • або в випадках коли сайт заблокований від інших використовуйте LightHouse https://prnt.sc/s6XEeAfAShP-

13. Обовʼязкове додавання favicon

    • favicon повинна бути підключена окремо в папці assets/favicon з розширенням .png та розміром 512 на 512, підключення всього 1 раз, інші вже зроблять на беку

Після ретельної перевірки всіх вищезазначених пунктів можна вважати, що верстка готова до розгортання на продакшн.

База корисних знань:

• верстка листів

• Доступність інтерфейсув HTML (приклади як використувувати можна одразу дивитись в документації бутстрап)