Słowem wstępu
Kilka tygodni temu klient poprosił mnie o dorobienia na stronie opartej o CMS WordPress linii czasu czyli tzw "timeline". Pierwsze co robi każdy użytkownik WP to plugin i szukanie odpowiedniego rozwiązania. Znalazłem po 40 minutach szukania plugin. Kolejne 40 min, kilkanaście modyfikacji kodu oraz css i udało się uzyskać efekt jaki chciał uzyskać klient. Łącznie spędziłem ponad 1.5 godziny czasu. Wszystko byłoby ok, gdyby nie fakt, że po aktualizacji szablonu lub jakiejś wtyczki wszystko się posypało. Moja irytacja sięgnęła zenitu. 1.5 godziny i pracy poszło w zapomnienie a przecież to tak prosta rzecz. Wpadłem więc na pomysł, żeby napisać to w czystym HTML + CSS3. Całość zajęła mi mniej niż godzinkę.
HTML5
Zacząłem od stworzenia struktury. Tworzymy główną sekcję z id i klasą a w środku umieszczamy <div class="nayma-timeline-block"> główny który będzie naszym boxem, <div class="nayma-timeline-img">, który będzie naszą kropeczką na linii czasu oraz sam <div class="nayma-timeline-content">, w którym umieścimy nasz content.
Jak widzicie struktura jest bardzo prosta i łatwa w stworzeniu. Z pomocą np. EMMET można zrobić to jeszcze szybciej ;)
<section id="nayma-timeline" class="nayma-container">
<div class="nayma-timeline-block">
<div class="nayma-timeline-img">
</div>
<div class="nayma-timeline-content">
<h2>Sekcja 01</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
</div>
</div>
<div class="nayma-timeline-block">
<div class="nayma-timeline-img">
</div>
<div class="nayma-timeline-content">
<h2>Sekcja 02</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
</div>
</div>
<div class="nayma-timeline-block">
<div class="nayma-timeline-img">
</div>
<div class="nayma-timeline-content">
<h2>Sekcja 03</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
</div>
</div>
<div class="nayma-timeline-block">
<div class="nayma-timeline-img">
</div>
<div class="nayma-timeline-content">
<h2>Sekcja 04</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
</div>
</div>
<div class="nayma-timeline-block">
<div class="nayma-timeline-img">
</div>
<div class="nayma-timeline-content">
<h2>Sekcja 05</h2>
<p>This is the content of the last section</p>
</div>
</div>
</section>
CSS3 i stylowanie
Tutaj tak naprawdę nie ma żadnej magii. Tworzymy sobie nasz obszar roboczy. Nasza linia główna to element #nayma-timeline::before w którym rysujemy sobie linię na której będą umieszczone nasze niebieskie punkciki. Jedynym wyzwaniem jest stworzenie naszej linii czasu tak by na komputerze nasze boxy układały się po 2 stronach, a na tabletach i telefonach tylko z prawej strony. W tym pomoże nam
sprytna komenda css3 .nayma-timeline-block:nth-child(even) która pozwoli nam ustawić float dla danych @media only screen and (min-width: 1170px). Poniżej gotowy kod:
@import https://fonts.googleapis.com/css?family=Montserrat:300&subset=latin-ext;
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-family: 'Montserrat', sans-serif;
font-size:.85em;
color: #888;
background-color: #f5f5f5;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
}
h1, h2 {
font-weight: 600;
}
/* Docelowe style timeline */
.nayma-container {
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.nayma-container::after {
content: '';
display: table;
clear: both;
}
#nayma-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#nayma-timeline::before {
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: rgba(0,0,0,.15);
}
@media only screen and (min-width: 1170px) {
#nayma-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
#nayma-timeline::before {
left: 50%;
margin-left: -2px;
}
}
.nayma-timeline-block {
position: relative;
margin: 2em 0;
}
.nayma-timeline-block:after {
content: "";
display: table;
clear: both;
}
.nayma-timeline-block:first-child {
margin-top: 0;
}
.nayma-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.nayma-timeline-block {
margin: 4em 0;
}
.nayma-timeline-block:first-child {
margin-top: 0;
}
.nayma-timeline-block:last-child {
margin-bottom: 0;
}
}
.nayma-timeline-img {
background: #56A2DB;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
@media only screen and (max-width: 1170px) {
.nayma-timeline-img {
margin-left: 10px;
margin-top: 10px;
}
}
@media only screen and (min-width: 1170px) {
.nayma-timeline-img {
width: 20px;
height: 20px;
left: 50%;
margin-left: -10px;
margin-top: 20px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
}
.nayma-timeline-content {
position: relative;
margin-left: 60px;
background: white;
border-radius: 0.25em;
padding: 1em;
box-shadow: 0 2px 7px rgba(0,0,0,.15);
}
.nayma-timeline-content:after {
content: "";
display: table;
clear: both;
}
.nayma-timeline-content h2 {
color: #303e49;
}
.nayma-timeline-content p, .nayma-timeline-content {
font-size: 12px;
font-size: 0.7125rem;
}
.nayma-timeline-content .nayma-timeline-content {
display: inline-block;
}
.nayma-timeline-content p {
font-weight: 300;
margin: 1em 0;
line-height: 1.6;
}
.nayma-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
.nayma-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
}
.nayma-timeline-content p {
font-size: 16px;
font-size: .9rem;
}
}
@media only screen and (min-width: 1170px) {
.nayma-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.nayma-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.nayma-timeline-block:nth-child(even) .nayma-timeline-content {
float: right;
}
.nayma-timeline-block:nth-child(even) .nayma-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
}
Wersja responsywna:
Efekt finalny możecie zobaczyć na codepen.io i tam zobaczycie też jak działa responsywność tej prostej linii czasu.
https://codepen.io/Naymapl/pen/VpxxbZ
W ten oto prosty sposób stworzyliśmy prostą linię czasu, którą można bez problemu zastosować w każdym motywie WordPress lub na stronie HTML i nie musimy się obawiać, że coś się nam rozjedzie po aktualizacji. Morał tej historii jest taki, że często dużo szybciej, lub w podobnym czasie można coś zrobić samemu w czystym kodzie, niż szukać i modyfikować czyjeś wtyczki. To rozwiązanie ma też jeszcze jedną zaletę: nie dodajemy do WordPress kodu PHP i zbędnych rzeczy. Dodajemy tylko tyle kodu ile jest nam potrzebne do działania timeline.
Mam nadzieję, że ta prosta linia czasu się komuś przyda i w kilka minut załatwi temat, który okazuje się nie zawsze jest taki prosty. Pozdrawiam.
