Skip to content

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

Библиотека: добавил описания для блоков

parent b7894814
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 204 deletions
src/blocks-library.pug
View file @ daa4d424
...@@ -82,7 +82,7 @@ block content ...@@ -82,7 +82,7 @@ block content
//- Пример вызова примесей вывода блока: //- Пример вызова примесей вывода блока:
+block-lib('close', 'Закрыть', false) +block-lib('close', 'Закрыть', false)
include:markdown-it(linkify) blocks/close/close.md include:markdown-it(linkify) blocks/close/readme.md
div div
+close('Закрыть') +close('Закрыть')
+block-lib-code() +block-lib-code()
...@@ -93,185 +93,25 @@ block content ...@@ -93,185 +93,25 @@ block content
h1 Страница демонстрации блоков, доступных на #[a(href="index.html") проекте] h1 Страница демонстрации блоков, доступных на #[a(href="index.html") проекте]
+block-lib('page', 'Страница', false) +block-lib('page', 'Страница', false)
p Блок страницы (#[code html class="page"]), благодаря которому применяются некоторые глобальные стили: include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/page/readme.md
ul
li Смена боксовой модели на всех узлах: #[code box-sizing: border-box;] наследуется от #[code html]
li Нормализация вьюпорта для windows-телефонов.
li Сброс отступов для #[code body]
li Стилевой обход 300 мс задержки #[code touch-action: manipulation;].
li Ограничение размера картинок до 100% ширины родителя.
p В стилизацию блока включена стилизация «прибитого подвала».
+block-lib-code() +block-lib-code()
code <!DOCTYPE html> pre.code
code <html class="no-js page" lang="ru"> code <!DOCTYPE html>
code <head>...</head> code <html class="no-js page" lang="ru">
code <body> code <head>...</head>
code <div class="page__inner"> code <body>
code <div class="page__content">Основное содержимое</div> code <div class="page__inner">
code <div class="page__footer-wrapper">Прибитый «подвал»</div> code <div class="page__content">Основное содержимое</div>
code </div> code <div class="page__footer-wrapper">Прибитый «подвал»</div>
code </body> code </div>
code </html> code </body>
code </html>
+block-lib('typo', 'Текст, теги', true)
p Реализуется блоком #[code typo], все стили которого являются глобальными. +block-lib('typo', 'Текст, теги', false)
p Параграфы, расстояние между ними. #[a(href="qwert1234") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных. include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/typo/readme.md
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
h1 Заголовок 1
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
h2 Заголовок 2
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
h3 Заголовок 3
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
h4 Заголовок 4
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
h5 Заголовок 5
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
h6 Заголовок 6
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
ul
li Пункт 1
ul
li Подпункт 1
li Подпункт 2
li Пункт 2
li Пункт 3
ol
li Пункт 1
ol
li Подпункт 1
li Подпункт 2
li Пункт 2
li Пункт 3
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
dl
dt Определяемая сущность 1
dd Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.
dt Определяемая сущность 2
dd Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.
dd Некое, возможно, относительно длинное определение упомянутой сущности.
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
hr
p Параграфы, расстояние между ними. #[a(href="/empty") Ссылка]. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
table
tr
td
code <a>
td
a(href="") ссылка
tr
td
code <strong>
td
strong действительно значимый текст
tr
td
code <b>
td
b просто выделенный текст, лид
tr
td
code <i>
td
i иностранное слово или термин
tr
td
code <em>
td
em эмфатическое ударение
tr
td
code <s>
td
s информация, утратившая актуальность
tr
td
code <del>
td
del изменение, внесённое в документ (удаление)
tr
td
code <ins>
td
ins изменение, внесённое в документ (добавление)
tr
td
code <mark>
td
mark акцент маркерным выделением
tr
td
code <small>
td
small малозначимый текст
tr
td
code <abbr>
td
abbr(title="Аббревиатура") АББРЕВИАТУРА
tr
td
code <kbd>
td
kbd Ctrl + C
tr
td
code <sup>
td
| 2
sup 3
tr
td
code <sub>
td
| H
sub 2
| O
tr
td
code <code>
td
code code
address
strong Имя Фамилия
br
| г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя)
br
a(href="mailto:user@mail.com") user@mail.com
blockquote
p Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
footer
cite Emmet
pre.
// Форматированный текст с символом переноса строки
// Вторая строка. Смотри так же #[a(href="#code") БЭМ-блок для кода].
+block-lib('sprite-svg', 'SVG-спрайт c <a href="https://github.com/w0rm/gulp-svgstore">gulp-svgstore</a>', false) +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-файлы будут оптимизированы перед сборкой в спрайт. Сам спрайт имеет вид: include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/sprite-svg/readme.md
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 svg(width="32", height="32")
code use(xlink:href="img/sprite-svg.svg#icon-boo")
code &nbsp;
code //- 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)
+block-lib('sprite-png', 'PNG-спрайт с <a href="https://github.com/Ensighten/spritesmith">spritesmith</a>', true) +block-lib('sprite-png', 'PNG-спрайт с <a href="https://github.com/Ensighten/spritesmith">spritesmith</a>', true)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/sprite-png/readme.md include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/sprite-png/readme.md
......
src/blocks/close/close.pug
View file @ daa4d424
//- Все примеси в этом файле должны начинаться c имени блока (close) //- Все примеси в этом файле должны начинаться c имени блока (close)
//- Принимает:
//- label {string} - описание, значение атрибута aria-label
//- Вызов:
//- +close('Закрыть')
mixin close(label) mixin close(label)
//- Принимает:
//- label {string} - описание, значение атрибута aria-label
//- Вызов:
//- +close('Закрыть')
button.close(aria-label=label)&attributes(attributes) button.close(aria-label=label)&attributes(attributes)
span span
src/blocks/page/readme.md 0 → 100644
View file @ daa4d424
Блок страницы `html class="page"`, благодаря которому применяются некоторые глобальные стили:
- Смена боксовой модели на всех узлах: `box-sizing: border-box;` наследуется от `html`
- Нормализация вьюпорта для windows-телефонов.
- Сброс отступов для `body`
- Стилевой обход 300 мс задержки `touch-action: manipulation;`
- Ограничение размера картинок до 100% ширины родителя.
В стилизацию блока включена стилизация «прибитого подвала».
src/blocks/sprite-svg/readme.md
View file @ daa4d424
# svg-спрайт с использованием символов Из файлов папки `sprite-svg/svg/` в папку `sprite-svg/img/` будет сгенерирован файл спрайта `sprite-svg.svg`, который далее будет скопирован в папку сборки. Стилевой файл блока не используется. SVG-файлы будут оптимизированы перед сборкой в спрайт. Сам спрайт имеет вид:
**ВНИМАНИЕ!** Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте [svg4everybody](https://www.npmjs.com/package/svg4everybody) (включен в сборку по умолчанию). <pre class="code">
<code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="display:none"&gt;</code>
<code> &lt;symbol id="icon-boo" viewBox="0 0 30 30"&gt;&lt;path d="..."/&gt;&lt;/symbol&gt;</code>
<code> &lt;symbol id="icon-bs" viewBox="0 0 28 28"&gt;&lt;path d="..."/&gt;&lt;/symbol&gt;</code>
<code> ...</code>
<code>&lt;/svg&gt;</code>
</pre>
Из файлов папки `svg/` в папку `img/` будет сгенерирован файл спрайта `sprite-svg.svg`. Для вставки на страницу используйте конструкции <code>svg &gt; use</code> со ссылками на <code>id</code> символа:
Сам спрайт имеет вид: <pre class="code">
<code>svg(width="32", height="32")</code>
<code> use(xlink:href="img/sprite-svg.svg#icon-boo")</code>
</pre>
```html <p class="alert alert--warning">Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте <a href="https://www.npmjs.com/package/svg4everybody">svg4everybody</a> (включен в сборку по умолчанию).</p>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-1" viewBox="0 0 30 30"><path fill="#444" d="..."/></symbol>
<symbol id="icon-2" viewBox="0 0 28 28"><path fill="#444" d="..."/></symbol>
</svg>
```
Для вставки на страницу используйте конструкции `svg > use` со ссылками на `id` символа: Демонстрационный контент блока (иконки стрелок):
```html <svg width="32" height="32">
<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> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-right-arrow"></use>
``` </svg>
<svg width="32" height="32">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-left-arrow"></use>
</svg>
src/blocks/sprite-svg/sprite-svg.html deleted 100644 → 0
View file @ b7894814
<!--DEV
Это пример использования спрайта:
<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 (по умолчанию включен в сборку, включается в JS-файле этого блока)
-->
src/blocks/typo/readme.md 0 → 100644
View file @ daa4d424
Реализуется блоком `typo`, все стили которого являются глобальными.
Параграфы, расстояние между ними. [Ссылка](qwert1234). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
# Заголовок 1
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
## Заголовок 2
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
### Заголовок 3
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
#### Заголовок 4
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
##### Заголовок 5
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
###### Заголовок 6
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
* Пункт 1
* Подпункт 1
* Подпункт 2
* Пункт 2
* Пункт 3
1. Пункт 1
1. Подпункт 1
2. Подпункт 2
2. Пункт 2
3. Пункт 3
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
* * *
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
<table>
<tbody>
<tr>
<td><code>&lt;a></code></td>
<td><a href="">ссылка</a></td>
</tr>
<tr>
<td><code>&lt;strong></code></td>
<td>**действительно значимый текст**</td>
</tr>
<tr>
<td><code>&lt;b></code></td>
<td>**просто выделенный текст, лид**</td>
</tr>
<tr>
<td><code>&lt;i></code></td>
<td>_иностранное слово или термин_</td>
</tr>
<tr>
<td><code>&lt;em></code></td>
<td>_эмфатическое ударение_</td>
</tr>
<tr>
<td><code>&lt;s></code></td>
<td><s>информация, утратившая актуальность</s></td>
</tr>
<tr>
<td><code>&lt;del></code></td>
<td><del>изменение, внесённое в документ (удаление)</del></td>
</tr>
<tr>
<td><code>&lt;ins></code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
<tr>
<td><code>&lt;mark></code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
<tr>
<td><code>&lt;small></code></td>
<td><small>малозначимый текст</small></td>
</tr>
<tr>
<td><code>&lt;abbr></code></td>
<td><abbr title="Аббревиатура">АББРЕВИАТУРА</abbr></td>
</tr>
<tr>
<td><code>&lt;kbd></code></td>
<td><kbd>Ctrl + C</kbd></td>
</tr>
<tr>
<td><code>&lt;sup></code></td>
<td>2<sup>3</sup></td>
</tr>
<tr>
<td><code>&lt;sub></code></td>
<td>H<sub>2</sub>O</td>
</tr>
<tr>
<td><code>&lt;code></code></td>
<td>`code`</td>
</tr>
</tbody>
</table>
<address><b>Имя Фамилия</b> <br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:user@mail.com">user@mail.com</a></address>
> Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
>
> <footer><cite>Emmet</cite></footer>
<pre>// Форматированный текст с символом переноса строки
// Вторая строка. Смотри так же [БЭМ-блок для кода](#code).
</pre>
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