Структура и описание папок
_html/ — html шаблоны проекта (сделано для удобства, чтобы при сборке шаблоны не путались в корне)
_temp/ — временные файлы проекта, которые при сборке будут заменены на пользовательские
jx/ — примеры AJAX ответов. В общем случае это JSON файлы.
img/ — примеры изображений
css/ — css-стили проекта
fonts/ — шрифты
img/ — изображения, использующиеся для оформления.
При использовании в css изображения в корне директории рекомендуется подключать через Compass-функцию image-url
Избражения в sprite-директориях используются через миксины (s/ps, svg/psvg)
sprite-general/ — PNG-изображения, которые в последствии будут автоматически объеденены в спрайт, используя Compass
sprite-svg/ — SVG-файлы, которые в последствии будут сконвертированы в data-uri и вставлены в css при компиляции
png/ — fallback. PNG-изображения для браузеров не поддерживающих inline-svg.
Для каждого SVG-файла должен быть соответствующий png с таким же названием.
Наличие png обязательно, даже в проектах не ориентированных на устаревшие браузеры,
так как они используются для задания размеров SVG.
js/ — JS файлы проекта
plugins/ — сторонние плагины. Впоследствии автоматически сжимаются в файлы plugins.js и plugins.min.js через Grunt
general/ — библиотеки не подлежащие сжатию. Частные случаи (например jquery, modernizr),
которые подключаются раньше остальных
main.js — основной JS-файл проекта, при необходимости создания отдельных файлов, их необходимо добавить в gruntfile.js.
В последствии сжимается в main.min.js для подключения на продакшне.
sass/ — SASS файлы
lib/ — вспомогательные файлы
_base.scss — объединияет все вспомогательные файлы. Удобен для последующего подключения в результирующий sass-файл
_media.scss — миксины для удобного использования медиа-выражений. Имеются предустановки для популярных девайсов
_mixins.scss — общие миксины
_reset.sass — reset предустановленных стилей. Компиляция из reset.css от Eric Meyer и normalize.css.
Что позволяет не сбрасывать отступы для каждого элементы, и нормализует вид элементов в браузерах
_sprites.sass — миксины для удобного использования Compass-sprites. Здесь задаются глобальные переменные для спрайтов
pages/ — отдельные файлы для каждого шаблона проекта
vendor/ — стили подключаемых JS библиотек
_common.sass — описание общих элементов проекта, которые могут появлятся в разных контекстах, в разных шаблонах
_fonts.sass — подключаемые шрифты. Рекомендуется подключать через Compass-функцию font-url
_layout.sass — описание общего лэйаута шаблонов
_typo.sass — типографические стили. По умолчанию применяются в блоке с классом static-text
_vars.sass — переменные проекта
main.sass — результирующий файл, который в последствии собирается в css-файл.
В нужном порядке подключаются SASS-файлы.
Модульность SASS структуры позволяет собирать css-файлы с использование только некоторых компонентов.
Например для шаблона 404-й страницы, где не требуются стили остальных страниц.
.gitignore — перечисление игнорируемых git файлов при коммите
gruntfile.js — конфигурационный файл системы для сборки Grunt
package.json — описательный файл используемых node-модулей. Нужен для работы Grunt
robots.txt — инструкции к поисковым роботам
В проекте используется Grunt
Это система сборки для фронтенда, которая работает под любой ОС.
Для работы с Grunt в ОС должен быть установлен NodeJS.
После установки NodeJS в командной строке нужно установить grunt для всей системы.
npm install -g grunt-cli
Затем, в папке проекта нужно выполнить 2 команды:
- npm install (установит нужные библиотеки для проекта)
- grunt (запустит локальный сервер и будет следить за изменениями в файлах)
После этого текущий проект будет доступен по адресу, который выведется в командной строке (по умолчанию 127.0.0.1:3002) При сохранении файлов, grunt будет автоматически собирать проект и обновлять браузер