nicothin / nth-start-project Goto Github PK
View Code? Open in Web Editor NEWStartkit for HTML / CSS / JS pages layout.
Home Page: https://nicothin.pro/NTH-start-project/blocks-demo.html
License: Do What The F*ck You Want To Public License
Startkit for HTML / CSS / JS pages layout.
Home Page: https://nicothin.pro/NTH-start-project/blocks-demo.html
License: Do What The F*ck You Want To Public License
Добрый день.
Как сделать, чтобы работала кнопка закрытия в alert, который формируется таким способом:
$("#msg").html('<div class="alert alert--danger"><button class="alert__close" aria-label="Close">×</button><p>сообщение</p></div>');
?
<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>
Ругается валидатор. Блочный элемент внутри строчного.
Добавить для всех имеющихся блоков и в файл создания блока:
.blockName {
$block-name: &;
// #{$block-name}__element {} для вложений
}
https://github.com/bfred-it/object-fit-images — полифил
https://github.com/ronik-design/postcss-object-fit-images — postCSS плагин для него
Ранее был странный глюк на винде: по ходу работы прогрессивно увеличивалось время, затрачиваемое на компиляцию стилей. Если при старте была пара секунд, то минут через 10 работы становилось уже в районе 6 и далее время увеличивалось при несущественном усложнении кодовой базы.
Есть много хороших инструментов на чистом 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
Речь про «уголок» в правой части поля
Здравствуйте!
Во-первых, спасибо за этот репозиторий, я многое из него для себя почерпнул. Но у меня остался нерешенным вопрос: каким образом добавляются плагины JQuery в ваш проект?
Допустим нужно внедрить lightbox-плагин для картинок. В роли js-хука используется элемент “section__image-link”. У плагина помимо js-файла есть свои стили и иконки. Первое что приходит в голову при использовании файловой структуры БЭМ (насколько я ее пока понимаю) — сделать все ресурсы плагина частью блока и разместить их в его папке, при этом «грязно» смешав стили блока со стилями плагина.
Так делать можно или у Вас какой-то более удобный вариант? Читал по этой теме много материала, но не нашел хороших примеров...
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.
Приветствую Николай.
Если мне память не изменяет, Ваш шаблон "вертелся" на 4 Gulp, из каких соображение откатились на 3.9.1
Вместо нынешнего off-canvas — https://slideout.js.org/
Тултипы — https://prevwong.github.io/drooltip.js/
Карусель — https://swipe.js.org/
Хорошо бы писать через 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. Улучшает восприятие кода.
src/pug/mixins.pug
Сделать описания используемых JS-инструментов консистентными.
Добавить в описание внедренных JS-механизмов ссылки на исходники и демки.
Сейчас, когда я меняю что-то в миксинах, ребилда не происходит. https://cl.ly/0y440R231Z0E
Возвращаюсь к scss, что в блоке https://cl.ly/2E3R2C1t1N3M
При попытке обработки изображений выдает ошибку:
folder=/src/blocks/logo/img npm start img:opt
"folder" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.
Операционная система - Windows 10
Запускаю из корня проекта.
Что нужно покрутить?
Николай, спасибо за отличный темплейт, всё доступно описано и удобно в использовании. Подскажите пожалуйста технически, как можно дополнительно организовать команду для сборки не привычным способом (img, js, css, страницы), а, скажем, чтобы скомпилировать перечень блоков в какую-нибудь отдельную папку buildBlocks (компонентно для программиста). Чтобы переносились блоки со всем содержимым, скомпилированным css и, возможно, подключенным js ? Наверное, всё можно сделать обычным способом, но может вы что-то подскажете
с http://realfavicongenerator.net (там есть описание задач для gulp)
Сейчас генерируется только папка img
, добавить генерацию папки bg-img
ведь вместо "start": "./node_modules/.bin/gulp"
можно написать "start": "gulp"
Пожелания и требования к системе для комфортной работы
!default
page
)Прототипом модальных окос служит 3й БС, там при открытии на body вешается инлайн стиль с внутр. отступом, идентичным ширине скролла.
Чтобы он был, нужны стили
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
Для всех блоков.
Может быть добавить что-то вроде:
.pipe(gulpIf(!isDev, uglify().on('error', function(e){console.log(e);})))
В сборку попал JS файл с ES6, и не понятно было поначалу из-за чего рушится сборка и минификация JS.
Хочется иметь в папке блока подпапку, из которой будут взяты в спрайт изображения и отдельную папку для шрифтов в блоке.
Освежить знания по теме с пом-ю скринкаста Ильи Кантора про gulp :)
Быстрое внедрение блока .close
Вдохновлено: https://www.youtube.com/watch?v=9G8CSNgCxE8&index=9&list=WL
input:invalid:not(:focus):not(:placeholder-shown) {...}
pattern
Увы, это без поддержки IE и Edge. Найти и внедрить нативный JS для проверки.
Эту штуку можно добавить в типографику, она здорово улучшает шрифты на маках.
В фоне инпута показывать иконку успеха или иконку ошибки (инлайнить SVG)
Здравствуйте Николай!
Спасибо большое за данный шаблон, во многом он мне облегчил мою работу.
Я нашел "баг", при вызове модального окна, экран зависает и пропадает вертикальный скролл. Подскажите пожалуйста, как можно исправить данный "баг"?
Николай, так как Вы перешли на Pug, возможно имеет смысл посмотреть в сторону bemto (https://github.com/kizu/bemto). Код станет в разы приятнее читать, также избавит от излишнего нейминга (кейсы с 2-3 модификаторами)
NTH-start-project/.stylelintrc
Line 302 in d48e9f4
На основании техники Лии Веру с SVG и JS: http://dabblet.com/gist/4696e4c6700fe9f346d8
Для текстовых инпутов, селектов и, вероятно, кнопок хочется иметь единые настройки внутренних отступов.
Для текстовых инпутов и селектов — единые настройки бордюра и фона.
Добрый день, Николай.
Недавно начал использовать Вашу прекрасную работу - NTH-start-project. В процессе работы возникли несколько вопросов по правильной организации кода, не могли бы Вы прояснить некоторые моменты?
Как организованы блоки с компонентами вопросов не вызывает. Но как дела обстоят с цельной страницей пока не понятно.
К примеру создан в корне src файл landing.html. Заинклудил хедер, футер, нужные компоненты. А вот что делать с секциями не понятно (к примеру about-us, tema и тд):
Не могли бы прояснить данный момент, потому что портить красивый стартовый проект уродливыми решениями не хочется.
По принципу https://codepen.io/heydon/pen/zdYdQv?editors=1010
Стилизация с тенями ль уголков для браузеров: http://dabblet.com/gist/d8a2376c79906d68f3d1
Сделать тени через @support
, чтобы деградировать до тени без тени от уголков.
[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 удалял/ устанавливал.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.