PHPackages isengine/isscss - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. isengine/isscss ActiveProject[Framework](/categories/framework) isengine/isscss =============== Библиотека стилей для isEngine framework на SASS/SCSS 062SCSS Since Oct 2Pushed 3y ago1 watchersCompare [ Source](https://github.com/isengine/isscss)[ Packagist](https://packagist.org/packages/isengine/isscss)[ RSS](/packages/isengine-isscss/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) Описание ======== [](#описание) Библиотека стилей для isEngine framework на SASS/SCSS. Быстрый старт ============= [](#быстрый-старт) Подключите библиотеку к своему проекту. ``` @import "/path/to/isengine/isscss/src/is"; ``` Вы можете использовать библиотеку как **utility first**, назначая классы элемента, например: ``` // html код в стиле utility first ... ``` Или использовать ее для простроения своих классов через наследование от классов-шаблонов: ``` // style sheet .flex-block { @extend %flex; @extend %my-1; @extend %px-2; @extend %justify-content-between; } // html код по методологии BEM ... ``` Оглавление ========== [](#оглавление) - [О проекте](#%D0%BE-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B5) - [Совместимость](#%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C) - [Установка](#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0) - [Варианты использования](#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) - [Настройка](#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0) - [Основные параметры](#%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B) - [Контрольные точки](#%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D1%82%D0%BE%D1%87%D0%BA%D0%B8) - [Адаптивная сетка](#%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B0%D1%8F-%D1%81%D0%B5%D1%82%D0%BA%D0%B0) - [Цвета](#%D1%86%D0%B2%D0%B5%D1%82%D0%B0) - [Шрифты](#%D1%88%D1%80%D0%B8%D1%84%D1%82%D1%8B) - [Размерный ряд](#%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%BD%D1%8B%D0%B9-%D1%80%D1%8F%D0%B4) - [Абсолютные величины](#%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D1%8B%D0%B5-%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B8%D0%BD%D1%8B) - [Относительные величины](#%D0%BE%D1%82%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B8%D0%BD%D1%8B) - [Специальные величины](#%D1%81%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B8%D0%BD%D1%8B) - [Кастомизация](#%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) - [Компоненты](#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B) - [Префикс](#%D0%BF%D1%80%D0%B5%D1%84%D0%B8%D0%BA%D1%81) - [Классы](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B) - [Общие правила](#%D0%BE%D0%B1%D1%89%D0%B8%D0%B5-%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%B0) - [Короткое написание](#%D0%BA%D0%BE%D1%80%D0%BE%D1%82%D0%BA%D0%BE%D0%B5-%D0%BD%D0%B0%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5) - [Модификаторы направлений](#%D0%BC%D0%BE%D0%B4%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D1%8B-%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B9) - [Установки по-умолчанию](#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B8-%D0%BF%D0%BE-%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E) - [Классы отступов](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D0%BE%D0%B2) - [Классы краев](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%BA%D1%80%D0%B0%D0%B5%D0%B2) - [Толщина края](#%D1%82%D0%BE%D0%BB%D1%89%D0%B8%D0%BD%D0%B0-%D0%BA%D1%80%D0%B0%D1%8F) - [Радиус края](#%D1%80%D0%B0%D0%B4%D0%B8%D1%83%D1%81-%D0%BA%D1%80%D0%B0%D1%8F) - [Цвет края](#%D1%86%D0%B2%D0%B5%D1%82-%D0%BA%D1%80%D0%B0%D1%8F) - [Классы ширины и высоты](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B-%D0%B8-%D0%B2%D1%8B%D1%81%D0%BE%D1%82%D1%8B) - [Классы отображения](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F) - [Специальны классы отображения](#%D1%81%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F) - [Классы позиционирования](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) - [Класс позиционирования по оси z](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81-%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D0%BF%D0%BE-%D0%BE%D1%81%D0%B8-z) - [Классы выравнивания](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) - [Классы изображений](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9) - [Загрузка фоновых изображений](#%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D1%84%D0%BE%D0%BD%D0%BE%D0%B2%D1%8B%D1%85-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9) - [Фон в виде градиента](#%D1%84%D0%BE%D0%BD-%D0%B2-%D0%B2%D0%B8%D0%B4%D0%B5-%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%D0%B0) - [Выравнивание изображений](#%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9) - [Выравнивание фоновых изображений](#%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%BE%D0%BD%D0%BE%D0%B2%D1%8B%D1%85-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9) - [Выравнивание масок](#%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B0%D1%81%D0%BE%D0%BA) - [Классы цветовой палитры](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9-%D0%BF%D0%B0%D0%BB%D0%B8%D1%82%D1%80%D1%8B) - [Классы прозрачности](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D0%BF%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D0%BE%D1%81%D1%82%D0%B8) - [Классы текста](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0) - [Шрифт](#%D1%88%D1%80%D0%B8%D1%84%D1%82) - [Свойства шрифта](#%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0) - [Свойства текста](#%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0) - [Тени](#%D1%82%D0%B5%D0%BD%D0%B8) - [Контейнер flex box](#%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80-flex-box) - [Расположение элементов](#%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2) - [Размеры](#%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%8B) - [Порядок](#%D0%BF%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA) - [Выравнивание](#%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5) - [Контейнер grid](#%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80-grid) - [Анимации](#%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8) - [Пользовательский интерфейс](#%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B9-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81) - [Создание собственных классов](#%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2) - [Наследование](#%D0%BD%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5) - [Миксины](#%D0%BC%D0%B8%D0%BA%D1%81%D0%B8%D0%BD%D1%8B) - [Дорожная карта](#%D0%B4%D0%BE%D1%80%D0%BE%D0%B6%D0%BD%D0%B0%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B0) - [Список изменений](#%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B9) - [Ссылки](#%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8) О проекте ========= [](#о-проекте) Данный проект создан как вспомогательная SCSS библиотека для простого управления стилями в вашем проекте. Если вы использовали такие фреймворки как Bootstrap, Foundation, Materialize, Tailwind и подобные, эта библиотека будет для вас интуитивно понятной. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Совместимость ============= [](#совместимость) Вы можете совершенно спокойно подключить isScss к абсолютно любому проекту. Данная библиотека написана на чистом SCSS и НЕ использует сторонние JavaScript-библиотеки. Чтобы устранить возможные конфликты с повторением классов, вы можете использовать префикс. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Установка ========= [](#установка) Для использования, просто импортируйте библиотеку в свой проект ``` @import "/vendor/isengine/isscss/src/is"; ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Варианты использования ====================== [](#варианты-использования) Вы можете использовать isScss как **utility first** / **functional** / **atomic** библиотеку, прописывая стили в класс элемента, например: ``` ... ``` За использование библиотеки как **utility first** отвечают [**Компоненты**](#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B). Если вы не хотите иметь лишние классы в своем проекте, которые будут занимать лишнее место и снижать скорость загрузки, отключите их использование на уровне компонентов. Вы также можете использовать isScss для простроения своих классов, например, по методологии BEM. Подробнее смотрите в разделе [**Создание собственных классов**](#%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2). [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Настройка ========= [](#настройка) Вы можете настроить isScss так, как вам нужно. Для этого подключите файл настроек ПЕРЕД подключением бибилиотеки: ``` @import "settings"; ``` В настройках вы можете задать: - контрольные точки, - адаптивная сетка, - цвета, - шрифты, - размерный ряд, - компоненты, - префикс. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Основные параметры ================== [](#основные-параметры) Контрольные точки ----------------- [](#контрольные-точки) isScss предлагает адаптивную сетку со следующими контрольными точками: ПрефиксМинимальная ширина экранаШирина контейнера320 px100 %xs480 px100 %sm640 px100 %md720 px720 pxlg960 px940 pxxl1200 px1140 pxhd1900 px1600 pxx43800 px3200 pxУказанные в таблице размеры экранов и контейнеров тоже выбраны не случайно. Мы собрали наиболее часто встречающиеся разрешения экранов, разбили их по группам и на основе полученных данных составили следующий список. - смартфоны: 480 x 320, 640 x 480, 800 x 480, 854 x 480, 960 x 540, 960 x 640, 1136 x 640, - мониторы: 800 x 600, 1024 × 768, 1280 х 1024, - HD экраны: 1280 х 720, 1280 х 800, 1366 x 768, 1440 x 900, - Full HD экраны: 1920 x 1080, 1920 x 1200, - 2k: 2048 x 1400, 2048 × 1536, 2560 x 1400, 2560 x 1440, - Ultra HD: 3840 x 2160, 4096 x 1400, 4096 x 2160, 5120 x 2160, 6016 x 3384, 7680 x 4320. Предлагаемая нами сетка поддерживает как старые экраны, так и новые, с учетом специфических разрешений, разрешений для экранов высокой и сверхвысокой чёткости с обратной интерполяцией разрешений в браузерах смартфонов. Префиксы обозначают название контрольных точек и задают минимальную ширину экрана. ``` // блок настроек $is-layout: ( breakpoints: ( xs: (480px, 100%), sm: (640px, 100%), md: (720px, 720px), lg: (960px, 940px), xl: (1200px, 1140px), hd: (1900px, 1600px), x4: (3800px, 3200px) ), ... ); ``` Пример использования: ``` ... ``` Если вы хотите использовать другие названия или значения контрольных точек, вы можете самостоятельно задать их в настройках. Также в блоке настроек вы можете указать минимальную ширину для тега **'body'**. ``` // блок настроек $is-layout: ( ... min-width: 320px, ... ); ``` По-умолчанию стоит значение **'320px'**. Если экран становится ниже этого значения, появляется горизонтальная полоса прокрутки. Это удобно для того, чтобы ограничить адаптивную верстку. Нужно помнить, что это только значение параметра. Сам параметр используется в модуле нормализации. Если у вас выключен этот модуль, параметр не будет работать. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Адаптивная сетка ---------------- [](#адаптивная-сетка) В isScss, как и в большинстве похожих библиотек, используется адаптивная сетка для блочной верстки. Сетка включает в себя следующие элементы: - контейнер, - строки, - колонки. В целом код выглядит следующим образом: ``` ... ... ... ``` По-умолчанию сетка состоит из 12 колонок. Это означает, что любая строка бьется на 12 равных частей. Вы можете задавать размер каждой колонки, устанавливая, сколько частей она занимает. Например: ``` // две равные колонки ... ... // три равные колонки ... ... ... // две колонки, ворая больше первой в два раза ... ... ``` И так далее. Можно также использовать разную ширину колонок для разных размеров экрана. Для этого нужно к колонкам добавить префикс контрольных точек. ``` // по одной колонке в строке на маленьких экранах, // по две колонки на строку для средних // и по четыре - для больших ... ``` Если колонки не имеют значений, они будут равной ширины. Дополнительные значения, которые не указываются в настройках: - 0, - auto. Существует дополнительное значение **'auto'**, которое задает автоматическую ширину колонки в зависимости от ее содержимого. Если у вас есть хотя бы одна колонка со значением **'auto'**, то вам нужно также иметь хотя бы одну колону без значений. ``` ... ... ``` В isScss также есть значение **'0'**, которое полностью скрывает колонку. Это сделано для удобства вывода разных колонок для разных размеров экрана. ``` // эта колонка не будет видна на больших экранах ... // эта колонка будет видна только на больших экранах ... ``` Стоит обратить внимание, что колонки всегда должны быть вложены в строку. Строки, в свою очередь, должны быть вложены в контейнер. Допускается иметь в колонках вложенные строки, при этом они могут не иметь контейнера: ``` ... ... ... ``` Число колонок в строке задается в настройках и это значение можно менять. ``` // блок настроек $is-layout: ( ... cols: 12, ... ); ``` Кроме этого, каждая колонка имеет некоторые отступы. Эти отступы также задаются в настройках. ``` // блок настроек $is-layout: ( ... indent: 15px, ... ); ``` Еще вы можете задать расстояние между колонками по-умолчанию. ``` // блок настроек $is-layout: ( ... gap: 2px, ... ); ``` Все эти настройки учитываются для построения размерной сетки. > Внимание! Мы все еще используем flex box для данной сетки. Вы можете использовать классы и стили flex box для строк и колонок. > Сетка на свойствах grid представлена отдельными элементами. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Цвета ----- [](#цвета) В isScss, как в других библиотеках, предлагается цветовая палитра из цветов радуги и оттенков серого. ``` // блок настроек $is-colors: ( theme: #6DB13F, primary: #6DB13F, second: #EF8720, third: #F3E759, ... ); ``` Самыми главными являются рабочие цвета: ``` theme: #..., primary: #..., second: #..., third: #..., ``` Хотя обычно четыре цвета не требуется, достаточно одного-двух. Также есть белый, черный и темный цвета. ``` black: #000000, dark: #212121, light: #F6F6F6, white: #FFFFFF, ``` Отдельно обозначается прозрачный цвет. ``` none: transparent, ``` Оттенки серого используют градацию от 1 до 9, где 1 обозначает самый светлый, а 9 - самый темный цвет. ``` gray-1: #ECECEC, gray-2: #D0D0D0, gray-3: #B9B9B9, gray-4: #A2A2A2, gray-5: #8B8B8B, gray-6: #737373, gray-7: #5C5C5C, gray-8: #454545, gray-9: #2E2E2E, ``` Стандартная палитра состоит из 10 цветов радуги: ``` red: #E54142, orange: #EF8720, yellow: #F9C82D, green: #6DB13F, teal: #128c7e, blue: #5BA3D4, purple: #444A9E, pink: #D64381, beige: #F0E1CE, brown: #795548, ``` Эти цвета подобраны таким образом, чтобы быть не сильно яркими, скорее пастельных тонов, и чтобы на них приемлемо смотрелись надписи черным или белым цветом. Каждому из этих цветов соответствует класс для цвета текста, цвета фона и цвета границ элемента: ``` ... ``` Вы можете также изменить оттенок этих цветов, используя настройки или задать свои собственные названия цветов. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Шрифты ------ [](#шрифты) Вы можете добавить для использования несколько разных шрифтов, включая шрифты с иконками. ``` // блок настроек $is-fonts: ( theme: ( name: #{"Ubuntu", sans-serif}, size: 16px, weight: 400, line-height: 1.25rem, line-indent: 0, ), icon: ( name: FontAwesome, size: 16px, weight: 400, line-height: 1.25rem, line-indent: 0, ), ... ); ``` Как здесь видно, каждый шрифт представлен ассоциативным массивом. Ключ обозначает идентификатор шрифта. Для каждого шрифта указывается его имя, базовый размер, толщина, высота линии и отступ первой строки. Далее эти параметры будут подключаться по заданному ключу. Например: ``` ... ``` Рекомендуется устанавливать для каждого шрифта базовый размер 16px. От размера базового шрифта дальше будут считаться все основные размеры. Если вам нужно поменять параметры шрифта, можно использовать модификаторы. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Размерный ряд ------------- [](#размерный-ряд) Размерный ряд представляет собой линейку размеров для отступов, толщину границ элемента и значения ширины/высоты. ``` // блок настроек $is-sizes: ( absolute: 0.25, 0.5, 0.75, ... relative: 10, 25, 50, ... special: ( xs: 0.25rem, sm: 0.5rem, md: 1rem, ... ) ); ``` В isScss размеры устанавливаются для следующих свойств: - padding (top, left, right, bottom), - margin (top, left, right, bottom), - top, - left, - right, - bottom. - width (min, max), - height (min, max), - font-size, - line-height, - border-width, - gap. Дополнительные значения, которые не указываются в настройках: - 0, - auto. ### Абсолютные величины [](#абсолютные-величины) Абсолютные величины применяются, в основном, для отступов. Они измеряются в единицах **'rem'** и могут иметь как положительные, так и отрицательные значения. Для абсолютных величин, по-умолчанию, используется следующий размерных ряд: ВеличинаЗначениеВ пересчете на пиксели010.1 rem2 px (1.6 px)020.2 rem3 px (3.2 px)0250.25 rem4 px050.5 rem8 px0750.75 rem12 px080.8 rem13 px (12.8 px)090.9 rem14 px (14.4 px)11 rem16 px111.1 rem18 px (17.6 px)121.2 rem19 px (19.2 px)1251.25 rem20 px151.5 rem24 px1751.75 rem28 px181.8 rem29 px (28.8 px)191.9 rem30 px (30.4 px)22 rem32 px2252.25 rem36 px252.5 rem40 px2752.75 rem44 px33 rem48 px353.5 rem56 px44 rem64 px454.5 rem72 px55 rem80 px555.5 rem88 px66 rem96 px77 rem112 px88 rem128 px99 rem144 pxПример: ``` // отступы со всех сторон по 0.5rem ... // отступы со всех сторон по -0.5rem ... ``` ### Относительные величины [](#относительные-величины) Относительные величины применяются, в основном, для определения ширины и высоты. Для относительных величин, по-умолчанию, используется следующий размерный ряд: ВеличинаЕдиницы измерения10% / vw / vh / vmin / vmax25% / vw / vh / vmin / vmax50% / vw / vh / vmin / vmax75% / vw / vh / vmin / vmax90% / vw / vh / vmin / vmax100% / vw / vh / vmin / vmaxПо-умолчанию, в качестве единиц используются проценты. Чтобы использовать другие единицы, нужно указать их после величины. Вы также можете использовать отрицательные значения. Примеры использования: ``` // блок на всю ширину и автоматическую высоту ... // блок на высоту 100vh ... // блок с ограниченной шириной ... // блок с отрицательными отступами ... ``` ### Специальные величины [](#специальные-величины) Специальные величины используются, в основном, для указания точных размеров. Отличия специальных свойств в том, что вы задаете и название, и значение, включая единицы измерения. По-умолчанию, используются следующий ряд: НазваниеЗначениеxs0.25 remsm0.5 remmd1 remlg1.5 remxl3 remnone0min1 pxfull100 %Примеры использования: ``` ... ``` ### Кастомизация [](#кастомизация) Вы можете сами задать удобные вам значения для каждой группы размеров. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Компоненты ---------- [](#компоненты) На данный момент библиотека isScss простроена на базовых классах, функциях и миксинах. Вы можете использовать их для построения собственных классов. Библиотека isScss содержит классы-шаблоны. Такие классы не будут включены в набор стилей при компиляции. Но при этом вы можете использовать их для построения собственных классов. Классы-шаблоны создаются автоматически. А создание классов с теми же именами зависит от настроек компонента. > Обратите внимание! Классы-шаблоны не включают в себя **медиа-запросы** и **состояния**. Однако они, как и обычные классы, могут иметь короткие и полные названия. Это регулируется настройками компонента. Решение использовать все классы целиком может оказаться слишком избыточным. Если вы хотите сэкономить размер файла стилей, вы можете это сделать, отключив отдельные классы или компоненты, которые вам не нужны. Все это также делается через настройки. ``` // блок настроек $is-modules: ( color : true, layout : true, text : true, ... ); ``` Каждый компонент может иметь следующие значения: - true - включено использование компонента полностью, - null - компонент выключен. Также вы можете перечислить различные дополнения, которые хотите включить в компоненте, в виде массива. - breakpoints - для классов компонента не будут созданы модификаторы контрольных точек, - short - короткие имена для классов, - full - длинные имена для классов, - hover - модификаторы для классов с состояниями **'hover'** и **'focus'**, - classes - включить классы. В некоторых компонентах отдельные дополнения не задействованы. Вы можете их написать, но результат от этого не изменится. При включенных компонентах вы можете использовать isScss как **utility first** библиотеку, прописывая стили в класс элемента, например: ``` ... ``` Вы также можете наследовать имена классов. Подробнее смотрите в разделе [**Создание собственных классов**](#%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2). После отключения того или иного компонента, классы пропадут из состава библиотеки. И подобные записи приведут к ошибке. Поэтому мы рекомендуем отключать только параметр **'class'** в массиве настроек компонента. > При отключении параметра **'class'** параметры **'breakpoints'** и **'hover'** не будут иметь значения, т.к. они влияют только на классы, но не на классы-шаблоны. Если вы выключите использование всех компонентов, то в ваш файл стилей будут влючены только созданные вами классы. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Префикс ------- [](#префикс) > Данная возможность пока что не реализована! Если вы используете несколько библиотек или фреймворков, у вас может возникнуть проблема с одинаковыми классами. ``` // блок настроек $is-prefix: ( name : 'is-', enable : false ); ``` Чтобы избежать подобных конфликтов, в isScss можно включить префикс. По-умолчанию он выключен. ``` // префикс выключен, возможны конфликты! ... // включен префикс is- ... ``` Вы можете сами назначить любой префикс. Мы рекомендуем использовать префикс **'is-'**. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы ====== [](#классы) Общие правила ------------- [](#общие-правила) Имена всех встроенных классов в isScss строится по следующим правилам. Названия классов совпадают с названиями параметров стилей. Это позволяет не запоминать классы, а использовать их интуитивно. Например: ``` // есть параметр стиля min-width, но не width-min ... ``` Все префиксы, постфиксы и модификаторы указываются через черточку, символ **'-'**. Например: ``` ... ``` В начале имени класса можгу указываться модификаторы контрольных точек. Такой класс будет действовать для соответствующей ширины экрана. Например: ``` ... ``` Для классов, использующих размерный ряд, в конце указывается один из допустимых размеров. Например: ``` ... ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Короткое написание ------------------ [](#короткое-написание) Для некоторый классов, для упрощения, используются как полные, так и короткие варианты написания. Например: ``` // полная запись ... // короткая запись ... ``` Короткие варианты сделаны для сокращения записи. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Модификаторы направлений ------------------------ [](#модификаторы-направлений) Модификаторы направлений используются для тех классов, свойства которых имеют варианты указания направлений. Например: - padding, - margin, - border. Некоторые модификаторы направлений имеют как полную, так и короткую запись. В полной записи, они указываются через черточку **'-'**, но в короткой записи, эта черточка пропускается. Например: ``` // полная запись ... // короткая запись ... ``` В таблице ниже приведены все модификаторы направлений и их описание. ПолнаяКороткаяОписаниеtoptсверхуbottombвнизуleftlслеваrightrсправаstartsс начала от направления чтенияendeс конца от направления чтения-xпо горизонтали-yпо вертикали[^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Установки по-умолчанию ---------------------- [](#установки-по-умолчанию) По-умолчанию заданы стили для многих базовых элементов, таких как: - body, - div, - h1-h6, - p, - a, - img, - ul, - ol, - input, - button, - и др. Также заданы стили для псевдоэлементов, установлены параметры, приводящие свойства к базовым значениям. Все это сделано для того, чтобы привести элементы к общему виду для отображения в разных браузерах. Но не для того, чтобы каким-либо образом стилизовать эти элементы по своему вкусу. Вы можете отключить данную опцию в компонентах. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы отступов --------------- [](#классы-отступов) Внешние отступы элемента задаются параметром стилей **'margin'**. Внутренние отступы - параметром **'padding'**. Библиотека isScss использует короткие названия для этих параметров: - m, - p. Для этих параметров можно использовать модификаторы контрольных точек, модификаторы направлений и значение из размерного ряда. Общая формула выглядит так: \[breakpoint-\]\[margin|m\]\[-direction|short\_direction\]\[-size\] \[breakpoint-\]\[padding|p\]\[-direction|short\_direction\]\[-size\] Пример: ``` // полная запись margin-top-1 sm-margin-top-2 margin-x-2 // короткая запись mt-1 sm-mt-2 mx-2 ``` Существует еще несколько классов, задающих абсолютные отступы: - left, - right, - top, - bottom. Их короткие названия включают префикс черточки **'-'**, чтобы исключить пересечение с другими классами. - -l, - -r, - -t, - -b. Пример: ``` // полная запись left-1 sm-left-2 // короткая запись -l-1 sm--l-2 ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы краев ------------ [](#классы-краев) Для элементов есть возможность задать края стилями **'border'**. В CSS это составной параметр, который включает: - border-color, - border-style, - border-width, - border-radius - и др. > Для того, чтобы у вас заработали классы краев, вам нужно инициализировать их классами **'b'** или **'border'**. ### Толщина края [](#толщина-края) Библиотека isScss использует следующие названия, полное и короткое, для стиля **'border'**: - border, - b. Для стилизации края можно использовать модификаторы контрольных точек, модификаторы направлений и значение из размерного ряда. Общая формула выглядит так: \[breakpoint-\]\[border|b\]\[-direction|short\_direction\]\[-size\] Пример: ``` // полная запись border-0 border-top-1 sm-border-top-2 // короткая запись b-0 bt-1 sm-bt-2 ``` ### Радиус края [](#радиус-края) Радиус края задается отдельным стилем с полным и коротким названиями: - radius, - r. По-умолчанию радиус задается для всех сторон. Радиус края также может быть задан одним из восьми направлений. Из-за того, что радиус задается для угла, направление представляет собой сочетание сторон. Все модификаторы направлений приведены в таблице ниже. ПолнаяКороткаяОписаниеtop-lefttlверхний левыйtop-righttrверхний правыйbottom-leftblнижний левыйbottom-rightbrнижний правыйtoptверхние левый и правыйbottombнижние левый и правыйleftlлевые верхний и нижнийrightrправые верхний и нижнийДля радиуса можно использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[radius|r\]\[-direction|short\_direction\]\[-size\] Пример: ``` // полная запись radius-0 radius-top-left-1 sm-radius-top-left-2 // короткая запись r-0 rtl-1 sm-rtl-2 ``` ### Цвет края [](#цвет-края) Также для края можно задать цвет. Подробно об этом описано в разделе [**Классы цветовой палитры**](#%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9-%D0%BF%D0%B0%D0%BB%D0%B8%D1%82%D1%80%D1%8B). [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы ширины и высоты ---------------------- [](#классы-ширины-и-высоты) Существует два базовых класса, задающих размеры элемента: - width, - height. И их короткие названия: - w, - h. У каждого из этих классов есть минимальное и максимальное значение: - min-, - max-. Также допускается использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[min-|max-\]\[width|w\]\[-size\] \[breakpoint-\]\[min-|max-\]\[height|h\]\[-size\] Пример: ``` // полная запись width-5 sm-width-3vw max-width-100p // короткая запись w-5 sm-w-3vw max-w-100p ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы отображения ------------------ [](#классы-отображения) Элементам могут быть назначены следующие классы отображения в документе: - none - элемент не отображается, - block - блочный элемент, - inline - строчный элемент, - inline-block - строчный элемент со свойствами блока, - flex - элемент типа flex box, для создания макетов, - grid - элемент типа grid, для создания макетов, - contents - внеблочный элемент, который выносит уровнем вверх все вложенные в него элементы. Для этих классов нет коротких названий. Можно использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[class\] Пример: ``` block sm-none ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Специальны классы отображения ----------------------------- [](#специальны-классы-отображения) В дополнение к основным классам отображения элементов, использующим свойство **'display'**, мы предлагаем несколько вспомогательных классов. Классы, использующие свойство **'visibility'**: - visible, - hidden. Классы, использующие свойство **'overflow'**: - overflow-x, - overflow-y, - overflow-hidden. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы позиционирования ----------------------- [](#классы-позиционирования) Элементам могут быть назначены следующие классы позиционирования в документе: - relative - относительно своего положения, его смещение не влияет на положение любых других элементов, - absolute - относительно своего родителя со значением **'relative'**, - fixed - относительно всего документа, - sticky - относительно документа или родителя, но с **прилипанием к краю** при прокрутке. Для этих классов нет коротких названий. Для элементов с любым из этих классов становится доступным смещение по значениям top, right, bottom, left и по оси z. Можно использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[class\] Пример: ``` relative sm-absolute ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Класс позиционирования по оси z ------------------------------- [](#класс-позиционирования-по-оси-z) Элементы могут быть спозиционированы по оси z. Для этого используется отдельный стиль с полным и коротким названиями: - z-index, - z. Для этого класса используется свой размерный ряд: НазваниеЗначение11210310041000510000last-1first99999И дополнительные значения: - 0, - auto. Можно использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[z-index|z\]\[-size\] Пример: ``` // полная запись z-index-1 sm-z-index-auto // короткая запись z-1 sm-z-auto ``` Данный класс работает только, если для элемента установлен класс позиционирования. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы выравнивания ------------------- [](#классы-выравнивания) Выравнивание элементов делается через следующие стили: - text-align, - vertical-align. В бибилиотеке isScss мы упростили их до одного общего класса с полным и коротким названиями: - align, - a. Для этих параметров можно использовать модификаторы контрольных точек и модификаторы направлений. Кроме обычных направлений, здесь добавляется несколько новых: ПолнаяКороткаяОписаниеСтильtoptпо верхуvertical-align: topbottombпо низуvertical-align: bottomleftlпо левому краюtext-align: leftrightrпо правому краюtext-align: rightstartsс начала от направления чтенияtext-align: startendeс конца от направления чтенияtext-align: end-xпо горизонталиleft: 50%; right: auto;transform: translateX(-50%)-yпо вертикалиtop: 50%; bottom: auto;transform: translateY(-50%)-aпо горизонтали и вертикалиtop: 50%; bottom: auto;left: 50%; right: auto;transform: translate(-50%, -50%)centercпо центру по горизонталиtext-align: centerjustifyjпо ширинеtext-align: justifymiddlemпо центру по вертикалиvertical-align: middlebaselineblпо центру по вертикалиvertical-align: baselineОбщая формула выглядит так: \[breakpoint-\]\[align|a\]\[-direction|short\_direction\] Пример: ``` // полная запись align-top sm-align-x // короткая запись at sm-ax ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы изображений ------------------ [](#классы-изображений) Библиотека isScss позволяет работать со следующими типами изображений: - обычный элемент изображения, - фоновое изображение, - маска. В качестве масок isScss допускает использование фоновых изображений. Однако маски можно перекрашивать в цвета, заданные через свойство **'color'**. В ряде случаев это может оказаться крайне полезно. Например, если вы создаете иконки интерфейса, которые должны менять цвет в зависимости от действий пользователя. Для всех перечисленных элементов есть стандартные классы: - image, - bg, - mask. Эти классы задают размеры контейнера в 100% и отключают повторение. ### Загрузка фоновых изображений [](#загрузка-фоновых-изображений) Для загрузки фоновых изображений используется способность CSS получать значения из атрибутов элемента. В данном случае, читается атрибут **'data'** с именем CSS свойства: - data-mask-image - для изображений в качестве маски, - data-bg-image - для фоновых изображений. Для того, чтобы то или иное свойство применилось, вам нужно прописать соответствующий класс: - mask-image, - bg-image. ### Фон в виде градиента [](#фон-в-виде-градиента) Вы можете использовать в качестве фона градиентную заливку цветом. В данном случае, читается атрибут **'data'** с именем CSS свойства: - data-bg-gradient. Для того, чтобы это свойство применилось, вам нужно прописать соответствующий класс: - bg-gradient. Сам класс использует следующие настройки стиля: ``` background-blend-mode: screen; background-image: attr(data-bg-gradient linear-gradient); ``` ### Выравнивание изображений [](#выравнивание-изображений) Для выравнивания изображений используется свойство **'object-fit'**. Оно позволяет разместить текущий элемент с изображением в родительском элементе не нарушая соотношения сторон. Допускается использовать следующие классы: - image-cover - вписывает изображение таким образом, чтобы оно занимало весь элемент, - image-contain - вписывает изображение таким образом, чтобы оно целиком помещалось в элемент. Вы также можете выровнять изображение в тексте: - image-left или image-l - выравнивает изображение по левому краю, - image-right или image-r - выравнивает изображение по правому краю, - image-center или image-c - выравнивает изображение по центру. Такое выравнивания изображений использует свойство **'float'**. Его стоит применять только в том случае, если вы хотите разместить изображение в текстовом блоке. ### Выравнивание фоновых изображений [](#выравнивание-фоновых-изображений) Выравнивание фоновых изображений происходит аналогично выравниванию простых изображений. Но здесь используется свойство **'background-size'**, которое предназначено непосредственно для таких операций. Допускается использовать следующие классы: - bg-cover, - bg-contain. Также вы можете настроить выравнивание изображения, используя следующие модификаторы: ПолнаяКороткаяОписаниеtoptпо верхуbottombпо низуleftlпо левому краюrightrпо правому краю-xпо центру по горизонтали-yпо центру по вертикалиПример: ``` bg-top bg-x ``` Фоновое изображение может иметь фиксированное позиционирование, которое будет сохранятся даже при прокрутке страницы. За это отвечает специальный класс: - bg-fixed ### Выравнивание масок [](#выравнивание-масок) Выравнивание масок происходит аналогично выравниванию фоновых изображений. Допускается использовать следующие классы: - mask-cover, - mask-contain. И те же модификаторы, что для фоновых изображений. Пример: mask-top mask-x [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы цветовой палитры ----------------------- [](#классы-цветовой-палитры) Библиотека isScss позволяет работать со следующими типами цвета: - цвет текста, - цвет фона, - цвет края. Для всех перечисленных элементов есть следующие группы классов: - color, - bg, - border. Сами цвета задаются исходя из существующей цветовой палитры по названиям этих цветов. > Будьте внимательны, чтобы названия цветов не совпали с такими параметрами, как left, rigth, top, bottom, cover, contain и др. и не создали конфликт! Также можно использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[type-|type\]\[color|c\]\[-value\] Пример: ``` color-white bg-primary border-primary sm-color-gray-5 sm-bg-second sm-border-second ``` Для использования градиентов в качестве фонового изображения рекомендуем использовать свойство bg-gradient. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы прозрачности ------------------- [](#классы-прозрачности) Прозрачность элмента задается стилем с полным и коротким названиями: - opacity, - o. В качестве степени прозрачности используются относительные величины размерного ряда и 0. Хотя они указывются в процентах, само значение прозрачности пересчитывается в единицы с сотыми долями. 0 соответствует полной прозрачности, 100 - полной непрозрачности. Для прозрачности можно использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[opacity|o\]\[-size\] Пример: ``` // полная запись opacity-0 sm-opacity-50 // короткая запись o-0 sm-o-50 ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Классы текста ------------- [](#классы-текста) Библиотека isScss позволяет работать со следующими типами текста: - шрифт и свойства шрифта, - свойства текста. Для всех перечисленных элементов есть следующие группы классов: - font, - text. Для свойств шрифта и текста существуют сокращения. Для всех классов текста можно использовать модификаторы контрольных точек. ### Шрифт [](#шрифт) Гарнитура шрифта задается, исходя из шрифтов в настройках, по их названиям. Общая формула выглядит так: \[breakpoint-\]\[font\]\[-value\] Пример: ``` font-primary sm-font-second ``` ### Свойства шрифта [](#свойства-шрифта) Свойста шрифта, которые доступны для изменения, приведены в таблице: ПолнаяКороткаяОписаниеЗначенияfont-sizefsразмер шрифтаразмерный рядfont-weightfwтолщина шрифта100-900line-heightlhвысота строкиразмерный рядline-indentliотступ строкиразмерный рядОбщая формула выглядит так: \[breakpoint-\]\[class|short\_class\]\[-value\] Пример: ``` // полная запись font-weight-700 font-size-15 sm-font-size-2 // короткая запись fw-700 fs-15 sm-fs-2 ``` ### Свойства текста [](#свойства-текста) Свойства текста меняют состояние текста или его начертание. Они не имеют значений, достаточно просто объявления соответствующего класса. В CSS часть этих свойств относится к группе **'font'**, а часть - к **'text'**. В бибилиотеке isScss мы, для удобства, свели их в группу **'text'**. Их описание приведено в таблице: ПолнаяКороткаяОписаниеtext-normaltnсбрасывает все свойстваtext-decoration-none-сбрасывает подчеркивания и перечеркиванияtext-transform-none-сбрасывает изменение регистра символовtext-boldtbжирныйtext-italictiкурсивtext-underlinetuподчеркнутый текстtext-overlinetoнадчеркнутый текстtext-striketsзачеркнутый текстtext-cliptcтекст обрезается по размеру областиtext-ellipsisteтекст обрезается c многоточиеvtext-wraptwпринудительный перенос строк по ширине блокаtext-small-capstscстрочные буквы становятся маленькими заглавнымиtext-capitalizetccкаждая первая буква слова становится заглавнойtext-lowercasetlcвсе буквы становятся строчнымиtext-uppercasetucвсе буквы становятся заглавными[^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Тени ---- [](#тени) Тени являются вспомогательной группой классов и задаются отдельным стилем с полным и коротким названиями: - shadow, - sh. Варианты классов включают в себя: - тип тени - text (по-умолчанию) / box, - цвет тени - black (по-умолчанию) / white, - направление, - смещение, - размытие, - прозрачность. Такая большая вариативность безусловно порождает множество классов. Но их вызов становится понятным и не вызывает трудности. Прозрачность задается относительными величинами размерного ряда и 0. 0 соответствует полной прозрачности, 100 - полной непрозрачности. Смещение и размытие задаются специальными величинами в соотношении 1:1. Направление представляет собой сочетание сторон. Все модификаторы направлений приведены в таблице ниже. ПолнаяКороткаяОписаниеtop-lefttlвверх влевоtop-righttrвверх вправоbottom-leftblвниз влевоbottom-rightbrвниз вправоtoptверхbottombвнизleftlвлевоrightrвправоПо-умолчанию направление не задано. Можно использовать модификаторы контрольных точек. Общая формула выглядит так: \[breakpoint-\]\[shadow|sh\]\[-type\]\[-color\]\[-size\]\[-opacity\]\[-direction|short\_direction\] Пример: ``` // полная запись shadow-xs shadow-white-xs-bottom-right shadow-box-white-xs-50-bottom-right // короткая запись sh-xs sh-white-xs-br sh-box-white-xs-50-br ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Контейнер flex box ------------------ [](#контейнер-flex-box) Контейнер flex использует множество возможностей и множество дополнительных классов. Для этих классов нет короткой записи. Для всех этих классов можно использовать модификаторы контрольных точек. ### Расположение элементов [](#расположение-элементов) - flex-row - расположение элементов в строку, - flex-row-reverse - расположение элементов в строку в обратном порядке, - flex-column - расположение элементов в столбец, - flex-column-reverse - расположение элементов в столбец в обратном порядке, - flex-wrap - размешить перенос элементов при превышении допустимого размера контейнера, - flex-nowrap - запретить перенос элементов и стараться их поместить в контейнер. ### Размеры [](#размеры) Размеры каждого элемента устанавливаются в зависимости от числа колонок в настройках адаптивной сетки. - flex-grow-\[size\] - относительный размер растяжения элемента, - flex-shrink-\[size\] - относительный размер сжатия элемента. Размеры задаются относительными величинами размерного ряда, а также специальным значением: - 1. Ширину можно задать через специальные значения свойства **'flex-basis'**: НазваниеЗначениеflex-autoflex-basis: auto;flex-fillflex-basis: fill;flex-maxflex-basis: max-content;flex-minflex-basis: min-content;flex-fitflex-basis: fit-content;flex-contentflex-basis: content;> Ширину можно задать через классы **'width'**, установив при этом класс **'flex-auto'**. Этот класс заставляет считать ширину элемента по свойству **'width'**. ### Порядок [](#порядок) Порядок каждого элемента устанавливается в зависимости от числа колонок в настройках адаптивной сетки. - order-\[size\] - порядок следования элемента. Порядок задается относительными величинами размерного ряда, а также специальными значениями: - 0, - first, - last. Классы порядка распространяются на контейнеры **'flex'** и **'grid'**. ### Выравнивание [](#выравнивание) Выравнивание в контейнере flex работает по двум осям и назначается не только для всего контейнера, но и для отдельного элемента. Все возможные классы представлены в следующей таблице: НазваниеЗначениеjustify-content-startjustify-content: flex-startjustify-content-endjustify-content: flex-endjustify-content-centerjustify-content: centerjustify-content-betweenjustify-content: space-betweenjustify-content-aroundjustify-content: space-aroundjustify-content-evenlyjustify-content: space-evenlyalign-items-startalign-items: flex-startalign-items-endalign-items: flex-endalign-items-centeralign-items: centeralign-items-stretchalign-items: stretchalign-items-baselinealign-items: baselinealign-content-startalign-content: flex-startalign-content-endalign-content: flex-endalign-content-centeralign-content: centeralign-content-stretchalign-content: stretchalign-content-baselinealign-content: baselinealign-content-betweenalign-content: space-betweenalign-content-aroundalign-content: space-aroundalign-content-evenlyalign-content: space-evenlyalign-self-startalign-self: flex-startalign-self-endalign-self: flex-endalign-self-centeralign-self: centeralign-self-stretchalign-self: stretchalign-self-baselinealign-self: baselineКлассы выравнивания распространяются на контейнеры **'flex'** и **'grid'**. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Контейнер grid -------------- [](#контейнер-grid) Не задан. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Анимации -------- [](#анимации) Не заданы. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Пользовательский интерфейс ========================== [](#пользовательский-интерфейс) На основе существующих классов можно построить целые UI библиотеки. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Создание собственных классов ============================ [](#создание-собственных-классов) Любой графический дизай предполагает некую стилистическую основу, куда входят типовые элементы, такие как заголовки, кнопки, поля ввода и пр. Такие элементы имеют жестко заданные варианты оформления, соответственно, цвета, размеры, отступы и прочие параметры стиля имеют ограниченный выбор значений. Мы рекомендуем использовать библиотеку isScss для построения на ее основе собственных стилей по методологии BEM. Использовать стили **utility first** допускается только для разработки. ``` // html код в стиле utility first ... // html код по методологии BEM ... ``` Мы также не рекомендуем менять существующие настройки сетки, размеров, цветовой палитры и прочего. Исключение касается цветов проекта (theme, primary, second, third) и шрифтов. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Наследование ------------ [](#наследование) Вы можете наследовать имена классов в своих классах таким образом: ``` // style sheet .flex-block { @extend .flex; @extend .my-1; @extend .px-2; @extend .justify-content-between; } ``` Но в этом случае в ваш файл стилей попадет как созданный вами класс **'flex-block'**, так и заданный в библиотеке класс **'flex'**. Такое решение может оказаться избыточным, т.к. занимает лишнее место. Поэтому мы рекомендуем делать наследование от классов-шаблонов: ``` // style sheet .flex-block { @extend %flex; @extend %my-1; @extend %px-2; @extend %justify-content-between; } ``` В последнем случае, классы **'flex'**, **'my-1'** и другие не должны быть включен в ваш файл стилей, туда попадет только класс **'flex-block'**. В итоге, ваш файл стилей будут содержать только нужные вам классы. Если же вы хотите включить в файл стилей некоторые из встроенных классов библиотеки, тогда настройте эти классы через [**Компоненты**](#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B). [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Миксины ------- [](#миксины) Для сокращения множества строчек кода, мы предлагаем использовать миксины, которые входят в состав библиотеки isScss. ### size\_base [](#size_base) Пример использования: ``` .size_base { @include sizes-base(width); } ``` Результат: ``` .size_base-auto { width: auto } .size_base-0 { width: 0 } ``` Пример использования с несколькими свойствами: ``` .size_base_multi { @include sizes-base(width height); } ``` Результат: ``` .size_base_multi-auto { width: auto; height: auto } .size_base_multi-0 { width: 0; height: 0 } ``` ### size\_absolute [](#size_absolute) Пример использования с отрицательными значениями: ``` .size_absolute { @include sizes-absolute(width, true); } ``` Результат: ``` .size_absolute-01 { width: 0.1rem } .size_absolute--01 { width: -0.1rem } .size_absolute-02 { width: 0.2rem } .size_absolute--02 { width: -0.2rem } .size_absolute-025 { width: 0.25rem } .size_absolute--025 { width: -0.25rem } ... ``` ### size\_relative [](#size_relative) Пример использования: ``` .size_relative { @include sizes-relative(width); } ``` Результат: ``` .size_relative-10p { width: 10% } .size_relative-10vw { width: 10vw } .size_relative-10vh { width: 10vh } ... ``` Пример использования с указанием конкретных единиц: ``` .size_relative { @include sizes-relative(width, null, p); } ``` Результат: ``` .size_relative-10p { width: 10% } .size_relative-25p { width: 25% } .size_relative-50p { width: 50% } ... ``` ### size\_special [](#size_special) Пример использования: ``` .size_special { @include sizes-special(width); } ``` Результат: ``` .size_special-xs { width: 0.25rem } .size_special-sm { width: 0.5rem } .size_special-md { width: 1rem } ... ``` ### media [](#media) Пример использования в разных вариантах: ``` .class { width: 0px; @include media(xs) { &.xs-1 { width: 10px } .xs-2 { width: 20px } @at-root .xs-3 { width: 30px } @at-root .xs-4 { width: 40px } }; } .xs-5 { @include media(xs) { width: 50px } } .xs-6 { @include media(xs) { & { width: 60px } } } @include media(xs) { .xs-7 { width: 70px } .xs-8 { width: 80px } } ``` Результат: ``` .class { width: 0px } @media (min-width:480px) { .class.xs-1 { width: 10px } .class .xs-2 { width: 20px } } @media (min-width:480px) { .xs-3 { width: 30px } } @media (min-width:480px) { .xs-4 { width: 40px } } @media (min-width:480px) { .xs-5 { width: 50px } } @media (min-width:480px) { .xs-6 { width: 60px } } @media (min-width:480px) { .xs-7 { width: 70px } .xs-8 { width: 80px } } ``` Пример использования с указанием ориентации: ``` .class { width: 0px; @include media(xs, portrait) { width: 20px }; } ``` Результат: ``` .class { width: 0px } @media (min-width:480px) and (orientation: portrait) { .class { width: 20px } } ``` [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Дорожная карта ============== [](#дорожная-карта) Сделать рефакторинг существующего кода: - привести все компоненты к общему виду; - вынести код модуля в миксин с контентом. Сделать возможность подключения библиотеки через **use** для разделения пространства имен и подключения компонентов библиотеки для отдельного использования в других проектах. Сделать возможность назначения префикса для всех классов библиотеки. Разработать недостающие компоненты библиотеки: - контейнер grid; - анимации. Разработать библиотеки UI компонентов, которые будут доступны в виде SCSS и CSS файлов стилей: - material design; - bootstrap alternate. Разработать библиотеки UI компонентов, которые будут включать в себя модули на js: - галерея; - слайдер; - модальные окна; - панель навигации; - и др. Сделать возможность установки через менеджеры пакетов **npm** и **yarn**. Сделать возможность подключения в качестве модулей для js-фреймворков: - Vue, - React, - Angular. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Список изменений ================ [](#список-изменений) 0.1.0 Версия сильно переработана: - поменялась структура и обозначение классов; - поменялась адаптивная сетка; - упразднены все старые миксины и функции; - сделаны классы-шаблоны и они подключаются по-умолчанию; - классы теперь можно отключать; - появились короткие и полные имена классов; - появились контрольные точки для всех классов; - переделана модульная система, теперь модулей больше и можно указывать параметры: - включить/откючить классы в модуле, - включить/откючить полные имена классов модуля, - включить/откючить короткие имена классов модуля, - включить/откючить свойства **hover** и **focus** для классов модуля, - включить/откючить контрольные точки для классов модуля; - создана документация по всем классам, миксинам и функциям с примерами использования; - в документацию включено описание библиотеки и возможность ее использования с примерами и рекомендациями; - в документацию включен список изменений для каждой версии; - в документацию включена дорожная карта развития проекта. 0.0.1 Самый первый вариант библиотеки, разработан для служебных нужд. [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) Ссылки ====== [](#ссылки) - [Официальный сайт](https://isengine.org); - [Telegram](https://t.me/isengine); - [Youtube](https://www.youtube.com/channel/UCLMf_v8P2O5JQ8ec6zkquDw); - [Composer](https://packagist.org/packages/isengine/); - [Github](https://github.com/isengine). [^ к оглавлению](#%D0%BE%D0%B3%D0%BB%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) ### Health Score 16 — LowBetter than 5% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community7 Small or concentrated contributor base Maturity24 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/a7556783e27194eab5240e0fd217dfceeb1254c42e22979775e4eca7c03c15c5?d=identicon)[isengine](/maintainers/isengine) --- Top Contributors [![fwmakc](https://avatars.githubusercontent.com/u/18184980?v=4)](https://github.com/fwmakc "fwmakc (17 commits)") ### Embed Badge ![Health badge](/badges/isengine-isscss/health.svg) ``` [![Health](https://phpackages.com/badges/isengine-isscss/health.svg)](https://phpackages.com/packages/isengine-isscss) ``` ### Alternatives [laravel/telescope An elegant debug assistant for the Laravel framework. 5.2k67.8M192](/packages/laravel-telescope)[spiral/roadrunner RoadRunner: High-performance PHP application server and process manager written in Go and powered with plugins 8.4k12.2M84](/packages/spiral-roadrunner)[nolimits4web/swiper Most modern mobile touch slider and framework with hardware accelerated transitions 41.8k177.2k1](/packages/nolimits4web-swiper)[laravel/dusk Laravel Dusk provides simple end-to-end testing and browser automation. 1.9k36.7M259](/packages/laravel-dusk)[laravel/prompts Add beautiful and user-friendly forms to your command-line applications. 708181.8M596](/packages/laravel-prompts)[cakephp/chronos A simple API extension for DateTime. 1.4k47.7M121](/packages/cakephp-chronos) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)