Стандартные элементы и структура сайта

Общие требования

Существуют базывае требования (стандарты), и специальные требования или пояснения, которые должен предоставить клиент (PM) при постановке задачи.

По следам статьи "Чистота и порядок - превыше всего. Рекомендации к коду".

  1. Верстка должна быть блочной, таблицы можно использовать только для предоставления табличных данных в контенте. Все значки типа копирайта, умляутов (немецкие буквы с точечками), уголки, должны быть добавлены через спецсимволы (мнемоники).
  2. Соответствие макету - самый главный пункт, в противном случае, нельзя будет принять работу. Еще называют PixelPerfect, допускается сдвиг на 1-2 пикселя. При сдвиге больше, отличия могут буть заничительным, так как количество пикселей суммуирется по странице, и элемент снизу может съехать на достаточно большое расстояние. Отличия являются обоснованным отказом от предоставляемой работы. Работа считается невыполненной.
  3. Заявленные требования к задаче, обычно это:
    - кроссбраузерность (список браузеров с версией "от". К примеру, указывается Internet Explorer 12+, Mozilla Firefox, Google Chrome, Apple Safari последних версий. Иногда, к этому добавляется Opera)
    - использование doctype (в 99% случаев это html5)
    - прохождение валидации на validator.w3.org
    - использование css framework (bootstrap, skeleton, grid960 или еще что) или нет
    - препроцессоров (less, sass), если используется

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

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

Структура папок, файлов и их наименование

Никакой кириллицы, ни в названиях файлов, ни в папках, ни в комментариях в коде.
Обычнй набор файлов и папок выглядит так:

  • Файлы в корне
    index.html - главная страница (всегда index)
    catogory.html - страница категории
    blog.html - страница блога
    item.html - страница товара
    contact.html - страница контактов
    about.html - страница о компании
    и дальше по смыслу
  • Папки и файлы в них
    img - для картинок
    Картинки .png и .svg - для элементов дизайна, у них битрейт лучше, jpg - для фото, продуктов, например.
    js - для скриптов
    Размещаем скрипт для инициализаций, обычно называется main.js - в нем инициализируем все слайдеры и прочие скрипты.
    Библиотеки скриптов как ибибилиотеку jquery подключаем через cdn - то есть, с сервера (при возможности).
    Обязательно проверяем версии библиотек и скриптов, подключаем только последние.
    css - для стилей
    styles.css - общий файл стилей
    media.css - файл с медиа запросами
    reset.css - файл с обнулением стандартных свойств тегов

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

Наименование изображений
logо - название для лого, только так.
Для фоновых изображений добавляем bg- , для иконок ico-
Например, bg-top.png или ico-fb.png
Если есть возможность, то лучше давать тематические названия, если это сделать нельзя, то именуем ico-01.png, ico-02.png, bg-box.png и в таком стиле.

Основная структура страницы

  • Шапка (верхний колонтитул, он же хедер, header)
    <header class="header">header</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>

    То есть, <div> это структурный тег, используется для построения структуры, как и прочих элементов. Для контента можно использовать <section>,
  • Футер (он же нижний колонтитул, footer)
    <footer class="footer">footer</footer>

Наименование классов

  • header - название для хедера и только так
  • logo - название для логотипа
  • login, login-block, auth-block, user-block так может называться блок с авторизацией
  • menu, nav название класса навигационного меню
  • content - название класса для общего контенера, в котором находиться вся контентная часть
  • container - название контенера, который может использоваться для органичения ширины, выравнивания
  • block - общий класс, второстепенного элемента
  • box - класс для контейнера, часто для однотипных повторяющихся элементов внутри одного блога, как родительского
  • footer - класс для футера, только так
  • socials - класс для блока или списка, который содержит социальные иконки

Все классы могут повторяться на странице множество раз, если указывать стили относительно непосредственного родителя. К примеру, если меню находиться в хедере и футере, и укажем стили для меню относительно хедера и футера, то этот стиль применться только в одном месте, а название класса будет несколько раз на странице. Так и нужно поступать везде, чтобы не ломать голову над уникальным названием класса.

 

Основные элементы

Навигационное меню / многоуровненове. Это самый важный и сложный элемент любого сайта.

<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">. Обычно у пункта автивного состояние такое же поведение, как у ссылки меню по наведению, поэтому, если дизайнер этого не показал, то необходимо прописать активный пукнт такой же, как и по наведению.

Списки

Так как у нас используется и должен использоваться 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="#">&lt;</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="#">&gt;</a></li>
</ul>

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