fields to components

README.md

@@ -6,6 +6,8 @@
 
 `port=3004 npm start` — для запуска сервера автообновлений на указанном порту.
 
+`NODE_ENV=production npm start [задача]` — для запуска задач без создания sourcemaps.
+
 
 
 ## Парадигма
@@ -14,6 +16,7 @@
 - Каждый БЭМ-блок в своей папке внутри `/src/blocks/` (less, js, картинки, разметка; обязателен только less-файл).
 - Есть глобальные файлы: css, js, шрифты, картинки, less-файлы (переменные, глобальная стилизация...).
 - Есть диспетчер подключений `/src/less/style.less`. Если в нем импортирован less-файл какого-либо блока, этот блок считается используемым (обрабатывается его js и доп. файлы).
+- Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include) — обычное включение разметки мелких файлов внутрь больших файлов с возможностью передавать какие-то данные в мелкие файлы. А можно и не использовать.
 
 
 ### Блоки
@@ -29,7 +32,7 @@ block-name/               # Папка блока
   demo-block--mod.less    # Отдельный файл модификатора блока (если объемный и нужен не на всех проектах)
   demo-block.js           # Главный js-файл блока
   demo-block--mod.js      # js-файл для отдельного модификатора блока
-  demo-block.html         # Варианты разметки (только как документация блока или как вставляемый фрагмент)
+  demo-block.html         # Варианты разметки (как документация блока или как вставляемый микрошаблонизатором фрагмент)
   demo-block.css          # Добавочный css (копируется как отдельный файл в `build/css`)
   readme.md               # Какое-то пояснение
 ```
@@ -38,7 +41,9 @@ block-name/               # Папка блока
 
 
 ```bash
-node createBlock.js [имя блока] [доп. расширения через пробел]
+# формат: node createBlock.js [имя блока] [доп. расширения через пробел]
+node createBlock.js block # создаст только папку, block.html и block.less
+node createBlock.js new-block js jade # создаст папку, new-block.html, new-block.less, new-block.js, new-block.jade
 ```
 
 По умолчанию будут созданы `.html` и `.less` файлы, в них будет записан стартовый контент.
@@ -49,30 +54,30 @@ node createBlock.js [имя блока] [доп. расширения через
 
 ## Подключение блоков
 
-Если в диспетчере подключений (`/src/less/style.less`):
+Если в диспетчере подключений (`./src/less/style.less`):
 
 ```
-@import "../blocks/demo-block/demo-block.less";
+@import "./src/blocks/demo-block/demo-block.less";
 ```
 
 То указанный файл будет взят в компиляцию стилей, а так же:
-- в обработку будет взят js-файл блока: `src/blocks/demo-block/demo-block.js` (если существует и не пустой)
-- в обработку будет взят css-файл блока: `src/blocks/demo-block/demo-block.css` (если существует и не пустой)
-- в обработку будут добавлены все картинки блока: `src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
+- в обработку будет взят js-файл блока: `./src/blocks/demo-block/demo-block.js` (если существует и не пустой)
+- в обработку будет взят css-файл блока: `./src/blocks/demo-block/demo-block.css` (если существует и не пустой)
+- в обработку будут добавлены все картинки блока: `./src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
 
 Если в диспетчере подключений:
 
 ```
-@import "../blocks/demo-block/demo-block.less";
-@import "../blocks/demo-block/demo-block--mod.less";
+@import "./src/blocks/demo-block/demo-block.less";
+@import "./src/blocks/demo-block/demo-block--mod.less";
 ```
 
 То указанные файлы будет взяты в компиляцию стилей, а так же:
-- в обработку будет взят js-файл блока: `src/blocks/demo-block/demo-block.js` (если существует и не пустой)
-- в обработку будет взят js-файл блока: `src/blocks/demo-block/demo-block--mod.js` (если существует и не пустой)
-- в обработку будет взят css-файл блока: `src/blocks/demo-block/demo-block.css` (если существует и не пустой)
-- в обработку будет взят css-файл блока: `src/blocks/demo-block/demo-block--mod.css` (если существует и не пустой)
-- в обработку будут добавлены все картинки блока: `src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
+- в обработку будет взят js-файл блока: `./src/blocks/demo-block/demo-block.js` (если существует и не пустой)
+- в обработку будет взят js-файл блока: `./src/blocks/demo-block/demo-block--mod.js` (если существует и не пустой)
+- в обработку будет взят css-файл блока: `./src/blocks/demo-block/demo-block.css` (если существует и не пустой)
+- в обработку будет взят css-файл блока: `./src/blocks/demo-block/demo-block--mod.css` (если существует и не пустой)
+- в обработку будут добавлены все картинки блока: `./src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
 
 
 
@@ -91,3 +96,8 @@ src/            # Исходные файлы
   _blocks_library.html  # библиотека блоков проекта
   index.html            # главная страница проекта
 ```
+
+
+## Комментирование для разработчиков
+
+Для разметочных файлов можно использовать комментарии вида `<!--DEV Комментарий -->` — такие комментарии не попадут в собранный html.

TODO

@@ -2,20 +2,20 @@
   ☐ Тестировать: сборку и обновление JS при изменении файлов
   ☐ Тестировать: сборку и обновление JS при изменении диспетчера подключений
   ☐ Тестировать: копирование добавочных CSS при изменении файлов
-  ☐ Тестировать: копирование добавочных CSS при изменении файлов
-  ☐ Тестировать: копирование изображений при изменении диспетчера подключений
+  ☐ Тестировать: копирование добавочных CSS при изменении диспетчера подключений
+  ☐ Тестировать: копирование изображений при изменении файлов
   ☐ Тестировать: копирование изображений при изменении диспетчера подключений
-  ☐ Разобраться с обработкой шрифтов
 
-☐ Сделать: Кнопка с иконкой
-☐ Сделать: Кнопка-иконка
+☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
+☐ Сделать: Селект с идентичными везде уголками
 ☐ Сделать: Флажок-свитчер, радиокнопку-свитчер
+☐ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами
 ☐ Сделать: Флажки и радиокнопки, выглядящеи как обычные кнопки
+☐ Сделать: Кнопка с иконкой
+☐ Сделать: Кнопка-иконка
 ☐ Сделать: Текстовые поля: группа (в т.ч. с кнопками)
 ☐ Сделать: Текстовые поля: неинтерактивное дополнение справа, неинтерактивное дополнение слева (должны реагировать на ошибочность поля)
 ☐ Сделать: Текстовые поля: кнопка справа, кнопка слева
-☐ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами
-☐ Сделать: Селект с идентичными везде уголками
 ☐ Сделать: Алерт
 ☐ Сделать: Прибитый подвал
 ☐ Сделать: Пагинация
@@ -32,10 +32,15 @@
 ☐ Сделать: Табы (вкладки) с реакцией на хеш
 ☐ Сделать: Off-canvas с тачем, правый и левый
 ☐ Сделать: Аккордеон
-☐ Сделать: Модальные окна
+☐ Сделать: Модаgjlcrfprb
 ☐ Сделать: всплывающие подсказки
 ☐ Сделать: Прилипающая по скроллу навигация/произвольный блок (управление срабатыванием в зависимости от ширины вьюпорта)
 ☐ Сделать: Компонент для лёгкой интеграции Owl Carousel 2
 ☐ Сделать: Компонент для лёгкой интеграции к-л валидатора форм
 
 ☐ Тестировать: корректно ли кастомный input[type=range] отправляет на сервер данные
+
+
+
+✔ Потестировать условия в микро-шаблонизаторе: https://www.npmjs.com/package/gulp-file-include#if-statement @done (27.02.2016 15:12)
+✔ ФОРМЫ: вынести стили хелп-текста в примесь @done (27.02.2016 20:26)

createBlock.js

@@ -28,7 +28,7 @@ if(blockName) {
           fileCreateMsg = '[NTH] Для импорта стилей: @import "' + dirs.blocks + '/' + blockName + '/' + blockName + '.less";';
         }
         else if(extention == 'html') {
-          fileContent = '<!--DEVCOMMENT\n\nНужно убрать пробел между @-ами:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n-->\n<div class="' + blockName + '">content</div>\n';
+          fileContent = '<!--DEV\n\nНужно убрать пробел между @-ами:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n-->\n<div class="' + blockName + '">content</div>\n';
           fileCreateMsg = '[NTH] Для вставки разметки: @@include(\'blocks/' + blockName + '/' + blockName + '.html\')  Подробнее: https://www.npmjs.com/package/gulp-file-include';
         }
         if(fileExist(filePath) === false) {

gulpfile.js

@@ -31,10 +31,10 @@ const browserSync = require('browser-sync').create();
 const replace = require('gulp-replace');
 const fs = require('fs');
 
-// Запуск `NODE_ENV=production gulp [задача]` приведет к сборке без sourcemaps
+// Запуск `NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
 const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
 
-// Запуск `port=3004 gulp [задача]` приведет к запуску сервера обновлений на 3004 порту
+// Запуск `port=3004 npm start` приведет к запуску сервера обновлений на 3004 порту и всей обычной автоматизации
 const port = process.env.port ? process.env.port : 3000;
 
 // Файлы компилируемых компонентов
@@ -46,7 +46,7 @@ console.log(components);
 
 // Компиляция LESS
 gulp.task('less', function () {
-  console.log('---------- компиляция LESS');
+  console.log('---------- Компиляция LESS');
   return gulp.src(dirs.source + '/less/style.less')
     .pipe(gulpIf(isDev, sourcemaps.init()))
     .pipe(debug({title: "LESS:"}))
@@ -71,29 +71,29 @@ gulp.task('less', function () {
 // Копирование добавочных CSS, которые хочется иметь отдельными файлами
 gulp.task('copy:css', function(callback) {
   if(components.css.length > 0){
-  console.log('---------- копирование CSS');
-  return
-    gulp.src(components.css, {since: gulp.lastRun('copy:css')})
-    .pipe(postcss([
-        autoprefixer({browsers: ['last 2 version']}),
-        mqpacker
-    ]))
-    .pipe(cleanss())
-    .pipe(rename(function (path) {
-      path.extname = '.min.css'
-    }))
-    .pipe(debug({title: "RENAME:"}))
-    .pipe(gulp.dest(dirs.build + '/css'));
+    console.log('---------- Копирование CSS');
+    return
+      gulp.src(components.css, {since: gulp.lastRun('copy:css')})
+      .pipe(postcss([
+          autoprefixer({browsers: ['last 2 version']}),
+          mqpacker
+      ]))
+      .pipe(cleanss())
+      .pipe(rename(function (path) {
+        path.extname = '.min.css'
+      }))
+      .pipe(debug({title: "RENAME:"}))
+      .pipe(gulp.dest(dirs.build + '/css'));
   }
   else {
-    console.log('---------- копирование CSS: нет дополнительного CSS');
+    console.log('---------- Копирование CSS: нет дополнительного CSS');
     callback();
   }
 });
 
 // Копирование и оптимизация изображений
 gulp.task('img', function () {
-  console.log('---------- копирование и оптимизация картинок');
+  console.log('---------- Копирование и оптимизация картинок');
   return gulp.src(components.img, {since: gulp.lastRun('img')}) // только для изменившихся с последнего запуска файлов
     .pipe(newer(dirs.build + '/img'))  // оставить в потоке только изменившиеся файлы
     .pipe(imagemin({
@@ -119,7 +119,7 @@ gulp.task('img', function () {
 gulp.task('svgstore', function (callback) {
   let spritePath = dirs.source + '/img/svg_sprite/';
   if(fileExist(spritePath) !== false) {
-    console.log('---------- сборка SVG спрайта');
+    console.log('---------- Сборка SVG спрайта');
     return gulp.src(spritePath + '*.svg')
       .pipe(svgmin(function (file) {
         return {
@@ -137,7 +137,7 @@ gulp.task('svgstore', function (callback) {
       .pipe(gulp.dest(dirs.build + '/img'));
   }
   else {
-    console.log('---------- сборка SVG спрайта: нет папки с картинками');
+    console.log('---------- Сборка SVG спрайта: нет папки с картинками');
     callback();
   }
 });
@@ -151,31 +151,38 @@ gulp.task('html', function() {
       basepath: '@file',
       indent: true,
     }))
-    .pipe(replace(/\n<!--DEVCOMMENT[\s\S]+?-->/gm, ''))
+    .pipe(replace(/\n\s*<!--DEV[\s\S]+?-->/gm, ''))
     .pipe(gulp.dest(dirs.build));
 });
 
 // Конкатенация и углификация Javascript
-gulp.task('js', function () {
-  console.log('---------- обработка Javascript');
-  return gulp.src(components.js)
-    .pipe(debug({title: "JS:"}))
-    .pipe(gulpIf(isDev, sourcemaps.init()))
-    .pipe(concat('script.min.js'))
-    .pipe(uglify())
-    .on('error', notify.onError(function(err){
-      return {
-        title: 'Javascript uglify error',
-        message: err.message
-      }
-    }))
-    .pipe(gulpIf(isDev, sourcemaps.write('.')))
-    .pipe(gulpIf(isDev, debug({title: "JS SOURCEMAPS:"})))
-    .pipe(gulp.dest(dirs.build + '/js'));
+gulp.task('js', function (callback) {
+  if(components.js.length > 0){
+    console.log('---------- Обработка Javascript');
+    return gulp.src(components.js)
+      .pipe(debug({title: "JS:"}))
+      .pipe(gulpIf(isDev, sourcemaps.init()))
+      .pipe(concat('script.min.js'))
+      .pipe(uglify())
+      .on('error', notify.onError(function(err){
+        return {
+          title: 'Javascript uglify error',
+          message: err.message
+        }
+      }))
+      .pipe(gulpIf(isDev, sourcemaps.write('.')))
+      .pipe(gulpIf(isDev, debug({title: "JS SOURCEMAPS:"})))
+      .pipe(gulp.dest(dirs.build + '/js'));
+  }
+  else {
+    console.log('---------- Обработка Javascript: в сборке нет js-файлов');
+    callback();
+  }
 });
 
 // Очистка папки сборки
 gulp.task('clean', function () {
+  console.log('---------- Очистка папки сборки');
   return del([
     dirs.build + '/**/*',
     '!' + dirs.build + '/readme.md'
@@ -195,12 +202,12 @@ gulp.task('watch', function () {
   gulp.watch([
     dirs.source + '/*.html',
     dirs.source + '/_include/*.html',
-    // dirs.blocks + '/**/*.html', // пока не предполагается использовать html-файлы блоков иначе как для документирования
+    dirs.blocks + '/**/*.html',
   ], gulp.series('html'));
   // Слежение за LESS
   gulp.watch([
     dirs.source + '/less/**/*.less',
-    dirs.blocks + '/**/*.less',
+    dirs.blocks + '/**/*.less', // вот тут хорошо бы следить только за компилируемыми
   ], gulp.series('less'));
   // Слежение за добавочными CSS
   gulp.watch([

src/_blocks_library.html

@@ -268,122 +268,60 @@
               "type": "text",
               "name": "Любое поле, выглядящее как текстовое",
               "placeholder": "input[type=text]",
-              "helpText":"Обёртка — <code>&lt;label&gt;</code>. Можно сделать обёртку <code>div</code>, но тогда элемент нужно <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля."
+              "helpText":"Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля."
             })
-            @@include('blocks/field-text/field-text--textarea.html',{
+            @@include('blocks/field-text/field-text.html',{
+              "type": "textarea",
               "name": "Многострочное текстовое поле",
               "placeholder": "textarea",
+              "helpText": "Обёртка — <code>label</code>."
+            })
+            @@include('blocks/field-checkbox/field-checkbox.html',{
+              "name": "Стандартные флажки",
+              "text": "Флажок",
+              "mod": "",
+              "helpText": "Есть общее название. При желании флажков можно написать несколько подряд."
+            })
+            @@include('blocks/field-checkbox/field-checkbox.html',{
+              "name": "Собственные флажки",
+              "text": "Флажок",
+              "mod": "custom",
+              "helpText": "Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
+            })
+            @@include('blocks/field-radio/field-radio.html',{
+              "name": "Стандартные радиокнопки",
+              "text": "Радиокнопка",
+              "mod": "",
+              "helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд."
+            })
+            @@include('blocks/field-radio/field-radio.html',{
+              "name": "Собственные радиокнопки",
+              "text": "Радиокнопка",
+              "mod": "custom",
+              "helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
+            })
+            @@include('blocks/field-select/field-select.html',{
+              "name": "Селект",
+              "options": "<optgroup label=\"Группа\"><option>Значение 1</option><option>Значение 2</option><option>Значение 3</option></optgroup><option>Значение 10</option>",
               "helpText": "Обёртка — <code>&lt;label&gt;</code>."
             })
-            <div class="field-checkbox">
-              <div class="field-checkbox__title">Стандартные флажки</div>
-              <div class="field-checkbox__input-wrap">
-                <label class="field-checkbox__name">
-                  <input class="field-checkbox__input" type="checkbox">
-                  <span class="field-checkbox__name-text">Флажок</span>
-                </label>
-                <label class="field-checkbox__name">
-                  <input class="field-checkbox__input" type="checkbox">
-                  <span class="field-checkbox__name-text">Флажок</span>
-                </label>
-                <div class="field-checkbox__help-text">Есть общее название. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.</div>
-              </div>
-            </div>
-            <div class="field-radio">
-              <div class="field-checkbox__title">Стандартные радиокнопки</div>
-              <div class="field-radio__input-wrap">
-                <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
-                  <span class="field-radio__name-text">Радиокнопка</span>
-                </label>
-                <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
-                  <span class="field-radio__name-text">Радиокнопка</span>
-                </label>
-                <div class="field-radio__help-text">Нет общего названия.</div>
-              </div>
-            </div>
-            <div class="field-checkbox  field-checkbox--custom">
-              <div class="field-checkbox__title">Собственные флажки</div>
-              <div class="field-checkbox__input-wrap">
-                <label class="field-checkbox__name">
-                  <input class="field-checkbox__input" type="checkbox" checked>
-                  <span class="field-checkbox__name-text">Флажок</span>
-                </label>
-                <label class="field-checkbox__name">
-                  <input class="field-checkbox__input" type="checkbox">
-                  <span class="field-checkbox__name-text">Флажок</span>
-                </label>
-                <div class="field-checkbox__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
-              </div>
-            </div>
-            <div class="field-checkbox  field-checkbox--custom" style="font-size: 24px">
-              <div class="field-checkbox__title">Собственные флажки, <code>font-size: 24px</code> на родительском элементе</div>
-              <div class="field-checkbox__input-wrap">
-                <label class="field-checkbox__name">
-                  <input class="field-checkbox__input" type="checkbox" checked>
-                  <span class="field-checkbox__name-text">Флажок</span>
-                </label>
-                <label class="field-checkbox__name">
-                  <input class="field-checkbox__input" type="checkbox">
-                  <span class="field-checkbox__name-text">Флажок</span>
-                </label>
-                <div class="field-checkbox__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
-              </div>
-            </div>
-            <div class="field-radio  field-radio--custom">
-              <div class="field-radio__title">Собственные радиокнопки</div>
-              <div class="field-radio__input-wrap">
-                <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="two" checked>
-                  <span class="field-radio__name-text">Радиокнопка</span>
-                </label>
-                <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="two">
-                  <span class="field-radio__name-text">Радиокнопка</span>
-                </label>
-                <div class="field-radio__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
-              </div>
-            </div>
-            <label class="field-select">
-              <div class="field-select__name">Селект</div>
-              <div class="field-select__select-wrap">
-                <select class="field-select__select">
-                  <optgroup label="optgroup">
-                    <option>Значение 1</option>
-                    <option>Значение 2</option>
-                    <option>Значение 3</option>
-                  </optgroup>
-                  <option>Значение 10</option>
-                </select>
-                <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
-              </div>
-            </label>
-            <div class="field-range">
-              <div class="field-range__name">Range</div>
-              <div class="field-range__input-wrap">
-                <input class="field-range__input" type="range"  min"1" max="100" step="5" value="60">
-                <div class="field-range__help-text"><code>min"1" max="100" step="5" value="60"</code>, стилизован без JS.</div>
-              </div>
-            </div>
-            <div class="field-range">
-              <div class="field-range__name">Range</div>
-              <div class="field-range__input-wrap">
-                <input class="field-range__input" type="range"  min"0" max="80" step="10" value="20">
-                <div class="field-range__help-text"><code>min"0" max="80" step="10" value="20"</code>, стилизован без JS.</div>
-              </div>
-            </div>
-            <div class="field-file">
-              <div class="field-file__name">Выбор файлов</div>
-              <label class="field-file__input-wrap">
-                <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
-                <div class="field-file__name-text" data-button-text="Выбрать файл">Файлы не выбраны</div>
-                <div class="field-file__help-text">Работа этого стилизованного поля требует Javascript-а.</div>
-              </label>
-            </div>
-            <div class="field-actions">
-              <button class="btn">Отправить</button>
-            </div>
+            @@include('blocks/field-range/field-range.html',{
+              "name": "Range",
+              "properties": "min=\"1\" max=\"100\" step=\"1\" value=\"70\"",
+              "helpText": "<code>min=\"1\" max=\"100\" step=\"1\" value=\"70\"</code>, стилизован без JS."
+            })
+            @@include('blocks/field-range/field-range.html',{
+              "name": "Range",
+              "properties": "min=\"1\" max=\"30\" step=\"5\" value=\"10\"",
+              "helpText": "<code>min=\"1\" max=\"30\" step=\"5\" value=\"10\"</code>, стилизован без JS."
+            })
+            @@include('blocks/field-file/field-file.html', {
+              "name": "Выбор файлов",
+              "helpText": "Работа этого стилизованного поля требует Javascript-а. Но только работа. Стилизация — нет."
+            })
+            @@include('blocks/field-actions/field-actions.html', {
+              "actions": "<button class=\"btn\">Отправить</button>"
+            })
           </fieldset>
         </form>
       </div>
@@ -391,13 +329,6 @@
         <form action="" class="form  form--horizontal">
           <fieldset>
             <legend>Горизонтальная форма</legend>
-            <div class="field-text">
-              <label class="field-text__name" for="field-text_id_001">Название поля какое-то длинное</label>
-              <div class="field-text__input-wrap">
-                <input class="field-text__input" id="field-text_id_001" type="text" placeholder="input[type=text]">
-                <div class="field-text__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
-              </div>
-            </div>
             <label class="field-text">
               <div class="field-text__name">Название поля</div>
               <div class="field-text__input-wrap">

src/_include/page_bottom.html

-<!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
+<!--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>
 -->

src/_include/page_head.html

-<!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
+<!--DEV Такой комментарий не попадет в собранный HTML
 <meta name="viewport" content="width=1000">
 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -10,7 +10,7 @@
   document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
 </script>
 
-<!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
+<!--DEV Такой комментарий не попадет в собранный HTML
 <link href="/favicon.ico" rel="icon" type="image/x-icon">
 <link rel="icon" sizes="192x192" href="img/favicons/favicon-192x192.png">
 <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png">

src/blocks/demo-block/demo-block.html

-<!--DEVCOMMENT Пример разметки, используемый на проекте -->
+<!--DEV Пример разметки, используемый на проекте -->
 
 <div class="demo-block">Тестовый блок</div>

src/blocks/field-actions/field-actions.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-actions/field-actions.html', {
+  "actions": "<button class=\"btn\">Отправить</button>"
+})
+
+-->
+<div class="field-actions">
+  @@actions
+</div>

src/blocks/field-actions/field-actions.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.field-actions {
+  display: block;
+  margin-top: @line-height;
+  margin-bottom: (@line-height / 2);
+}

src/less/blocks/field-checkbox--custom.less → src/blocks/field-checkbox/field-checkbox--custom.less

@@ -23,11 +23,11 @@
         content: '';
         background-size: 100%;
         background-repeat: no-repeat;
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox.svg');
+        background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-checkbox/img_to_bg/checkbox.svg');
       }
 
       &:checked + .field-checkbox__name-text:before {
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox--checked.svg');
+        background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-checkbox/img_to_bg/checkbox--checked.svg');
       }
 
       &:focus + .field-checkbox__name-text:before {

src/blocks/field-checkbox/field-checkbox.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-checkbox/field-checkbox.html',{
+  "name": "Стандартные флажки",
+  "text": "Флажок",
+  "mod": "",
+  "helpText": "Есть общее название. При желании флажков можно написать несколько подряд."
+})
+
+@ @include('blocks/field-checkbox/field-checkbox.html',{
+  "name": "Собственные флажки",
+  "text": "Флажок",
+  "mod": "custom",
+  "helpText": "Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
+})
+
+-->
+@@if(mod === ""){<div class="field-checkbox">}@@if(mod !== ""){<div class="field-checkbox  field-checkbox--@@mod">}
+  <div class="field-checkbox__title">@@name</div>
+  <div class="field-checkbox__input-wrap">
+    <label class="field-checkbox__name">
+      <input class="field-checkbox__input" type="checkbox" checked>
+      <span class="field-checkbox__name-text">@@text</span>
+    </label>
+    <div class="field-checkbox__help-text">@@helpText</div>
+  </div>
+</div>

src/less/blocks/field-checkbox.less → src/blocks/field-checkbox/field-checkbox.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
 .field-checkbox {
   display: block;
   margin-bottom: (@line-height / 2);
@@ -30,10 +34,7 @@
   }
 
   &__help-text {
-    display: block;
-    font-size: @font-size--small-percent;
-    line-height: 1.2em;
-    color: @text-color--muted;
+    .help-text();
     // Задача: здесь левый padding должен совпадать с левым padding .field-checkbox__name-text и должен быть
     // в относительных единицах.
     // Левый padding у .field-checkbox__name-text = 1.3em от размера шрифта родителя (указано выше в этом файле).

src/blocks/field-file/field-file.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-file/field-file.html', {
+  "name": "Выбор файлов",
+  "helpText": "Работа этого стилизованного поля требует Javascript-а. Но только работа. Стилизация — нет."
+})
+
+-->
+<div class="field-file">
+  <div class="field-file__name">@@name</div>
+  <label class="field-file__input-wrap">
+    <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
+    <div class="field-file__name-text" data-button-text="Выбрать файл">Файлы не выбраны</div>
+    <div class="field-file__help-text">@@helpText</div>
+  </label>
+</div>

src/js/script.js → src/blocks/field-file/field-file.js

-
-'use strict';
-
-
 /*
   Форма: работа стилизованного input[type="file"]
   Автор: Osvaldas Valutis, www.osvaldas.info (адаптировано под используемую разметку)
@@ -34,29 +30,3 @@
     });
   });
 }());
-
-
-
-/*
-  Поиск ближайшего родителя по селектору
-  https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ru.md#1.6
-*/
-
-function closest(el, selector) {
-  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
-
-  while (el) {
-    if (matchesSelector.call(el, selector)) {
-      return el;
-    } else {
-      el = el.parentElement;
-    }
-  }
-  return null;
-}
-
-
-
-// $(document).ready(function() {
-//   alert('You Dont Need jQuery');
-// });

src/less/blocks/field-file.less → src/blocks/field-file/field-file.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
 .field-file {
   display: block;
   margin-bottom: (@line-height / 2);
@@ -18,6 +22,10 @@
     width: 1px;
     height: 1px;
     opacity: 0;
+
+    &:focus ~ .field-file__name-text {
+      .focus();
+    }
   }
 
   &__name-text {
@@ -52,15 +60,12 @@
       border-bottom-left-radius: @border-radius;
     }
 
-    .field-file__input:focus ~ & {
-      .focus();
-    }
+    // .field-file__input:focus ~ & {
+    //   .focus();
+    // }
   }
 
   &__help-text {
-    display: block;
-    font-size: @font-size--small-percent;
-    line-height: 1.2em;
-    color: @text-color--muted;
+    .help-text();
   }
 }

src/less/blocks/field-radio--custom.less → src/blocks/field-radio/field-radio--custom.less

@@ -23,11 +23,11 @@
         content: '';
         background-size: 1.125em 1.125em;
         background-repeat: no-repeat;
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton.svg');
+        background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-radio/img_to_bg/radiobutton.svg');
       }
 
       &:checked + .field-radio__name-text:before {
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton--checked.svg');
+        background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-radio/img_to_bg/radiobutton--checked.svg');
       }
 
       &:focus + .field-radio__name-text:before {

src/blocks/field-radio/field-radio.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-radio/field-radio.html',{
+  "name": "Стандартные радиокнопки",
+  "text": "Радиокнопка",
+  "mod": "",
+  "helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд."
+})
+
+@ @include('blocks/field-radio/field-radio.html',{
+  "name": "Собственные радиокнопки",
+  "text": "Радиокнопка",
+  "mod": "custom",
+  "helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
+})
+
+-->
+@@if(mod === ""){<div class="field-radio">}@@if(mod !== ""){<div class="field-radio  field-radio--@@mod">}
+  <div class="field-radio__title">@@name</div>
+  <div class="field-radio__input-wrap">
+    <label class="field-radio__name">
+      <input class="field-radio__input" type="radio" checked>
+      <span class="field-radio__name-text">@@text</span>
+    </label>
+    <div class="field-radio__help-text">@@helpText</div>
+  </div>
+</div>

src/less/blocks/field-radio.less → src/blocks/field-radio/field-radio.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
 .field-radio {
   display: block;
   margin-bottom: (@line-height / 2);
@@ -18,6 +22,7 @@
     font-weight: 400;
     display: inline-block;
     margin-right: .6em;
+    margin-bottom: .2em;
   }
 
   &__input {
@@ -28,10 +33,7 @@
   }
 
   &__help-text {
-    display: block;
-    font-size: @font-size--small-percent;
-    line-height: 1.2em;
-    color: @text-color--muted;
+    .help-text();
     // Задача: здесь левый padding должен совпадать с левым padding .field-checkbox__name-text и должен быть
     // в относительных единицах.
     // Левый padding у .field-checkbox__name-text = 1.3em от размера шрифта родителя (указано выше в этом файле).

src/blocks/field-range/field-range.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-range/field-range.html',{
+  "name": "Range",
+  "properties": "min=\"1\" max=\"100\" step=\"5\" value=\"60\"",
+  "helpText": "<code>min=\"1\" max=\"100\" step=\"5\" value=\"60\"</code>, стилизован без JS."
+})
+
+-->
+<div class="field-range">
+  <div class="field-range__name">@@name</div>
+  <div class="field-range__input-wrap">
+    <input class="field-range__input" type="range" @@properties>
+    <div class="field-range__help-text">@@helpText</div>
+  </div>
+</div>

src/less/blocks/field-range.less → src/blocks/field-range/field-range.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
 .field-range {
   display: block;
   margin-bottom: (@line-height / 2);
@@ -35,33 +39,29 @@
       box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.3);
     }
 
-    // Увы, тут похожие наборы свойств приходится писать порознь.
-    &::-webkit-slider-runnable-track {
+    // Да, да, это — локальная примесь для трёх нижеследующих правил.
+    .field-range-track() {
       box-sizing: border-box;
       border: none;
       width: 100%;
       height: 0.75em;
       border-radius: @border-radius;
     }
+
+    // Увы, тут похожие наборы свойств приходится писать порознь.
+    &::-webkit-slider-runnable-track {
+      .field-range-track(); // локальная примесь!
+    }
     &::-moz-range-track {
-      box-sizing: border-box;
-      border: none;
-      width: 100%;
-      height: 0.75em;
-      border-radius: @border-radius;
+      .field-range-track(); // локальная примесь!
     }
     &::-ms-track {
-      box-sizing: border-box;
-      border: none;
-      width: 100%;
-      height: 0.75em;
-      border-radius: @border-radius;
+      .field-range-track(); // локальная примесь!
       color: transparent;
     }
 
-    // Увы, тут похожие наборы свойств приходится писать порознь.
-    &::-webkit-slider-thumb {
-      margin-top: -.68em;
+    // Да, да, и это — локальная примесь.
+    .field-range-thumb() {
       box-sizing: border-box;
       border: none;
       padding: 0;
@@ -71,25 +71,17 @@
       box-shadow: none;
       cursor: ew-resize;
     }
+
+    // Увы, тут похожие наборы свойств приходится писать порознь.
+    &::-webkit-slider-thumb {
+      margin-top: -.68em;
+      .field-range-thumb(); // локальная примесь!
+    }
     &::-moz-range-thumb {
-      box-sizing: border-box;
-      border: none;
-      padding: 0;
-      width: 2em;
-      height: 2em;
-      border-radius: @border-radius;
-      box-shadow: none;
-      cursor: ew-resize;
+      .field-range-thumb(); // локальная примесь!
     }
     &::-ms-thumb {
-      box-sizing: border-box;
-      border: none;
-      padding: 0;
-      width: 2em;
-      height: 2em;
-      border-radius: @border-radius;
-      box-shadow: none;
-      cursor: ew-resize;
+      .field-range-thumb(); // локальная примесь!
     }
 
     &::-ms-fill-lower,
@@ -97,37 +89,36 @@
       display: none;
     }
 
-    &::-webkit-slider-runnable-track {
+    // Да, да, и это — локальная примесь.
+    .field-range-runnable-track() {
       background: @gray-lighter;
       border: 1px solid @border-color;
     }
+
+    // Увы, тут похожие наборы свойств приходится писать порознь.
+    &::-webkit-slider-runnable-track {
+      .field-range-runnable-track(); // локальная примесь!
+    }
     &::-moz-range-track {
-      background: @gray-lighter;
-      border: 1px solid @border-color;
+      .field-range-runnable-track(); // локальная примесь!
     }
     &::-ms-track {
-      background: @gray-lighter;
-      border: 1px solid @border-color;
+      .field-range-runnable-track(); // локальная примесь!
     }
 
     &::-webkit-slider-thumb {
-      background: @gray-lighter;
-      border: 1px solid @border-color;
+      .field-range-runnable-track(); // локальная примесь!
     }
     &::-moz-range-thumb {
-      background: @gray-lighter;
-      border: 1px solid @border-color;
+      .field-range-runnable-track(); // локальная примесь!
     }
     &::-ms-thumb {
-      background: @gray-lighter;
-      border: 1px solid @border-color;
+      .field-range-runnable-track(); // локальная примесь!
     }
   }
 
   &__help-text {
-    display: block;
-    font-size: @font-size--small-percent;
-    line-height: 1.2em;
-    color: @text-color--muted;
+    .help-text();
   }
 }
+

src/blocks/field-select/field-select.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-select/field-select.html')
+
+-->
+<label class="field-select">
+  <div class="field-select__name">@@name</div>
+  <div class="field-select__select-wrap">
+    <select class="field-select__select">
+      @@options
+    </select>
+    <small class="field-select__help-text">@@helpText</small>
+  </div>
+</label>

src/less/blocks/field-select.less → src/blocks/field-select/field-select.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
 .field-select {
   display: block;
   margin-bottom: (@line-height / 2);
@@ -15,9 +19,6 @@
   }
 
   &__help-text {
-    display: block;
-    font-size: @font-size--small-percent;
-    line-height: 1.2em;
-    color: @text-color--muted;
+    .help-text();
   }
 }

src/blocks/field-text/field-text--textarea.html

-<!--DEVCOMMENT
-
-Нужно убрать пробел между @-ами:
-
-@ @include('blocks/field-text/field-text--textarea.html',{
-  "name": "Текст",
-  "placeholder": "текст",
-  "helpText": "Введите текст."
-})
-
- -->
- <label class="field-text">
-  <div class="field-text__name">@@name</div>
-  <div class="field-text__input-wrap">
-    <textarea class="field-text__input" placeholder="@@placeholder"></textarea>
-    <div class="field-text__help-text">@@helpText</div>
-  </div>
-</label>

src/blocks/field-text/field-text.html

-<!--DEVCOMMENT
+<!--DEV
 
 Нужно убрать пробел между @-ами:
 
@@ -9,11 +9,11 @@
   "helpText":"Введите имя"
 })
 
- -->
+-->
 <label class="field-text">
   <div class="field-text__name">@@name</div>
   <div class="field-text__input-wrap">
-    <input class="field-text__input" type="@@type" placeholder="@@placeholder">
+    @@if (type === 'textarea') {<textarea class="field-text__input" placeholder="@@placeholder"></textarea>}@@if (type !== 'textarea') {<input class="field-text__input" type="@@type" placeholder="@@placeholder">}
     <div class="field-text__help-text">@@helpText</div>
   </div>
 </label>

src/blocks/field-text/field-text.less

@@ -16,16 +16,13 @@
 
   &__input {
     margin-bottom: round(@line-height / 3, 2);
+
+    textarea& {
+      min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + .2; // .2 — поправка на бордюр
+    }
   }
 
   &__help-text {
-    display: block;
-    font-size: @font-size--small-percent;
-    line-height: 1.2em;
-    color: @text-color--muted;
-
-    &:empty {
-      display: none;
-    }
+    .help-text();
   }
 }

src/blocks/table-responsive/table-responsive.html

-<!--DEVCOMMENT
+<!--DEV
 
 Нужно убрать пробел между @-ами:
 
 @ @include('blocks/table-responsive/table-responsive.html')
 
- -->
+-->
 <table class="table-responsive">
   <thead>
     <tr>

src/js/global_script.js

-alert('глобальный скрипт');
+/*
+  Поиск ближайшего родителя по селектору
+  https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ru.md#1.6
+*/
+
+function closest(el, selector) {
+  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+
+  while (el) {
+    if (matchesSelector.call(el, selector)) {
+      return el;
+    } else {
+      el = el.parentElement;
+    }
+  }
+  return null;
+}

src/less/blocks/field-text.less

-.field-text {
-  display: block;
-  margin-bottom: (@line-height / 2);
-
-  &__name {
-    font-weight: 700;
-    display: block;
-    margin-bottom: round(@line-height / 4, 2);
-  }
-
-  &__input-wrap {}
-
-  &__input {
-    margin-bottom: round(@line-height / 3, 2);
-  }
-
-  &__help-text {
-    display: block;
-    font-size: @font-size--small-percent;
-    line-height: 1.2em;
-    color: @text-color--muted;
-  }
-}

src/less/blocks/table-responsive.less

-//------------------------------------------------------------------------------
-//  Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
-//------------------------------------------------------------------------------
-
-.table-responsive {
-  // Таблицу с любым классом можно сделать адаптивной, вызывая эту примесь.
-  // ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
-  .table-responsive(sm);
-}
-

src/less/mixins/forms-mixins.less

+.help-text() {
+  display: block;
+  font-size: @font-size--small-percent;
+  line-height: 1.2em;
+  color: @text-color--muted;
+
+  &:empty {
+    display: none;
+  }
+}

src/less/mixins/mixins.less

@@ -3,3 +3,4 @@
 @import 'table-responsive-mixins.less';
 @import 'responsive-mixins.less';
 @import 'focus-mixin.less';
+@import 'forms-mixins.less';

src/less/style.less

@@ -7,12 +7,18 @@
 
 @import "./src/blocks/table-responsive/table-responsive.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-file/field-file.less";
+@import "./src/blocks/field-actions/field-actions.less";
 
 // @import "blocks/btn.less";
 // @import "blocks/form.less";
 // @import "blocks/field-text.less";
-// @import "blocks/field-checkbox.less";
-// @import "blocks/field-checkbox--custom.less";
 // @import "blocks/field-radio.less";
 // @import "blocks/field-radio--custom.less";
 // @import "blocks/field-select.less";