Skip to main content

XSystCSS

XSystCSS - это набор принципы CSS/HTML верстки, которые используются при разработке сайтов на платформе XSyst.

CSS фреймворк​

В основе вёрстки лежит модифицированный CSS Bootstrap фреймворк (для удобства далее будем использовать название XSyst.CSS).

XSyst.CSS представляет собой существенно переработанный Twitter Bootstrap 3. Важной концепцией XSyst.CSS является широкое использование CSS-переменных, а также следование принципам БЭМ для именования классов и CSS-переменных.

Расширение принципов БЭМ (для удобства далее будем использовать название XSyst.БЭМ)​

В XSyst.БЭМ допускается использовать в качестве разделителя для дочерних элементов не только , но и --. Использование -- вместо означает, что дочерний элемент хоть и является частью родительского блока вполне может рассматриваться и (иногда даже использоваться) как автономный блок. Как правило, такие элементы представляют собой комплексные элементы. Например:

.b-products-list
.b-products-list--item
.b-products-list--item--price
.b-products-list--pager
.b-products-list--filters

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

Важные принципы при использовании XSyst.CSS​

Всегда по возмжности используем классы и компоненты XSyst.CSS.

Всегда по возможности используем css-переменные XSyst.CSS.

Для формирования названий собственных css-классов, а также css-переменных полагаемся на принципы XSyst.БЭМ.

Допускается использование ряда расширений принципов БЭМ

Структура страницы​

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

page
    regions[main]
        section_1
            block_1
            ...
            block_N
        ...
        section_N
            block_1
            ...
            block_N
    regions[sidebar1]
        section_1
            block_1
            ...
            block_N
        ...
        section_N
            block_1
            ...
            block_N
    regions[sidebar2]
        section_1
            block_1
            ...
            block_N
        ...
        section_N
            block_1
            ...
            block_N
    ...

Регион шаблона страница - это именованный слот, который может содержать 0 или несколько секций и 0 или несколько блоков.

Секция - это условное обозначения для визуального объединения нескольких блоков. Секции необязательны - блоки могут располагаться и вне секций.

Блок - это виджет. Может быть чем угодно: навигационным элементом, формой, главным контентом, баннером...

Система виджетов​

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

Система сеток​

Система сеток позволяет создавать структуру страниц с помощью готовых сеток. Сетка представляет собой html-шаблон, включающий набором именованных региаонов. Каждый регион может содержать 0 или несколько блоков, а также правило группировки этих блоков.

CSS-переменные для управления отображением сеток​

Плагин сетки может иметь CSS-файл с определением базовых стилей. Также могут в нём могут быть заданы CSS-переменные. Использование CSS-переменных при определении стиля сетки позволяет делать сетки гибкими и настраиваемыми.

При добавлении CSS-переменных сетки следуем следующим принципам именования переменных:

Именование переменных, управляющих отображением всей сетки регионов:

--regions-grid_{prop-name}: {prop-value};

Примеры:

--regions-grid_padding: 15px 0;

Именование переменных, управляющих отображением конкретного региона:

--region--{region-name}_{prop-name}: {prop-value}

Примеры:

--region--page-header_bg: #fff;
--region--page-header_height: 60px; /* высота шапки сайта */

--region--content-header_bg: #1B1C20; 
--region--content-header_padding-top: 60px;
--region--content-header_padding-bottom: 60px;

--region--main_bg: #232427; 
--region--main_padding-top: 60px;
--region--main_padding-bottom: 60px;
--region--main_margin-top: 0;  
--region--main_margin-bottom: 0;  

--region--page-footer_bg: #0F0F10;
--region--page-footer_padding-top: 20px;      
--region--page-footer_padding-bottom: 20px;

--region--tabs_padding-top: 0;
--region--tabs_padding-bottom: 60px;

Именование переменных, управляющих отображением секций конкретного региона:

--region--{region-name}__section_{prop-name}: {prop-value}

Примеры:

--region--main__section_bg:#1B1C20;     
--region--main__section_margin-bottom: 60px;  
--region--main__section_padding-top: 60px;  
--region--main__section_padding-bottom: 60px;

Именование переменных, управляющих отображением блока конкретного региона:

--region--{region-name}__block_{prop-name}: {prop-value}

Примеры:

--region--content-header__block_bg: #232427;    
--region--main__block_bg:#1B1C20; 
--region--main__block_padding: 30px;  
--region--main__block_inner-grid-gap: 30px;  

--region--sidebar2__block_bg:#1B1C20; 
--region--sidebar2__block_padding: 30px;

Именование переменных, управляющих отображением сетки блоков конкретного региона:

--region--{region-name}__blocks-grid_{prop-name}: {prop-value}

Примеры:

--region--main__blocks-grid_gap: 30px;  
--region--main__card_padding: 30px;  
--region--main__cards-grid_gap: 30px;  

--region--sidebar2__block_bg:#1B1C20; 
--region--sidebar2__block_padding: 30px;  
--region--sidebar2__blocks-grid_gap: 30px;

Именование переменных, управляющих отображением сетки карточек (например, сетка товаров или фильмов) конкретного региона:

--region--{region-name}__cards-grid_{prop-name}: {prop-value}

Примеры:

--region--main__cards-grid_gap: 30px;

Именование переменных, управляющих отображением карточки (например, товар или фильм) конкретного региона:

--region--{region-name}__card_{prop-name}: {prop-value}

Примеры:

--region--main__card_padding: 10px;
Last updated on