Правила оформления

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

Описание

Правила оформления регулируют правила создания новых пакетов и плагинов для SIMAI Framework.

Пакеты и плагины

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

Название пакета должно отражать содержимое пакета. Для имени пакета используется английское слово, существительное в единственном числе. Например, typography, color, border

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

При обозначении названия пакета, необходимо стремиться уменьшить количество слов. Рекомендуется использовать названия из одного, максимум двух слов.

Структура пакета

Пакет представляет собой папку, размещенную в исходниках фреймворка по следующему пути: src/package/{packet}.

📂 packet
  📂 scss
    📄 _sf_var__packet.scss
    📄 _sf_mix__packet.scss
    📄 _sf_ext__packet.scss
    📄 _sf_css__packet.scss
    📄 index.scss
  📂 js
    📄 packet.js
    📄 index.js 
  📄 index.js

Обозначения:

  • packet - директория пакета
    • scss - директория стилей
      • _sf_var__packet.scss - файл с переменными пакета;
      • _sf_mix__packet.scss - файл с миксинами пакета;
      • _sf_ext__packet.scss - файл с расширениями пакета;
      • _sf_css__packet.scss - файл со стилями пакета;
      • index.scss - индексный файл со списком файлом стилей для подключения.
    • js - директория скриптов
      • packet.js - файл со скриптами пакета;
      • index.js - индексный файл со списком файлом скриптов для подключения.
    • index.js - индексный файл со списком индексных файлов для подключения.

Индексный файл пакета

Индексный файл пакета находится в корне пакета и называется index.js. Это обязательный файл. Он содержит в себе подключение индексных файлов стилей и скриптов. Подключение нужно указывать только в том случае, если стили или скрипты используются.

import './js';
import './scss/index.scss';

Стили пакета

Стили пакета размещаются в папке scss пакета. Является не обязательной директорией. Она применяется, если в данном пакете используются стили. В корне папки стилей пакета должен быть индексный файл стилей. Он называется index.scss и содержит в себе подключение файлов стилей.

// Variables
@import 'sf_var__breakpoint';
@import 'sf_var__size';
@import 'sf_var__space';
@import 'sf_var__color';
@import 'sf_var__typography';

// Include mixins
@import 'sf_mix__breakpoint';

// Extended
@import 'sf_ext__common';

// Styles
@import 'sf_css__preset';
@import 'sf_css__size';
@import 'sf_css__color';

Названия файлов в пакете стилей (кроме индексного файла) начинаются с нижнего подчеркивания (_). В индексном файле этот символ не используется. Далее следует префикс фреймворка (sf), далее, через нижнее подчеркивание указывается тип файла (var|mix|ext|css), а после этого после двойного нижнего подчеркивания - название.

Скрипты пакета

Скрипты пакета размещаются в папке js пакета. Является не обязательной директорией. Она применяется если в данном пакете используются скрипты. В корне папки скриптов пакета должен быть индексный файл стилей. Он называется index.js и содержит в себе подключение файлов стилей. Подключаемые файлы можно указывать без расширения.

import './loader';

Именование

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

Абсолютные значения модификаторов

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

Для абсолютных значений в качестве обозначения величины используются значения размера. Например, w-a1, ar-b5.

Относительные значения модификаторов

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

Для относительных значений в качестве обозначения величины используются значения от 0 до 9. Значение 0 обозначает нулевое значение. Единица - минимальное значение для данного модификатора, а 9 - максимальное значение. Например, p-1, m-4.

Для обозначения величин меньше базового значения, используются дроби. Чем больше знаменатель, тем меньше величина модификатора. Например, t-1/2, t-1/4.

Плагины

Если в плагине используется только один пакет, то его название должно соответствовать названию пакета.

Изменить статью