template.md

Шаблон для верстки

Структура файлов

• assets - все ресурсы проекта
  • css - стили
  • js - скрипты
  • img - изображения, которые относятся к дизайну. Например, фон, иконки, плашки и т.п.
  • uploads - изображения, которые относятся к контенту и в будущем могут подтягиваться из базы данных. Например, фотографии

Стили

• reset.css - сброс стилей, чтобы избавиться от дефолтных стилей различных браузеров
• style.css - стили проекта

Переменные

В style.css первым идет минимальный набор переменных, который будет дополняться в процессе верстки дизайна.

:root {
  --color-bg-primary: #fff;
  --color-bg-accent: #686de0;
  --color-bg-success: #badc58;
  --color-bg-warning: #ffbe76;
  --color-bg-error: #ff7979;

  --color-text-primary: #130f40;
  --color-text-secondary: #95afc0;
  --color-text-accent: #4834d4;
  --color-text-success: #6ab04c;
  --color-text-warning: #f0932b;
  --color-text-error: #eb4d4b;

  --font-primary: sans-serif;

  --path-img: './assets/img';
}

В переменные выносятся часто повторяющиеся значения.

Группы переменных:

• --color-bg-... - цвета фона
• --color-text-... - цвета текста
• --font-... - семейства шрифтов
• --path-... - пути (например, к основной папке с картинками или к папке с иконками)

Именование переменных:

• primary - основное значение. Например:
  • --color-bg-primary - фон страницы
  • --color-text-primary - цвет обычного текста
  • --font-primary - семейство шрифтов обычного текста
• secondary - второстепенное значение. Например:
  • --color-text-secondary - чаще всего это менее яркий цвет. В дизайне может использоваться для подписей, лэйблов в формах и т.д.
  • --font-secondary - если в дизайне будет использована шрифтовая пара, но шрифт основного текста будет primary, а шрифт заголовков - secondary
• accent - акцентный цвет в дизайне
  • --color-text-accent - цвет ссылок
• success, warning, error - значения для различных состояний интерфейса: успешное состояние, предупреждение и ошибка. Например:
  • --color-text-error - цвет сообщения об ошибке при валидации формы
  • --color-bg-success - цвет фона уведомления об успешной отправке формы

Комментарии в коде

И в css, и в js можно использовать комментарии-заголовки для визуального разделения логических блоков. Это облегчает навигацию по коду.

/*===============================
  Title
  ===============================*/