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

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

Смоделированные цвета фона с использованием linear-gradient()

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

NS1 использует светло-серый цвет для боковой панели.

Контактная форма выделена цветом, чтобы визуально отделить ее от соседнего содержимого.

Сетки колонок, широкие экраны и от края до края

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

Широкоэкранные мониторы и современные ноутбуки имеют высокое разрешение экрана, превосходящее максимальную ширину стандартных размеров контейнера сетки. На момент написания данной статьи наибольшая ширина контейнера сетки по умолчанию для Bootstrap, Foundation и TailwindCSS составляет 1140 пикселей, 1200 пикселей и 1280 пикселей соответственно.

Как мы можем гарантировать, что фоновые цвета, назначенные столбцам, будут аккуратно расширяться «от края до края»? Используемые в прошлом решения включали в себя использование большого, абсолютно позиционированного псевдоэлемента (::before, ::after) или вертикально повторяющихся фоновых изображений. У каждого из них есть свои ограничения. Давайте упростим себе задачу.

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

Использование linear-gradient() и немного математики

Я буду использовать в демонстрации систему сеток Bootstrap, но ее можно адаптировать к любому фреймворку.

В этом упражнении можно представить свойство CSS linear-gradient(), как переход одного цвета в другой, идущий слева направо от экрана. Мы сможем контролировать, где заканчивается первый цвет и где начинается второй.

Например, если мы хотим, чтобы два столбца цвета были равномерно разделены на экране, можно использовать значение перехода цвета linear-gradient() 50%. Оно разделит цветные столбцы пополам на экране любой ширины. В этом коде измените 50% на 75% или 90% или даже на значение в пикселях, чтобы лучше контролировать переходы цвета.

Это замечательно, но чаще всего нам нужны переходы цвета в соответствии с сеткой сайта. Как можно это сделать, но при этом оставить градиент от края до края? Давайте объединим в миксине Sass linear-gradient(), calc() и немного математики.

Что нам нужно знать?

Нашему миксину Sass необходимо знать некоторые базовые моменты. Их можно объявить с помощью переменных Sass.

Размер контейнера сетки

$container: 1140px;

Мы сопоставляем значение 1140px, которое по умолчанию использует Bootstrap, с переменной $container.

Количество столбцов сетки

$gridColumns: 12;

Сколько всего столбцов в вашей сетке?

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

1. $cols: какое количество столбцов должен охватывать первый цвет?
2. $colorTwo: второй цвет в градиенте слева направо.
3. $colorOne(необязательно): первый цвет в градиенте слева направо. (По умолчанию мы будем использовать прозрачный, так как нам часто нужен только цвет боковой панели).
4. $colSelector(необязательно): класс столбца, который использует система сеток (в этом примере по умолчанию используется Bootstrap).
5. $rowSelector(необязательно): класс строки, который использует система сеток (в этом примере по умолчанию используется Bootstrap).

Наш миксин выполняет деление, чтобы выяснить, какой процент $cols составляет от $gridColumns. Затем мы умножаем $container на этот процент, чтобы найти, где должен быть первый переход цвета.

$colPercent:$cols / $gridColumns;
$colWidth: $colPercent * $container;

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

Назовем наш миксин fauxColumns. Помните наиболее важные аргументы:

@mixin fauxColumns($cols, $colorTwo, $colorOne: transparent)

Вызовем миксин и передадим некоторые значения.

@include fauxColumns(9, #ff675b, #d2e6ea);

«Я хотел бы получить цвета от края до края. #d2e6ea должен занимать 9 из 12 столбцов сетки. #ff675b должен занимать остальное пространство».

@mixin fauxColumns(
        $cols, 
        $colorTwo, 
        $colorOne: transparent, 
        $colSelector: 'col-', 
        $rowSelector: 'row'
        ) {
            
    $colPercent: $cols / $gridColumns;
    $colWidth: $colPercent * $container;

    .#{$rowSelector} > [class^='#{$colSelector}']:nth-child(1) {
        background-image: 
            linear-gradient(
                to bottom, 
                $colorOne, 
                $colorOne
            );
    }
    
    .#{$rowSelector} > [class^='#{$colSelector}']:nth-child(2)
        {
        background-image: 
            linear-gradient(
                to bottom, 
                $colorTwo, 
                $colorTwo
            );
    }

    @media (min-width: 768px) {
        .#{$rowSelector} 
        > [class^="#{$colSelector}"]:nth-child(n) {
            background-image: none;
        }
        background-image: 
            linear-gradient(
                to right, 
                $colorOne percentage($colPercent), 
                $colorTwo 1%
            );
    }

    @media (min-width: 1140px) {
        background-image: 
            linear-gradient(
                to right, 
                $colorOne calc((50% - (#{$container} / 2) + #{$colWidth})), 
                $colorTwo 1%
            );
    }
}