nicothin / nth-start-project Goto Github PK

Добрый день.
Как сделать, чтобы работала кнопка закрытия в alert, который формируется таким способом:
$("#msg").html('<div class="alert alert--danger"><button class="alert__close" aria-label="Close">×</button><p>сообщение</p></div>'); ?

Может быть добавить что-то вроде:

.pipe(gulpIf(!isDev, uglify().on('error', function(e){console.log(e);})))

В сборку попал JS файл с ES6, и не понятно было поначалу из-за чего рушится сборка и минификация JS.

ведь вместо "start": "./node_modules/.bin/gulp"
можно написать "start": "gulp"

Вдохновлено: https://www.youtube.com/watch?v=9G8CSNgCxE8&index=9&list=WL

• Добавить отображение ошибочного заполнения на основании:

input:invalid:not(:focus):not(:placeholder-shown) {...}

• Убрать отдельные файлы со стилизацией ошибочного состояния.
• Добавить в разметке образцы pattern

Увы, это без поддержки IE и Edge. Найти и внедрить нативный JS для проверки.

Здравствуйте Николай!
Спасибо большое за данный шаблон, во многом он мне облегчил мою работу.
Я нашел "баг", при вызове модального окна, экран зависает и пропадает вертикальный скролл. Подскажите пожалуйста, как можно исправить данный "баг"?

Приветствую Николай.

Если мне память не изменяет, Ваш шаблон "вертелся" на 4 Gulp, из каких соображение откатились на 3.9.1

Николай, так как Вы перешли на Pug, возможно имеет смысл посмотреть в сторону bemto (https://github.com/kizu/bemto). Код станет в разы приятнее читать, также избавит от излишнего нейминга (кейсы с 2-3 модификаторами)

Сейчас, когда я меняю что-то в миксинах, ребилда не происходит. https://cl.ly/0y440R231Z0E
Возвращаюсь к scss, что в блоке https://cl.ly/2E3R2C1t1N3M

Добавить для всех имеющихся блоков и в файл создания блока:

.blockName {

  $block-name:                &;
  // #{$block-name}__element {} для вложений

}

Речь про «уголок» в правой части поля

Хорошо бы писать через min width
https://cl.ly/1r1H1r0R0b33
@media (max-width: ($menu-desktop-width - 1))

А еще можно использовать миксины
типа таких

@mixin for-phone-only {
    @media (max-width: $phone-to) {
        @content;
    }
}

@mixin for-phone-up {
    @media (min-width: $phone-from) {
        @content;
    }
}

@mixin for-tablet-portrait-up {
    @media (min-width: $tablet-portrait) {
        @content;
    }
}

@mixin for-tablet-landscape-up {
    @media (min-width: $tablet-landscape) {
        @content;
    }
}

@mixin for-desktop-up {
    @media (min-width: $desktop) {
        @content;
    }
}

Их вызов https://cl.ly/1P0E2Y361y0c. Улучшает восприятие кода.

Есть много хороших инструментов на чистом JS. Хочется иметь возможность быстро добавлять их в проект.

https://github.com/nosir/cleave.js — форматирование текста в инпуте
http://leaverou.github.io/stretchy/ — авторесайз полей ввода
https://github.com/jackmoore/autosize — авторесайз текстареи
https://github.com/bevacqua/dragula — драг-н-дроп
https://github.com/bevacqua/horsey — автокомплит
https://github.com/maxwellito/vivus — поочередная отрисовка SVG path
https://github.com/dimsemenov/photoswipe — фотовьювер
https://github.com/oncode/handorgel — аккордеон
https://github.com/Prinzhorn/skrollr — параллакс, реакция на скролл

подсветка синтаксиса
https://github.com/isagalaev/highlight.js
https://github.com/PrismJS/prism
https://github.com/syntaxhighlighter/syntaxhighlighter

Сделать описания используемых JS-инструментов консистентными.
Добавить в описание внедренных JS-механизмов ссылки на исходники и демки.

с http://realfavicongenerator.net (там есть описание задач для gulp)

Прототипом модальных окос служит 3й БС, там при открытии на body вешается инлайн стиль с внутр. отступом, идентичным ширине скролла.
Чтобы он был, нужны стили

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

Для всех блоков.

Для текстовых инпутов, селектов и, вероятно, кнопок хочется иметь единые настройки внутренних отступов.
Для текстовых инпутов и селектов — единые настройки бордюра и фона.

Ранее был странный глюк на винде: по ходу работы прогрессивно увеличивалось время, затрачиваемое на компиляцию стилей. Если при старте была пара секунд, то минут через 10 работы становилось уже в районе 6 и далее время увеличивалось при несущественном усложнении кодовой базы.

• Добавить компиляцию и слежение
• Добавить шаблон и файл для импортов примесей
• Добавить в парсинг блоков генератор для src/pug/mixins.pug
• Добавить в генератор файлов блоков создание .pug файла
• Добавить для всех блоков pug-примеси с подходящими API и собрать библиотеку компонентов с pug
• Добавить на прекоммит-хук pug linter
• Переписать README репозитория

Windows 10 64x.
node 9.5.0
npm 5.6.0

Сборка стилей идёт ~15-30с.
Если добавить ещё с десяток блоков = стилей, может затянуться на пару минут.

Это в чистом виде, т.е. скачиваю проект, делаю npm i и пробую.
После обновления packages тоже самое.

Пробовал ещё в Виндовом bash, тоже самое.
sdd\ hdd тоже ситуации не меняло.

Вопрос скорее к тем кто пользуется/ сталкивался)
Виндовая проблема или может дело в чём-то другом?

А можно ли добавить целый фреймворк?)
Например, foundation, bootstrap тот же.

Интересно именно добавление scss.
Пробовал добавить
"../../node_modules/foundation-sites/scss/foundation.scss"
но безрезультатно, но и другие вариации пробовал.

Или не всё так просто?)

Т.е. чтобы именно все veriables (настройки) были от foundation.

Пожелания и требования к системе для комфортной работы

БЭМ-блоки

• Каждый блок в своей папке
• Папка для картинок блока
• Отдельные файлы (необязательные) для Элементов и Модификаторов
• Файлы с описанием зависимостей блоков (?)
• В сборку попадут только те Блоки, Элементы и Модификаторы, которые используются на странице (если Э и М прописаны в файле стилизации Б, то они попадут безусловно)

Разметка

• обрабатывать html и bem-xjst
• html обрабатывать file-include-ом

Стили

Прочее

• SCSS и переменные блока в стилизационном файле блока c !default
• Глобальные переменные
• Отсутствие глобальных стилей (для общих стилей — блок page)
• Легкое внедрение фреймворков
• Легкое добавление сторонних JS- и CSS-файлов, шрифтов
• Оптимизация картинок только вручную (сообщения в консоль при сборке)

https://github.com/bfred-it/object-fit-images — полифил
https://github.com/ronik-design/postcss-object-fit-images — postCSS плагин для него

https://github.com/mango/slideout

На основании техники Лии Веру с SVG и JS: http://dabblet.com/gist/4696e4c6700fe9f346d8

https://github.com/prevwong/drooltip.js

[15:49:33] Размер style.min.css 395 kB
[15:49:33] Finished 'style' after 7.02 s
[15:49:33] The following tasks did not complete: build, <parallel>, style:single
[15:49:33] Did you forget to signal async completion?
npm ERR! code ELIFECYCLE

Windows 10.
Gulp 4.0,
node 9.5.0

Бывала ли такая ошибка?
Обрывается после сборки стилей я так понимаю.

Кеш npm чистил, сам gulp удалял/ устанавливал.

Здравствуйте!

Во-первых, спасибо за этот репозиторий, я многое из него для себя почерпнул. Но у меня остался нерешенным вопрос: каким образом добавляются плагины JQuery в ваш проект?

Допустим нужно внедрить lightbox-плагин для картинок. В роли js-хука используется элемент “section__image-link”. У плагина помимо js-файла есть свои стили и иконки. Первое что приходит в голову при использовании файловой структуры БЭМ (насколько я ее пока понимаю) — сделать все ресурсы плагина частью блока и разместить их в его папке, при этом «грязно» смешав стили блока со стилями плагина.

Так делать можно или у Вас какой-то более удобный вариант? Читал по этой теме много материала, но не нашел хороших примеров...

• В листинг кода текстовых полей вынести самый частый вариант для копипасты
• Перенести примесь фокуса формы в файл миксинов формы
• Убрать модификаторы размера
• Выпадающие элементы: решить проблему клика в выпадающем блоке (происходит закрытие блока)
• Перетащить стилизацию таблиц в БЭМ-блок таблиц (как можно сильне отвязаться от глобальных стилей)
• Перетащить стилизацию элементов форм в соответствующие БЭМ-блоки (как можно сильне отвязаться от глобальных стилей)
• Разнести стилизацию блоков и модификаторов в разные стилевые файлы.

• Прилипающая по скроллу навигация/произвольный блок (управление срабатыванием в зависимости от ширины вьюпорта) https://github.com/somewebmedia/hc-sticky
• Аккордеон

Вместо нынешнего off-canvas — https://slideout.js.org/
Тултипы — https://prevwong.github.io/drooltip.js/
Карусель — https://swipe.js.org/

Николай, спасибо за отличный темплейт, всё доступно описано и удобно в использовании. Подскажите пожалуйста технически, как можно дополнительно организовать команду для сборки не привычным способом (img, js, css, страницы), а, скажем, чтобы скомпилировать перечень блоков в какую-нибудь отдельную папку buildBlocks (компонентно для программиста). Чтобы переносились блоки со всем содержимым, скомпилированным css и, возможно, подключенным js ? Наверное, всё можно сделать обычным способом, но может вы что-то подскажете

Добрый день. Есть проблема, что файл стилей компилирует медиа запросы в разном порядке. Запрос на 768px может находится ниже чем запрос на 480px, приходится перебивать стили каскадом. Не подскажете как решить данную проблему.

По принципу https://codepen.io/heydon/pen/zdYdQv?editors=1010
Стилизация с тенями ль уголков для браузеров: http://dabblet.com/gist/d8a2376c79906d68f3d1
Сделать тени через @support, чтобы деградировать до тени без тени от уголков.

Быстрое внедрение блока .close

В фоне инпута показывать иконку успеха или иконку ошибки (инлайнить SVG)

Сейчас генерируется только папка img, добавить генерацию папки bg-img

Освежить знания по теме с пом-ю скринкаста Ильи Кантора про gulp :)

Хочется иметь в папке блока подпапку, из которой будут взяты в спрайт изображения и отдельную папку для шрифтов в блоке.

При попытке обработки изображений выдает ошибку:
folder=/src/blocks/logo/img npm start img:opt
"folder" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.
Операционная система - Windows 10
Запускаю из корня проекта.
Что нужно покрутить?

Добрый день, Николай.
Недавно начал использовать Вашу прекрасную работу - NTH-start-project. В процессе работы возникли несколько вопросов по правильной организации кода, не могли бы Вы прояснить некоторые моменты?

Как организованы блоки с компонентами вопросов не вызывает. Но как дела обстоят с цельной страницей пока не понятно.

К примеру создан в корне src файл landing.html. Заинклудил хедер, футер, нужные компоненты. А вот что делать с секциями не понятно (к примеру about-us, tema и тд):

• просто писать в landing.html разметку, вставляя где нужно инклудами компоненты можно. Тогда не ясно, где писать стили к этим секциями и добавлять графику + js.
• либо делать под каждую секцию в blocks/about-us и там писать стили + img + js, но тогда blocks превратится в полную кашу.
• либо в blocks создать папку landing и в нем уже делать разбиение на отдельные html составляющие + img + css + js. Но последующие страницы хоть и будут одной папке (blocks) но будут отсортированы по алфавиту, что тоже не предает структуры, плюс внутри landing будет очень много файлов, что тоже не круто.

Не могли бы прояснить данный момент, потому что портить красивый стартовый проект уродливыми решениями не хочется.

<label class="field-text">
  <div class="field-text__name">Любое поле, выглядящее как текстовое</div>
  <div class="field-text__input-wrap">
    <input class="field-text__input" type="text" placeholder="input[type=text]">
    <div class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</div>
  </div>
</label>

Ругается валидатор. Блочный элемент внутри строчного.

Эту штуку можно добавить в типографику, она здорово улучшает шрифты на маках.