Skip to content

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

Обновление зависимостей и структуры

parent eb94fa72
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 191 deletions
README.md
View file @ ed6da1bc
......@@ -4,17 +4,15 @@
ВНИМАНИЕ! Этот проект в разработке (призван систематизировать мои личные наработки из области вёрстки), я добавляю и меняю в нем довольно много всего. Это даже не альфа. Периодически может выглядеть странно и не менее странно работать.
Установка: `npm i`.
Использование: `npm start`. После `npm start` можно через пробел указать задачу. К примеру `npm start less` выполнит только задачу `less` из `gulpfile.js` (полный список задач смотри в `gulpfile.js`).
`npm run build` — сборка проекта без карт кода (минифицированый вид, как результат работы).
`npm run deploy` — сборка проекта без карт кода и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в `package.json`).
`npm test` — запуск проверки `.less`-файлов Stylelint-ом.
`port=3004 npm start` — для запуска сервера автообновлений на указанном порту.
Команда | Результат
------------ | -------------
`npm i` | Установить зависимости
`npm start` | Запустить сборку, сервер и слежение за файлами
`port=3004 npm start` | Запустить сборку, сервер (на указанном порту) и слежение за файлами
`npm start ЗАДАЧА` | Запустить конкретную задачу из `gulpfile.js`
`npm run build` | Сборка проекта без карт кода (минифицированый вид, как результат работы)
`npm run deploy` | Сборка проекта без карт кода и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в `package.json`)
`npm test` | и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в `package.json`)
......@@ -22,10 +20,10 @@
- Используется именование классов и файлов по БЭМ.
- Каждый БЭМ-блок в своей папке внутри `/src/blocks/` (less, js, картинки, разметка; обязателен только less-файл).
- Есть глобальные файлы: css, js, шрифты, картинки, less-файлы (переменные, глобальная стилизация...).
- Есть диспетчер подключений `/src/less/style.less`. Если в нем импортирован less-файл какого-либо блока, этот блок считается используемым (обрабатывается его js и доп. файлы).
- Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include) — обычное включение разметки мелких файлов внутрь больших файлов с возможностью передавать какие-то данные в мелкие файлы. А можно и не использовать.
- **Перед коммитом происходит проверка `.less`-файлов** на соответствие правилам Stylelint (см. `.stylelintrc` в корне проекта). Если выявлены ошибки, коммит не будет создан, нужно исправить ошибки, переиндексировать файлы и сделать коммит.
- Есть глобальные файлы: css, js, шрифты, картинки, less-файлы (переменные, глобальная стилизация).
- Есть диспетчер подключений `/src/less/style.less`, если в нем импортирован less-файл какого-либо блока, этот блок считается используемым (обрабатывается его js и доп. файлы).
- Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include). А можно и не использовать.
- **Перед коммитом происходит проверка `.less`-файлов** на соответствие правилам Stylelint (см. `.stylelintrc` в корне проекта). Если выявлены ошибки, коммит не будет создан.
......@@ -107,7 +105,6 @@ src/ # Исходные файлы
img/ # - глобальные картинки (будут обработаны только из корня этой папки, подпапки игнорируются)
js/ # - глобальный js-файл (обработается только если существует и не пустой), фреймворки (только копируются, могут быть подключены вручную)
less/ # - диспетчер подключений и глобальные стили
blocks_library.html # библиотека блоков проекта
index.html # главная страница проекта
```
......@@ -116,14 +113,3 @@ src/ # Исходные файлы
## Комментирование для разработчиков
Для разметочных файлов можно использовать комментарии вида `<!--DEV Комментарий -->` — такие комментарии не попадут в собранный html.
## Выгрузка на gh-pages
Содержимое проекта можно быстро «выгрузить» на [gh-pages](https://help.github.com/articles/user-organization-and-project-pages/#project-pages) (автоматически запушить содержимое папки `build/` в ветку `gh-pages` репозитория проекта). Адрес для просмотра будет таким: http://USERNAME.github.io/PROJECTNAME/ (полное повторений файловой структуры папки `build/`).
```bash
npm run deploy # собрать проект без карт кода и отправить на gh-pages
```
gulpfile.js
View file @ ed6da1bc
......@@ -232,8 +232,8 @@ gulp.task('js', function (callback) {
// Копирование JS-библиотек (если есть)
gulp.task('js:copy', function (callback) {
let jsLibs = [];
if(fileExistAndHasContent(dirs.source + '/js/jquery.js')) {
jsLibs.push(dirs.source + '/js/jquery.js');
if(fileExistAndHasContent(dirs.source + '/js/jquery.3.1.1.min.js')) {
jsLibs.push(dirs.source + '/js/jquery.3.1.1.min.js');
}
if(jsLibs){
console.log('---------- Копирование JS-библиотек');
......
src/_include/page_bottom.html
View file @ ed6da1bc
<!--DEV Такой комментарий не попадет в собранный HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.2.2.0.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.3.1.1.min.js"><\/script>')</script>
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.3.1.1.min.js"><\/script>')</script>
<script src="js/script.min.js"></script>
src/blocks/demo-block/demo-block--mod.js deleted 100644 → 0
View file @ eb94fa72
// Интерактив модификатора
// Этот файл попадет в сборку только если в диспетчере подключений будет импортирован одноименный less-файл.
alert('Тестовый компонент: в сборку js взят файл demo-block--mod.js');
src/blocks/demo-block/demo-block--mod.less deleted 100644 → 0
View file @ eb94fa72
// Опциональный модификатор блока
// Этот файл может не быть импортирован в диспетчере подключений, если эта модификация не нужна на проекте.
.demo-block--mod {
color: #ff0;
}
src/blocks/demo-block/demo-block.css deleted 100644 → 0
View file @ eb94fa72
// Главный стилизационный файл блока
// Если этот файл не импортирован в диспетчере подключений, блок на проекте, видимо, не используется.
.demo-block {
display: block;
}
src/blocks/demo-block/demo-block.html deleted 100644 → 0
View file @ eb94fa72
<!--DEV Пример разметки, используемый на проекте -->
<div class="demo-block">Тестовый блок</div>
src/blocks/demo-block/demo-block.js deleted 100644 → 0
View file @ eb94fa72
// Главный js блока
// Этот файл попадет в сборку только если в диспетчере подключений будет импортирован одноименный less-файл
alert('Тестовый компонент: в сборку js взят файл demo-block.js');
src/blocks/demo-block/demo-block.less deleted 100644 → 0
View file @ eb94fa72
// Главный стилизационный файл блока
// Если этот файл не импортирован в диспетчере подключений, блок на проекте, видимо, не используется.
.demo-block {
display: block;
}
src/blocks/demo-block/readme.md deleted 100644 → 0
View file @ eb94fa72
Демонстрационный блок.
src/fonts/readme.md
View file @ ed6da1bc
Файлы шрифтов из этой папки копируются в папку сборки.
Файлы шрифтов из этой папки копируются в папку сборки.
Предпочтительно использовать [fontsquirell](http://www.fontsquirrel.com/tools/webfont-generator) или [jaicab.com/localFont/](http://jaicab.com/localFont/) для создания CSS со шрифтами.
Символы, которые имеет смысл брать в шрифт:
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¢£¥¨©«®´¸»ˆ˚˜ЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяё‐‑‒–—―‘’‚“”„…‰‹›€™
` !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¢£¥¨©«®´¸»ˆ˚˜ЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяё‐‑‒–—―‘’‚“”„…‰‹›€™`
Приложен конфиг для [fontsquirrel.com](http://www.fontsquirrel.com/tools/webfont-generator)
Приложен файл конфигурации для [fontsquirrel.com](http://www.fontsquirrel.com/tools/webfont-generator)
src/index.html
View file @ ed6da1bc
......@@ -2,18 +2,18 @@
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок</title>
<meta name="description" content="">
@@include('_include/page_head.html')
<meta charset="utf-8">
<title>NTH start project</title>
<meta name="description" content="">
@@include('_include/page_head.html')
</head>
<body>
@@include('blocks/page-header/page-header.html')
<h1>Содержимое</h1>
<h1>NTH start project</h1>
@@include('blocks/page-footer/page-footer.html')
@@include('_include/page_bottom.html')
<p><img src="img/joker.jpg" alt="" width="824" height="460"></p>
@@include('_include/page_bottom.html')
</body>
</html>
src/js/jquery.3.1.1.min.js 0 → 100644
View file @ ed6da1bc
This diff is collapsed.
src/js/jquery.js deleted 100644 → 0
View file @ eb94fa72
This diff is collapsed.
src/js/readme.md
View file @ ed6da1bc
# Javascript
Файлы иэ этой папки предполагается конкатенировать в один и углифицировать. Очередность конкатенации определяется в `gulpfile.js` вручную.
Файлы из этой папки предполагается конкатенировать в один и сжимать. Очередность конкатенации определяется в `gulpfile.js` вручную.
**ВНИМАНИЕ!** По умолчанию из этой папки в сборку берется только `global-script.js`.
......@@ -8,4 +8,4 @@
## Если нужно добавить какие-то JS-файлы
Создайте [Блок](https://github.com/nicothin/NTH-start-project#Блоки) и подключите less-файл этого блока в диспетчере подключений. Очередность подключения js-файлов блоков определяется очередностью подключений less-файлов блоков.
Создайте блок в папке `src/` и подключите less-файл этого блока в диспетчере подключений. Очередность подключения js-файлов блоков определяется очередностью подключений less-файлов блоков.
src/less/global/global-scaffolding.less → src/less/global.less
View file @ ed6da1bc
......@@ -65,16 +65,12 @@ textarea {
html {
box-sizing: border-box;
font-size: 8px;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 1);
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
min-width: 320px;
min-height: 100%;
@media (min-width: @screen-sm) {
font-size: 10px;
}
}
body {
......@@ -157,11 +153,6 @@ h6 {
font-weight: 700;
line-height: 1.4;
color: currentColor;
// small {
// color: @gray;
// font-weight: 400;
// }
}
// .h1,
......@@ -244,7 +235,7 @@ hr {
// .small,
small {
font-size: @font-size--small-percent;
font-size: @font-size--small;
}
sub,
......
src/less/mixins.less 0 → 100644
View file @ ed6da1bc
@import 'mixins/grid-mixins.less';
@import 'mixins/responsive-mixins.less';
@import 'mixins/forms-mixins.less';
src/less/mixins/mixins.less deleted 100644 → 0
View file @ eb94fa72
@import 'grid-mixins.less';
@import 'responsive-mixins.less';
@import 'forms-mixins.less';
src/less/readme.md deleted 100644 → 0
View file @ eb94fa72
Глобальные стилевые файлы и диспетчер подключений. Стилизация блоков — в папках блоков.
src/less/style.less
View file @ ed6da1bc
// ВНИМАНИЕ! В этом файле нельзя использовать блочные комментарии (/* ... */), только строчные! (//)
// В этом файле нельзя писать селекторы! Есть несколько глобальных файлов стилей, остальное должно
// быть по принципу БЭМ-блок = отдельный файл. Смотри http://nicothin.github.io/idiomatic-pre-CSS/
// В этом файле нельзя писать селекторы! Смотри http://nicothin.github.io/idiomatic-pre-CSS/
@import './src/less/variables.less';
@import './src/less/mixins/mixins.less';
@import './src/less/mixins.less';
@import './src/less/global.less';
@import './src/less/global/global-scaffolding.less';
@import './src/less/global/global-print.less';
// @import './src/blocks/demo-block/demo-block.less';
@import './src/blocks/page-header/page-header.less';
@import './src/blocks/page-footer/page-footer.less';
@import './src/blocks/navbar/navbar.less';
@import './src/blocks/logo/logo.less';
@import './src/blocks/main-nav/main-nav.less';
@import './src/blocks/dl-horizontal/dl-horizontal.less';
@import './src/blocks/blockquote-right/blockquote-right.less';
@import './src/blocks/blocks-library/blocks-library.less';
@import './src/blocks/btn/btn.less';
@import './src/blocks/table/table.less';
@import './src/blocks/table/table--hover.less';
@import './src/blocks/table/table--striped.less';
@import './src/blocks/table/table--not-greed.less';
@import './src/blocks/table-responsive/table-responsive.less';
@import './src/blocks/table-responsive/table-responsive--horizontal.less';
@import './src/blocks/table-responsive-scroll/table-responsive-scroll.less';
@import './src/blocks/table-responsive-rotate/table-responsive-rotate.less';
@import './src/blocks/table-responsive-rotate/table-responsive-rotate--thead-fix.less';
@import './src/blocks/field-text/field-text.less';
@import './src/blocks/field-checkbox/field-checkbox.less';
@import './src/blocks/field-checkbox/field-checkbox--custom.less';
@import './src/blocks/field-radio/field-radio.less';
@import './src/blocks/field-radio/field-radio--custom.less';
@import './src/blocks/field-select/field-select.less';
@import './src/blocks/field-range/field-range.less';
@import './src/blocks/field-range/field-range__line.less';
@import './src/blocks/field-file/field-file.less';
@import './src/blocks/field-actions/field-actions.less';
@import './src/blocks/form/form.less';
@import './src/blocks/form/form--horizontal.less';
@import './src/blocks/form/form--line.less';
@import './src/blocks/thumb/thumb.less';
@import './src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.less';
@import './src/blocks/field-toggler/field-toggler.less';
@import './src/blocks/dropdown/dropdown.less';
@import './src/blocks/fields-group/fields-group.less';
@import './src/blocks/fields-group/fields-group__item--dropdown.less';
@import './src/blocks/btn-group/btn-group.less';
@import './src/blocks/list-nums/list-nums.less';
@import './src/blocks/list-nums/list-nums--main.less';
@import './src/blocks/list-nums/list-nums__item.less';
@import './src/blocks/list-bullet/list-bullet.less';
@import './src/blocks/step-list/step-list.less';
@import './src/blocks/label/label.less';
@import './src/blocks/label/label__detail.less';
@import './src/blocks/label/label--absolute.less';
@import './src/blocks/label/label--tag.less';
@import './src/blocks/label/label--circle.less';
@import './src/blocks/alert/alert.less';
@import './src/blocks/alert/alert--danger-invert.less';
@import './src/blocks/alert/alert--success-invert.less';
@import './src/blocks/alert/alert--icon.less';
@import './src/blocks/alert/alert__close.less';
@import './src/blocks/alert-area/alert-area.less';
@import './src/blocks/loader/loader.less';
@import './src/blocks/code/code.less';
@import './src/blocks/collapse/collapse.less';
@import './src/blocks/toggler-burger/toggler-burger.less';
@import './src/blocks/to-top/to-top.less';
// @import './src/blocks/page-header/page-header.less';
// @import './src/blocks/page-footer/page-footer.less';
// @import './src/blocks/navbar/navbar.less';
// @import './src/blocks/logo/logo.less';
// @import './src/blocks/main-nav/main-nav.less';
// @import './src/blocks/dl-horizontal/dl-horizontal.less';
// @import './src/blocks/blockquote-right/blockquote-right.less';
// @import './src/blocks/blocks-library/blocks-library.less';
// @import './src/blocks/btn/btn.less';
// @import './src/blocks/table/table.less';
// @import './src/blocks/table/table--hover.less';
// @import './src/blocks/table/table--striped.less';
// @import './src/blocks/table/table--not-greed.less';
// @import './src/blocks/table-responsive/table-responsive.less';
// @import './src/blocks/table-responsive/table-responsive--horizontal.less';
// @import './src/blocks/table-responsive-scroll/table-responsive-scroll.less';
// @import './src/blocks/table-responsive-rotate/table-responsive-rotate.less';
// @import './src/blocks/table-responsive-rotate/table-responsive-rotate--thead-fix.less';
// @import './src/blocks/field-text/field-text.less';
// @import './src/blocks/field-checkbox/field-checkbox.less';
// @import './src/blocks/field-checkbox/field-checkbox--custom.less';
// @import './src/blocks/field-radio/field-radio.less';
// @import './src/blocks/field-radio/field-radio--custom.less';
// @import './src/blocks/field-select/field-select.less';
// @import './src/blocks/field-range/field-range.less';
// @import './src/blocks/field-range/field-range__line.less';
// @import './src/blocks/field-file/field-file.less';
// @import './src/blocks/field-actions/field-actions.less';
// @import './src/blocks/form/form.less';
// @import './src/blocks/form/form--horizontal.less';
// @import './src/blocks/form/form--line.less';
// @import './src/blocks/thumb/thumb.less';
// @import './src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.less';
// @import './src/blocks/field-toggler/field-toggler.less';
// @import './src/blocks/dropdown/dropdown.less';
// @import './src/blocks/fields-group/fields-group.less';
// @import './src/blocks/fields-group/fields-group__item--dropdown.less';
// @import './src/blocks/btn-group/btn-group.less';
// @import './src/blocks/list-nums/list-nums.less';
// @import './src/blocks/list-nums/list-nums--main.less';
// @import './src/blocks/list-nums/list-nums__item.less';
// @import './src/blocks/list-bullet/list-bullet.less';
// @import './src/blocks/step-list/step-list.less';
// @import './src/blocks/label/label.less';
// @import './src/blocks/label/label__detail.less';
// @import './src/blocks/label/label--absolute.less';
// @import './src/blocks/label/label--tag.less';
// @import './src/blocks/label/label--circle.less';
// @import './src/blocks/alert/alert.less';
// @import './src/blocks/alert/alert--danger-invert.less';
// @import './src/blocks/alert/alert--success-invert.less';
// @import './src/blocks/alert/alert--icon.less';
// @import './src/blocks/alert/alert__close.less';
// @import './src/blocks/alert-area/alert-area.less';
// @import './src/blocks/loader/loader.less';
// @import './src/blocks/code/code.less';
// @import './src/blocks/collapse/collapse.less';
// @import './src/blocks/toggler-burger/toggler-burger.less';
// @import './src/blocks/to-top/to-top.less';
@import './src/less/print.less';
src/less/variables.less
View file @ ed6da1bc
// Базовые цвета
// https://colorscheme.ru/color-converter.html
@gray-darkest: #1c1c1c;
@gray-darker: #3a3a3a;
@gray-dark: #5f5f5f;
@gray: #808080;
@gray-light: #b1b1b1;
@gray-lighter: #eceeef;
@gray-lightest: #f7f7f9;
@black: hsl(0, 0%, 0%);
@gray-darkest: hsl(0, 0%, 10%);
@gray-darker: hsl(0, 0%, 20%);
@gray-darken: hsl(0, 0%, 30%);
@gray-dark: hsl(0, 0%, 40%);
@gray: hsl(0, 0%, 50%);
@gray-light: hsl(0, 0%, 60%);
@gray-lighten: hsl(0, 0%, 70%);
@gray-lighter: hsl(0, 0%, 80%);
@gray-lightest: hsl(0, 0%, 90%);
@white: hsl(0, 0%, 100%);
@color-main: #0275d8;
@color-success: #5cb85c;
@color-danger: #d9534f;
@color-main: hsl(208, 98%, 43%);
@color-success: hsl(120, 39%, 54%);
@color-danger: hsl(2, 64%, 58%);
......@@ -27,18 +32,16 @@
// Базовая типографика (<=479: 1 rem = 8px, >=480: 1rem = 10px)
// Для лёгкого пересчёта: http://pxtoem.com/
// Базовая типографика
@font-size: 1.6rem;
@font-size--h1: 2.25em; // 3.6rem;
@font-size--h2: 1.875em; // 3rem;
@font-size--h3: 1.5em; // 2.4rem;
@font-size--h4: 1.25em; // 2.0rem;
@font-size--h5: 1em; // 1.6rem
@font-size--h6: 1em; // 1.6rem
@font-size: 16px;
@font-size--h1: 2.25em;
@font-size--h2: 1.875em;
@font-size--h3: 1.5em;
@font-size--h4: 1.25em;
@font-size--h5: 1em;
@font-size--h6: 1em;
@font-size--small: 0.75em;
@font-size--small-percent: 75%;
@line-height: 1.375em;
......@@ -52,7 +55,7 @@
// Модульная сетка
@grid-columns: 12;
@grid-gutter-width: 3rem;
@grid-gutter-width: 30px;
......@@ -89,7 +92,7 @@
// Разное
@border-radius: 0.3rem;
@border-radius: 3px;
@opacity: 0.7;
@transition-time: 0.3s;
@shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
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