Toxin – сайт для поиска номеров в отеле

Pixel Perfect верстка проекта с использованием Pug, Scss, jQuery, Webpack

Цель:

• Научиться проектировать компонентную архитектуру с помощью pug
• Изучить Pug
• Научиться подключать и настраивать шрифты так, чтобы они корректно отображались в разных браузерах
• Научиться искать, подключать и настраивать JavaScript-библиотеки и jQuery-плагины

Быстрый старт

npm i – установить зависимости проекта

npm run dev – запуск devServer на http://localhost:8081/

Скрипты

npm run dev – запуск devServer на http://localhost:8081/

npm run build – production сборка проекта

npm run puglint – запуск линтера для файлов pug

Используемые библиотеки

• air-datepicker
• ion.rangeSlider
• jQuery-Mask-Plugin
• normalize.css
• slick-carousel
• material-design-icons

Макеты

Landing Page	Search Room	Room Details	Registration	SignIn
Colors & Types	Form Elements	Cards	Headers & Footers

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

├── src/                             # Исходники
│   ├── assets/                      # Подключаемые ресурсы
│   │   ├── fonts/                   # Шрифты используемые в проекте
│   │   ├── img/                     # Изображения используемые в проекте
│   │   └── styles/                  # Стили
│   │       ├── theme/               # Папка с темой проекта
│   │       │   ├── colors.scss      # Файл с переменными цветов
│   │       │   ├── fonts.scss       # Файл с подлючаемыми шрифтами
│   │       │   └── spaces.scss      # Переменные отступов
│   │       └── main.scss            # Файл в который импортируются все стили
│   ├── blocks/                      # Папка с блоками проекта
│   ├── favicons/                    # Фавиконки для разных браузеров
│   ├── layouts/                     # Папка с шаблонами разметки
│   ├── pages/                       # Папка страниц проекта
│   └── pixel-perfect/               # Скриншоты для сверки Pixel Perfect
├── .babelrc                         # Конфигурация компиляции Javascript в es5
├── .eslintrc.json                   # Конфигурация проверки JavaScript в ESLint
├── .gitignore                       # Список исключённых файлов из Git
├── .pug-lintrc                      # Конфигурация проверки pug-файлов
├── package.json                     # Список модулей и прочей информации
├── postcss.config.js                # Конфигурация компиляции стилей
├── README.md                        # Документация шаблона
├── webpack.base.conf.js             # Базовая конфигурация Webpack.js
├── webpack.build.conf.js            # Конфигурация Webpack.js для production сборки
└── webpack.dev.conf.js              # Конфигурация Webpack.js для dev сборки