k19 v2.0.3

Kalium19

Небольшой проект, нацеленный на предоставление удобной и функциональной базы для построения будущего фреймворка для вашего сайта.

О проекте

Kalium19 (далее просто K19) разработан для ускорения разработки стилей для будущего CSS. В K19 уже есть почти всё, что нужно для начала.

По сути, K19 - это набор SASS-миксинов и функций, которые и помогают ускорить процесс написания стилей, не заботясь о префиксах (например для свойства transition).

Пример использования

Я буду брать в пример свойство transition.

У нас есть блок elem и стили для него:

.elem {
	display: block;
	background-color: tomato;
}

.elem:hover {
	background-color: green;
}

Стили простые. Есть блочный элемент с фоновой заливкой цветом tomato, а при наведении курсора мыши цвет меняется на green.

Давайте добавим плавную анимацию перехода цвета при наведении курсора:

.elem {
	display: block;
	background-color: tomato;
	transition: background-color .8s;
}

.elem:hover {
	background-color: green;
}

Ну вот и всё. Мы просто делаем переход свойства background-color более плавным. Но! Теперь нужно позаботиться, чтобы наш плавный переход работал на всех браузерах:

.elem {
	...
	-webkit-transition: background-color .8s;
	-moz-transition: background-color .8s;
	-o-transition: background-color .8s;
	transition: background-color .8s;
}

Ну вручную всё это прописывать каждый раз не очень удобно. Поэтому я и создал этот проект.

Давайте решим эту же задачу, но с использованием K19

@import 'path/to/kalium19.scss';

...

.elem {
	...
	@include transition(background-color .8s);
}

Всё! После компиляции SASS в CSS мы увидим:

.elem {
  -webkit-transition: background-color 0.8s;
  -moz-transition: background-color 0.8s;
  -o-transition: background-color 0.8s;
  transition: background-color 0.8s;
}

Также и с, например, keyframes, transform, opacity и другими.

Установка

Вы можете склонировать (git clone) этот репозиторий и вручную все добавить или использовать npm и установить Kalium19 командой npm install k19 (npm i k19).

Зависимости

В Kalium19 присутсвует только одна зависимость - sass и она будет установлена вместе с пакетом k19. Также в package.json уже прописаны задачи, которые нужны для компиляции:

npm run sass-w # запуск слежки за изменениями в проекте и компиляции на ходу
npm run sass-wc # sass-w, но с минификацией
npm run sass-c # компилирует единоразово файл стилей в папку dist/css/