https://github.com/redeagleap/barbershop
Личный проект «Барбершоп», выполненный в рамках пройденного онлайн‑курса «Продвинутый HTML и CSS» от HTML Academy.
https://github.com/redeagleap/barbershop
Last synced: 8 months ago
JSON representation
Личный проект «Барбершоп», выполненный в рамках пройденного онлайн‑курса «Продвинутый HTML и CSS» от HTML Academy.
- Host: GitHub
- URL: https://github.com/redeagleap/barbershop
- Owner: RedEagleAP
- License: mit
- Created: 2019-05-22T15:12:59.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-12T00:17:33.000Z (about 5 years ago)
- Last Synced: 2023-03-21T10:28:55.927Z (about 3 years ago)
- Language: CSS
- Homepage: https://redeagleap.github.io/barbershop/dist/index.html
- Size: 5.95 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Барбершоп Бородинский
# Содержание
- [Вступление](#вступление)
- [Ссылки](#ссылки)
- [Зависимости](#зависимости)
- [Начало работы с проектом](#начало-работы-с-проектом)
- [Команды](#команды)
- [Структура проекта](#структура-проекта)
- [Использованные технологии](#использованные-технологии)
- [Лицензия](#лицензия)
- [Автор](#автор)
## Вступление
Проект «Барбершоп» был выполнен в рамках пройденного онлайн‑курса «Продвинутый HTML и CSS» от HTML Academy.
За основу проекта был взят мой личный [boilerplate](https://github.com/RedEagleAP/light-boilerplate/). Для более детального ознакомления с инфраструктурой проекта тыкайте [сюда](https://github.com/RedEagleAP/light-boilerplate/#readme).
## Ссылки
Главная страница Desktop
Страница с формой Desktop
Страница с фотографиями Desktop
Главная страница Tablet
Страница с формой Tablet
Страница с фотографиями Tablet
Главная страница Mobile
Страница с формой Mobile
Страница с фотографиями Mobile
[⇧ back to top](#contents)
## Зависимости
- [Node.js](https://nodejs.org/en/)
- [NPM](https://www.npmjs.com/) или [YARN](https://yarnpkg.com/lang/en/)
[⇧ back to top](#contents)
## Начало работы с проектом
### Клонируйте репозиторий:
Клонируйте репозиторий, чтобы получить все исходные файлы доступные на Github:
```bash
$ git clone https://github.com/redeagleap/barbershop.git
$ cd barbershop/
```
А затем установите NPM-модули через:
```bash
#Ностальжи
npm install
#Хипстер
yarn
```
Это установит необходимую папку __node_modules__.
[⇧ back to top](#contents)
## Команды
_С Webpack вы можете использовать следующие NPM Script команды_
| Действие | Npm | Yarn |
|-------------------------------------------------------------------------------------------|----------------------|-------------------|
| Инициализация проекта и документации Sass(/sassdocs/) | `npm run init` | `yarn run init` |
| Основная команда для разработки с BrowserSync и Webpack | `npm run dev` | `yarn dev` |
| Сжимает JS, Images, CSS. Предназначен для автоматизированной сборки, после Gulp Init. | `npm run build` | `yarn build` |
| Перестройте все файлы JS, за исключением файла приложения JS. | `npm run scripts` | `yarn scripts` |
| Перестройте все файлы изображений для CSS, создайте растровые и векторные спрайты. | `npm run uiimages` | `yarn uiimages` |
| Скопируйте все файлы изображений для Documentusage. | `npm run htmlassets` | `yarn htmlassets` |
| Сгенерируйте Favicons и фрагмент HTML(сгенерированные файлы вы найдете в `src/ .system/`) | `npm run favicon` | `yarn favicon` |
[⇧ back to top](#contents)
## Структура проекта
Папка `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 (`![]()
`)
| ├── 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](#contents)
## Использованные технологии
**Скрипты**
- [ES2017](https://medium.com/komenco/what-to-expect-from-javascript-es2017-the-async-edition-618e28819711) - поддержка через компилятор [Babel](https://babeljs.io/).
- [Node](https://nodejs.org/) - это кросс-платформенная среда выполнения JavaScript с открытым исходным кодом, которая выполняет код JavaScript вне браузера.
**Стили**
- [Sass](https://sass-lang.com/) - является самым зрелым, стабильным и мощным языком расширения CSS профессионального уровня в мире.
- [Sassdoc](http://sassdoc.com/) - это система документации для создания красивых и мощных документов в мгновение ока.
- [PostCSS](https://postcss.org/) - это инструмент для преобразования CSS с помощью JavaScript
- [Critical](https://github.com/addyosmani/critical) - извлекает CSS наиболее важный, для как можно более скорого отображения начального экрана сайта.
**Автоматизация**
- [Gulp](https://gulpjs.com/) - представляет собой инструментарий для автоматизации болезненных или трудоемких задач в процессе разработки.
- [Webpack](https://webpack.js.org/) - это пакет для JavaScript модулей.
**Оптимизация**
- [Imagemin](https://github.com/imagemin/imagemin) - минимизирует изображения в формате PNG, JPEG, JPG, GIF и SVG.
- [Uglify](https://github.com/mishoo/UglifyJS2) - инструментарий синтаксического анализатора, минификатора, компрессора и улучшения JavaScript.
**Сервер**
- [BrowserSync](http://www.browsersync.io/) - синхронизированное тестирование в браузере.
**Проверка синтаксиса**
- [ESlint](http://eslint.org/) - линтер для JavaScript.
- [HTMLHint](https://htmlhint.io/) - инструмент анализа статического кода для HTML.
- [Stylelint](https://stylelint.io/) - это мощный, современный линтер, который помогает избежать ошибок и применять соглашения в стилях.
- [Prettier](https://prettier.io/) - для форматирования кода.
**Управление кодом**
- [Editorconfig](http://editorconfig.org/) - помогает разработчикам определять и поддерживать согласованные стили кодирования между различными редакторами и IDE.
- [Git](https://git-scm.com/) - является распределенной системой контроля версий, предназначенной для обработки всего, от небольших до очень больших проектов.
[⇧ back to top](#contents)
## Лицензия
Этот проект лицензирован по лицензии MIT - подробности см. В файле [LICENSE](LICENSE).
[](LICENSE)
[⇧ back to top](#contents)
## Автор
```txt
Барбершоп, сделано с любовью.
---------------------------------------
Автор : Александр Присяжнюк
Почта : insightinyourmind@gmail.com
Github : https://github.com/redeagleap/barbershop.git
```
[](https://forthebadge.com)
[⇧ back to top](#contents)