Давайте практично розберемо простий та зрозумілий макет для початківців, які тільки знайомляться з версткою.
Цей макет зверстаємо за допомогою flexbox-лейаут, без препроцесорів. Основні правила, яких будемо дотримуватись:
Заголовок h1 має бути один раз на сторінці
Висоту в процентах не працюватиме. Висота задається за допомогою контенту, внутрішнім відступам (padding) зверху та знизу і границям (border) зверху та знизу
Орієнтир на гумовий тип макетів, отже по горизонталі ми обов’язково будемо задавати в %:
margin-left
margin-right
padding-left
padding-right
Спершу формуємо наш html-код:
1. Замінимо: <title>Sunset</title>
2. Підключимо стилі перед закриваючим тегом /head
<title>Sunset</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>Одразу створюємо файли стилів — reset.css — для обнулення стилів браузера.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Та файл для власних стилів — style.css
3. В <body> формуємо скелет нашого сайту:
Білий наш блок, в якому будуть блок-верхівка сайту, головний блок main, та підвал сайту footer.
<body>
<div class="wrapper">
<header class="header">
</header>
<main class="main">
<section class="section section--flx">
<article class="article">
</article>
<aside class="nav-wrap">
</aside>
</section>
<section class="section">
<article class="article">
</article>
</section>
</main>
<footer class="footer">
</footer>
</div>
</body>
</html>Давайте детальніше сформуємо кожний з цих блоків за допомогою методології найменування класів БЕМ (Блок-елемент-модифікатор).
Наприклад, в header:
<div class="wrapper">
<header class="header">
<h1 class="header__heading">
This is <span class="header__heading--spec">sunset</span> page
</h1>
<div class="header__img-wrap">
<img src="./images/sunset.jpg" alt="sunset" />
</div>
</header>
<main class="main">Далі крокуємо до наступного блоку main. Всередині маємо дві секції, першу — зі статтею та навігацією:
<section class="section section--flx">
<article class="article">
<h2 class="article__heading">Sunset heading</h2>
<p class="article__item">
</p>
</article>
<div class="nav-wrap">
<h3 class="nav__heading">Menu</h3>
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Link 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Link 2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Link 3</a>
</li>
</ul>
</div>
</section>
<section class="section">Наступна секція без навігації. Звертаємо увагу на кількість елементів всередині та особливості розташування елементів на цьому макеті:
/section>
<section class="section">
<article class="article">
<h2 class="article__heading">Sunset heading</h2>
<p class="article__item">
</p>
<p class="article__item">
</p>
</article>
</section>
</main>Далі підвал сайту:
footer class="footer">
<div class="footer__line">
<p class="footer__item">
</p>
</div>
</footer>4. Переходимо в reset.css
Для прикладу будемо використовувати в цьому макеті rem та задамо box-sizing-border-box — для того, щоб паддінги та бордери входили до ширини блоку.
html {
font-size: 16px;
}
body {
font-size: 1rem;
line-height: 1;
}Модель CSS блоку — це, по суті, блок, який охоплює кожен HTML елемент. Він складається із полів (margin), меж (border), відступів (padding) та фактичного змісту (контенту).
Пояснення різних частин:
Content — Зміст поля, в якому розміщуються текст та зображення
Padding — Очищує область навколо змісту. Padding прозорий
Border — Межа, яка охоплює відступи та зміст
Margin — Очищує область поза межею. Margin прозорий
Блочна модель дозволяє нам додавати межі навколо елементів і визначати відстань між елементами.
Загальна ширина елемента має бути розрахована наступним чином:
Загальна ширина елемента = width + лівий padding + правий padding + лівий border + правий border + лівий margin + правий margin
Загальна висота елемента має бути розрахована наступним чином:
Загальна висота елемента = height + верхній padding + нижній padding + верхній border + нижній border + верхній margin + нижній margin
{
box-sizing: border-box;
}5. Тепер переходимо до верстки. Перше, щоб налаштувати якісну роботу з макетом, обираємо в Figma dev mode (повинен бути включеним)
Дивимось, які шрифти залучені до сайту, підключаємо їх за допомогою Google Fonts (саме для цього сайту) та @import. Наступним кроком додаємо фон для body (це в нас селектор тегу, отже коментарем помічаю пріоритетність — одиничка).
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
/* 1 */
body {
background: #b4b4b4 url("../images/bg.png") no-repeat center/cover;
background-attachment: fixed;
font-family: "Roboto", Arial, sans-serif;
font-weight: 400;
}Як вирахувати ширину для .wrapper, для того, щоб вона була в відсотках:
Ширина макету 1440 пікселів — це 100%, а .wrapper 1280 пікселів — x%. За допомогою математичної пропорції вираховуємо: х = 1280 * 100% / 1440 = 88,9% округляємо до 89%.
Тому:
/* 10 */
.wrapper {
width: 89%;
margin: 0 auto;
background-color: #fff;
padding: 0 3%;
}
/* 10 */
.header__heading {
padding-top: 96px;
margin-bottom: 46px;
font-size: 2rem;
color: #a11414;
}
/* 10 */
.header__heading--spec {
font-weight: 700;
text-transform: uppercase;
}
/* 10 */
.header__img-wrap {
padding: 14px 13px;
border: 1px solid #000;
border-radius: 2px;
margin-bottom: 57px;
}
/* 11 -> class 10, tag - 1 */
.header__img-wrap img {
width: 100%;
}margin: o auto; — для того, щоб відцентрувати цей елемент.
Для картинки задаємо 100% від батьківського елементу, це в нас рядковий елемент, висота підлаштується, не задаємо її. Обов’язково задаємо внутрішні відступи 14px 13px. 13px можна перевести в відсотки теж за допомогою пропорцій.
При верстці звертаємо увагу на колір тексту, форматування та відступи від інших елементів.
Для початківців можна спочатку писати код, але потім обов’язково треба звертати увагу на схожі стилі, які можна між собою згрупувати. Так як це навчальний макет, то тут інтуїтивно проста верстка, але є деякі особливості: щоб два елементи були поряд, ми повинні для їх батьківського елементу задати display: flex;
Рекомендую прочитати цікаву статтю на цю тему.
Рекомендуємо публікацію по темі
Помічаємо також, що в макеті є відступ між секцією та боковим елементом в 3 пікселі. Якщо робити цю роботу за допомогою препроцесорів, то було б зручно використовувати тут міксіни, змінні для кольорів.
/* 10 */
.section--flx {
display: flex;
}
/* 20 -> 2 classes - 10 + 10 */
.section--flx .article {
margin-right: 3px;
}
/* 10 */
.article__heading {
color: #a11414;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
}
/* 10 */
.article__item {
color: #1d1b1b;
text-indent: 40px;
margin-bottom: 31px;
}
/* 10 */
.article__text--spec {
text-transform: uppercase;
}
/* 10 */
.article__text--mod {
color: #a11414;
}
/* 10 */
.article__text--add {
text-decoration: line-through;
}Також треба звернути увагу, що в HTML-коді ми задали span — рядкові елементи, в яких були класи з модифікаторами.
Це ті елементи, де в нас великі літери, або змінений колір, або закреслений текст, або може бути якась інша модифікація. В стилях ми це теж задаємо, притримуючись певної дисципліни та порядку. Для кожного параграфу ми задали клас text-indent для відступу червоної строки. Але в самому HTML ми не зловживаємо тегом br і намагаємось більше однієї br не ставити, для зовнішніх відступів існує саме margin.
Потрібно знати різницю про те, як працюють margin та padding для рядкових та для блочних елементів.
Далі вираховуємо ширину в % для .nav-wrap 165 пікселів — х%, 1270 пікселів .wrapper — 100%, отже: х = 165 * 100 / 1270 = 12,9 і округляємо до 13%.
/* 10 */
.nav-wrap {
width: 13%;
height: fit-content;
border-radius: 2px 15px;
background: #d7d7d7;
padding: 29px 26px;
font-family: Arial, Helvetica, sans-serif;
flex-shrink: 0;
}
/* 10 */
.nav__heading {
color: #000;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 24px;
}
/* 10 */
.nav__link {
color: #000;
text-decoration: none;
}
/* 20 -> class - 10, :hover - 10 */
.nav__link:hover {
font-weight: 700;
color: #a11414;
text-decoration: underline;
}Можна ще задати fit-content для .nav-wrap
Звертаємо увагу на шрифти в цьому блоку і на те, як виглядають посилання при наведенні на них. Далі йде стилізація секції без бокового блоку, саме тому тут не потрібен класс з модифікацією: .section—flx
Останніми стилі будуть для .footer:
/* 10 */
.footer {
width: 85%;
margin-top: 4px;
padding-bottom: 18px;
}
/* 10 */
.footer__line {
background: url("../images/footer-lines.png") no-repeat 0 50%;
background-size: 100%;
}
/* 10 */
.footer__item {
text-align: center;
padding: 7px 0 6px;
color: #403636;
}
/* 10 */
.footer__item--spec {
font-weight: 700;
}Що можна зробити, щоб покращити код?
Згрупувати схожі стилі
Додати @media-queries
Додати тінь для врапперу
Спробувати зробити цей макет за домогою препроцесора
Цей макет призначений для початківців, але в ньому є основне для того, щоб потім брати в роботу більш цікаві макети.
