Практика

Сверстаем вот такую шапку.

Название
Линк 1Линк 2Линк 3Линк 4

Она состоит из layout-контейнера, поскольку должна растягиваться на всю ширину браузера. Внутри будет flex-сетка на три ячейки. Первая содержит логотип и название. Вторая — ссылки меню. Третья — ссылки-иконки на соцсети.

Любую вёрстку лучше начинать от общего к частному. То есть вначале задаём модульную сетку, в ней flex-сетку, потом выставляем размеры первой ячейки, второй и третьей.

Котик
Автор котика: mxmstryo

Вначале сделаем основную разметку. Здесь мы задаём layout и flex-сетку.

<div class="layout-center-wrap bg-blue700">
    <div class="layout-wrap">
        <div class="flex flex-ai-center pad20-tb">
            <div class="w2col">
                лого + название
            </div>

            <div class="w8col">
                меню
            </div>

            <div class="w2col">
                иконки
            </div>
        </div>
    </div>
</div>

У основного контейнера сделаем фон bg-blue700. Внутри него текст пусть будет белым, но это будем задавать уже в каждом элементе отдельно.

Во flex-сетке указываем pad20-tb для того, чтобы дать по 20px внутреннего отступа сверху и снизу.

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

Класс flex-ai-center позволяет вертикально выровнять все ячейки по центру контейнера. Поскольку содержимое ячеек разное, то таким способом сделать это будет проще. Этот класс также является синонимом flex-vcenter. Ты можешь использовать и его.

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

Первая ячейка

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

...
<div class="w2col flex">
    <img class="filter-invert" src="atom.svg" width="40" alt="">
    <div class="w90 mar10-l t200 t-white">Название</div>
</div>
...

Ячейка представляет собой flex-сетку, в которой размещается изображение и название. Ты помнишь, что у flex-сетки ячейки — это непосредственные потомки. Именно поэтому мы не задаём для IMG отдельного блока. В нашем примере этого будет достаточно.

У класса изображения есть класс filter-invert. Это специальный класс который инвертирует svg-изображения. SVG имеют векторный формат, который описывается обычным текстом. Поэтому файлы небольшие и хорошо масштабируются. Обычно такие изображения имеют чёрный цвет по умолчанию, поэтому, чтобы не редактировать сам файл, используется такой класс. Просто знай, что такой вариант возможен.

Если бы у нас было растровое иображение (PNG или JPG), то пришлось бы редактировать сам файл, чтобы поправить цвета логотипа под наш дизайн.

У изображения мы указываем только ширину. Браузер автоматически рассчитает высоту, исходя из пропорции самого изображения. Это частый приём.

Блок названия мы делаем достаточно широким w90. Здесь хитрость в том, что у этой сетки не разрешён перенос ячеек, поэтому браузер автоматом подожмёт ширину ячеек так, чтобы они оказались рядом.

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

Вторая ячейка

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

Сразу выравниваем их по центру.

<div class="w8col t-center">
    <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 1</a>
    <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 2</a>
    <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 3</a>
    <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 4</a>
</div>

Каждая ссылка будет иметь отступы друг от друга ( mar10-rl). Дальше задаём цвет обычный и цвет для hover (при наведении курсором).

Третья ячейка

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

<div class="w2col t-right t130">
    <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-twitter" href="#"></a>
    <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-instagram" href="#"></a>
    <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-tiktok" href="#"></a>
    <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-facebook" href="#"></a>
</div>

Классы fab fa-twitter не принадлежат Berry CSS — они из библиотеки иконочного шрифта FontAwesome.

Подключаем FontAwesome

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

Сам по себе иконочный шрифт поставляется в виде непосредственного файла шрифта (сегодня используется формат woff2) и css-классов, также в отдельном файле. Покажу как это использовать на практике.

Вначале скачай архив FontAwesome по ссылке, что я дал. Это zip-архив, который нужно распаковать на свой компьютер. Например пусть он располагается в отдельном каталоге сайта. Нам нужны только css и webfonts.

fa5/
    css/ 
        all.min.css

    webfonts/
        тут файлы шрифта

atom.svg
berry.css
index.html

После этого нужно подключить all.min.css в секции HEAD:

<link href="fa5/css/all.min.css" rel="stylesheet">

Иконки FA5 указываются виде двух классов. Первый определяет группу, второй непосредственно саму иконку. Посмотреть иконки можно в галерее шрифта. Например иконка твиттера — это классы fab fa-twitter.

Итоговый код

<div class="layout-center-wrap bg-blue700">
    <div class="layout-wrap">
        <div class="flex flex-ai-center pad20-tb">
            <div class="w2col flex">
                <img class="filter-invert" src="atom.svg" width="40" alt="">
                <div class="w90 mar10-l t200 t-white">Название</div>
            </div>

            <div class="w8col t-center">
                <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 1</a>
                <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 2</a>
                <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 3</a>
                <a class="mar10-rl t-white hover-t-blue200" href="#">Линк 4</a>
            </div>

            <div class="w2col t-right t130">
                <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-twitter" href="#"></a>
                <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-instagram" href="#"></a>
                <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-tiktok" href="#"></a>
                <a class="mar10-l t-white hover-t-blue200 hover-no-underline fab fa-facebook" href="#"></a>
            </div>
        </div>
    </div>
</div>

Задания

1. Не переходи к другим урокам, пока не убедишься, что полностью понимаешь этот код. По хорошему, ты должен научиться его писать с нуля за 5-10 минут без подсказок.

2. Измени код так, чтобы вместо svg-изображения использовалась иконка FontAwesome.

Решение
...
<div class="w2col flex flex-ai-center">
    <i class="t200 t-white fas fa-atom"></i>
    <div class="w90 mar10-l t200 t-white">Название</div>
</div>
...

3. Сможешь добавить для ссылок FA-иконку?

Решение
<a href="#"><i class="fas fa-home mar10-r"></i>Линк</a>
← Модульная сетка
Адаптивность →