https://github.com/efiand/device

Интернет-магазин гаджетов.
https://github.com/efiand/device

bem favicons gulp portfolio-project postcss posthtml range-slider sprite webpack

Last synced: about 2 months ago
JSON representation

Интернет-магазин гаджетов.

• Host: GitHub
• URL: https://github.com/efiand/device
• Owner: efiand
• Created: 2022-02-21T08:38:42.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-15T08:05:52.000Z (about 1 year ago)
• Last Synced: 2023-10-16T10:42:34.321Z (about 1 year ago)
• Topics: bem, favicons, gulp, portfolio-project, postcss, posthtml, range-slider, sprite, webpack
• Language: CSS
• Homepage: https://efiand.github.io/device/
• Size: 780 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Device

Учебный проект Device от HTML Academy.

[Опубликованная версия](https://efiand.github.io/device)

## Используемые инструменты

* gulp - объединение задач и слежение за изменением файлов

* posthtml + nunjucks - сборка из компонентов и тестирование HTML

* postcss - сборка CSS из компонентов

* webpack - сборка JS из компонентов

* svgo, pngquant, mozjpeg, gulp-svg-sprite - оптимизация графики

## Особенности реализации

* Компонентный подход. Для организации разметки и стилей использована методология БЭМ. Компоненты переиспользуются с разным набором данных, которые можно отдавать как в явном виде (объект, JSON) - так и внедрив API для динамического получения данных. Каждый экземпляр БЭМ-блока при необходимости оживления связан с экземплятом соотв. JS-класса.

* Адаптивная вёрстка "mobile first" - дефолтной является мобильная версия, на которую нет макета, но она представляет собой в основном просто одноколоночный поток данных с чуть меньшими расстояниями и размерами текстов. Медиазапросы строятся от меньшего к большему - таким образом сделана планшетная версия (только часть стилей добавляется для максимального десктопного разрешения).

* Поддержка webp- и retina-изображений через подключение одного универсального компонента.

## Структура

* `public` - рабочий каталог для веб-сервера. Здесь лежат неизменяемые файлы, сюда пересобирается код из исходников. Пересобираемые файлы не коммитятся.

* `source` - каталог исходников.

* `place` - сюда кидаются одиночные изображения или иконки (векторные - для спрайта, растровые - для css). Содержимое не коммитится. Сборка при старте и в режиме разработки следит за наполнением этого каталога, оптимизирует появившиеся файлы и перемещает иконки в исходники, а изображения - в `public`.

## Установка

* Выполните команду `npm i`

## Команды

* `npm run build` - сборка стилей, скриптов, спрайта. Оптимизация изображений

* `npm run dev` - сборка и запуск в режиме раработки