@isengine/isscss v0.1.0

Описание

Библиотека стилей для isEngine framework на SASS/SCSS.

Быстрый старт

Подключите библиотеку к своему проекту.

@import "/path/to/isengine/isscss/src/is";

Вы можете использовать библиотеку как utility first, назначая классы элемента, например:

// html код в стиле utility first
<div class="flex my-1 px-2 justify-content-between">
    ...
</div>

Или использовать ее для простроения своих классов через наследование от классов-шаблонов:

// style sheet
.flex-block {
    @extend %flex;
    @extend %my-1;
    @extend %px-2;
    @extend %justify-content-between;
}

// html код по методологии BEM
<div class="flex-block">
    ...
</div>

Оглавление

• О проекте
• Совместимость
• Установка
• Варианты использования
• Настройка
• Основные параметры
  • Контрольные точки
  • Адаптивная сетка
  • Цвета
  • Шрифты
  • Размерный ряд
    • Абсолютные величины
    • Относительные величины
    • Специальные величины
    • Кастомизация
  • Компоненты
  • Префикс
• Классы
  • Общие правила
  • Короткое написание
  • Модификаторы направлений
  • Установки по-умолчанию
  • Классы отступов
  • Классы краев
    • Толщина края
    • Радиус края
    • Цвет края
  • Классы ширины и высоты
  • Классы отображения
  • Специальны классы отображения
  • Классы позиционирования
  • Класс позиционирования по оси z
  • Классы выравнивания
  • Классы изображений
    • Загрузка фоновых изображений
    • Фон в виде градиента
    • Выравнивание изображений
    • Выравнивание фоновых изображений
    • Выравнивание масок
  • Классы цветовой палитры
  • Классы прозрачности
  • Классы текста
    • Шрифт
    • Свойства шрифта
    • Свойства текста
  • Тени
  • Контейнер flex box
    • Расположение элементов
    • Размеры
    • Порядок
    • Выравнивание
  • Контейнер grid
  • Анимации
• Пользовательский интерфейс
• Создание собственных классов
  • Наследование
  • Миксины
• Дорожная карта
• Список изменений
• Ссылки

О проекте

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

Если вы использовали такие фреймворки как Bootstrap, Foundation, Materialize, Tailwind и подобные, эта библиотека будет для вас интуитивно понятной.

^ к оглавлению

Совместимость

Вы можете совершенно спокойно подключить isScss к абсолютно любому проекту.

Данная библиотека написана на чистом SCSS и НЕ использует сторонние JavaScript-библиотеки.

Чтобы устранить возможные конфликты с повторением классов, вы можете использовать префикс.

^ к оглавлению

Установка

Для использования, просто импортируйте библиотеку в свой проект

@import "/vendor/isengine/isscss/src/is";

^ к оглавлению

Варианты использования

Вы можете использовать isScss как utility first / functional / atomic библиотеку, прописывая стили в класс элемента, например:

<div class="flex py-1 px-2">
    ...
</div>

За использование библиотеки как utility first отвечают Компоненты.

Если вы не хотите иметь лишние классы в своем проекте, которые будут занимать лишнее место и снижать скорость загрузки, отключите их использование на уровне компонентов.

Вы также можете использовать isScss для простроения своих классов, например, по методологии BEM.

Подробнее смотрите в разделе Создание собственных классов.

^ к оглавлению

Настройка

Вы можете настроить isScss так, как вам нужно.

Для этого подключите файл настроек ПЕРЕД подключением бибилиотеки:

@import "settings";

В настройках вы можете задать:

• контрольные точки,
• адаптивная сетка,
• цвета,
• шрифты,
• размерный ряд,
• компоненты,
• префикс.

^ к оглавлению

Основные параметры

Контрольные точки

isScss предлагает адаптивную сетку со следующими контрольными точками:

Указанные в таблице размеры экранов и контейнеров тоже выбраны не случайно. Мы собрали наиболее часто встречающиеся разрешения экранов, разбили их по группам и на основе полученных данных составили следующий список.

• смартфоны: 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)
    ),
    ...
);

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

<div class="col-12 sm-col-6 lg-col-4">
    <div class="py-0 sm-py-1 lg-py-2">
        ...
    </div>
</div>

Если вы хотите использовать другие названия или значения контрольных точек, вы можете самостоятельно задать их в настройках.

Также в блоке настроек вы можете указать минимальную ширину для тега 'body'.

// блок настроек
$is-layout: (
    ...
    min-width: 320px,
    ...
);

По-умолчанию стоит значение '320px'. Если экран становится ниже этого значения, появляется горизонтальная полоса прокрутки. Это удобно для того, чтобы ограничить адаптивную верстку.

Нужно помнить, что это только значение параметра. Сам параметр используется в модуле нормализации. Если у вас выключен этот модуль, параметр не будет работать.

^ к оглавлению

Адаптивная сетка

В isScss, как и в большинстве похожих библиотек, используется адаптивная сетка для блочной верстки.

Сетка включает в себя следующие элементы:

• контейнер,
• строки,
• колонки.

В целом код выглядит следующим образом:

<div class="container">
    <div class="row">
        <div class="col">
            ...
        </div>
        <div class="col">
            ...
        </div>
    </div>
    <div class="row">
        ...
    </div>
</div>

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

Например:

// две равные колонки
<div class="col-6">
    ...
</div>
<div class="col-6">
    ...
</div>

// три равные колонки
<div class="col-4">
    ...
</div>
<div class="col-4">
    ...
</div>
<div class="col-4">
    ...
</div>

// две колонки, ворая больше первой в два раза
<div class="col-4">
    ...
</div>
<div class="col-8">
    ...
</div>

И так далее.

Можно также использовать разную ширину колонок для разных размеров экрана. Для этого нужно к колонкам добавить префикс контрольных точек.

// по одной колонке в строке на маленьких экранах,
// по две колонки на строку для средних
// и по четыре - для больших
<div class="col-12 md-col-6 xl-col-3">
    ...
</div>

Если колонки не имеют значений, они будут равной ширины.

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

• 0,
• auto.

Существует дополнительное значение 'auto', которое задает автоматическую ширину колонки в зависимости от ее содержимого.

Если у вас есть хотя бы одна колонка со значением 'auto', то вам нужно также иметь хотя бы одну колону без значений.

<div class="col-auto">
    ...
</div>
<div class="col">
    ...
</div>

В isScss также есть значение '0', которое полностью скрывает колонку.

Это сделано для удобства вывода разных колонок для разных размеров экрана.

// эта колонка не будет видна на больших экранах
<div class="col-12 lg-col-0">
    ...
</div>

// эта колонка будет видна только на больших экранах
<div class="col-0 lg-col-12">
    ...
</div>

Стоит обратить внимание, что колонки всегда должны быть вложены в строку. Строки, в свою очередь, должны быть вложены в контейнер.

Допускается иметь в колонках вложенные строки, при этом они могут не иметь контейнера:

<div class="container">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    ...
                </div>
            </div>
        </div>
        ...
    </div>
    ...
</div>

Число колонок в строке задается в настройках и это значение можно менять.

// блок настроек
$is-layout: (
    ...
    cols: 12,
    ...
);

Кроме этого, каждая колонка имеет некоторые отступы. Эти отступы также задаются в настройках.

// блок настроек
$is-layout: (
    ...
    indent: 15px,
    ...
);

Еще вы можете задать расстояние между колонками по-умолчанию.

// блок настроек
$is-layout: (
    ...
    gap: 2px,
    ...
);

Все эти настройки учитываются для построения размерной сетки.

Внимание! Мы все еще используем flex box для данной сетки. Вы можете использовать классы и стили flex box для строк и колонок.

Сетка на свойствах grid представлена отдельными элементами.

^ к оглавлению

Цвета

В 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,

Эти цвета подобраны таким образом, чтобы быть не сильно яркими, скорее пастельных тонов, и чтобы на них приемлемо смотрелись надписи черным или белым цветом.

Каждому из этих цветов соответствует класс для цвета текста, цвета фона и цвета границ элемента:

<div class="color-white bg-black border-gray-5">
    ...
</div>

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

^ к оглавлению

Шрифты

Вы можете добавить для использования несколько разных шрифтов, включая шрифты с иконками.

// блок настроек
$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,
    ),
    ...
);

Как здесь видно, каждый шрифт представлен ассоциативным массивом. Ключ обозначает идентификатор шрифта.

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

Например:

<div class="font-theme">
    ...
</div>

Рекомендуется устанавливать для каждого шрифта базовый размер 16px.

От размера базового шрифта дальше будут считаться все основные размеры.

Если вам нужно поменять параметры шрифта, можно использовать модификаторы.

^ к оглавлению

Размерный ряд

Размерный ряд представляет собой линейку размеров для отступов, толщину границ элемента и значения ширины/высоты.

// блок настроек
$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' и могут иметь как положительные, так и отрицательные значения.

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

Пример:

// отступы со всех сторон по 0.5rem
<div class="m-05">
    ...
</div>

// отступы со всех сторон по -0.5rem
<div class="m--05">
    ...
</div>

Относительные величины

Относительные величины применяются, в основном, для определения ширины и высоты.

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

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

Вы также можете использовать отрицательные значения.

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

// блок на всю ширину и автоматическую высоту
<div class="w-100p h-auto">
    ...
</div>

// блок на высоту 100vh
<div class="h-100vh">
    ...
</div>

// блок с ограниченной шириной
<div class="w-100p w-max-50vw">
    ...
</div>

// блок с отрицательными отступами
<div class="m-100p">
    ...
</div>

Специальные величины

Специальные величины используются, в основном, для указания точных размеров.

Отличия специальных свойств в том, что вы задаете и название, и значение, включая единицы измерения.

По-умолчанию, используются следующий ряд:

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

<div class="px-xs my-md">
    ...
</div>

Кастомизация

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

^ к оглавлению

Компоненты

На данный момент библиотека isScss простроена на базовых классах, функциях и миксинах. Вы можете использовать их для построения собственных классов.

Библиотека isScss содержит классы-шаблоны. Такие классы не будут включены в набор стилей при компиляции. Но при этом вы можете использовать их для построения собственных классов.

Классы-шаблоны создаются автоматически. А создание классов с теми же именами зависит от настроек компонента.

Обратите внимание! Классы-шаблоны не включают в себя медиа-запросы и состояния. Однако они, как и обычные классы, могут иметь короткие и полные названия. Это регулируется настройками компонента.

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

Все это также делается через настройки.

// блок настроек
$is-modules: (
    color : true,
    layout : true,
    text : true,
    ...
);

Каждый компонент может иметь следующие значения:

• true - включено использование компонента полностью,
• null - компонент выключен.

Также вы можете перечислить различные дополнения, которые хотите включить в компоненте, в виде массива.

• breakpoints - для классов компонента не будут созданы модификаторы контрольных точек,
• short - короткие имена для классов,
• full - длинные имена для классов,
• hover - модификаторы для классов с состояниями 'hover' и 'focus',
• classes - включить классы.

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

При включенных компонентах вы можете использовать isScss как utility first библиотеку, прописывая стили в класс элемента, например:

<div class="flex py-1 px-2">
    ...
</div>

Вы также можете наследовать имена классов. Подробнее смотрите в разделе Создание собственных классов.

После отключения того или иного компонента, классы пропадут из состава библиотеки. И подобные записи приведут к ошибке. Поэтому мы рекомендуем отключать только параметр 'class' в массиве настроек компонента.

При отключении параметра 'class' параметры 'breakpoints' и 'hover' не будут иметь значения, т.к. они влияют только на классы, но не на классы-шаблоны.

Если вы выключите использование всех компонентов, то в ваш файл стилей будут влючены только созданные вами классы.

^ к оглавлению

Префикс

Данная возможность пока что не реализована!

Если вы используете несколько библиотек или фреймворков, у вас может возникнуть проблема с одинаковыми классами.

// блок настроек
$is-prefix: (
    name : 'is-',
    enable : false
);

Чтобы избежать подобных конфликтов, в isScss можно включить префикс. По-умолчанию он выключен.

// префикс выключен, возможны конфликты!
<div class="color-white bg-black border-gray-5">
    ...
</div>

// включен префикс is-
<div class="is-color-white is-bg-black is-border-gray-5">
    ...
</div>

Вы можете сами назначить любой префикс. Мы рекомендуем использовать префикс 'is-'.

^ к оглавлению

Классы

Общие правила

Имена всех встроенных классов в isScss строится по следующим правилам.

Названия классов совпадают с названиями параметров стилей. Это позволяет не запоминать классы, а использовать их интуитивно.

Например:

// есть параметр стиля min-width, но не width-min
<div class="min-width">
    ...
</div>

Все префиксы, постфиксы и модификаторы указываются через черточку, символ '-'.

Например:

<div class="pre-class-post">
    ...
</div>

В начале имени класса можгу указываться модификаторы контрольных точек. Такой класс будет действовать для соответствующей ширины экрана.

Например:

<div class="class-1 sm-class-2 lg-class-3">
    ...
</div>

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

Например:

<div class="
    size-class1-0
    size-class2-025
    size-class3-10p
    size-class4-50vw
    size-class5-min
    size-class6-auto
">
    ...
</div>

^ к оглавлению

Короткое написание

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

Например:

// полная запись
<div class="padding-0 margin-0">
    ...
</div>

// короткая запись
<div class="p-0 m-0">
    ...
</div>

Короткие варианты сделаны для сокращения записи.

^ к оглавлению

Модификаторы направлений

Модификаторы направлений используются для тех классов, свойства которых имеют варианты указания направлений.

Например:

• padding,
• margin,
• border.

Некоторые модификаторы направлений имеют как полную, так и короткую запись. В полной записи, они указываются через черточку '-', но в короткой записи, эта черточка пропускается.

Например:

// полная запись
<div class="padding-left-0 padding-right-0 margin-top-1">
    ...
</div>

// короткая запись
<div class="pl-0 pr-0 mt-1">
    ...
</div>

В таблице ниже приведены все модификаторы направлений и их описание.

^ к оглавлению

Установки по-умолчанию

По-умолчанию заданы стили для многих базовых элементов, таких как:

• body,
• div,
• h1-h6,
• p,
• a,
• img,
• ul,
• ol,
• input,
• button,
• и др.

Также заданы стили для псевдоэлементов, установлены параметры, приводящие свойства к базовым значениям.

Все это сделано для того, чтобы привести элементы к общему виду для отображения в разных браузерах. Но не для того, чтобы каким-либо образом стилизовать эти элементы по своему вкусу.

Вы можете отключить данную опцию в компонентах.

^ к оглавлению

Классы отступов

Внешние отступы элемента задаются параметром стилей 'margin'. Внутренние отступы - параметром 'padding'.

Библиотека isScss использует короткие названия для этих параметров:

• m,
• p.

Для этих параметров можно использовать модификаторы контрольных точек, модификаторы направлений и значение из размерного ряда.

Общая формула выглядит так:

breakpoint--direction|short_direction breakpoint--direction|short_direction

Пример:

// полная запись
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

^ к оглавлению

Классы краев

Для элементов есть возможность задать края стилями 'border'.

В CSS это составной параметр, который включает:

• border-color,
• border-style,
• border-width,
• border-radius
• и др.

Для того, чтобы у вас заработали классы краев, вам нужно инициализировать их классами 'b' или 'border'.

Толщина края

Библиотека isScss использует следующие названия, полное и короткое, для стиля 'border':

• border,
• b.

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

Общая формула выглядит так:

breakpoint--direction|short_direction

Пример:

// полная запись
border-0
border-top-1
sm-border-top-2

// короткая запись
b-0
bt-1
sm-bt-2

Радиус края

Радиус края задается отдельным стилем с полным и коротким названиями:

• radius,
• r.

По-умолчанию радиус задается для всех сторон.

Радиус края также может быть задан одним из восьми направлений. Из-за того, что радиус задается для угла, направление представляет собой сочетание сторон.

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

Для радиуса можно использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint--direction|short_direction

Пример:

// полная запись
radius-0
radius-top-left-1
sm-radius-top-left-2

// короткая запись
r-0
rtl-1
sm-rtl-2

Цвет края

Также для края можно задать цвет.

Подробно об этом описано в разделе Классы цветовой палитры.

^ к оглавлению

Классы ширины и высоты

Существует два базовых класса, задающих размеры элемента:

• width,
• height.

И их короткие названия:

• w,
• h.

У каждого из этих классов есть минимальное и максимальное значение:

• min-,
• max-.

Также допускается использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint-width|w breakpoint-height|h

Пример:

// полная запись
width-5
sm-width-3vw
max-width-100p

// короткая запись
w-5
sm-w-3vw
max-w-100p

^ к оглавлению

Классы отображения

Элементам могут быть назначены следующие классы отображения в документе:

• none - элемент не отображается,
• block - блочный элемент,
• inline - строчный элемент,
• inline-block - строчный элемент со свойствами блока,
• flex - элемент типа flex box, для создания макетов,
• grid - элемент типа grid, для создания макетов,
• contents - внеблочный элемент, который выносит уровнем вверх все вложенные в него элементы.

Для этих классов нет коротких названий.

Можно использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint-

Пример:

block
sm-none

^ к оглавлению

Специальны классы отображения

В дополнение к основным классам отображения элементов, использующим свойство 'display', мы предлагаем несколько вспомогательных классов.

Классы, использующие свойство 'visibility':

• visible,
• hidden.

Классы, использующие свойство 'overflow':

• overflow-x,
• overflow-y,
• overflow-hidden.

^ к оглавлению

Классы позиционирования

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

• relative - относительно своего положения, его смещение не влияет на положение любых других элементов,
• absolute - относительно своего родителя со значением 'relative',
• fixed - относительно всего документа,
• sticky - относительно документа или родителя, но с прилипанием к краю при прокрутке.

Для этих классов нет коротких названий.

Для элементов с любым из этих классов становится доступным смещение по значениям top, right, bottom, left и по оси z.

Можно использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint-

Пример:

relative
sm-absolute

^ к оглавлению

Класс позиционирования по оси z

Элементы могут быть спозиционированы по оси z.

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

• z-index,
• z.

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

И дополнительные значения:

• 0,
• auto.

Можно использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint--size

Пример:

// полная запись
z-index-1
sm-z-index-auto

// короткая запись
z-1
sm-z-auto

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

^ к оглавлению

Классы выравнивания

Выравнивание элементов делается через следующие стили:

• text-align,
• vertical-align.

В бибилиотеке isScss мы упростили их до одного общего класса с полным и коротким названиями:

• align,
• a.

Для этих параметров можно использовать модификаторы контрольных точек и модификаторы направлений.

Кроме обычных направлений, здесь добавляется несколько новых:

Общая формула выглядит так:

breakpoint--direction|short_direction

Пример:

// полная запись
align-top
sm-align-x

// короткая запись
at
sm-ax

^ к оглавлению

Классы изображений

Библиотека 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.

Также вы можете настроить выравнивание изображения, используя следующие модификаторы:

Пример:

bg-top
bg-x

Фоновое изображение может иметь фиксированное позиционирование, которое будет сохранятся даже при прокрутке страницы. За это отвечает специальный класс:

• bg-fixed

Выравнивание масок

Выравнивание масок происходит аналогично выравниванию фоновых изображений.

Допускается использовать следующие классы:

• mask-cover,
• mask-contain.

И те же модификаторы, что для фоновых изображений.

Пример:

mask-top mask-x

^ к оглавлению

Классы цветовой палитры

Библиотека isScss позволяет работать со следующими типами цвета:

• цвет текста,
• цвет фона,
• цвет края.

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

• color,
• bg,
• border.

Сами цвета задаются исходя из существующей цветовой палитры по названиям этих цветов.

Будьте внимательны, чтобы названия цветов не совпали с такими параметрами, как left, rigth, top, bottom, cover, contain и др. и не создали конфликт!

Также можно использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint-color|c

Пример:

color-white
bg-primary
border-primary
sm-color-gray-5
sm-bg-second
sm-border-second

Для использования градиентов в качестве фонового изображения рекомендуем использовать свойство bg-gradient.

^ к оглавлению

Классы прозрачности

Прозрачность элмента задается стилем с полным и коротким названиями:

• opacity,
• o.

В качестве степени прозрачности используются относительные величины размерного ряда и 0. Хотя они указывются в процентах, само значение прозрачности пересчитывается в единицы с сотыми долями.

0 соответствует полной прозрачности, 100 - полной непрозрачности.

Для прозрачности можно использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint--size

Пример:

// полная запись
opacity-0
sm-opacity-50

// короткая запись
o-0
sm-o-50

^ к оглавлению

Классы текста

Библиотека isScss позволяет работать со следующими типами текста:

• шрифт и свойства шрифта,
• свойства текста.

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

• font,
• text.

Для свойств шрифта и текста существуют сокращения.

Для всех классов текста можно использовать модификаторы контрольных точек.

Шрифт

Гарнитура шрифта задается, исходя из шрифтов в настройках, по их названиям.

Общая формула выглядит так:

breakpoint--value

Пример:

font-primary
sm-font-second

Свойства шрифта

Свойста шрифта, которые доступны для изменения, приведены в таблице:

Общая формула выглядит так:

breakpoint--value

Пример:

// полная запись
font-weight-700
font-size-15
sm-font-size-2

// короткая запись
fw-700
fs-15
sm-fs-2

Свойства текста

Свойства текста меняют состояние текста или его начертание. Они не имеют значений, достаточно просто объявления соответствующего класса.

В CSS часть этих свойств относится к группе 'font', а часть - к 'text'.

В бибилиотеке isScss мы, для удобства, свели их в группу 'text'.

Их описание приведено в таблице:

^ к оглавлению

Тени

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

• shadow,
• sh.

Варианты классов включают в себя:

• тип тени - text (по-умолчанию) / box,
• цвет тени - black (по-умолчанию) / white,
• направление,
• смещение,
• размытие,
• прозрачность.

Такая большая вариативность безусловно порождает множество классов. Но их вызов становится понятным и не вызывает трудности.

Прозрачность задается относительными величинами размерного ряда и 0. 0 соответствует полной прозрачности, 100 - полной непрозрачности.

Смещение и размытие задаются специальными величинами в соотношении 1:1.

Направление представляет собой сочетание сторон.

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

По-умолчанию направление не задано.

Можно использовать модификаторы контрольных точек.

Общая формула выглядит так:

breakpoint--type-size-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

^ к оглавлению

Контейнер flex box

Контейнер flex использует множество возможностей и множество дополнительных классов.

Для этих классов нет короткой записи.

Для всех этих классов можно использовать модификаторы контрольных точек.

Расположение элементов

• flex-row - расположение элементов в строку,
• flex-row-reverse - расположение элементов в строку в обратном порядке,
• flex-column - расположение элементов в столбец,
• flex-column-reverse - расположение элементов в столбец в обратном порядке,
• flex-wrap - размешить перенос элементов при превышении допустимого размера контейнера,
• flex-nowrap - запретить перенос элементов и стараться их поместить в контейнер.

Размеры

Размеры каждого элемента устанавливаются в зависимости от числа колонок в настройках адаптивной сетки.

• flex-grow-size - относительный размер растяжения элемента,
• flex-shrink-size - относительный размер сжатия элемента.

Размеры задаются относительными величинами размерного ряда, а также специальным значением:

• 0.

Ширину можно задать через специальные значения свойства 'flex-basis':

Ширину можно задать через классы 'width', установив при этом класс 'flex-auto'. Этот класс заставляет считать ширину элемента по свойству 'width'.

Порядок

Порядок каждого элемента устанавливается в зависимости от числа колонок в настройках адаптивной сетки.

• order-size - порядок следования элемента.

Порядок задается относительными величинами размерного ряда, а также специальными значениями:

• 0,
• first,
• last.

Классы порядка распространяются на контейнеры 'flex' и 'grid'.

Выравнивание

Выравнивание в контейнере flex работает по двум осям и назначается не только для всего контейнера, но и для отдельного элемента.

Все возможные классы представлены в следующей таблице:

Классы выравнивания распространяются на контейнеры 'flex' и 'grid'.

^ к оглавлению

Контейнер grid

Не задан.

^ к оглавлению

Анимации

Не заданы.

^ к оглавлению

Пользовательский интерфейс

На основе существующих классов можно построить целые UI библиотеки.

^ к оглавлению

Создание собственных классов

Любой графический дизай предполагает некую стилистическую основу, куда входят типовые элементы, такие как заголовки, кнопки, поля ввода и пр.

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

Мы рекомендуем использовать библиотеку isScss для построения на ее основе собственных стилей по методологии BEM. Использовать стили utility first допускается только для разработки.

// html код в стиле utility first
<div class="flex my-1 px-2 justify-content-between">
    ...
</div>

// html код по методологии BEM
<div class="flex-block">
    ...
</div>

Мы также не рекомендуем менять существующие настройки сетки, размеров, цветовой палитры и прочего. Исключение касается цветов проекта (theme, primary, second, third) и шрифтов.

^ к оглавлению

Наследование

Вы можете наследовать имена классов в своих классах таким образом:

// 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'.

В итоге, ваш файл стилей будут содержать только нужные вам классы.

Если же вы хотите включить в файл стилей некоторые из встроенных классов библиотеки, тогда настройте эти классы через Компоненты.

^ к оглавлению

Миксины

Для сокращения множества строчек кода, мы предлагаем использовать миксины, которые входят в состав библиотеки isScss.

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 {
  @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 {
  @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 {
  @include sizes-special(width);
}

Результат:

.size_special-xs { width: 0.25rem }
.size_special-sm { width: 0.5rem }
.size_special-md { width: 1rem }
...

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 }
}

^ к оглавлению

Дорожная карта

Сделать рефакторинг существующего кода:

• привести все компоненты к общему виду;
• вынести код модуля в миксин с контентом.

Сделать возможность подключения библиотеки через use для разделения пространства имен и подключения компонентов библиотеки для отдельного использования в других проектах.

Сделать возможность назначения префикса для всех классов библиотеки.

Разработать недостающие компоненты библиотеки:

• контейнер grid;
• анимации.

Разработать библиотеки UI компонентов, которые будут доступны в виде SCSS и CSS файлов стилей:

• material design;
• bootstrap alternate.

Разработать библиотеки UI компонентов, которые будут включать в себя модули на js:

• галерея;
• слайдер;
• модальные окна;
• панель навигации;
• и др.

Сделать возможность установки через менеджеры пакетов npm и yarn.

Сделать возможность подключения в качестве модулей для js-фреймворков:

• Vue,
• React,
• Angular.

^ к оглавлению

Список изменений

0.1.0

Версия сильно переработана:

• поменялась структура и обозначение классов;
• поменялась адаптивная сетка;
• упразднены все старые миксины и функции;
• сделаны классы-шаблоны и они подключаются по-умолчанию;
• классы теперь можно отключать;
• появились короткие и полные имена классов;
• появились контрольные точки для всех классов;
• переделана модульная система, теперь модулей больше и можно указывать параметры:
  • включить/откючить классы в модуле,
  • включить/откючить полные имена классов модуля,
  • включить/откючить короткие имена классов модуля,
  • включить/откючить свойства hover и focus для классов модуля,
  • включить/откючить контрольные точки для классов модуля;
• создана документация по всем классам, миксинам и функциям с примерами использования;
• в документацию включено описание библиотеки и возможность ее использования с примерами и рекомендациями;
• в документацию включен список изменений для каждой версии;
• в документацию включена дорожная карта развития проекта.

0.0.1

Самый первый вариант библиотеки, разработан для служебных нужд.

^ к оглавлению

Ссылки

• Официальный сайт;
• Telegram;
• Youtube;
• Composer;
• Github.

^ к оглавлению