Berry CSS
Как ты уже догадался, css-свойств очень много. Но большую часть вёрстки составляют лишь несколько свойств. Это отступы, размеры, цвета, flex-сетка и оформление текста. Чтобы не тратить время на голую теорию, попробуем применять CSS-свойства исходя из текущей задачи.
Но перед этим я расскажу об одной из основных проблем, которую решает каждый верстальщик. Это проблема именования классов.
Например есть некий блок с html-кодом, где несколько вложенных друг в друга DIV-блоков. Внутри, скажем, будет изображение, какой-то текст. То есть блок, где каким-то образом нужно будет придумать классы для 10 элементов. В итоге большинство верстальщиков ограничиваются такими примитивами, вроде block1, b1, header-b, top-h-box, bt-main-form2 и т.п.
Понять назначение таких классов очень тяжело, а скорее — невозможно. В итоге такие проекты достаточно сложно поддерживать даже своему автору. Если нужно будет изменить страницу через пару месяцев, то придётся постоянно «скакать» между css-файлом и html-кодом пытаясь понять назначение каждого класса.
Чтобы решить такую проблему, в последние годы верстальщики активно стали использовать другой подход, который называется Utility-first и базируется на концепции Atomic CSS.
В его основе лежат классы, которые имеют точное назначение. Например класс t-red сделает текст красным (color: red), а bg-red сделает красным фон (background-color: red). Таким образом утилитарные классы охватывают практически все необходимые css-свойства в виде css-классов.
Такой подход позволяет о-о-очень сильно упростить работу с css-кодом. Вместо того, чтобы придумывать имя класса, а потом создавать для него стили, здесь сразу указываются готовые классы.
<h2 class="t-center t-bold t-blue t-georgia">Заголовок</h2>
Заголовок
Большим плюсом такого подхода является то, что утилитарные классы семантичны — их назначение понятно из их названия. В этом примере, ты без труда понял, что префикс t- говорит о том, что действие класса распространяется на текст. Выравнивание (center), жирность (bold), цвет (blue), шрифт (Georgia) — легко понятны любому верстальщику.
Запомни простое правило — вёрстка всегда идёт от html-кода. Поэтому очень важно сделать html-код семантичным. Не зря мы столько времени уделили семантике html-тэгов. С css-классами ситуация аналогичная: чем понятней код, тем лучше!
Знакомство с Berry CSS
Berry CSS — фреймворк на основе утилитарных классов и именно на его основе мы будем изучать вёрстку. Я хочу, чтобы ты сразу смог начать верстать блоки, но при этом не тратить время на теорию CSS и исправление ошибок. Вместо этого, мы начнём верстать на классах Berry, но я буду рассказывать как они устроены. То есть двигаемся от практики к теории.
Подключение Berry CSS
Ты можешь использовать вот такую заготовку для своих страниц:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Sample page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="berry.css">
</head>
<body>
... html код ...
</body>
</html>
Основная css-библиотека — это файл berry.css — ты можешь его взять из дистрибутива Berry CSS и кинуть рядом с основным html-файлом.
Есть другой способ: можно вообще ничего не загружать, а подключить файл удалённо:
... <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/maxsite/berry/dist/berry.css"> ...
Ты заметил новую строчку:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Она нужна для того, чтобы обеспечить нормальное отображение страницы на разных устройствах (десктоп, планшеты, телефоны). Сейчас очень большое разнообразие экранов, поэтому нужно указать браузеру как правильно отображать страницу и как её масштабировать. Особенно это актуально для сайтов с адаптивным дизайном.
Поработаем с текстом
Начнём с размеров. Для этого в Berry используются классы tXXX, где XXX — число, обозначающее размер текста.
Сам по себе размер может задаваться в абсолютных величинах, например 30px, так и относительных - проценты.
Относительные величины всегда рассчитываются от какого-то базового значения. В основном мы используем единицы REM, которые берут за 100% размер шрифта всего сайта (значение по умолчанию). Например, часто используют размер текста 16px, значит 2rem будет соответствовать 32px. Если мы изменим базовое значение на 20px, то 2rem будет равен уже 40px.
Базовый размер обычно устанавливается у тэга BODY.
body { font-size: 16px; }
Это очень удобно, поскольку не нужно рассчитывать абсолютные единицы. Теперь можно указывать размеры в процентах:
<div class="t150 t-red t-center">Текст</div>
Класс t150 устанавливает размер 150%, что соответствует css-коду:
.t150 { font-size: 1.5rem; }
В Berry CSS предусмотрены классы от t80 (0.8rem) до t500 (5rem). В CSS rem-единицы задаются в виде коэффициента, а классы в процентах (это более привычный формат). REM — это основной способ задать размер текста.
Есть похожие единицы размера — EM. Они похожи на REM, но размер отсчитывается от родительского элемента. Задаются они в виде классов tXXXem.
Давай посчитаем. Пусть базовый размер текста будет равен 16px. Дальше такой код:
<div class="t200em"> <div class="t80em"> <h2 class="t90em">Заголовок</h2> </div> </div>
Заголовок
Размер у t200em — 16px x 2 = 32px. Класс t80em считается уже от этого числа 32px x 0.8 = 25,6px. Размер t90em 25,6px x 0.9 = 23,04px. Это размер текущего заголовка.
Единицы EM сейчас очень редко используются для текста, потому что нужно учитывать размер каждого блока и это часто приводит к проблемным ситуациям. В этом плане REM более предсказуемы.
И третий вариант задания размера — абсолютный в пикселях. За это отвечают классы вида tXXXpx. Здесь всё просто — какой размер указан, так текст и отображается.
<div class="t200"> <div class="t150em"> <h2 class="t30px">Заголовок</h2> </div> </div>
Заголовок
Здесь заголовок всегда будет 30px.
Оформление текста
Для этого используются классы
.t-italic {font-style: italic; }
.t-underline { text-decoration: underline; }
.t-strike { text-decoration: line-through; }
<p class="t-italic">Текст</p> <p class="t-underline">Текст</p> <p class="t-strike">Текст</p>
Текст
Текст
Текст
Класс для задания жирности t-bold (свойство font-weight). Но в CSS, на самом деле жирность можно задавать несколькими способами, например числом. Проблема в том, что не каждый шрифт поддерживает такое начертание. Например Open Sans, который ты сейчас видишь, может так:
Текст 100
Текст 200
Текст 300
Текст 400
Текст 500
Текст 600
Текст 700
Текст 800
Текст 900
<p class="t-bold100">Текст 100</p> <p class="t-bold200">Текст 200</p> <p class="t-bold300">Текст 300</p> <p class="t-bold400">Текст 400</p> <p class="t-bold500">Текст 500</p> <p class="t-bold600">Текст 600</p> <p class="t-bold700">Текст 700</p> <p class="t-bold800">Текст 800</p> <p class="t-bold900">Текст 900</p>
Как правило используется только t-bold (его синоним t-bold700) и t-bold-normal (синоним t-bold400). Другие значения следует использовать с осторожностью и всегда проверять, что шрифт их поддерживает.
Выравнивание
Это реализуется с помощью классов:
.t-right { text-align: right; }
.t-left { text-align: left; }
.t-center { text-align: center; }
.t-justify { text-align: justify; }
Думаю назначение каждого класса понятно.
Цвет
Цвет мы уже рассматривали, поэтому остановимся только на том, как это сделано в Berry CSS.
Чтобы было наглядно, посмотри на таблицу цветов. Каждый цвет имеет имя, а также номер, указывающий на его яркость. Такой подход используется в Material Design от Google. Градация яркости: 50, 100, 150 .. 900, 950 — от самого яркого до самого тёмного оттенка.
Классов, конечно, много, но они охватывают всю цветовую палитру. Поэтому при верстке тебе будут доступны все варианты.
Задания
1. Сделай страницу и подключи Berry CSS.
2. Сверстай несколько абзацев с разным выравниваем текста, цвета, фоном.
3. Вот здесь ты найдёшь и другие css-классы для текста. Сверстай заголовки несколькими шрифтами. Посмотри каким из них доступны bold-классы.