13
Дек
2019

Создание сложных макетов с использованием CSS Grid

Создание сложных макетов с использованием CSS Grid

От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс.

Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны следить за новинками.

После прочтения этого руководства вы сможете логически подходить к построению сайтов и писать чистый код, пригодный для будущего, вместо использования хаков. Это руководство не охватывает навыки HTML / CSS в целом, но сосредоточено на том, как структурировать сборку и стили сетки, используемые для ее разработки. Я не рассмотрел стили отката для браузеров, которые не поддерживают сетку, чтобы не отвлекать внимание.

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

Проблема

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

На то, как вы создаете сайты, также может повлиять то, как вы умеете писать html / css. Если вам повезло, и вы начали создавать веб-сайты после того, как использовались floats и clears, есть большая вероятность, что вы начали применять такую платформу, как Bootstrap.

В агентстве, в котором я работаю, есть соглашение об использовании сетки bootstrap в качестве основы. Она пользуется поддержкой большинства разработчиков, и это означает, что существует стандарт разработки, с которым нужно работать (хотя лично я не фанат Bootstrap) и это хорошо.

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

Закон инструмента

Фреймворки определяют структуру вашего HTML. Оболочки div и вложенные колонки позволяют легко создавать строгие макеты сетки. Однако существует тенденция формирования зависимости от конкретного инструмента, и в этот момент когнитивный уклон, называемый «Законом молотка», может заставить вас попробовать использовать инструмент, который вы знаете, для любой ситуации.

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

Я перестроил раздел страницы, используя чистый минимальный html и css-grid, чтобы показать, как этот болезненный процесс может превратиться во что-то, от чего они могут получать удовольствие, и в конечном итоге все останутся удовлетворенными.

Итак, давайте рассмотрим дизайн и решим, что с ним делать.

Настольное представление

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

Создание сложных макетов с использованием CSS Grid

Если в первую очередь вам на ум пришел Bootstrap, вы могли бы подумать, что строка и два столбца идеально для этого бы подошли. Итак, давайте посмотрим, как это будет переноситься на мобильные устройства?

Мобильное представление

Сложенные блоки с контентом довольно просто скомпонованы. Одна вещь, которую мы можем видеть, это то, что порядок размещения отличается — это означает, что подход с двумя столбцами не сработает, если мы не сможем вытащить заголовки и расположить их где-нибудь еще… Что делать разработчику!?

Возвращаясь к основам

Первое, что я делаю при работе с макетом, это разбиваю элементы, которые составляют страницу. Обязательно обратите внимание на порядок размещения на мобильных устройствах, так как это логичный способ скомпоновать страницу, что будет означать меньше перемещений элементов. Это также означает, что если по какой-то причине ваша страница теряет стили, отображаемый HTML-код, будет иметь смысл для пользователя!

Самое замечательное в CSS Grid заключается в том, что вам не нужно загружать div-оболочки для создания макетов. Фактически, до тех пор, пока подсветка не будет реализована в основных браузерах, большое количество контейнерных элементов будет проблемой, поскольку сетка будет влиять только на ее прямых потомков.

На этой странице у нас есть 2 заголовка, фотография, текст, ссылка и фон с изображением декоративного дерева. С bootstrap вы можете получить что-то вроде этого:

<div class="c-content-block">
    <div class="row no-gutters flex-column-reverse flex-xl-row">
        <div class="col-12 col-xl-6">
            <div class="c-content-block__text c-content-block__text--blue d-xl-flex justify-content-xl-end">
                <div>
                    <p class="c-section-marker c-section-marker--inline mb-2">04</p>
                    <h2 class="mb-3 h-italic">    
                        <span>Crafted in</span>
                        <span class="d-block h-offset">Scotland...</span>
                    </h2>
                    <div class="h-offset h-width-93">
                        <p>Our bikes were born in Scotland, and varied terrains push the mind and the body into sharp focus. It is there, on the road or off the beaten track, that we discover more about the world and ourselves.</p>
                        <p>It is there that we feel at one with all that surround us and experience intensely what it is to feel alive.</p>
                        <a href="" class="c-btn mt-4">Our story</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-6">
            <div class="c-content-block__image d-xl-flex justify-content-start align-items-center">
                <h2 class="h1 h-color-white text-right ml-4 h-zindex-1">Chosen</br>by riders</br>everywhere</h2>
                <img src="https://images.unsplash.com/photo-1471506480208-91b3a4cc78be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" alt="" />
            </div>
        </div>
    </div>
</div>

Но поскольку мы фокусируемся на элементах и используем другой подход, мы можем уменьшить количество необходимого базового HTML:

<section class="grid-section">
  <p class="chapter">04</p>
  <h2 class="h-italic"><span>Crafted in</span> <span>Scotland...</span></h2>
  <img src="https://images.unsplash.com/photo-1471506480208-91b3a4cc78be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" alt="" />
  <h2 class="h-color-white">Chosen by riders everywhere</h2>
  <div class="text-content">
    <p>Our bikes were born in Scotland, and varied terrains push the mind and the body into sharp focus. It is there, on the road or off the beaten track, that we discover more about the world and ourselves.</p>
    <p>It is there that we feel at one with all that surround us and experience intensely what it is to feel alive.</p>
    <a href="" class="c-btn">Our story</a>
  </div>
  <div class="tree"></div>
</section>

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

Создание сложных макетов с использованием CSS Grid

Пока все хорошо… но это не похоже на дизайн, который мне дали, дизайнер убьет меня! Мы подойдем к этому позже, но что приятно отметить, это то, что вы создали хорошую базу. Все те люди со странными старыми браузерами будут рады, что вы приложили усилия. :)

Если у вас это есть, то используйте!

CSS Grid в настоящее время поддерживается в 92% браузеров, на самом деле только Opera Mini и старые IE не поддерживают ее. Во втором руководстве я расскажу, что мы можем сделать для этих бедных людей, но их очень немного.

Мы используем правило @supports. Это также означает, что мы могли бы реализовать некоторые стандартные стили, кроме стилей сетки, и @supports позволит нам сделать это.

Мне нравятся медиа-запросы… Да, я сказал это вслух

Нравится вам это или нет, они очень полезны, поэтому я собираюсь начать с медиа-запроса для 320px и выше. Это примерно размер iPhone 5 и это минимум, с которого я собираюсь начать.

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

Создание сложных макетов с использованием CSS Grid

.grid-section{
        display:grid;
        grid-template-columns: 1rem 1fr 1rem;
        grid-template-rows: 30px var(--italic-header)  60px min-content min-content 100px;
    }

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

.chapter {
       grid-row:1;
       grid-column:2;
       align-self:center;
    }
 etc...

Открытые равнины…

Когда мы доберемся до 768 пикселей, пришло время начать реализацию концепции дизайнеров для настольных компьютеров. На этом этапе мы начинаем использовать сетку из 4 столбцов, а затем размещаем изображение и синий блок div с иконкой дерева, чтобы они перекрывали друг друга. Чтобы разместить синий div позади изображения применяется Z-индекс. Для создания перекрытия у меня есть два фиксированных колонки (1 и 3), а затем две других имеют ширину в fr. Синий блок будет охватывать колонки с 1 по 4, а изображение с 3 и до конца. Мы используем -1, чтобы задать это, хотя в данном случае вы можете установить значение 5.

Создание сложных макетов с использованием CSS Grid

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

.h-color-white {
    grid-column:3/-1;
    grid-row:1/4;
    position: relative;
    align-self:center;
    justify-self:center;
    text-align:right;
    font-size: 2.5rem;
    width:75%;
  }

img {
    grid-column:3/-1;
    grid-row:1/4;
    width:100%;
    height:100%;
    object-fit:cover;
}

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

.grid-section{
    --italic-header: 3vw;
    display:grid;
    grid-template-columns: 100px 1fr 100px 1fr;
    grid-template-rows: 40px calc(var(--italic-header) - 1px)  1fr 50px;
    padding-top:3rem;
  }

.h-italic {
    font-size:var(--italic-header);
}

Последние настройки

Есть одна часть этого дизайна, которую я не выполнил — дизайнер хотел бы, чтобы заголовок разрывался, а вторая строка вставлялась из первой. Это можно сделать, используя спаны внутри заголовка, но для меня это не идеально, что если заголовок контролируется CMS? Я предпочитаю вообще избегать манипулирования заголовками, но если это важно для дизайна, и клиент знает ограничения, я бы использовал на этом этапе Javascript, чтобы добавить спаны и создать визуальный эффект. Я создал небольшую функцию для достижения этого, которую вы можете найти на Codepen.

Что мы узнали?

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

Если вы только начинаете использовать CSS Grid, я могу порекомендовать вам Firefox Dev Tools, это очень полезный инструмент, который поможет увидеть, как сетка реагирует на контент.

Источник: https://www.sushkelly.co.uk

Редакция: Команда webformyself.

Источник: https://webformyself.com/sozdanie-slozhnyx-maketov-s-ispolzovaniem-css-grid/

Share

Тебе может это понравится...