Tworzymy layout bloga
W internecie można znaleźć przeróżne, gotowe szablony do niemal każdego rodzaju stron internetowych. Co w przypadku chęci stworzenia strony według własnego pomysłu? Tworzenie stron internetowych wymaga nie tylko umiejętności technicznych, ale także zmysłu artystycznego.
ŁukaszPodziel się artykułem:
Na szczęście ja skupiam się na tym pierwszym 😄, więc tworzę bloga od strony technicznej. Zatem dzisiejszy wpis będzie przedstawiał layout bloga tworzony od podstaw. Konfigurację środowiska opisywałem ostatnio, także zapraszam do lektury.
Wstępne założenia
Zacznijmy od określenia założeń, według których będziemy tworzyli layout bloga:
- poprawność składni kodu,
- responsywny układ,
- przejrzystość i prostota.
Powyższe trzy założenia pozwolą nam stworzyć własny szablon strony, który będziemy mogli później rozbudować o nowe elementy. Wykorzystując układ strony w oparciu o model flexbox zaczynamy tworzenie. Oczywiście niniejszy layout bloga będzie moją wizją, jednak będzie to prosty, podstawowy design.
Podstawa layoutu
Przygotujmy zatem plik index.html, w którym szablon będzie wyglądał następująco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<meta name="description" content="opis strony"/>
<link rel="icon" href="/favicon.ico" />
<link rel="canonical" href="adres strony" />
</head>
<body>
<nav></nav>
<main></main>
<footer></footer>
</body>
</html>W powyższym kodzie znajdziemy elementy takie jak sekcję head i body. W head zawarłem kodowanie znaków, tytuł strony, konfigurację viewportu, opis strony, ikonkę oraz link kanoniczny. Body zawierać będzie wszystko to, co zobaczy użytkownik, czyli nawigację, „kontent” strony oraz stopkę.
Ktoś zapyta „Gdzie jest link do styli CSS?” – otóż zostanie od wygenerowany wraz ze skryptami JS przez webpack’a i umieszczony w odpowiednich miejscach.
Nawigacja
Pierwszą z kwestii jest poprawne stworzenie nawigacji po stronie. Zawierać powinna ona odnośniki do najważniejszych miejsc strony. Dobrą praktyką jest umieszczenie logo (linkującego do strony głównej lub na mobile otwierającego menu), menu strony, ale także pole wyszukiwarki (o ile nasza strona będzie ją posiadać). Layout bloga może zawierać taką nawigację również w stopce, gdzie wypiszemy nieco więcej odnośników do podstron.
<nav class="navigation">
<div class="navigation__wrapper">
<div class="navigation__item">
<a href="#" title="logo" class="navigation__brand">
Logo strony
</a>
</div>
<div class="navigation__item navigation__menu">
<ul class="menu">
<li class="menu__item">
<a href="/" title="strona główna" class="menu__link">Home</a>
</li>
<li class="menu__item">
<a href="/category" title="kategorie bloga" class="menu__link">Categories</a>
</li>
<li class="menu__item">
<a href="/contact" title="kontakt" class="menu__link">Contact</a>
</li>
</ul>
</div>
<div class="navigation__item navigation__form">
<form action="" class="form">
<input type="text" placeholder="czego szukasz?" name="search" class="form__input" />
</form>
</div>
</div>
</nav>Zatem omówmy powyższy kod. Nawigację podzieliłem na trzy elementy: logo, menu i pole wyszukiwarki. Całość zamknąłem w jeden wrapper, który będzie utrzymywał nawigację w zaplanowanej przestrzeni ograniczonej do maksymalnej szerokości strony. W wersji mobilnej nawigacja może być przypięta do górnej krawędzi ekranu i dopiero po rozwinięciu wyświetli się menu oraz pole szukania.
Od razu zamieszczam fragment kodu CSS (SCSS), który jest potrzebny do prawidłowego ułożenia elementów w nawigacji.
.navigation {
display: flex;
width: 100%;
&__wrapper {
width: 100%;
max-width: 1200px;
margin: 30px auto;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: center;
@media screen and (min-width: 768px) {
flex-flow: row wrap;
}
}
&__brand {
font-weight: 400;
font-size: 1rem;
@media screen and (min-width: 768px) {
font-size: 1.5rem;
}
}
&__menu, &__form {
height: 0;
overflow: hidden;
@media screen and (min-width: 768px) {
height: auto;
}
}
a {
text-decoration: none;
color: #515151;
}
&.open {
.navigation__menu, .navigation__form {
height: auto;
}
}
}
.menu {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: center;
@media screen and (min-width: 768px) {
flex-flow: row wrap;
}
&__item {
display: flex;
}
&__link {
padding: 5px 15px;
}
}Wynikowo otrzymamy poniższy układ:
Przed przejściem do głównej części strony (main), musimy zastanowić się jaki układ treści chcemy uzyskać. Założenie przewiduje prosty i czytelny layout bloga zatem strona główna będzie zawierać listę artykułów blogowych. Zatem przejdźmy do konkretów.
Lista artykułów
Drugą z części, jaką będzie zawierał nasz layout bloga, będzie lista artykułów wewnątrz elementu main. Oczywiście będą one wyświetlane jeden pod drugim w jednej kolumnie, co zapewni nam poniższy kod CSS.
.articles {
display: flex;
flex-flow: column wrap;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}Schemat, w jakim chciałbym przedstawić treści na liście artykułów jest bardzo prosty i zawiera kilka, podstawowych danych: obrazek (miniaturka), tytuł, skrót treści artykułu oraz informacje kiedy i kto dodał dany artykuł.
<main class="articles">
<article class="article">
<div class="article__image">
<img src="//www.lukaszbacik.pl/wp-content/uploads/2022/04/pexels-ekrulila-2333332.jpg" alt="cover article">
</div>
<div class="article__content">
<h2 class="article__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p class="article__lead">Aenean nec tempor nisl. Proin sed pretium tellus. Nullam nec diam id erat consectetur facilisis non id augue. Mauris a mi est. Morbi at hendrerit justo. Aliquam porta cursus tincidunt. Vivamus interdum justo et porta bibendum. Integer non elementum purus, eu commodo mi. Nulla mollis pharetra neque eget congue. Curabitur lobortis magna massa, et viverra nibh ultricies ac. Ut congue ex ac lacus rutrum vulputate. </p>
<p class="article__meta">Added: 2022-04-03, author: Annonymus</p>
</div>
</article>
</main>Powyższy kod należy oczywiście poddać obróbce w stylach, co niniejszym czynię 😄
.article {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
margin: 0 0 30px 0;
@media screen and (min-width: 768px) {
flex-flow: row nowrap;
}
&__image {
width: 100%;
filter: drop-shadow(0 3px 3px rgba(0,0,0,.5));
margin: 0 0 15px 0;
@media screen and (min-width: 768px) {
max-width: 300px;
margin: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
}
&__content {
width: 100%;
padding: 0 0 0 30px;
display: flex;
flex-flow: column wrap;
}
&__title {
font-size: 1.2rem;
line-height: 1.5;
@media screen and (min-width: 768px) {
font-size: 1.4rem;
}
}
&__lead {
font-size: 1rem;
line-height: 1.3;
}
&__meta {
color: #7d7d7d;
margin: 15px 0 0 0;
margin-top: auto;
}
}Po przetworzeniu styli uzyskamy efekt w postaci obrazka z lewej, z prawej zaś wyświetlą się dane tekstowe. W wersji mobilnej otrzymamy design kolumnowy.
Strona artykułu
Pojedynczy artykuł zawierać będzie pełną treść, jednak skorzystamy z układu, który już mamy powyżej. Ze zmian można przenieść informacje o dacie i autorze na górę (poniżej tytułu).
Wyglądać to będzie następująco:
<article class="article">
<div class="article__image">
<img src="//www.lukaszbacik.pl/wp-content/uploads/2022/04/pexels-ekrulila-2333332.jpg" alt="cover article">
</div>
<div class="article__content">
<h1 class="article__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p class="article__meta">Added: 2022-04-03, author: Annonymus</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ipsum a nisl bibendum porttitor. Nam nec venenatis felis. Donec sit amet neque neque. Nulla maximus vulputate justo vitae imperdiet. Morbi convallis magna vehicula ante ornare dictum. Morbi eget felis nulla. Aliquam eu ullamcorper purus. Aenean sagittis, urna vitae vestibulum pellentesque, sapien ex tincidunt lacus, sed sagittis purus ante ut lorem. In eget nunc fermentum, auctor odio tempor, fermentum sem. Nunc facilisis blandit arcu. Maecenas tristique elementum mi at tempor. Donec vestibulum erat iaculis nunc posuere, vitae molestie felis facilisis. Nam maximus risus ut nulla accumsan porta. Nunc eleifend felis consequat cursus viverra. Cras tristique, felis ut vestibulum pulvinar, elit massa sagittis dolor, nec sagittis ex dui id libero.</p>
</div>
</article>Kolejną różnicą będzie zmiana elementu H2 na H1. Tytuł artykuły będzie tutaj kluczowym elementem jeśli chodzi o względy SEO.
Przejdźmy teraz do kodu CSS (SCSS), który zapewni nam prawidłową prezentację w przeglądarce.
.article {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
margin: 0 0 30px 0;
@media screen and (min-width: 768px) {
flex-flow: row nowrap;
}
&__image {
width: 100%;
filter: drop-shadow(0 3px 3px rgba(0,0,0,.5));
margin: 0 0 15px 0;
@media screen and (min-width: 768px) {
max-width: 300px;
margin: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
}
&__content {
width: 100%;
padding: 0 0 0 30px;
display: flex;
flex-flow: column wrap;
}
&__title {
font-size: 1.2rem;
line-height: 1.5;
@media screen and (min-width: 768px) {
font-size: 1.4rem;
}
}
&__text {
font-size: 1rem;
line-height: 1.3;
&:not(:last-child) {
margin: 0 0 15px 0;
}
}
&__meta {
color: #7d7d7d;
margin: 5px 0 15px 0;
}
}Różnice względem strony głównej są kosmetyczne. Zmieniła się klasa article__lead na klasę article__text. Paragrafy (poza ostatnim) otrzymają margines dolny, by je nieco rozsunąć.
Stopka strony
Na dole każdej witryny stosuje się informacje o stronie, ewentualnie autorze. Bardziej rozbudowane strony zawierają tam rozszerzone informacje z mapą kategorii lub formularzem kontaktowym. W naszym przypadku będzie to prosta informacja.
<footer>
<p class="footer">
© 2022; design by Łukasz Bącik
</p>
</footer>Styl tego elementu będzie również banalny:
.footer {
font-size: 1rem;
line-height: 1.3;
color: #7d7d7d;
margin: 15px 0;
border-top: 1px solid #7d7d7d;
padding: 15px 0 0 0;
text-align: center;
}Menu mobilne
Zajmijmy się teraz obsługą mobilnego menu, które będzie wyświetlane i chowane na urządzeniach o szerokości ekranu mniejszej niż 768 pikseli. Samo menu mamy już odpowiednio ułożone, trzeba jedynie obsłużyć kliknięcie w logo strony, które spowoduje wyświetlenie się menu.
const nav = document.querySelector(`.navigation`);
const brand = document.querySelector(`.navigation__brand`)
brand.addEventListener(`click`, (e) => {
e.preventDefault();
nav.classList.toggle(`open`);
})To właściwie cały kod JavaScript potrzebny do obsługi naszego menu mobilnego.
Demo
Przygotowałem małe demo layoutu bloga, którego właśnie stworzyliśmy. Oczywiście jest to podstawowa wersja i można go rozbudować o wiele modułów, jednak na początek wystarczy.
