Skip to content

K
kpp
Commit 14c272f6 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Апгрейд библиотеки на pug

parent 9d0a36dc
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 37 deletions
src/blocks-library.pug
View file @ 14c272f6
......@@ -5,7 +5,7 @@ block meta
meta(name='description', content='')
block append head
link(rel="stylesheet", href="css/blocks-library.css")
link(rel='stylesheet', href='css/blocks-library.css')
style.
.components-demo {
display: block;
......@@ -23,7 +23,7 @@ block append head
// наполнение бокого меню
var demoBlocks = document.querySelectorAll('.blocks-library__item');
var offCanvasMenu = '<li class="menu__item"><a class="menu__link" data-toggle-native="off-canvas" href="https://github.com/nicothin/NTH-start-project">Исходный репозиторий</a></li><li class="menu__item menu__item--separator"><a class="menu__link" data-toggle-native="off-canvas" href="http://nicothin.github.io/NTH-start-project/blocks-demo.html">Демка на github pages</a></li>';
var offCanvasMenu = '<li class="menu__item"><a class="menu__link" data-toggle-native="off-canvas" href="/">Главная страница</a></li><li class="menu__item"><a class="menu__link" data-toggle-native="off-canvas" href="https://github.com/nicothin/NTH-start-project">Исходный репозиторий</a></li><li class="menu__item menu__item--separator"><a class="menu__link" data-toggle-native="off-canvas" href="http://nicothin.github.io/NTH-start-project/blocks-demo.html">Демка на github pages</a></li>';
for (var i=0; i<demoBlocks.length; i++){
var classes = 'menu__item';
var block = demoBlocks[i];
......@@ -55,10 +55,33 @@ block header
block content
//- Вывод блока библиотеки
mixin block-lib(id, title, sep)
section.blocks-library__item(id=id)(class= sep ? 'blocks-library__item--menusep' : '')
h2.blocks-library__item-title!= title
block
//- Вывод фрагмента кода в блоке библиотеки
mixin block-lib-code(id, hideBurger)
.blocks-library__code-wrapper
span.blocks-library__code-show-trigger(title='Показать код')
- if (!hideBurger)
i.blocks-library__code-icon
.blocks-library__code(id=id)
pre.code
block
//- Пример вызова примесей вывода блока:
+block-lib('class', 'Заголовок', false)
p Описание
+block-lib-code()
code &lt;div>
h1 Страница демонстрации блоков, доступных на #[a(href="index.html")] проекте
section#page.blocks-library__item
h2.blocks-library__item-title Страница
+block-lib('page', 'Страница', false)
p Блок страницы (#[code html class="page"]), благодаря которому применяются некоторые глобальные стили:
ul
li Смена боксовой модели на всех узлах: #[code box-sizing: border-box;] наследуется от #[code html]
......@@ -67,24 +90,19 @@ block content
li Стилевой обход 300 мс задержки #[code touch-action: manipulation;].
li Ограничение размера картинок до 100% ширины родителя.
p В стилизацию блока включена стилизация «прибитого подвала».
.blocks-library__code-wrapper
span.blocks-library__code-show-trigger(title="Показать код")
i.blocks-library__code-icon
.blocks-library__code
pre.code
code &lt;!DOCTYPE html>
code &lt;html class="no-js page" lang="ru">
code &lt;head>...&lt;/head>
code &lt;body>
code &lt;div class="page__inner">
code &lt;div class="page__content">Основное содержимое&lt;/div>
code &lt;div class="page__footer-wrapper">Прибитый «подвал»&lt;/div>
code &lt;/div>
code &lt;/body>
code &lt;/html>
section#typo.blocks-library__item.blocks-library__item--menusep
h2#text-text.blocks-library__item-title Текст, теги
+block-lib-code()
code &lt;!DOCTYPE html>
code &lt;html class="no-js page" lang="ru">
code &lt;head>...&lt;/head>
code &lt;body>
code &lt;div class="page__inner">
code &lt;div class="page__content">Основное содержимое&lt;/div>
code &lt;div class="page__footer-wrapper">Прибитый «подвал»&lt;/div>
code &lt;/div>
code &lt;/body>
code &lt;/html>
+block-lib('typo', 'Текст, теги', true)
p Реализуется блоком #[code typo], все стили которого являются глобальными.
p Параграфы, расстояние между ними. #[a(href="qwert1234") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
......@@ -213,12 +231,77 @@ block content
p Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
footer
cite Emmet
#text-pre.blocks-library__sub-item
h2.blocks-library__sub-item-title Форматированный текст
p Смотри так же #[a(href="#code") БЭМ-блок для кода].
pre.
// Блочный код с символом переноса строки
// Вторая строка
pre.
// Форматированный текст с символом переноса строки
// Вторая строка. Смотри так же #[a(href="#code") БЭМ-блок для кода].
+block-lib('sprite-svg', 'SVG-спрайт c <a href="https://github.com/w0rm/gulp-svgstore">gulp-svgstore</a>', false)
p Из файлов папки #[code sprite-svg/svg/] в папку #[code sprite-svg/img/] будет сгенерирован файл спрайта #[code sprite-svg.svg], который далее будет скопирован в папку сборки. Стилевой файл блока не используется. SVG-файлы будут оптимизированы перед сборкой в спрайт. Сам спрайт имеет вид:
pre.code
code &lt;svg xmlns="http://www.w3.org/2000/svg" style="display:none">
code &lt;symbol id="icon-boo" viewBox="0 0 30 30">&lt;path d="..."/>&lt;/symbol>
code &lt;symbol id="icon-bs" viewBox="0 0 28 28">&lt;path d="..."/>&lt;/symbol>
code ...
code &lt;/svg>
p Для вставки на страницу используйте конструкции #[code svg > use] со ссылками на #[code id] символа:
pre.code
code //- Pug
code svg(width="32", height="32")
code use(xlink:href="img/sprite-svg.svg#icon-boo")
code &nbsp;
code &lt;!-- HTML -->
code &lt;svg width="32" height="32">
code &lt;use xlink:href="img/sprite-svg.svg#icon-boo">&lt;/use>
code &lt;/svg>
p.alert.alert--warning Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте #[a(href="https://www.npmjs.com/package/svg4everybody") svg4everybody] (включен в сборку по умолчанию).
p Демонстрационный контент блока (иконки стрелок):
svg(width="32", height="32")
use(xlink:href="img/sprite-svg.svg#temp-icon-right-arrow")
svg(width="32", height="32")
use(xlink:href="img/sprite-svg.svg#temp-icon-left-arrow")
+block-lib('sprite-png', 'PNG-спрайт с <a href="https://github.com/Ensighten/spritesmith">spritesmith</a>', true)
p Из файлов папки #[code sprite-png/png/] в папку #[code sprite-png/img/] будет сгенерирован файл спрайта #[code sprite-ЧИСЛОВОЙ_ИНДЕКС.svg], который далее будет скопирован в папку сборки.
p #[strong Стилевой файл блока генерируется автоматически] и содержит примеси для использования спрайтов. Отдельный файл элемента #[code sprite-png__demo.scss] содержит вызов примеси, генерирующей стили для всех составных частей спрайта. Пример использования части спрайта для конкретного селектора:
pre.code
code // Sass
code .selector {
code // $temp-icon-left-arrow — $ИМЯ_ФАЙЛА_КАРТИНКИ ($ в начале)
code @include sprite($temp-icon-left-arrow);
code }
p Демонстрационный контент блока (иконки стрелок):
.temp-icon-right-arrow(style="display: inline-block;")
.temp-icon-left-arrow(style="display: inline-block;")
+block-lib('class', 'Закрыть', false)
p Иконка закрытия.
+close('Закрыть')
+block-lib-code()
code //- Pug
code //- Параметры примеси:
code //- label {string} описание, значение атрибута aria-label
code +close("Закрыть")
code &nbsp;
code &lt;!-- HTML -->
code &lt;button class="close">&lt;span>&lt;/span>&lt;/button>
+block-lib('burger', 'Бургер', false)
p Анимированное превращение в крестик по добавлению модификатора. #[br] JS блока берет переданный в data-атрибуте идентификатор и, по клику на бургере, добавляет переданный в data-атрибуте класс на элемент с этим модификатором.
+burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
// На этом диве должен переключаться класс
+block-lib-code('burger-code', true)
code //- Pug
code //- Параметры примеси:
code //- label {string} описание, значение атрибута aria-label
code //- targetId {string} атрибут id целевого элемента (без символа #), на котором по клику будет меняться класс
code //- className {string} класс, добавляемый/убираемый с целевого элемента
code +burger("Показать меню", "TARGET_ID", "CLASS_ACTIVE")
code &nbsp;
code &lt;!-- HTML -->
code &lt;button class="burger" aria-label="Показать меню" data-target-id="TARGET_ID" data-target-class-toggle="CLASS_ACTIVE">
code &lt;span>&lt;/span>
code &lt;/button>
.burger.blocks-library__menu-toggler(data-toggle="off-canvas")
......@@ -226,8 +309,8 @@ block content
//- block footer
//- p Подвал
block footer
//- p Подвал
//- block append page-bottom
//- script(src='js/SOME.js')
src/blocks/burger/burger.scss
View file @ 14c272f6
......@@ -11,15 +11,18 @@ $toggler-part-bg-color: #000 !default;
position: relative;
z-index: 1;
display: flex;
align-items: center;
display: inline-block;
padding: 0;
width: 30px;
height: 30px;
line-height: 30px;
background: transparent;
border: none;
user-select: none;
cursor: pointer;
> span {
display: inline-block;
vertical-align: middle;
width: 100%;
height: $toggler-part-height;
background: $toggler-part-bg-color;
......
src/blocks/close/close.scss
View file @ 14c272f6
......@@ -11,15 +11,18 @@ $toggler-part-bg-color: #000 !default;
position: relative;
z-index: 1;
display: flex;
align-items: center;
display: inline-block;
padding: 0;
width: 30px;
height: 30px;
line-height: 30px;
background: transparent;
border: none;
user-select: none;
cursor: pointer;
> span {
display: inline-block;
vertical-align: middle;
width: 100%;
height: $toggler-part-height;
background: transparent;
......
src/pug/mixins.pug
View file @ 14c272f6
//- Подключение примесей
//- include ../blocks/main-nav/main-nav.pug
include ../blocks/close/close.pug
include ../blocks/burger/burger.pug
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