• Вступление
• Ссылки
• Зависимости
• Начало работы с проектом
• Команды
• Структура проекта
• Использованные технологии
• Лицензия
• Автор

Проект «Глейси» был выполнен в рамках пройденного онлайн‑курса «Базовый HTML и CSS» от HTML Academy.

За основу проекта был взят мой личный boilerplate. Для более детального ознакомления с инфраструктурой проекта тыкайте сюда.

Техническое задание на вёрстку Specification.md.

Главная страница	Страница каталога товаров

_{⇧ back to top}

• Node.js
• NPM или YARN

_{⇧ back to top}

Клонируйте репозиторий, чтобы получить все исходные файлы доступные на Github:

$ git clone https://github.com/redeagleap/gllacy.git

$ cd gllacy/

А затем установите NPM-модули через:

#Ностальжи
npm install

#Хипстер
yarn

Это установит необходимую папку node_modules.

_{⇧ back to top}

С Webpack вы можете использовать следующие NPM Script команды

_{⇧ back to top}

Папка dist/ создается после инициализации (npm run init) проекта. Все скомпилированные и скопированные файлы папок src/ находятся там.

SRC Folderstructure:

src/
├── .system/                          => Internal System Files
├── fonts/                            => Font Files
├── framework/                        => Sass Framework
├── images/                           => All Images
|   ├── bitmapSingle-assets           => Single Bitmap Images
|   ├── bitmapSprite-assets           => Images for Bitmap Sprites
|   ├── htmlimages                    => Content Images (`<img>`)
|   ├── vectorSingle-assets           => Single Vector Images
|   └── vectorSprite-assets           => Vector Images for Vector Sprites
├── js/                               => JS Files (e.g. main.js)
├── scripts/                          => Script files that are not installed
├── structure/                        => Source Files for Copy (e.g. Template Files for a WP Theme)
└── style/                            => Styling Source Files

Dist Folderstructure:

dist/
├── assets/                 => All Assets
|   ├── css/                => CSS Files
|   ├── fonts/              => Font Directory
|   ├── js/                 => Javascript Files
|   └── img/                => Background Image Assets
|       ├── system/         => Images like Favicons
|       ├── bitmaps/        => Bitmap Images
|       └── svgfiles/       => Vector Images
└── images/                 => Content Images

_{⇧ back to top}

Скрипты

• ES2017 - поддержка через компилятор Babel.

• Node - это кросс-платформенная среда выполнения JavaScript с открытым исходным кодом, которая выполняет код JavaScript вне браузера.

Стили

• Sass - является самым зрелым, стабильным и мощным языком расширения CSS профессионального уровня в мире.

• Sassdoc - это система документации для создания красивых и мощных документов в мгновение ока.

• PostCSS - это инструмент для преобразования CSS с помощью JavaScript

• Critical - извлекает CSS наиболее важный, для как можно более скорого отображения начального экрана сайта.

Автоматизация

• Gulp - представляет собой инструментарий для автоматизации болезненных или трудоемких задач в процессе разработки.

• Webpack - это пакет для JavaScript модулей.

Оптимизация

• Imagemin - минимизирует изображения в формате PNG, JPEG, JPG, GIF и SVG.

• Uglify - инструментарий синтаксического анализатора, минификатора, компрессора и улучшения JavaScript.

Сервер

• BrowserSync - синхронизированное тестирование в браузере.

Проверка синтаксиса

• ESlint - линтер для JavaScript.

• HTMLHint - инструмент анализа статического кода для HTML.

• Stylelint - это мощный, современный линтер, который помогает избежать ошибок и применять соглашения в стилях.

• Prettier - для форматирования кода.

Управление кодом

• Editorconfig - помогает разработчикам определять и поддерживать согласованные стили кодирования между различными редакторами и IDE.

• Git - является распределенной системой контроля версий, предназначенной для обработки всего, от небольших до очень больших проектов.

_{⇧ back to top}

Этот проект лицензирован по лицензии MIT - подробности см. В файле LICENSE.

_{⇧ back to top}

Глейси сделано с любовью.
---------------------------------------
Автор : Александр Присяжнюк

Почта : [email protected]

Github : https://github.com/redeagleap/gllacy.git

_{⇧ back to top}