Skip to content

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

Завершил добавление pug

parent 77749b3b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 197 deletions
.npmrc
View file @ 6ba0b400
loglevel=silent
# loglevel=silent
.pug-lintrc 0 → 100644
View file @ 6ba0b400
{
"validateExtensions": true,
"validateDivTags": true,
"validateAttributeSeparator": { "separator": ", ", "multiLineSeparator": ",\n " },
"validateAttributeQuoteMarks": "'",
"requireSpecificAttributes": [ { "img": [ "src", "alt" ] } ],
"requireSpaceAfterCodeOperator": true,
"requireLowerCaseTags": true,
"requireLowerCaseAttributes": true,
"requireClassLiteralsBeforeIdLiterals": true,
"requireClassLiteralsBeforeAttributes": true,
"disallowTrailingSpaces": true,
"disallowSpacesInsideAttributeBrackets": true,
"disallowLegacyMixinCall": true,
"disallowDuplicateAttributes": true
}
README.md
View file @ 6ba0b400
......@@ -58,7 +58,7 @@
- Диспетчер подключения стилей `./src/scss/style.scss` генерируется автоматически при старте любой gulp-задачи (на основе данных из `./projectConfig.json`).
- Список pug-примесей `./src/pug/mixins.pug` генерируется автоматически при старте любой gulp-задачи (на основе данных из `./projectConfig.json`).
- Для разметки используется [pug](https://pugjs.org/api/getting-started.html).
- Перед созданием коммита запускается проверка стилевых файлов, входящих в коммит.
- Перед созданием коммита запускается проверка стилевых файлов, входящих в коммит и всех pug-файлов. При выявлении ошибок, коммит не происходит.
......
gulpfile.js
View file @ 6ba0b400
......@@ -419,6 +419,13 @@ gulp.task('pug', function() {
.pipe(gulp.dest(dirs.buildPath));
});
gulp.task('test:pug', function () {
const pugLinter = require('gulp-pug-lint');
return gulp
.src('src/**/*.pug')
.pipe(pugLinter());
});
// Конкатенация и углификация Javascript
gulp.task('js', function (callback) {
const uglify = require('gulp-uglify');
......
package.json
View file @ 6ba0b400
......@@ -10,17 +10,21 @@
},
"scripts": {
"test:style": "stylelint \"src/**/*.scss\" --syntax=scss",
"test:editorconfig": "editorconfig-cli src/**/*.{js,pug}",
"start": "gulp",
"deploy": "cross-env NODE_ENV=production ./node_modules/.bin/gulp build && cross-env ./node_modules/.bin/gulp deploy",
"build": "cross-env NODE_ENV=production npm start build",
"lint-staged": "lint-staged",
"precommit": "lint-staged"
"precommit": "lint-staged && gulp test:pug"
},
"lint-staged": {
"*.js": "editorconfig-cli",
"*.pug": "editorconfig-cli",
"*.css": "stylelint",
"*.scss": "stylelint --syntax=scss"
},
"devDependencies": {
"@htmlacademy/editorconfig-cli": "^1.0.0",
"autoprefixer": "^7.1.1",
"browser-sync": "^2.18.8",
"const": "^1.0.0",
......@@ -41,6 +45,7 @@
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.0",
"gulp-pug": "^3.3.0",
"gulp-pug-lint": "git+https://github.com/nicothin/gulp-pug-lint.git",
"gulp-real-favicon": "^0.2.2",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
......
src/blocks-demo.pug
View file @ 6ba0b400
This diff is collapsed.
src/blocks/alert/alert.pug
View file @ 6ba0b400
......@@ -26,7 +26,7 @@ mixin alert(title, mods)
}
}
div.alert(class=allMods)&attributes(attributes)
.alert(class=allMods)&attributes(attributes)
if (typeof(title) !== 'undefined' && title !== '')
h4.alert__header!= title
block
src/blocks/breadcrumbs/breadcrumbs.pug
View file @ 6ba0b400
......@@ -19,7 +19,7 @@ mixin breadcrumbs(mods)
}
}
ul.breadcrumbs(class=allMods, aria-label="Breadcrumb", role="navigation")&attributes(attributes)
ul.breadcrumbs(class=allMods, aria-label='Breadcrumb', role='navigation')&attributes(attributes)
block
......
src/blocks/comment/comment.pug
View file @ 6ba0b400
......@@ -45,5 +45,6 @@ mixin comment(props)
.comment__text
header.comment__header #[b.comment__author= props.username] #[time.comment__date(datetime='2017-04-25T05:45') 25.04.2017 в 05:45]
.comment__body!= props.content
footer.comment__footer #[a.comment__reply(href='') Reply] #[a.comment__reply(href='') Admin]
footer.comment__footer.
#[a.comment__reply(href='') Reply] #[a.comment__reply(href='') Admin]
block
src/blocks/field-range/field-range.html deleted 100644 → 0
View file @ 77749b3b
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-range/field-range.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<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="1" value="70" id="" name="">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
</div>
</div>
-->
src/blocks/field-select/field-select.html deleted 100644 → 0
View file @ 77749b3b
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-select/field-select.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<label class="field-select">
<div class="field-select__name">Селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select" id="" name="">
<optgroup label="Группа">
<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>
-->
src/blocks/field-text/field-text.pug
View file @ 6ba0b400
......@@ -43,10 +43,7 @@ mixin field-text(props)
if(typeof(props.isTextarea) !== 'undefined' && props.isTextarea)
textarea.field-text__input&attributes(props.attrs)= props.val
else
input.field-text__input(
type=(typeof(props.attrs) !== 'undefined' && props.attrs.type) ? props.attrs.type : 'text'
value=props.val
)&attributes(props.attrs)
input.field-text__input(type=(typeof(props.attrs) !== 'undefined' && props.attrs.type) ? props.attrs.type : 'text', value=props.val)&attributes(props.attrs)
if(typeof(props.helpText) !== 'undefined' && props.helpText)
span.field-text__help-text!= props.helpText
block
src/blocks/main-nav/main-nav.pug
View file @ 6ba0b400
......@@ -12,7 +12,7 @@ mixin main-nav(selectedID)
include main-nav.data.pug
nav.main-nav#nav&attributes(attributes)
+burger('Показать главное меню', 'nav', 'main-nav--open')(class="main-nav__toggler")
+burger('Показать главное меню', 'nav', 'main-nav--open')(class='main-nav__toggler')
ul.main-nav__list
each menuItem in mainMenu
li(class= selectedID == menuItem.id ? 'main-nav__item main-nav__item--active' : 'main-nav__item')
......
src/blocks/modal/modal.pug
View file @ 6ba0b400
......@@ -27,7 +27,6 @@ mixin modal(id, title, mods)
.modal__dialog(role='document')
.modal__content
.modal__header
span.close.modal__close(data-dismiss='modal', aria-label='Закрыть')
span
span.close.modal__close(data-dismiss='modal', aria-label='Закрыть') #[span]
h4.modal__title!= title
block
src/blocks/owl-carousel/owl-carousel.pug
View file @ 6ba0b400
......@@ -28,5 +28,5 @@ mixin owl-carousel(id, mods)
}
}
div.owl-carousel(id=id, class=allMods)&attributes(attributes)
.owl-carousel(id=id, class=allMods)&attributes(attributes)
block
src/blocks/page-header/page-header.pug
View file @ 6ba0b400
......@@ -17,6 +17,6 @@ mixin page-header(mods)
}
}
header.page-header(class=allMods, role="banner")&attributes(attributes)
header.page-header(class=allMods, role='banner')&attributes(attributes)
.page-header__inner
block
src/blocks/pagination/pagination.pug
View file @ 6ba0b400
......@@ -23,7 +23,7 @@ mixin pagination(mods)
}
}
div.pagination(class=allMods, aria-label="Page navigation")&attributes(attributes)
.pagination(class=allMods, aria-label='Page navigation')&attributes(attributes)
block
......
src/blocks/pie-chart/pie-chart.pug
View file @ 6ba0b400
......@@ -7,8 +7,8 @@ mixin pie-chart(percent, mods)
//- mods {string} - список модификаторов
//- Вызов:
+pie-chart('30', 'success')
+pie-chart('30')(data-size="200" data-border="10")
+pie-chart('99', 'radial')(data-size="120" data-border="59.9")
+pie-chart('30')(data-size='200' data-border='10')
+pie-chart('99', 'radial')(data-size='120' data-border='59.9')
-
// список модификаторов
var allMods = '';
......
src/blocks/progress/progress.pug
View file @ 6ba0b400
......@@ -8,7 +8,7 @@ mixin progress(percent, text, mods)
//- mods {string} - список модификаторов
//- Вызов:
+progress('30', '30%', 'success')(aria-valuemin='0', aria-valuemax='100')
+progress('10')(style="height: 10px")
+progress('10')(style='height: 10px')
-
// список модификаторов
var allMods = '';
......
src/blocks/scroll-link/scroll-link.js
View file @ 6ba0b400
document.addEventListener('DOMContentLoaded', function(){
var links = document.querySelectorAll('[href^="#"][data-scroll-link]');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
......@@ -6,7 +7,7 @@ document.addEventListener('DOMContentLoaded', function(){
if(hash && hash !== '#') {
e.preventDefault();
var scroll = window.pageYOffset;
var targetTop = getOffsetRect(document.querySelector(hash)).top;
var targetTop = getOffsetRect(document.querySelector(hash)).top - 10; // С поправкой в 10px
var scrollDiff = (scroll - targetTop) * -1;
animate({
duration: 500,
......
src/blocks/tabs/tabs.js
View file @ 6ba0b400
......@@ -49,15 +49,14 @@ document.addEventListener('DOMContentLoaded', function(){
// Добавление метода .closest() (полифил, собственно)
(function(e){
e.closest = e.closest || function(css){
var node = this;
while (node) {
e.closest = e.closest || function(css){
var node = this;
while (node) {
if (node.matches(css)) return node;
else node = node.parentElement;
}
return null;
}
}
return null;
}
})(Element.prototype);
});
src/blocks/tabs/tabs.pug
View file @ 6ba0b400
......@@ -36,7 +36,7 @@ mixin tabs(props, mods)
}
.tabs(class=allMods)&attributes(attributes)
ul.tabs__links(role="tablist")
ul.tabs__links(role='tablist')
each tab in props
-
var isActive = (typeof(tab.isActive) !== 'undefined' && tab.isActive) ? ' tabs__link-wrap--active' : ''
......
src/index.pug
View file @ 6ba0b400
......@@ -13,10 +13,6 @@ block header
span Логотип
+main-nav('1')
//- DIV.class#test-ID(id="dddd" title='ddddddd')
p.class(id='dddd' title='ddddddd')
block content
p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
......
src/pug/layout-off-canvas.pug
View file @ 6ba0b400
......@@ -3,19 +3,19 @@
include mixins.pug
doctype html
html(class="no-js page", lang="ru")
html(class='no-js page', lang='ru')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
//- Edge и ряд мобильных браузеров автоматом преобразуют телефоны в ссылки. Отключим это.
meta(name="format-detection", content="telephone=no")
meta(name='format-detection', content='telephone=no')
block meta
title Home
block head
link(rel="stylesheet", href="css/style.min.css")
link(rel='stylesheet', href='css/style.min.css')
script.
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
script
......@@ -24,22 +24,22 @@ html(class="no-js page", lang="ru")
body
.off-canvas#off-canvas
aside.off-canvas__aside(role="complementary", aria-label="Меню")
aside.off-canvas__aside(role='complementary', aria-label='Меню')
block off-canvas
main.off-canvas__page-content.components-demo.blocks-library(role="main")
main.off-canvas__page-content.components-demo.blocks-library(role='main')
//- Реальный контент страницы
div.page__inner
div.page__content
.page__inner
.page__content
block header
p «шапка»
block content
p содержимое страницы
div.page__footer-wrapper
.page__footer-wrapper
block footer
p «подвал»
div.off-canvas__overlay(data-toggle="off-canvas")
.off-canvas__overlay(data-toggle='off-canvas')
block page-bottom
script(src="js/script.min.js")
script(src='js/script.min.js')
src/pug/layout.pug
View file @ 6ba0b400
......@@ -3,19 +3,19 @@
include mixins.pug
doctype html
html(class="no-js page", lang="ru")
html(class='no-js page', lang='ru')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
//- Edge и ряд мобильных браузеров автоматом преобразуют телефоны в ссылки. Отключим это.
meta(name="format-detection", content="telephone=no")
meta(name='format-detection', content='telephone=no')
block meta
title Home
block head
link(rel="stylesheet", href="css/style.min.css")
link(rel='stylesheet', href='css/style.min.css')
script.
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
script
......@@ -23,15 +23,15 @@ html(class="no-js page", lang="ru")
body
div.page__inner
div.page__content
.page__inner
.page__content
block header
p «шапка»
block content
p содержимое страницы
div.page__footer-wrapper
.page__footer-wrapper
block footer
p «подвал»
block page-bottom
script(src="js/script.min.js")
script(src='js/script.min.js')
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