Практика

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

В этот раз я вначале выложу готовый код, а потом объясню как он работает.

<div class="layout-center-wrap mar50-tb">
    <div class="layout-wrap">
        <div class="t-center"><i class="fas fa-hryvnia t150 t-blue600 bg-gray150 icon-circle"></i></div>
        
        <div class="t-center mar20-t h2 t-bold lh130">Lorem ipsum dolor impedit sit<br> amet consectetur</div>

        <div class="t-center mar20-t w700px-max b-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni aut impedit earum ex rem nulla id consectetur ducimus quam officiis</div>
        
        <div class="t-center mar40-t"><a class="button button1" href="#">Lorem ipsum</a></div>
    </div>
</div>

Весь блок размещается в layout-контейнере, только добавляем отступы mar50-tb — это нужно сделать, чтобы блок не сливался с другими.

Внутри будет 4-е блока. Все они раздельные и у всех мы сразу прописываем класс t-center. Поскольку выравнивание по центру работает на любом экране, то нам и не нужно указывать какие-то особые адаптивные классы.

В первом блоке выводится иконка. В Berry CSS есть специальный класс icon-circle, который формирует круглую иконку. Остальное оформление ты уже знаешь: фон, цвет текста и размер шрифта.

Второй блок заголовочный. Формально можно было бы использовать тэг H2, но тогда этот блок будет иметь определенную семантику. Если этого не нужно, то используем обычный DIV, а для размера текста класс h2 (есть h1..6). Он будет совпадать с размером текста тэга H2.

Текст заголовка длинный, поэтому делаем переносы с помощью BR для красоты или по смыслу. Класс t-bold делает текст полужирным, а класс lh130 задаёт интерлиньяж. Это расстояние между строками текста. Обычно задаётся в безразмерных величинах. По умолчанию он равен 1.6.

body {
    line-height: 1.6;
}

В Berry CSS классы lhXXX делают тоже самое, только число указывается в виде процентов (как и для классов с rem). В данном случае lh130 сделает строчки ближе друг к другу. Для читаемости обычного текста используют интерлиньяж примерно 160%, а для крупного текста его уменьшают до 120-130%.

Третий блок выводит обычный текст, но мы его сузим (для красоты): ограничиваем ширину блока до 700px ( w700px-max).

.w700px-max {
    max-width: 700px;
}

Ранее я тебе рассказывал, что в CSS нет стандартного свойства для центрирования блока по горизонтали. Класс b-center делает это с помощью margin: auto

.b-center {
    margin-right: auto;
    margin-left: auto;
}

Мы этот пример уже рассматривали. Работать будет, только если у блока задана ширина. В нашем случае это максимальные 700px. Поэтому блок и выравнивается.

И последний блок представляет собой обычную ссылку. Для того, чтобы она выглядела как кнопка, используются два класса button button1. Первый задаёт общее поведение кнопки, а второй — её дизайн.

Элементы форм будем рассматривать позже.

Обрати внимание на то, как расставляются отступы между блоками. Во всех случаях используется только верхний отступ ( margin-top). Формально мы можем указать и нижний, но для удобства, лучше указывать отступы у блока, который знает после чего он следует. Если указывать нижний отступ, то фактически это будет означать, что верхний блок должен знать как выглядит нижний. Чтобы избегать подобных ситуаций используют только верхний отступ. Нижний же можно использовать только в самом последнем блоке, поскольку он сам и определяет отступ от контейнера.

Схлопывающиеся отступы

Расскажу об одной особенности CSS, которую ты должен знать. Пусть у нас есть вот такой вариант:

<div class="bg-red100 mar50-b">первый блок</div>
<div class="bg-green100 mar50-t">второй блок</div>

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

Теперь сделай (протестируй в Berry Builder) у первого блока отступ поменьше, например mar10-b. Браузер всё также отображает блоки через 50px. А теперь, наоборот, увеличь отступ, например mar100-b. Вуаля! Между блоками стало 100px.

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

В эту ловушку легко попасть, когда верстаешь несколько блоков подряд.

<div class="bg-red100 mar20-tb">первый блок</div>
<div class="bg-green100 mar40-tb">второй блок</div>
<div class="bg-blue100 mar30-tb">третий блок</div>
<div class="bg-yellow100 mar10-tb">четвертый блок</div>

Какое реальное расстояние между блоками? В данном случае они все разные и, чтобы ответить на вопрос, тебе придётся учитывать указанные отступы между каждым блоком. Именно поэтому, лучше указывать только верхний отступ, что исключает такую ситуацию.

<div class="bg-red100 mar20-t">первый блок</div>
<div class="bg-green100 mar40-t">второй блок</div>
<div class="bg-blue100 mar30-t">третий блок</div>
<div class="bg-yellow100 mar10-t">четвертый блок</div>

Задания

1. Протестируй примеры с отступами -tb и -t. Обрати внимание на расстояние между третьим и четвёртым блоками.

2. Сделай свой вариант вёрстки компонента, только размести его на красном фоне. Поменяй иконку на другую. В качестве оформления кнопки используй другие классы из Berry CSS.