Commit a4e8ec64 authored by Nikolay Gromov's avatar Nikolay Gromov

Рефакторинг: бОльшая аккуратность

parent 0ade96a6
......@@ -35,7 +35,7 @@ if (blockName) {
// Если это SCSS
if (extention === 'scss') {
fileContent = `// В этом файле должны быть стили для БЭМ-блока ${blockName}, его элементов, \n// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...\n// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority\n\n.${blockName} {\n\n $block-name: &; // #{$block-name}__element {}\n\n}\n`;
fileContent = `// В этом файле должны быть стили для БЭМ-блока ${blockName}, его элементов, \n// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...\n// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority\n\n.${blockName} {\n\n $block-name: &; // #{$block-name}__element\n\n}\n`;
// fileCreateMsg = '';
// Добавим созданный файл
......@@ -56,7 +56,7 @@ if (blockName) {
// Если это HTML
else if (extention === 'html') {
fileContent = `<!--DEV\n\nДля использования этого файла как шаблона:\n\n@ @include('blocks/${blockName}/${blockName}.html')\n\n(Нужно убрать пробел между символами @)\nПодробнее: https://www.npmjs.com/package/gulp-file-include\n\n-->\n\n<div class="${blockName}">content</div>\n`;
fileContent = `<!--DEV\n\nДля использования этого файла как шаблона:\n\n@ @include('blocks/${blockName}/${blockName}.html')\n\n(Нужно убрать пробел между символами @)\nПодробнее: https://www.npmjs.com/package/gulp-file-include\n\n\n\n<div class="${blockName}">content</div>\n\n-->\n`;
// fileCreateMsg = '';
}
......
......@@ -353,13 +353,13 @@
<p>По получению ссылками фокуса на их родителей с <code>.main-nav__item</code> добавляется модификатор <code>.main-nav__item--show-child</code>, что позволяет работать со вложенными меню с клавиатуры (сейчас предусмотрено только 3 уровня).</p>
<nav id="main-nav" class="main-nav" role="navigation">
<div id="main-nav-toggler" class="main-nav__toggler burger"><span></span></div>
<button id="main-nav-toggler" class="main-nav__toggler burger"><span></span></button>
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--active">
<a href="" class="main-nav__link">
Страницы
</a>
<div class="main-nav__lvl main-nav__lvl--2">
<div class="main-nav__sublist-wrapper main-nav__sublist-wrapper--lvl-2">
<ul class="main-nav__list main-nav__list--lvl-2">
<li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link main-nav__link--lvl-2">
......@@ -370,7 +370,7 @@
<a href="" class="main-nav__link main-nav__link--lvl-2">
Услуги
</a>
<div class="main-nav__lvl main-nav__lvl--3">
<div class="main-nav__sublist-wrapper main-nav__sublist-wrapper--lvl-3">
<ul class="main-nav__list main-nav__list--lvl-3">
<li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link main-nav__link--lvl-3">
......@@ -401,39 +401,6 @@
</ul>
</nav>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;nav class="main-nav" role="navigation"></code>
<code> &lt;div id="main-nav-toggler" class="main-nav__toggler burger">&lt;span>&lt;/span>&lt;/div></code>
<code> &lt;ul class="main-nav__list"></code>
<code> &lt;li class="main-nav__item main-nav__item--active"></code>
<code> &lt;a href="" class="main-nav__link">Страницы&lt;/a></code>
<code> &lt;div class="main-nav__lvl main-nav__lvl--2"></code>
<code> &lt;ul class="main-nav__list main-nav__list--lvl-2"></code>
<code> &lt;li class="main-nav__item main-nav__item--lvl-2"></code>
<code> &lt;a href="" class="main-nav__link main-nav__link--lvl-2">Контакты&lt;/a></code>
<code> &lt;/li></code>
<code> &lt;li class="main-nav__item main-nav__item--lvl-2"></code>
<code> &lt;a href="" class="main-nav__link main-nav__link--lvl-2">Услуги&lt;/a></code>
<code> &lt;div class="main-nav__lvl main-nav__lvl--3"></code>
<code> &lt;ul class="main-nav__list main-nav__list--lvl-3"></code>
<code> &lt;li class="main-nav__item main-nav__item--lvl-3"></code>
<code> &lt;a href="" class="main-nav__link main-nav__link--lvl-3">Вёрстка HTML-CSS&lt;/a></code>
<code> &lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> &lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> &lt;/li></code>
<code> &lt;/ul></code>
<code>&lt;/nav></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="code" data-name=".code">
......@@ -1355,11 +1322,11 @@
<pre class="code">
<code>&lt;/div class="pagination"></code>
<code> &lt;/a href="" class="pagination__item">1&lt;//a></code>
<code> &lt;/a href="" class="pagination__item">...&lt;//a></code>
<code> &lt;/span class="pagination__item">...&lt;//span></code>
<code> &lt;/a href="" class="pagination__item">5&lt;//a></code>
<code> &lt;/a href="" class="pagination__item pagination__item--active">6&lt;//a></code>
<code> &lt;/a href="" class="pagination__item">123&lt;//a></code>
<code> &lt;/a href="" class="pagination__item">...&lt;//a></code>
<code> &lt;/span class="pagination__item">...&lt;//span></code>
<code> &lt;/a href="" class="pagination__item">999&lt;//a></code>
<code>&lt;//div></code>
</pre>
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/alert/alert.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="alert">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
......
// В этом файле должны быть стили для БЭМ-блока alert, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
......@@ -13,17 +13,16 @@ $border-radius: 3px !default;
.alert {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
position: relative;
padding: 0.7em 1em;
background-color: $gray-lightest;
color: $text-color;
border: 1px solid $gray-lighter;
border-radius: $border-radius;
margin-top: 1em;
margin-bottom: 1em;
border: 1px solid $gray-lighter;
border-radius: $border-radius;
color: $text-color;
background-color: $gray-lightest;
> * {
......@@ -38,12 +37,12 @@ $border-radius: 3px !default;
&__header {
display: block;
margin-top: 0;
margin-bottom: 0.2em;
font-size: $font-size--h3;
font-weight: 400;
line-height: 1.4;
color: inherit;
margin-top: 0;
margin-bottom: 0.2em;
}
&--danger {
......
......@@ -7,10 +7,12 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<ul class="breadcrumbs">
<li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Главная</a></li>
<li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Каталог</a></li>
<li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Маркеры</a></li>
</ul>
-->
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/btn/btn.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<a class="btn" href="">Cсылка</a>
<input class="btn" type="submit" value="Input">
<button class="btn">Button</button>
......
// В этом файле должны быть стили для БЭМ-блока btn, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
......@@ -14,8 +14,7 @@ $border-radius: 3px !default;
.btn {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
box-sizing: border-box;
display: inline-block;
......@@ -52,8 +51,8 @@ $border-radius: 3px !default;
&--disabled,
&:disabled {
cursor: not-allowed;
opacity: $opacity;
cursor: not-allowed;
color: $text-color;
background-color: $gray-lightest;
border-color: $gray-lighter;
......@@ -63,6 +62,11 @@ $border-radius: 3px !default;
}
}
// &__icon {
// display: inline-block;
// vertical-align: middle;
// }
// &--main {
......
......@@ -7,6 +7,9 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="burger"><span></span></div>
<div class="burger burger--close"><span></span></div>
-->
......@@ -7,8 +7,7 @@ $toggler-part-bg-color: #000 !default;
.burger {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
position: relative;
z-index: 1;
......@@ -25,7 +24,7 @@ $toggler-part-bg-color: #000 !default;
height: $toggler-part-height;
background: $toggler-part-bg-color;
position: relative;
transition: background 0.3s 0.3s;
transition: background $transition-time $transition-time;
&:before,
&:after {
......@@ -36,7 +35,7 @@ $toggler-part-bg-color: #000 !default;
height: $toggler-part-height;
background: $toggler-part-bg-color;
transform-origin: 50% 50%;
transition: top 0.3s 0.3s, transform 0.3s;
transition: top $transition-time $transition-time, transform $transition-time;
}
&:before {
......@@ -51,12 +50,12 @@ $toggler-part-bg-color: #000 !default;
&--close {
> span {
transition: background 0.2s 0s;
transition: background $transition-time 0s;
background: transparent;
&:before,
&:after {
transition: top 0.3s, transform 0.3s 0.3s;
transition: top $transition-time, transform $transition-time $transition-time;
top: 0;
}
......
......@@ -7,6 +7,8 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<span class="close" aria-label="Закрыть"><span></span></span>
-->
......@@ -7,8 +7,7 @@ $toggler-part-bg-color: #000 !default;
.close {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
position: relative;
z-index: 1;
......
......@@ -2,6 +2,7 @@
<pre class="code">
<code>/* Некий код: */</code>
<code>/* Строка кода */</code>
</pre>
-->
......@@ -11,8 +11,7 @@ $border-radius: 3px !default;
.code {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
width: 100%;
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/dropdown/dropdown.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="dropdown">
<a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1">
......
/* ========================================================================
* Основано на: Bootstrap dropdown.js v3.3.6, изменения минимальны
* Основано на: Bootstrap dropdown.js v3.3.6
* Все изменения сопровождены закомментироваными оригиналами
* ======================================================================== */
......
// В этом файле должны быть стили для БЭМ-блока menu, его элементов,
// В этом файле должны быть стили для БЭМ-блока dropdown, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
......@@ -12,8 +12,7 @@ $transition-time: 0.3s !default;
.dropdown {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
position: relative;
display: inline-block;
......@@ -28,8 +27,6 @@ $transition-time: 0.3s !default;
margin: 0;
background-color: #fff;
color: $text-color;
border: 1px solid $border-color;
border-radius: $border-radius;
opacity: 0;
visibility: hidden;
overflow: hidden;
......@@ -46,10 +43,6 @@ $transition-time: 0.3s !default;
}
}
&__menu-inner {
padding: 1em;
}
&--open & {
......
......@@ -7,8 +7,10 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="embed-responsive embed-responsive--16-9">
<iframe src="https://www.youtube.com/embed/HNpLuXOg7xQ" frameborder="0" allowfullscreen></iframe>
</div>
-->
......@@ -12,7 +12,7 @@
&::before {
content: '';
display: block;
padding-top: percentage(9 / 16);
padding-top: percentage(9 / 16); // по умолчанию ожидается вставка в формате 16/9
}
// embed,
......@@ -30,7 +30,7 @@
&--4-3 {
&--4-3 { // модификатор на случай вставки 4/3
&::before {
padding-top: percentage(3 / 4);
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-actions/field-actions.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-actions">
<div class="field-actions__text">* — обязательные поля</div>
<button class="btn">Отправить</button>
</div>
......
// В этом файле должны быть стили для БЭМ-блока field-actions, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$text-color--muted: hsl(0, 0%, 50%) !default;
......@@ -10,8 +10,7 @@ $line-height: 1.375em !default;
.field-actions {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-top: $line-height;
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-checkbox/field-checkbox.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-checkbox">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Одинокий чекбокс такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила оксмокс переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span>
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
</div>
......@@ -15,7 +24,7 @@
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
<div class="field-checkbox__help-text-wrap">
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
<div class="field-checkbox__help-text">Пояснение</div>
</div>
</div>
<div class="field-checkbox__input-wrap">
......
// В этом файле должны быть стили для БЭМ-блока field-checkbox, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.375em !default;
.field-checkbox {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: ($line-height / 2);
......
// В этом файле должны быть стили для БЭМ-блока field-checkbox, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-checkbox {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
&__input-wrap--error {
......
// В этом файле должны быть стили для БЭМ-блока field-file, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-file {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
&--error {
......
// В этом файле должны быть стили для БЭМ-блока field-file, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%);
......@@ -14,8 +14,7 @@ $border-radius: 3px !default;
.field-file {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: ($line-height / 2);
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-radio/field-radio.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-radio">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">Одинокий радиобаттон такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила оксмокс переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span>
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
</div>
......@@ -15,7 +22,7 @@
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
<div class="field-radio__help-text-wrap">
<div class="field-radio__help-text">Пояснение не обязательно.</div>
<div class="field-radio__help-text">Пояснение.</div>
</div>
</div>
<div class="field-radio__input-wrap">
......
// В этом файле должны быть стили для БЭМ-блока field-radio, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.375em !default;
.field-radio {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: ($line-height / 2);
......
// В этом файле должны быть стили для БЭМ-блока field-radio, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-radio {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
&__input-wrap--error {
......
<!--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">
......
// В этом файле должны быть стили для БЭМ-блока field-range, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
......@@ -11,8 +11,7 @@ $border-radius: 3px !default;
.field-range {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: ($line-height / 2);
......@@ -65,15 +64,15 @@ $border-radius: 3px !default;
// Увы, тут похожие наборы свойств приходится писать порознь.
&::-webkit-slider-runnable-track {
@include field-range-runnable-track;
@include field-range-runnable-track; // локальная примесь!
}
&::-moz-range-track {
@include field-range-runnable-track;
@include field-range-runnable-track; // локальная примесь!
}
&::-ms-track {
@include field-range-runnable-track;
@include field-range-runnable-track; // локальная примесь!
color: transparent;
}
......
// В этом файле должны быть стили для БЭМ-блока field-select, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-select {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
&--error {
......
<!--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">
......
// В этом файле должны быть стили для БЭМ-блока field-select, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%);
......@@ -11,8 +11,7 @@ $border-radius: 3px !default;
.field-select {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: ($line-height / 2);
......
// В этом файле должны быть стили для БЭМ-блока field-text, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-text {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
&--error {
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-text/field-text.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<label class="field-text">
<span class="field-text__name">Текстовое поле</span>
<span class="field-text__name">Текст</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span>
<input class="field-text__input" type="text" placeholder="placeholder">
<span class="field-text__help-text">Пояснение</span>
</span>
</label>
......
// В этом файле должны быть стили для БЭМ-блока field-text, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
......@@ -16,8 +16,7 @@ $border-radius: 3px !default;
.field-text {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: ($line-height / 2);
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-text/field-text.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap">
......@@ -26,30 +35,4 @@
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-радиокнопка</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатели-радиокнопки</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio" name="radio-demo-toggler" checked>
<span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio" name="radio-demo-toggler">
<span class="field-toggler__name-text">Не использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
-->
// В этом файле должны быть стили для БЭМ-блока field-select, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// В этом файле должны быть стили для БЭМ-блока field-toggler, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%);
......@@ -9,8 +9,7 @@ $line-height: 1.375em !default;
.field-toggler {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: ($line-height / 2);
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/form/form.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<form action="" class="form">
<fieldset>
<legend>Название формы</legend>
......
// В этом файле должны быть стили для БЭМ-блока form, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$font-family--headings: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
......@@ -10,8 +10,7 @@ $line-height: 1.375em !default;
.form {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
&:not(:last-child) {
margin-bottom: $line-height;
......@@ -31,12 +30,12 @@ $line-height: 1.375em !default;
legend {
display: block;
width: 100%;
margin-top: $line-height;
margin-bottom: ($line-height / 2);
font-size: $font-size--h3;
font-family: $font-family--headings;
font-weight: 700;
line-height: $line-height;
color: currentColor;
margin-top: $line-height;
margin-bottom: ($line-height / 2);
}
}
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/label/label.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="label">Метка-<code>div</code></div>
<span class="label">Метка-<code>span</code></span>
......
// В этом файле должны быть стили для БЭМ-блока label, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
......@@ -12,8 +12,7 @@ $border-radius: 3px !default;
.label {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: inline-block;
position: relative;
......@@ -26,7 +25,7 @@ $border-radius: 3px !default;
text-decoration: none;
text-transform: none;
font-weight: 700;
font-size: 75%;
font-size: $font-size--small;
white-space: nowrap;
border-radius: $border-radius;
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/loader/loader.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<span class="loader"></span>
-->
// В этом файле должны быть стили для БЭМ-блока loader, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
......@@ -7,8 +7,7 @@ $gray-lightest: hsl(0, 0%, 90%) !default;
.loader {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: inline-block;
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/logo/logo.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<a href="/" class="logo">
<img src="img/" alt="logo">
</a>
-->
......@@ -4,8 +4,7 @@
.logo {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
white-space: nowrap;
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/main-nav/main-nav.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<nav id="main-nav" class="main-nav" role="navigation">
<div id="main-nav-toggler" class="main-nav__toggler burger"><span></span></div>
<button id="main-nav-toggler" class="main-nav__toggler burger"><span></span></button>
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--active">
<a href="" class="main-nav__link">
Страницы
</a>
<div class="main-nav__lvl main-nav__lvl--2">
<div class="main-nav__sublist-wrapper main-nav__sublist-wrapper--lvl-2">
<ul class="main-nav__list main-nav__list--lvl-2">
<li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link main-nav__link--lvl-2">
......@@ -16,7 +27,7 @@
<a href="" class="main-nav__link main-nav__link--lvl-2">
Услуги
</a>
<div class="main-nav__lvl main-nav__lvl--3">
<div class="main-nav__sublist-wrapper main-nav__sublist-wrapper--lvl-3">
<ul class="main-nav__list main-nav__list--lvl-3">
<li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link main-nav__link--lvl-3">
......@@ -46,3 +57,5 @@
</li>
</ul>
</nav>
-->
......@@ -7,7 +7,7 @@
function mainNavVisibleToggle(e) {
e.preventDefault();
toggler.classList.toggle('burger--close');
toggler.classList.toggle('burger--close'); // модификатор иконки (должен быть .burger)
document.getElementById('main-nav').classList.toggle('main-nav--open');
}
}
......@@ -16,7 +16,7 @@
var linkClassName = 'main-nav__link';
var linkClassNameShowChild = 'main-nav__item--show-child';
var findLinkClassName = new RegExp(linkClassName);
// Слежение за всплывшим событием focus
// Слежение за всплывшим событием focus (нужно добавить класс, показывающий потомков)
document.addEventListener('focus', function(event) {
// Если событие всплыло от одной из ссылок гл. меню
if (findLinkClassName.test(event.target.className)) {
......@@ -26,7 +26,7 @@
});
}
}, true);
// Слежение за всплывшим событием blur
// Слежение за всплывшим событием blur (нужно убрать класс, показывающий потомков)
document.addEventListener('blur', function(event) {
// Если событие всплыло от одной из ссылок гл. меню
if (findLinkClassName.test(event.target.className)) {
......
......@@ -19,21 +19,18 @@ $transition-time: 0.3s !default;
.main-nav {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
position: relative;
z-index: 10;
// первый уровень
&__list {
margin: 0;
padding: 0;
list-style: none;
// мобильный вид списка
@media (max-width: ($menu-desktop-width - 1)) {
// открытие/закрытие меню только в случае работающего JS
......@@ -50,6 +47,7 @@ $transition-time: 0.3s !default;
}
}
// настольный вид списка
@media (min-width: $menu-desktop-width) {
display: flex;
flex-wrap: wrap;
......@@ -59,7 +57,12 @@ $transition-time: 0.3s !default;
&__item {
position: relative;
&--active {}
&--active {
& > #{$block-name}__link {
color: #000;
}
}
}
&__link {
......@@ -89,9 +92,9 @@ $transition-time: 0.3s !default;
}
}
&__lvl {
&__sublist-wrapper {
&--2 {
&--lvl-2 {
@media (min-width: $menu-desktop-width) {
position: absolute;
......@@ -112,7 +115,7 @@ $transition-time: 0.3s !default;
}
}
&--3 {
&--lvl-3 {
@media (min-width: $menu-desktop-width) {
position: absolute;
......@@ -139,6 +142,10 @@ $transition-time: 0.3s !default;
// переключатель
&__toggler {
display: inline-block;
padding: 0;
background: none;
border: none;
.no-js & {
display: none;
......
......@@ -7,6 +7,14 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="media">content</div>
<article class="media">
<div class="media__picture">
<img class="thumb" src="img/joker.jpg" alt="" width="150">
</div>
<div class="media__body">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить вопроса? Семь свой, его это. Силуэт!</p>
</div>
</article>
-->
......@@ -4,8 +4,7 @@
.media {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: flex;
margin-top: $line-height;
......
......@@ -5,6 +5,20 @@
@ @include('blocks/menu/menu.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include-->
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="menu">content</div>
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#">Пункт</a>
</li>
<li class="menu__item menu__item--separator">
<a class="menu__link" href="#">Пункт</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#">Пункт</a>
</li>
</ul>
-->
......@@ -8,8 +8,7 @@ $border-color: hsl(0, 0%, 60%) !default;
.menu {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
min-width: 10em;
margin: 0;
......
......@@ -7,6 +7,23 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="modal">content</div>
<div id="modal-demo" class="modal" tabindex="-1" role="dialog">
<div class="modal__dialog" role="document">
<div class="modal__content">
<div class="modal__header">
<a href="#" class="close modal__close" data-dismiss="modal" aria-label="Закрыть"><span></span></a>
<h4 class="modal__title">Modal</h4>
</div>
<div class="modal__body">
<p>Далеко-далеко за словесными горами...</p>
</div>
<div class="modal__footer">
<button type="button" class="btn" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
-->
......@@ -22,8 +22,7 @@ $z-index-modal: 100 !default;
.modal {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: none;
overflow: hidden;
......
......@@ -7,6 +7,8 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="nouislider" id="demo-nouislider"></div>
-->
......@@ -3,7 +3,8 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.nouislider {
// По умолчанию в сборку берется стилевой файл этого слайдера, предоставляемый
// По умолчанию в сборку берется стилевой файл этого блока, предоставляемый
// автором пакета (см. файл настройки проекта, там подключается
// nouislider/distribute/nouislider.css).
// node_modules/nouislider/distribute/nouislider.css).
// Надо стилизовать — копипастить из исходника и убирать исходник из сборки.
}
// Никакая стилизация этого Блока по умолчанию не нужна.
// Полифил включается в js-файле, добавочная стилизация для картинок с указанным object-fit: cover;
// добавится с помощью PostCSS-плагина на этапе постобработки css-файла(ов).
// Полифил ВКЛЮЧАЕТСЯ в js-файле этого блока.
// Добавочная стилизация для картинок с указанным object-fit: cover; добавится
// с помощью PostCSS-плагина на этапе постобработки css-файла(ов).
// Полифил: https://github.com/bfred-it/object-fit-images
// Добавленный PostCSS-плагин: https://github.com/ronik-design/postcss-object-fit-images
.object-fit-polyfill {}
......@@ -7,10 +7,12 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="off-canvas" id="off-canvas">
<div class="off-canvas__aside">...</div>
<div class="off-canvas__page-content">...</div>
<div class="off-canvas__overlay" data-toggle="off-canvas"></div>
</div>
-->
......@@ -9,14 +9,11 @@ $transition-time: 0.3s !default;
$toggler-part-height: 3px !default;
// Переменная ширины этого блока
//
$off-canvas-width: 250px !default;
$off-canvas-width: 250px !default; // ширина этого блока
.off-canvas {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
position: relative;
overflow: hidden;
......
......@@ -7,7 +7,7 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="owl-carousel" id="owl-carousel-demo">
<div>
......@@ -29,3 +29,5 @@
slide content 6
</div>
</div>
-->
......@@ -3,7 +3,8 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.owl-carousel {
// В сборку стилей берется стилевой файл по умолчанию,
// поставляемый вместе с этим плагином: owl.carousel.css
// см. ./projectConfig.json
// По умолчанию в сборку берется стилевой файл этого блока, предоставляемый
// автором пакета (см. файл настройки проекта, там подключается
// node_modules/owl.carousel/dist/assets/owl.carousel.css).
// Надо стилизовать — копипастить из исходника и убирать исходник из сборки.
}
......@@ -5,6 +5,7 @@
@ @include('blocks/page-footer/page-footer.html')
-->
<footer class="page-footer" role="contentinfo">
page-footer
</footer>
......@@ -4,6 +4,5 @@
.page-footer {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
}
......@@ -5,6 +5,7 @@
@ @include('blocks/page-header/page-header.html')
-->
<header class="page-header" role="banner">
page-header
</header>
......@@ -4,6 +4,5 @@
.page-header {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
}
......@@ -10,8 +10,7 @@
.page { // html
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
box-sizing: border-box;
font-size: 10px;
......
......@@ -7,14 +7,16 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="pagination">
<a href="" class="pagination__item">1</a>
<a href="" class="pagination__item">...</a>
<span class="pagination__item">...</span>
<a href="" class="pagination__item">5</a>
<a href="" class="pagination__item pagination__item--active">6</a>
<a href="" class="pagination__item">123</a>
<a href="" class="pagination__item">...</a>
<span class="pagination__item">...</span>
<a href="" class="pagination__item">999</a>
</div>
-->
......@@ -10,8 +10,7 @@ $border-color: hsl(0, 0%, 60%) !default;
.pagination {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: flex;
flex-wrap: wrap;
......
......@@ -7,10 +7,12 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="progress">
<div class="progress__bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="progress__bartext">80%</span>
</div>
</div>
-->
......@@ -13,8 +13,7 @@ $transition-time: 0.3s !default;
.progress {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
margin-top: $line-height;
margin-bottom: $line-height;
......
// Просто добавляем все классы для вывода спрайтов
// Просто добавляем все селекторы для вывода спрайтов
@include sprites($spritesheet-sprites);
......@@ -4,6 +4,6 @@
<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-right-arrow"></use></svg>
Для поддержки IE используйте svg4everybody — https://www.npmjs.com/package/svg4everybody
Для поддержки IE используе svg4everybody — https://www.npmjs.com/package/svg4everybody (по умолчанию включен в сборку, включается в JS-файле этого блока)
-->
// Этот блок не нуждается ни в какой стилизации.
......@@ -7,6 +7,14 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="swipe">content</div>
<div id="swipe-slider" class="swipe">
<div class="swipe-wrap">
<div>1111</div>
<div>2222</div>
<div>3333</div>
</div>
</div>
-->
// document.addEventListener('DOMContentLoaded', function(){
// window.mySwipe = new Swipe(document.getElementById('swipe-slider'), {
// startSlide: 0,
// speed: 400,
// auto: 3000,
// draggable: true,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, elem, dir) {},
// transitionEnd: function(index, elem) {}
// });
// });
......@@ -8,8 +8,7 @@ $border-color: hsl(0, 0%, 60%) !default;
.table-mobile-scroll {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: block;
width: 100%;
......
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/table-responsive/table-responsive.html')
-->
<table class="table-responsive">
<thead>
<tr>
......@@ -23,3 +18,5 @@
</tr>
</tbody>
</table>
-->
......@@ -17,8 +17,7 @@ $field-padding-horizontal: 0.7em !default;
.table {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
border-collapse: collapse;
width: 100%;
......@@ -49,13 +48,9 @@ $field-padding-horizontal: 0.7em !default;
text-align: left;
}
&__header {
background-color: $gray-lightest;
}
&__header {}
&__body {}
&__footer {
background-color: $gray-lightest;
}
&__footer {}
}
......@@ -7,6 +7,37 @@
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="tabs">content</div>
<div class="tabs">
<ul class="tabs__links" role="tablist">
<li class="tabs__link-wrap tabs__link-wrap--active" role="presentation">
<a href="#demo-tab-01" class="tabs__link" data-toggle="tab" role="tab">Вкладка 01</a>
</li>
<li class="tabs__link-wrap" role="presentation">
<span data-target="#demo-tab-02" class="tabs__link" data-toggle="tab" role="tab">Вкладка 02</span>
</li>
<li class="tabs__link-wrap" role="presentation">
<a href="#demo-tab-03" class="tabs__link" data-toggle="tab" role="tab">Вкладка 03</a>
</li>
<li class="tabs__link-wrap" role="presentation">
<a href="#demo-tab-04" class="tabs__link" data-toggle="tab" role="tab">Вкладка 04</a>
</li>
</ul>
<div class="tabs__content-wrapper">
<div class="tabs__content-item tabs__content-item--active" id="demo-tab-01" role="tabpanel">
111
</div>
<div class="tabs__content-item" id="demo-tab-02" role="tabpanel">
222
</div>
<div class="tabs__content-item" id="demo-tab-03" role="tabpanel">
333
</div>
<div class="tabs__content-item" id="demo-tab-04" role="tabpanel">
444
</div>
</div>
</div>
-->
......@@ -16,8 +16,7 @@ $field-padding-horizontal: 0.7em !default;
.tabs {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
margin-top: $line-height;
margin-bottom: $line-height;
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/thumb/thumb.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<img class="thumb" src="" height="" width="" alt="">
<a href="" class="thumb"><img src="" height="" width="" alt=""></a>
......
......@@ -11,8 +11,7 @@ $transition-time: 0.3s !default;
.thumb {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
display: inline-block;
padding: 0.4rem;
......@@ -22,7 +21,7 @@ $transition-time: 0.3s !default;
border-radius: $border-radius;
transition: all $transition-time;
a:hover & {
border-color: $link-color;
}
// a:hover & {
// border-color: $link-color;
// }
}
<!--DEV
Нужно убрать пробел между @-ами:
Для использования этого файла как шаблона:
@ @include('blocks/to-top/to-top.html')
-->
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<a href="#" class="to-top" id="toTop">↑</a>
-->
......@@ -4,7 +4,7 @@ $( document ).ready(function() {
$('#toTop').hide().on('click', function(event){
event.preventDefault();
$('body').animate({scrollTop:0}, 300);
$('html, body').animate({scrollTop:0}, 300);
});
$(window).on('scroll', function(){
......
......@@ -4,8 +4,7 @@
.to-top {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
position: fixed;
right: 1rem;
......
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