Skip to content

K
kpp
Commit ead43076 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Мелкие правки

parent b21acf88
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 85 deletions
README.md
View file @ ead43076
# Стартовый проект с gulp ![Test Status](https://travis-ci.org/nicothin/NTH-start-project.svg?branch=master) [![devDependencies Status](https://david-dm.org/nicothin/NTH-start-project/dev-status.svg)](https://david-dm.org/nicothin/NTH-start-project?type=dev) [![dependencies Status](https://david-dm.org/nicothin/NTH-start-project/status.svg)](https://david-dm.org/nicothin/NTH-start-project) # Стартовый проект с gulp ![Test Status](https://travis-ci.org/nicothin/NTH-start-project.svg?branch=master) [![devDependencies Status](https://david-dm.org/nicothin/NTH-start-project/dev-status.svg)](https://david-dm.org/nicothin/NTH-start-project?type=dev) [![dependencies Status](https://david-dm.org/nicothin/NTH-start-project/status.svg)](https://david-dm.org/nicothin/NTH-start-project)
## Структура проекта ## Структура проекта
...@@ -20,64 +20,65 @@ src/ ...@@ -20,64 +20,65 @@ src/
При `npm start` (запускается дефолтная задача gulp): При `npm start` (запускается дефолтная задача gulp):
1. Создаётся глобальный объект `nth` с настройками проекта. 1. Создаётся глобальный объект `nth` с настройками проекта.
5. Очищается папка сборки (`build/`). 5. Очищается папка сборки (`build/`).
5. Записывается `src/pug/mixins.pug` и компилируются файлы страниц (`./src/pages/**/*`). 5. Записывается `src/pug/mixins.pug` и компилируются файлы страниц (`src/pages/**/*`).
5. Из скомпилированных страниц извлекаются все классы уровня БЭМ-блока и записываются в `nth.blocksFromHtml`. 5. Из скомпилированных страниц извлекаются все классы уровня БЭМ-блока и записываются в `nth.blocksFromHtml`.
5. Генерируются спрайты, в папку сборки копируются доп. файлы и картинки. 5. Генерируются спрайты, в папку сборки копируются доп. файлы и картинки.
5. Записывается `./src/scss/style.scss`, в котором: 5. Записывается `src/scss/style.scss`, в котором:
- Импорты файлов из `config.js#addStyleBefore`. - Импорты файлов из `config.js#addStyleBefore`.
- Импорты файлов БЭМ-блоков, использующихся на проекте (если их scss-файлы существуют). - Импорты файлов БЭМ-блоков, использующихся на проекте (если их scss-файлы существуют).
- Импорты файлов из `config.js#addStyleAfter`. - Импорты файлов из `config.js#addStyleAfter`.
5. Записывается `./src/js/entry.js`, в котором: 5. Записывается `src/js/entry.js`, в котором:
- `require` файлов из `config.js#addJsBefore`. - `require` файлов из `config.js#addJsBefore`.
- `require` файлов БЭМ-блоков, использующихся на проекте (если их js-файлы существуют). - `require` файлов БЭМ-блоков, использующихся на проекте (если их js-файлы существуют).
- `require` файлов из `config.js#addJsAfter`. - `require` файлов из `config.js#addJsAfter`.
5. Компилируются и обрабатываются PostCSS-ом стили (`./src/scss/style.scss`), собирается скрипт (`./src/js/entry.js`). 5. Компилируются и обрабатываются PostCSS-ом стили (`src/scss/style.scss`), собирается скрипт (`src/js/entry.js`).
5. Запускается локальный сервер и слежение за файлами для пересборки. 5. Запускается локальный сервер и слежение за файлами для пересборки.
## Прочие команды ## Прочие команды
`npm run build` — Сборка со сжатыми css- и js-файлами `npm run build` — Сборка со сжатыми css- и js-файлами
`npm run deploy` — Сборка проекта без карт кода и отправка содержимого папки сборки на gh-pages `npm run deploy` — Сборка проекта без карт кода и отправка содержимого папки сборки на gh-pages
## Как начать новый проект c этим репозиторием ## Как начать новый проект c этим репозиторием
1. Клонировать этот репозиторий в новую папку (`git clone https://github.com/nicothin/NTH-start-project.git new-project`, см. [шпаргалку](https://github.com/nicothin/web-development/tree/master/git#%D0%9A%D0%BB%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D1%8F)) и зайти в неё (`cd new-project`). 1. Клонировать этот репозиторий в новую папку (`git clone https://github.com/nicothin/NTH-start-project.git new-project`, см. [шпаргалку](https://github.com/nicothin/web-development/tree/master/git#%D0%9A%D0%BB%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D1%8F)) и зайти в неё (`cd new-project`).
2. Стереть историю разработки этого репозитория (`rm -rf .git`), инициировать новый (`git init`), создать удалённый репозиторий и привязать его (`git remote add origin АДРЕС`, см. [шпаргалку](https://github.com/nicothin/web-development/tree/master/git#%D0%A3%D0%B4%D0%B0%D0%BB%D1%91%D0%BD%D0%BD%D1%8B%D0%B5-%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B8)). 2. Стереть историю разработки этого репозитория (`rm -rf .git`), инициировать новый (`git init`), создать удалённый репозиторий и привязать его (`git remote add origin АДРЕС`, см. [шпаргалку](https://github.com/nicothin/web-development/tree/master/git#%D0%A3%D0%B4%D0%B0%D0%BB%D1%91%D0%BD%D0%BD%D1%8B%D0%B5-%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B8)).
3. Отредактировать `LICENSE`, `README.md`, `package.json` (название проекта, автор, лицензия, необходимые пакеты и пр.) и `config.js` (нужные на проекте блоки, сторонние пакеты). Удалив пакет из `package.json`, не забудьте убрать его из `config.js`. 3. Отредактировать `LICENSE`, `README.md`, `package.json` (название проекта, автор, лицензия, необходимые пакеты и пр.) и `config.js` (нужные на проекте блоки, сторонние пакеты). Удалив пакет из `package.json`, не забудьте убрать его из `config.js`.
4. Установить зависимости (`npm i`). 4. Установить зависимости (`npm i`).
5. Запустить сервер разработки (`npm start`). 5. Запустить сервер разработки (`npm start`).
6. Возможно, удалить страницу библиотеки блоков (`src/pages/blocks-demo.pug`).
## Парадигма ## Парадигма
- Именование классов по БЭМ, разметка в [pug](https://pugjs.org/) и стилизация [Sass](http://sass-lang.com/). См. [Как работать с CSS-препроцессорами и БЭМ](http://nicothin.github.io/idiomatic-pre-CSS/) - Именование классов по БЭМ, разметка в [pug](https://pugjs.org/) и стилизация [Sass](http://sass-lang.com/). См. [Как работать с CSS-препроцессорами и БЭМ](http://nicothin.github.io/idiomatic-pre-CSS/)
- Каждый БЭМ-блок в своей папке внутри `src/blocks/`. - Каждый БЭМ-блок в своей папке внутри `src/blocks/`.
- Список использованных в проекте доп. файлов указан в `config.js`. - Список использованных в проекте доп. файлов указан в `config.js`.
- Есть глобальные файлы: стилевые (стили печати), js (по умолчанию пуст), шрифты, картинки. - Есть глобальные файлы: стилевые (стили печати), js (по умолчанию пуст), шрифты, картинки.
- Список pug-примесей `src/pug/mixins.pug` генерируется автоматически, содержит `include` всех существующих pug-файлов блоков. - Список pug-примесей `src/pug/mixins.pug` генерируется автоматически, содержит `include` всех существующих pug-файлов блоков.
- Диспетчер подключения стилей `src/scss/style.scss` генерируется автоматически. - Диспетчер подключения стилей `src/scss/style.scss` генерируется автоматически.
- Входная точка обработки js (`src/js/entry.js`) генерируется автоматически. - Входная точка обработки js (`src/js/entry.js`) генерируется автоматически.
- Перед созданием коммита запускается проверка файлов, входящих в коммит. При наличии ошибок коммит не происходит, ошибки будут выведены в терминал. - Перед созданием коммита запускается проверка файлов, входящих в коммит. При наличии ошибок коммит не происходит, ошибки будут выведены в терминал.
- Есть механизм быстрого создания нового блока: `node createBlock.js new-block` (создаёт файлы, папки). - Есть механизм быстрого создания нового блока: `node createBlock.js new-block` (создаёт файлы, папки).
## Разметка ## Разметка
Используется [pug](https://pugjs.org/api/getting-started.html). HTML никак не обрабатывается. Используется [pug](https://pugjs.org/api/getting-started.html). HTML никак не обрабатывается.
По умолчанию используются [наследование шаблонов](https://pugjs.org/language/inheritance.html) — все страницы (см. `src/index.pug`) являются расширениями шаблонов, в страницах описывается только содержимое «шапки», «подвала» и контентной области посредством [блоков](https://pugjs.org/language/inheritance.html#block-append-prepend). По умолчанию используются [наследование шаблонов](https://pugjs.org/language/inheritance.html) — все страницы (см. `src/index.pug`) являются расширениями шаблонов, в страницах описывается только содержимое «шапки», «подвала» и контентной области посредством [блоков](https://pugjs.org/language/inheritance.html#block-append-prepend).
Каждый блок (в `src/blocks/`) может содержать pug-файл с одноименной примесью, который будет взят includ-ом в файле `src/pug/mixins.pug`. Каждый блок (в `src/blocks/`) может содержать pug-файл с одноименной примесью, который будет взят includ-ом в файле `src/pug/mixins.pug`.
## Стили ## Стили
Диспетчер подключений (`src/scss/style.scss`) формируется автоматически, писать в него что-либо руками бессмысленно: при старте автоматизации файл будет перезаписан. Диспетчер подключений (`src/scss/style.scss`) формируется автоматически, писать в него что-либо руками бессмысленно: при старте автоматизации файл будет перезаписан.
Используемый постпроцессинг: Используемый постпроцессинг:
...@@ -85,26 +86,26 @@ src/ ...@@ -85,26 +86,26 @@ src/
2. [css-mqpacker](https://github.com/hail2u/node-css-mqpacker) 2. [css-mqpacker](https://github.com/hail2u/node-css-mqpacker)
3. [postcss-import](https://github.com/postcss/postcss-import) 3. [postcss-import](https://github.com/postcss/postcss-import)
4. [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg) 4. [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg)
6. [postcss-object-fit-images](https://github.com/ronik-design/postcss-object-fit-images) (в паре с [полифилом](https://github.com/bfred-it/object-fit-images)) 6. [postcss-object-fit-images](https://github.com/ronik-design/postcss-object-fit-images) (в паре с [полифилом](https://github.com/bfred-it/object-fit-images))
### Модульная сетка (flexbox) ### Модульная сетка (flexbox)
По умолчанию в сборку берётся [файл с примесями](https://github.com/nicothin/NTH-start-project/blob/master/src/scss/mixins/grid-mixins.scss), возвращающими правила модульной сетки. Никаких селекторов в CSS не добавляет, нужно писать семантические селекторы и вызывать примеси, передавая им настройки сетки. Настройки по умолчанию вынесены в переменные (`$grid-columns: 12;` и `$grid-gutter-width: 30px;`). По умолчанию в сборку берётся [файл с примесями](https://github.com/nicothin/NTH-start-project/blob/master/src/scss/mixins/grid-mixins.scss), возвращающими правила модульной сетки. Никаких селекторов в CSS не добавляет, нужно писать семантические селекторы и вызывать примеси, передавая им настройки сетки. Настройки по умолчанию вынесены в переменные (`$grid-columns: 12;` и `$grid-gutter-width: 30px;`).
Посмотреть примеры и попробовать вживую можно в [этом примере с codepen.io](https://codepen.io/nicothin/pen/aJEOwE?editors=1100). Посмотреть примеры и попробовать вживую можно в [этом примере с codepen.io](https://codepen.io/nicothin/pen/aJEOwE?editors=1100).
## Блоки ## Блоки
Каждый блок лежит в `src/blocks/` в своей папке. Каждый блок лежит в `src/blocks/` в своей папке.
Возможное содержимое блока: Возможное содержимое блока:
```bash ```bash
demo-block/ # Папка блока. demo-block/ # Папка блока.
bg-img/ # Изображения для использования в стилях (не обрабатываются автоматикой сборки). bg-img/ # Изображения для использования в стилях (не обрабатываются автоматикой сборки).
img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки. img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки.
demo-block.pug # Разметка (pug-примесь, отдающая разметку блока, описание API примеси). demo-block.pug # Разметка (pug-примесь, отдающая разметку блока, описание API примеси).
demo-block.scss # Стилевой файл блока. demo-block.scss # Стилевой файл блока.
demo-block.js # js-файл блока. demo-block.js # js-файл блока.
...@@ -114,24 +115,24 @@ demo-block/ # Папка блока. ...@@ -114,24 +115,24 @@ demo-block/ # Папка блока.
## Подключение блоков ## Подключение блоков
Если блок (css-класс блока) использован в разметке, то блок будет взят в сборку. Если блок (css-класс блока) использован в разметке, то блок будет взят в сборку.
Если нужно взять в сборку блок без использования его класса в разметке, нужно упомянуть блок в `config.js#alwaysAddBlocks`. Если нужно взять в сборку блок без использования его класса в разметке, нужно упомянуть блок в `config.js#alwaysAddBlocks`.
## Удобное создание нового блока ## Удобное создание нового блока
Предусмотрена команда для быстрого создания файловой структуры нового блока. По умолчанию создаются: scss-файл и подпапки `img`, `bg-img` Предусмотрена команда для быстрого создания файловой структуры нового блока. По умолчанию создаются: scss-файл и подпапки `img`, `bg-img`
```bash ```bash
# формат: node createBlock.js ИМЯБЛОКА [доп. расширения через пробел] # формат: node createBlock.js ИМЯБЛОКА [доп. расширения через пробел]
node createBlock.js block-test # создаст папку блока, block-test.scss, подпапки img/ и bg-img/ для этого блока node createBlock.js block-test # создаст папку блока, block-test.scss, подпапки img/ и bg-img/ для этого блока
node createBlock.js block-test pug js # создаст папку блока, block-test.scss, block-test.pug, block-test.js, подпапки img/ и bg-img/ для этого блока node createBlock.js block-test pug js # создаст папку блока, block-test.scss, block-test.pug, block-test.js, подпапки img/ и bg-img/ для этого блока
``` ```
Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют. Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.
## Нравится проект? ## Нравится проект?
Ставьте звезду в верхнем правом углу и/или [угостите меня кофе](https://money.yandex.ru/to/41001252765094), переведя сколь угодно символическую сумму. Ставьте звезду в верхнем правом углу и/или [угостите меня кофе](https://money.yandex.ru/to/41001252765094), переведя сколь угодно символическую сумму.
src/blocks/page/page.scss
View file @ ead43076
...@@ -3,46 +3,8 @@ ...@@ -3,46 +3,8 @@
// Подключение шрифтов. // Подключение шрифтов.
// Типографика. // Типографика.
$gray: hsl(0, 0%, 50%) !default;
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$font-size--root: 16px !default; // Сделаем viewport великим снова! (привет, IE10) http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
$font-size: 1rem !default; // rem(16px)
$font-size--h1: rem(40px) !default;
$font-size--h2: rem(32px) !default;
$font-size--h3: rem(24px) !default;
$font-size--h4: rem(18px) !default;
$font-size--h5: rem(16px) !default;
$font-size--h6: rem(16px) !default;
$font-size--small: 80% !default;
$line-height: 1.5 !default;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif !default;
$font-family--monospace: SFMono-Regular, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !default;
$font-family--headings: $font-family !default;
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$border-radius: 3px !default;
$body-bg: #fff !default;
$link-color: hsl(208, 98%, 43%) !default;
$link-color--hover: darken(hsl(208, 98%, 43%), 15%) !default;
$screen-sm: 480px !default;
$screen-xl: 1200px !default;
// Сделаем viewport великим снова! (привет, IE10)
// http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@at-root { @at-root {
@-ms-viewport { @-ms-viewport {
...@@ -50,6 +12,8 @@ $screen-xl: 1200px !default; ...@@ -50,6 +12,8 @@ $screen-xl: 1200px !default;
} }
} }
/* stylelint-disable */
// @font-face { // @font-face {
// font-family: 'FONTNAME'; // font-family: 'FONTNAME';
// src: url('../fonts/FONTNAME.woff2') format('woff2'), // src: url('../fonts/FONTNAME.woff2') format('woff2'),
...@@ -58,6 +22,8 @@ $screen-xl: 1200px !default; ...@@ -58,6 +22,8 @@ $screen-xl: 1200px !default;
// font-style: normal; // font-style: normal;
// font-display: swap; // font-display: swap;
// } // }
/* stylelint-enable */
.page { // html .page { // html
...@@ -99,7 +65,7 @@ $screen-xl: 1200px !default; ...@@ -99,7 +65,7 @@ $screen-xl: 1200px !default;
body { body {
display: flex; // Исправляем баг в IE для min-height and flexbox (flex-direction:column) display: flex; // Исправляем баг в IE для min-height and flexbox (flex-direction:column)
flex-direction: column; // и прижимаем footer в IE 10-11 flex-direction: column; // и прижимаем footer в IE 10-11
background-color: #fff; background-color: $body-bg;
margin: 0; margin: 0;
min-height: 100%; min-height: 100%;
word-break: break-word; word-break: break-word;
...@@ -197,9 +163,9 @@ a { ...@@ -197,9 +163,9 @@ a {
color: $link-color--hover; color: $link-color--hover;
} }
&:visited { // &:visited {
color: $link-color--hover; // color: $link-color--hover;
} // }
&[href^="tel:"] { &[href^="tel:"] {
...@@ -340,10 +306,10 @@ sup { ...@@ -340,10 +306,10 @@ sup {
} }
// .mark, // .mark,
mark { // mark {
background: rgba($color-warning, 0.3); // background: rgba($color-warning, 0.3);
padding: 0.1em 0.3em; // padding: 0.1em 0.3em;
} // }
b, b,
strong { strong {
...@@ -360,10 +326,10 @@ blockquote { ...@@ -360,10 +326,10 @@ blockquote {
margin-right: 0; margin-right: 0;
} }
// samp,
code, code,
kbd, kbd,
pre, pre {
samp {
font-family: $font-family--monospace; font-family: $font-family--monospace;
} }
......
src/scss/variables.scss
View file @ ead43076
...@@ -28,7 +28,7 @@ $body-bg: $white; ...@@ -28,7 +28,7 @@ $body-bg: $white;
$link-color: $color-main; $link-color: $color-main;
$link-color--hover: darken($color-main, 15%); $link-color--hover: darken($color-main, 15%);
$border-color: $gray-light; $border-color: $gray-lighten;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment