Commit b7894814 authored by Nikolay Gromov's avatar Nikolay Gromov

Исправил описания

parent 94f6ad70
...@@ -271,29 +271,22 @@ block content ...@@ -271,29 +271,22 @@ block content
use(xlink:href="img/sprite-svg.svg#temp-icon-left-arrow") 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)
p Из файлов папки #[code sprite-png/png/] в папку #[code sprite-png/img/] будет сгенерирован файл спрайта #[code sprite-ЧИСЛОВОЙ_ИНДЕКС.svg], который далее будет скопирован в папку сборки.
p #[strong Стилевой файл блока генерируется автоматически] и содержит примеси для использования спрайтов. Отдельный файл элемента #[code sprite-png__demo.scss] содержит вызов примеси, генерирующей стили для всех составных частей спрайта. Пример использования части спрайта для конкретного селектора:
pre.code +block-lib('sprite-png', 'PNG-спрайт с <a href="https://github.com/Ensighten/spritesmith">spritesmith</a>', true)
code .selector { include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/sprite-png/readme.md
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('close', 'Закрыть', false) +block-lib('close', 'Закрыть', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/close/close.md include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/close/readme.md
div div
+close('Закрыть') +close('Закрыть')
+block-lib-code() +block-lib-code()
include:show-code() blocks/close/close.pug include:show-code() blocks/close/close.pug
+block-lib('burger', 'Бургер', false) +block-lib('burger', 'Бургер', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/burger/burger.md include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/burger/readme.md
div div
+burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown') +burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
+burger('Показать ничто')(data-some="SOME")
+block-lib-code('burger-code', true) +block-lib-code('burger-code', true)
include:show-code() blocks/burger/burger.pug include:show-code() blocks/burger/burger.pug
......
# PNG-спрайт Из файлов папки `sprite-png/png/` в папку `sprite-png/img/` будет сгенерирован файл спрайта `sprite-ЧИСЛОВОЙ_ИНДЕКС.svg`, который далее будет скопирован в папку сборки.
**ВНИМАНИЕ!** `sprite-png.scss` генерируется автоматически. Не пишите туда ничего вручную. **Стилевой файл блока генерируется автоматически** и содержит примеси для использования спрайтов. Отдельный файл элемента `sprite-png__demo.scss` содержит вызов примеси, генерирующей стили для всех составных частей спрайта. Пример использования части спрайта для конкретного селектора:
**ВНИМАНИЕ!** Имена файлов для спрайта не должны начинаться с цифры! Из имен формируются переменные, которые не могут начинаться с цифр. <pre class="code">
<code>.selector {</code>
<code> // $temp-icon-left-arrow — $ИМЯ_ФАЙЛА_КАРТИНКИ ($ в начале)</code>
<code> @include sprite($temp-icon-left-arrow);</code>
<code>}</code>
</pre>
Из файлов папки `png/` в папку `img/` будет сгенерирован файл спрайта `sprite-УНИКАЛЬНЫЙЦИФРОВОЙИНДЕКС.png`. Демонстрационный контент блока (иконки стрелок):
В `sprite-png.scss` будет сгенерирован набор переменных и примесей для использования спрайта. <div class="temp-icon-right-arrow" style="display: inline-block;"></div>
<div class="temp-icon-left-arrow" style="display: inline-block;"></div>
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