Продолжаем наше реалити-шоу. После настройки рабочего окружения самое время сформировать общую структуру проекта. Это будет своего рода костяк, на который мы начнём постепенно начнём наращивать «мясо». Он имеет вид, в общем, типичный для такого рода сайтов.

структура проекта

В корне размещены следующие каталоги:

CSS – здесь будет построен конечный файл style.css.

FONTS – хранилище шрифтов.

IMG – папка для изображений. В подкаталог PRODUCTS будем размещать всё, что относится непосредственно к товарам.

JS – сюда поместим скрипты JavaScript, необходимые для работы слайдеров и, возможно каких-то других интерактивных элементов на сайте.

SCSS – папка для стилей в формате препроцессора, в которой и будет проходить основная работа. Остановимся на её содержимом.

style.scss – основной файл стилей. Он не будет содержать непосредственно код, а только подключение остальных файлов. Пока выглядит вот так

@charset "UTF-8";

@import "normalize";
@import "variables";
@import "fonts";
@import "mixins";
@import "core";

В дальнейшем по мере работе будем добавлять сюда стили отдельных блоков, каждый из которых положим в папку BLOCKS.

_fonts.scss – подключение стилей. Символ нижнего подчёркивания в начале необходим для компилятора, чтобы показать, что этот файл входит в состав другого и не нужно формировать для него отдельный css-файл.

_mixins.scss – сюда поместим миксины. Это будут своего рода «функции» для кнопок и блоков input, заготовки для часто повторяющихся мелких элементов.

_core.scss – базовые стили, которые будут применены ко всем страницам сайта. Нам понадобится всего несколько классов для центрирования контента и прижатия футера.

_variables.scss – сюда вынесем переменные. Например, константы для основных цветов и, возможно, какие-то глобальные размеры.

_normalize.scss – простой файл для обнуления стилей браузера. Существует много вариантов для этой процедуры, разной степени сложности, я буду использовать такой код.

@charset "UTF-8";

/**
 * Сброс стилей
 **/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
input {outline: 0;}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

Индексный файл пока заполним по минимуму, в формате HTML5.

<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="Интернет-магазин одежды">	
	<meta name="keywords" content="интернет-магазин">
	<meta name="robots" content="noindex, nofollow">
	<title>Интернет-магазин на шаблоне Linda</title>
	<link rel="stylesheet" href="css/style.css">
	<meta name="viewport" content="width=device-width">
</head>
<body>

</body>
</html>

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

В шапке указываем кодировку, прописываем мета-теги для СЕО – особой смысловой нагрузки они не несут, но признаком хорошего тона считается их проставить и заполнить хотя бы парой слов. При этом строка 7 вписана, чтобы шаблон не индексировали поисковые системы. В этом есть некоторое противоречие, но на время разработки оставляем всё именно так.

Подключаем основной файл стилей style.css и прописываем тег viewport, необходимый для корректной обработки медиазапросов.

На этом подготовка базовой структуры завершена и можно двигаться дальше. А именно – разобраться со шрифтами макета.