Найти в Дзене
программируй
55 подписчиков

Гайд по creative-загатовке для сайтов

2 мин
Я решил сделать свой движок для сайтов, но не в стиле базового конструктора, а в стиле css-js файлов с необходимыми фичами, которые могут быть полезны. Решил я назвать это Creative-загатовкой, а также все названия css-классов сделать с приставкой "cre-", чтобы они не путались с оригинальным кодом, это моя первая статья, надеюсь я пройду модерацию... Чтобы подключить заготовку, добавьте этот фрагмент кода в тег <head> вашей страницы: <link rel="stylesheet" href="https://scratch-craft-2.github.io/engine/1-0-0.css">
<script src="https://scratch-craft-2.github.io/engine/1-0-0-modal.js" defer></script>
<script src="https://scratch-craft-2.github.io/engine/1-0-0-message.js" defer></script>
<script src="https://scratch-craft-2.github.io/engine/1-0-0.js" defer></script> Первое о чем хочу сказать - заготовка отключает выделение изображений.
Второе: появляется новый специальный тег для централизации элементов в двух вариациях. Также появился специальный css класс для встроенных красивых кнопок
Оглавление

Я решил сделать свой движок для сайтов, но не в стиле базового конструктора, а в стиле css-js файлов с необходимыми фичами, которые могут быть полезны. Решил я назвать это Creative-загатовкой, а также все названия css-классов сделать с приставкой "cre-", чтобы они не путались с оригинальным кодом, это моя первая статья, надеюсь я пройду модерацию...

Чтобы подключить заготовку, добавьте этот фрагмент кода в тег <head> вашей страницы:

<link rel="stylesheet" href="https://scratch-craft-2.github.io/engine/1-0-0.css">
<script src="https://scratch-craft-2.github.io/engine/1-0-0-modal.js" defer></script>
<script src="https://scratch-craft-2.github.io/engine/1-0-0-message.js" defer></script>
<script src="https://scratch-craft-2.github.io/engine/1-0-0.js" defer></script>

Css-фичи

Первое о чем хочу сказать - заготовка отключает выделение изображений.

Второе: появляется новый специальный тег для централизации элементов в двух вариациях.

  • <cre-center> — для вертикального списка элементов (например, форма с полями друг под другом).
  • <cre-center-warp> — для сетки/ряда элементов, которые должны переноситься на новые строки при уменьшении ширины (например, карточки товаров).

Также появился специальный css класс для встроенных красивых кнопок - cre-button
Работает только с кнопками.

Класс cre-rotate добавляет переворот всем элементам с этим классом при наведении на него.
Класс cre-rotate-05 работает также, но вместо поворота на 360 градусов, поворачивается на 180.

Также есть собственная система модальных окон. Пример:

<div class="cre-modal">
<div class="cre-modal-content">
<span class="cre-close">×</span>
<h2>Модальное окно</h2>
<p>Пример.</p>
</div>
</div>

Также ссылки (a) с классом "cre" имеют прикольный дизайн, работает только со ссылками.

Класс "crePart" для div-элементов позволяет добавить отдельный фрагмент текста на сайте и выделить его.

JavaScript

Тут все интереснее. Начнем с того что всем вашим изображениям будет Установлено draggable="false", чтобы пользователи не могли «захватывать» картинки мышью. Также устанавливает атрибут target="_blank" для всех ссылок (<a>). Как итог все ссылки будут открываться в новой вкладке/окне браузера.

Если вы добавите какому-то элементу атрибут modal и класс cre-dialog-open, то нажатие на этот элемент будет открывать модальный диалог с таким же id как и значение атрибута modal.
Пример:

<button class="cre-dialog-open" modal="modal1">Открыть встроенное модальное окошко</button>
<div class="cre-modal" id="modal1">
<div class="cre-modal-content">
<span class="cre-close">×</span>
<h2>Модальное окно</h2>
<p>Пример</p></div>
</div>

Также есть дополнительно есть система с отправкой небольших сообщений на странице, можно использовать для обозначения что текст скопирован, произошла ошибка и тд.
Пример:
creOpenMessage('Обновление доступно', '#2196F3', '🔄');
Принимается 3 параметра: Текст, цвет и иконка. последние два не обязательно указывать.

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