Ungic packer - среда разработки веб верстальщика

# Модули

# ungic.component, ungic.component.core

Ядро компонента, располагается в .core директории каждого компонента, доступен для использования двумя способами:

  • абсолютный @use "ungic.component"
  • относительный @use "./.core"

Данный модуль содержит весь основной функционал для работы с компонентами.

Имеются ограничения использования!

Включение данного модуля возможно в

  • once.scss
  • render.scss и в любых файлах которые будут включены в render.scss
  • произвольных модулях - модули которые будут использоваться при написании css правил, например functions или mixins.
// component/app/render.scss

@use ".core" as this;

@debug this.cid(); // app

@include this.component {
	display: block; // .app {display:block}
}

# ungic.components

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


@use "ungic.components" as components;

@debug components.$cids;

# ungic.components.{cid}

Включить любой существующий компонент проекта как модуль (получить доступ к его API). Возвращает ядро компонента и все, что будет передано с помощью @forward директивы в index.scss файле компонента.

Имеются ограничения использования!

Включение данного модуля возможно в

  • render.scss и в любых файлах которые будут включены в render.scss
  • произвольных модулях - модули которые будут использоваться при написании css правил, например functions или mixins.
// component/grid/index.scss
@forward ".core";

// Forward custom mixins
@forward "mixins";

// Forward custom functions
@forward "functions";


// component/app/render.scss

@use ".core" as this;
@use "ungic.components.grid" as grid;

@debug this.cid(); // app
@debug grid.cid(); // grid

@include this.component {
	@include grid.media(grid.media(max-sm)) {
		display: none;
	}
}

WARNING

Данный модуль служит исключительно для получения доступа к API компонента!

index.scss файл компонента не должен содержать CSS правила или включать их в себя! Для включения стилей одного компонента в другие компоненты, существует следующий способ.

# ungic.components.{cid}.{path}

Получить доступ к файлам другого компонента проекта.

Имеются ограничения использования!

Включение данного модуля возможно в

  • render.scss и в любых файлах которые будут включены в render.scss
  • произвольных модулях - модули которые будут использоваться при написании css правил, например functions или mixins.
@use ".core" as this;
@use "sass:meta";

@include this.component {
	&-controls {
		// Правила стилей для кнопки из controls плагина
		@include meta.load-css('ungic.components.controls.btns.btn');
	}
}

// .app-controls .btn {...}

# ungic.component.props

Получить доступ к вычисленным properties текущего компонента. Данный модуль является веткой ядра компонента, предназначен для конфигурирования файлов где ядро компонента недоступно!

Имеются ограничения использования!

Включение данного модуля возможно в

  • config_over.scss файле проекта
  • config.scss файле компонента

Для получения доступа к данному модулю из render.scss или произвольных модулей, требуется включать ядро компонента:

// project/config_over.scss
@use "sass:map";
$cid: null !default;
$config: () !default;
/* ------------------------------------------------ */

@use "ungic.theme" as theme;
@use "ungic.component.props" as props;

// Переопределили конфигурацию app компонента
// относительно его вычисленным properties
@if($cid == app) {
  $config: map.merge($config, (
		border-btn: (props.prop(border-width)
					 props.prop(border-style)
					 red)
	));
}

// components/app/render.scss

@use ".core" as this;

@include this.component {
	// Доступ к properties из ядра компонента
	padding: this.prop(padding);
}

# ungic.project

Доступ к проекту осуществляется непосредственно с помощью данного модуля. Данный модуль позволяет получить доступ к следующим данным:

  • Конфигурации проекта
  • Properties проекта

Обратите внимание!

Использовать properties проекта для стилизации компонентов не рекомендуется! Так как, properties проекта автоматически наследуются компонентами и суммируются с их личными properties. Именно поэтому, при построении CSS правил компонентов, следует использовать их собственные методы ядра prop, props.

# ungic.theme

Данный модуль отвечает за темизацию компонентов.

Ссылки по теме:

# ungic.meta

Данный модуль содержит системные методы фреймворка.

# ungic.utils

Данный модуль содержит инструменты которые могут быть использованы при написании CSS правил компонентов.

# Инструменты для работы с RTL

Данный модуль содержит набор инструментов, которые облегчают работу с rtlcss (opens new window) плагином:

Данные методы являются функциями которые принимают значения и подставляют необходимые директивы (комментарии) rtlcss плагина:

@use ".core" as this;
@use "ungic.utils" as *;

.btn {
	// Игнорировать обработку RTL плагином
	margin-left: rtli(10px);

	// Разные результаты для LTR / RTL
	border-left: dir(10px, 20px);

	// и тд
	font-family: rtl-prepend('"Segoe UI", Helvetica, Arial', 'Heebo', ',');
}

# ungic.sprites

Модуль который генерируется icons плагином, служит для работы с иконками - спрайтами.

# ungic.font-icons

Модуль который генерируется icons плагином, служит для работы с иконками - шрифтами.

← Работа с SASS компонентами →