⚠️ Обратите внимание на то, что данная версия пакета Kalium19 v5 находится в режиме долгосрочной поддержки (LTS) до релиза Kalium19 v6, который к слову не скоро.

Обновления продолжат выпускаться до релиза Kalium19 v6, но ничего нового добавлено на будет. Обновления будут лишь исправлять невыявоеннве раннее проблемы и недочёты

---

Kalium19 v5

📦 Большой набор миксинов, карт и функций на языке препроцессора Sass для помощи в ускорении и упрощении написания CSS-стилей.

Приступая к работе...

Для начала необходимо удостовериться, что в вашем проекте (в котором будет использоваться Kalium19) установлена npm-зависимость sass, т.к. Kalium19 сам ничего не компилирует, а лишь является набором готовых стилей и функций на языке препроцессора Sass.

Предпологается, что с языком Sass (SCSS) вы уже знакомы и о необходимости установленного NodeJS и npm вам известно.

Установка

Установка Kalium19 не отличается ничем от других npm-пакетов.

Порядок действий:

1. перейдите в корень проекта через терминал (Windows-like: командную строку):

   cd my-project

2. введите команду для установки npm-пакета @rx1310/kalium19 (также есть на GitHub Packages) в проект:

   npm install @rx1310/kalium19.v5

   Если Sass не установлен в проект:

   npm install sass --save-dev

3. дождитесь установки всех пакетов и зависимостей в проект и в основной Sass-файл стилей пропишите импорт модуля kalium19:

   @use 'node_modules/@rx1310/kalium19.v5' as *;

   * означает, что миксины и функции из пакета @rx1310/kalium19 доступны глобально. Вы можете использовать пространство имён в Sass, чтобы избежать возможных конфликтов с другими пакетами/библиотеками.

   Именно из-за использования модульной системы Sass Kalium19 лишается поддержки старых компиляторов (LibSass, например), т.к. они не поддерживают (или поддерживают плохо) работу с директивами @use и @forward.

4. для проверки правильного импорта можно использовать миксин @include check; в файле стилей после импорта:

   @use 'node_modules/@rx1310/kalium19.v5' as *;
   
   @include check;

   и в консоли получить след. сообщение:

   index.scss:3 Debug: Installed Kalium19!
   

   а в итоговом CSS-файле должно быть что-то похожее:

   /*
    * @name    : @rx1310/kalium19 (title: Kalium19)
    * @license : MIT
    * @author  : Haba Kudzaev (rx1310) <[email protected]>
    * @homepage: https://github.com/rx1310/kalium19
    */

5. готово!

А если не используется пакетный менеджер?

В таком случае можно просто склонировать репозиторий проекта в папку проекта, используя Git:

git clone https://github.com/rx1310/kalium19.v5

Импорт Kalium19 производится также, как и в пункте 4 в варианте с пакетным менеджером, но путь до пакета указывается другой.

Также можно склонировать Kalium19 в качестве субмодуля Git:

git submodule add https://github.com/rx1310/kalium19.v5

А если не установлена утилита Git?

В таком случае можно просто скачать архив репозитория с GitHub:

1. выберите версию (последняя версия )
2. на странице релиза версии внизу выберите ссылку Source code (zip) и скачайте архив нужной версии проекта.

Если у Вас установлен curl или Wget, то можете воспользоваться командой в терминале:

# curl
curl -L -O https://github.com/rx1310/kalium19.v5/archive/refs/heads/main.zip

# wget
wget --no-check-certificate --content-disposition https://github.com/rx1310/kalium19.v5/archive/refs/heads/main.zip

Данные команды скачают архив версии с ветки main.

Настройка Kalium19

После подключения Kalium19 можно сразу же прописать параметры для пакета. Например, подключим Kalium19 и настроим отображение ошибок в режиме «Предупредительный» (warn), а также отключим генерацию свойства opacity для браузера Internet Explorer 5 и еще отключим префиксы правила @keyframes для одного старого браузера от Microsoft (RIP) и Opera на старом движке (новую версию на Chromium это не коснется):

// SCSS Input:
@use '../kalium19.v5' as k19 with (
	$strict-mode: warn,
	$opacity: (
		ie5: false,
		ie8: true
	),
	$keyframes: (
		webkit: true,
		moz: true,
		ms: false,
		o: false
	)
);

.block {
	@include k19.animation-direction(reverse);
	@include k19.opacity(.7);
	@include k19.animation(animPulse 5s infinite)
}

@include k19.keyframes(animPulse) {
	0%   { background-color: #001F3F; }
	100% { background-color: #FF4136; }
}

/* CSS Output: */
.block {
	-webkit-animation-direction: reverse;
	-moz-animation-direction: reverse;
	-o-animation-direction: reverse;
	animation-direction: reverse;
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	/* for IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	-webkit-animation: animPulse 5s infinite;
	-moz-animation: animPulse 5s infinite;
	-o-animation: animPulse 5s infinite;
	animation: animPulse 5s infinite;
}

@-webkit-keyframes animPulse {
	0%   { background-color: #001F3F; }
	100% { background-color: #FF4136; }
}
@-moz-keyframes animPulse {
	0%   { background-color: #001F3F; }
	100% { background-color: #FF4136; }
}
@keyframes animPulse {
	0%   { background-color: #001F3F; }
	100% { background-color: #FF4136; }
}

Все указанные настройки были учтены и миксины отработали с учетом этих самых настроект. Весь список изменяемых настроект находится в файле config.scss.

Директива @import

Если Вы до сих пор используете директиву @import в Sass, то вот что говорят разработчики Sass в своем блоге:

The Sass team wants to allow for a large amount of time when @use and @import can coexist, to help the ecosystem smoothly migrate to the new system. However, doing away with @import entirely is the ultimate goal for simplicity, performance, and CSS compatibility.

Перевод (машинный)

Команда Sass хочет предусмотреть большое количество времени, когда @use и @import могут сосуществовать, чтобы помочь экосистеме плавно перейти на новую систему. Однако полный отказ от @import является конечной целью для простоты, производительности и совместимости с CSS.

Да, если вы не желаете использовать модульную систему в Sass, то импорт Kalium19 миксинов, переменных и функций сохранена, до полного прекращения поддержки в Sass.

На примере ниже мы импортируем библиотеку "по-старому" через директиву @import и функциональность по сути не нарушена.

// SCSS Input
@import '../kalium19.v5';

$prfxs_border-radius: webkit moz; // выбираем нужные префиксы

.block {
	@include wh(42px);
	@include border-radius(12px); // префиксы подставляются к свойству
}

/* CSS Output */
.block {
	width: 42px;
	height: 42px;
	-webkit-border-radius: 12px; /* свойство генерируется с префиксом для браузера */
	-moz-border-radius: 12px; /* свойство генерируется с префиксом для браузера */
	border-radius: 12px;
}

Лицензия

Проект Kalium19 распространяется совершенно бесплатно и находится под защитой лицензии MIT.

Инструментарий, используемый в разработке, распространяется по указанной автором / компанией / разработчиком лицензии, не зависящей от этого проекта!

MIT License

Copyright (c) 2022, Haba Kudzaev (rx1310) <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Если Вы нашли нарушение чьей-либо лицензии в моем проекте, то просьба написать мне → Telegram, эл. почта или VK.