- UA
- RU
Загальні вимоги
Існують базові вимоги (стандарти), і спеціальні вимоги або пояснення, які повинен надати (“зібрати” під час спілкування з клієнтом або на основі аналогічних проєктів, або на основі отриманого раніше власного досвіду) Project Manager (PM) під час постановки завдання.
Слідами статті Чистота і порядок – понад усе. Рекомендації до коду.
Пункти, що стосуються css фреймворку і препроцесорів, – це спеціальні параметри, без яких легко обходиться більшість проектів, і за їхнє використання платять окремі гроші. Якщо вимоги не пред’являються – запитайте, щоб не було сюрпризів і фраз наприкінці на кшталт “а я думав(ла), що ви професіонали”. Може, і професіонали, але не телепати 🙂.
Також робимо тільки те, що в параметрах і замовили. Будь-яка безкоштовно виконана робота може спричинити інші безкоштовні роботи.
Структура папок, файлів та їх найменування
Ніякої кирилиці, ні в назвах файлів, ні в папках, ні в коментарях у коді.
Звичайний набір файлів і папок має такий вигляд:
Приклад базового набору (заготовки – HTML шаблон) файлів/папок знаходиться тут. Якщо немає окремих вимог – використовуємо своє.
Найменування зображень
logо – назва для лого, тільки так.
Для фонових зображень додаємо bg-, для іконок ico-
Наприклад, bg-top.png або ico-fb.png
Якщо є можливість, то краще давати тематичні назви, якщо це зробити не можна, то іменуємо ico-01.png, ico-02.png, bg-box.png і в такому стилі.
Основна структура сторінки
<header class="header">header</header>
<div class="content">
<section class="blog">
<article class="item">article 1</article>
<article class="item">article 2</article>
<article class="item">article 3</article>
</section>
</div>
<footer class="footer">footer</footer>
Найменування класів
Усі класи можуть повторюватися на сторінці безліч разів, якщо вказувати стилі щодо безпосереднього батька. Наприклад, якщо меню розташоване в хедері та футері, і вкажемо стилі для меню щодо хедера і футера, то цей стиль застосується тільки в одному місці, а назва класу буде кілька разів на сторінці. Так і потрібно чинити скрізь, щоб не ламати голову над унікальною назвою класу.
Основні елементи
Навігаційне меню / багаторівневе. Це найважливіший і найскладніший елемент будь-якого сайту.
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li class="active"><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Тільки чистий список. Ніяких класів ні на <li>, ні на <a>, і також не можна додавати класи на вкладені <ul>, усі класи додаються відносно батьківського <ul>. Іноді краще (гнучкіше) розташувати меню в блоці з класом menu, і не вішати його на батьківський <ul>, оскільки залежно від CMS назва може відрізнятися і так буде універсальніше. Єдиний клас можна додавати тільки на <li> – це клас активного стану- active, ось у такому вигляді <li class="active">
.
Зазвичай у пункту автивного стану така ж поведінка, як у посилання меню за наведенням, тому, якщо дизайнер цього не показав, то необхідно прописати активний пукнт такий самий, як і за наведенням.
Приклад реалізації випадаючого навігаційного меню на HTML/CSS.
Списки
Оскільки у нас використовується і має використовуватися reset.css, який обнуляє всі стандартні відступи та інші властивості, то всі списки <ul>, <ol>
будуть обнулені, не буде ні булетів, ні цифр. Їх потрібно буде окремо прописувати щодо тематичної області (текстової) і тільки там, оскільки списки в нас є в хедері щонайменше, а часто є ще окреме навігаційне меню у футері.
Кнопки
Зазвичай, це тег із class="btn"
. При цьому, розрізняємо кнопки для форм і кнопки взагалі. Для форм використовують <input> та <button>
, для всього іншого – тег <a>
. Ось у такому вигляді <a href="#" class="btn">Button</a>
. Якщо кілька різних кнопок і вони схожі між собою, то потрібно робити гнучко, щоб можна було додавати додатковий клас, щоб змінювати розмір і/або колір кнопки <a href="#" class="btn small orange">Button</a>
– у такому вигляді.
Картинки
Картинки, які використовуються в контенті, обертаються в тег <figure>, якщо у картинки є підпис, то обертається в figcaprion
<figure>
<img src="/images/img-01.jpg" alt="">
<figcaption>title</figcaption>
</figure>
Пагінація (розбивка на сторінки)
<ul class="pagin">
<li class="prev"><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="next"><a href="#">></a></li>
</ul>
Для поточної сторінки немає посилання, що логічно, її клікнути не можна. Для решти є посилання, перше й останнє посилання – вперед і назад, куточки вставляємо тільки як спецсимволи
Вас може зацікавити