Менеджер стилей Создание сниппетов (HTML, CSS)

Создание сниппетов (HTML, CSS)

В Setka Editor можно составлять сниппеты разных типов. Вы можете превратить пост, параграф, заголовок, сетку, колонку, картинку, эмбед, разделитель, галерею или контейнер в шаблон и затем использовать его во время верстки новых постов:

 

Пост

Является главным контейнером любой публикации, созданной в Setka Editor.

Структура HTML:


<div class="stk-post"> <!-- содержимое поста -->
</div>


Пример:

<div class="stk-post">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>

Параграфы и заголовки

Параграфы — минимальная единица контента в Setka Editor. Любой текст должен располагаться внутри параграфа. Наряду с параграфами существуют и заголовки (теги <h1-h6>).

 

Структура HTML:


<p><!-- текст параграфа --></p>

<h2 class="stk-theme_3883__style_large_header">
<!-- текст заголовка H2 -->
</h2>
<h4 class="stk-theme_3883__style_small_header">
<!-- текст заголовка H4 -->
</h4>

 

Параграф может находиться внутри:

      • Поста
      • Колонки
      • Контейнера 

Параграф может содержать:

      • текст
      • теги <b>, <strong>, <i>, <em>, <a>, <u>, <del>, <sup>, <span>, <br>
      • инлайн-картинки <img>

 

Пример:


<p>Просто текст</p>

<p>Текст со <a href="https://setka.io">ссылкой</a> на сайт</p>

<p>Текст с <strong>полужирным</strong> выделением<br>
и переносом строки</p>

<p><img src="icon.png" alt="иконка"> текст</p>

<h2 class="stk-theme_3883__style_large_header">
Большой заголовок раздела
</h2>

 

Сетка

Сетки используются для многоколоночной верстки контента. Каждая сетка состоит из контейнера (stk-grid) и самих колонок (stk-grid-col). Контент (параграфы, картинки и т.д.) располагаются внутри колонок.

 

Структура HTML:


<div class="stk-grid" data-ce-tag="grid">
 <!-- колонка 1 -->
 <!-- колонка 2 -->
 <!-- колонка N -->
</div>

  

Сетка может находиться внутри:

      • Поста
      • Колонки
      • Контейнера

Сетка может содержать:

      • Колонку

 

Пример:


<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
<p>Текст в левой колонке</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
<p>Текст в правой колонке</p>
</div>
</div>

 

Колонка

Структура HTML:


<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width=”{N}”>
<!-- содержимое колонки -->
</div>

Для колонки нужно задать атрибут data-col-width, определяющий ее ширину. Это может быть целое число от 1 до максимального количества колонок в данной модульной сетке. Например, в 6-колоночной сетке атрибут data-col-width может принимать значения от 1 до 6.

 

Колонка может находиться внутри:

      • Сетки

 Колонка может содержать:

      • Параграф
      • Сетку
      • Картинку
      • Эмбед
      • Разделитель
      • Галерею
      • Контейнер

 

Пример:


<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>Узкая левая колонка</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>Центральная колонка с контентом</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>Узкая правая колонка</p>
</div>
</div>

 

Картинка

Картинки состоят из контейнера картинки (image-figure), маски (mask), самой картинки (<img>) и подписи к картинке (<figcaption>). Все эти элементы являются обязательными, кроме подписи.

 

Структура HTML:


<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
<img src="path/to/image.jpg" alt="">
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к картинке -->
</figcaption>
</figure>

 

Также картинка может содержать ссылку:

<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
<a class="stk-link" href="https://setka.io">
<img src="path/to/image.jpg" alt="">
</a>
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к картинке -->
</figcaption>
</figure>

 

Картинка может находиться внутри:

      • Поста
      • Колонки
      • Галереи
      • Контейнера

 Картинка может содержать: ничего

 

Эмбед 

Эмбеды по структуре похожи на картинки и могут содержать произвольный HTML-код (в том числе <style> и <script>) внутри элемента <code>.

 

Структура HTML:


<figure class="stk-embed-figure" data-ce-tag="embed-figure">
<code class="stk-code">
<!-- Произвольный HTML-код -->
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к эмбеду -->
</figcaption>
</figure>

 

Эмбед может находиться внутри:

      • Поста
      • Колонки
      • Контейнера

 Эмбед может содержать внутри: ничего

 

Разделитель

Структура HTML:


<hr class="{CSS-класс разделителя}">
 

Пример:


<hr class="stk-theme_3883__separator_basic_divider">

Разделитель может находиться внутри:

      • Поста
      • Колонки
      • Контейнера

Разделитель может содержать внутри: ничего

 

 

Галерея

Галерея — это контейнер для картинок. На странице поста и в режиме превью она превращается в работающее слайдшоу при помощи JS-скрипта галереи.

 

Структура HTML:


<div class="stk-gallery" data-ce-tag="gallery">
<code class="stk-code">
<!-- Произвольный HTML-код -->
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к эмбеду -->
</figcaption>
</div>

 

Галерея может находиться внутри:

      • Поста
      • Колонки
      • Контейнера

 Галерея может содержать:

      • Картинку

 

Контейнер

Контейнер — универсальная сущность для любых блоков, которые нельзя сформировать при помощи стандартных элементов редактора. К контейнерам, как и к другим элементам, можно добавлять любые классы и атрибуты.

 

Структура HTML:


<div class="stk-container" data-ce-tag="container">
<!-- содержимое контейнера -->
</div>

 

Также контейнеры могут использоваться для создания блочной ссылки:


<a class="stk-container stk-container-link"
data-ce-tag="container"
href="https://setka.io">
<!-- содержимое контейнера -->
</a>



Контейнер может находиться внутри:

      • Поста
      • Колонки
      • Контейнера

 

Контейнер может содержать:

        • Параграф
        • Сетку
        • Картинку
        • Эмбед
        • Разделитель
        • Галерею
        • Контейнер

 

Примеры сниппетов

Цитата между разделителей:


<hr class="stk-theme_3883__separator_basic_divider">
<p class="my-large-quote">
Текст цитаты
</p>
<hr class="stk-theme_3883__separator_basic_divider">

 

Вложенные контейнеры:


<div class="stk-container my-outer-block" data-ce-tag="container">
<div class="stk-container my-inner-block" data-ce-tag="container">
<p>Текст внутри контейнера</p>
</div>
</div>

 

Сетка с боковой и основной колонками:

<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="2">
<p class="stk-theme_3883__style_small_text">
Мелкий текст в боковой колонке
</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="4">
<p>
Колонка с основным текстом
</p>
</div>
</div>

 

О том, как добавить сниппет во время редактирования поста в Setka Post Editor, вы можете узнать из этой статьи.