Setelah sekian lama saya tidak menulis artikel, akhirnya saya berkesempatan lagi untuk menulis artikel di platform blogging terbaru saya piksel.id. Di platform ini saya akan berbagi tutorial dan informasi dari dunia teknologi.
Hampir satu tahun yang lalu saya berbagi tutorial pengerjaan LKS Web Technologies Speedtest bagian iOS Toggle. Saya sempat dihubungi oleh beberapa orang yang membaca artikel tersebut maupun melihat repository github saya, mereka adalah orang-orang yang akan mengikuti LKS Nasional di Tahun ini dan meminta soal LKS Tahun lalu.
Dalam artikel kali ini saya akan melanjutkan pembahasan Speedtest LKS Nasional 2021 bagian B2 yaitu Modern layout
Modul Speedtest Bagian B2
Sama seperti tutorial sebelumnya, anda dapat melihat hasil akhir dari tutorial ini ataupun mengunduh soal Speedtest ini di repository github saya.
Di bagian ini, kita diharuskan untuk membuat sebuah grid layout dengan CSS, silahkan lihat preview dibawah ini:
Persyaratan pada soal adalah kita diharuskan untuk membuat layouting 6 buah artikel dengan masing masing 3 artikel setiap barisnya ketika ukuran layar client adalah >= 1440px, jika dibawah 1440px maka hanya akan ada satu artikel setiap barisnya.
Membuat Struktur HTML
Sama seperti tutorial sebelumnya, pertama-tama kita akan menyiapkan struktur HTML (index.html) yang akan kita layouting:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Layout</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<header>
<div class="title">
<h1 class="offset-styled">Blog posts</h1>
</div>
</header>
<section id="article-grid">
<article class="offset-styled">
<h2>Hello title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">Read more</a>
</article>
<article class="offset-styled">
<h2>Hello title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">Read more</a>
</article>
<article class="offset-styled">
<h2>Hello title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">Read more</a>
</article>
<article class="offset-styled">
<h2>Hello title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">Read more</a>
</article>
<article class="offset-styled">
<h2>Hello title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">Read more</a>
</article>
<article class="offset-styled">
<h2>Hello title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">Read more</a>
</article>
</section>
</div>
</body>
</html>Di tag head kita berikan meta viewport untuk mengatur tampilan agar saat diakses melalui layar yang kecil laman tidak akan menampilkan tampilan versi desktop, serta skala defaultnya akan 1. Disitu juga kita tautkan file styles.css yang akan menjadi tempat kita menuliskan kode cssnya.
Didalam tag body akan ada header dan juga section untuk artikelnya (jika anda belum mengetahui tag header, section, article dan lain sebagainya silahkan pelajari semantic element pada HTML 5).
Terdapat class offset-styled yang akan kita jadikan class untuk styling background putih dengan border hitam sesuai preview diatas. Terdapat juga section dengan id article-grid yang akan menjadi styling grid kita nantinya.
Styling dengan CSS
Silahkan buat file style.css, tempat kita menyimpan kode css untuk layout ini nantinya. Pertama kita akan melakukan reseting margin dan padding untuk seluruh elemen HTML dengan menggunakan wildcard:
* {
margin: 0;
padding: 0;
}Selanjutnya kita atur jenis font dan juga background untuk seluruh layout ini, ubah juga line-heightnya menjadi 1.5 agar ada jarak antar setiap baris teksnya. Setiap kali membuat sebuah layout saya selalu membuat container untuk mengatur max-widthnya agar halaman tidak terlihat stretch ketika dibuka di ukuran layar yang sangat besar, atur margin menjadi auto agar berada di tengah:
body {
font-family: sans-serif;
background: #ffec53;
padding: 0 40px;
line-height: 1.5;
}
.container {
max-width: 1400px;
margin: auto;
padding: 0 40px;
}Ketika kita mengetikan 0 40px untuk padding ataupun margin berarti 0px akan menjadi margin top dan margin bottomnya, 40px akan menjadi margin left dan juga rightnya.
Kita atur basic jarak antara header dan juga grid artikelnya nanti dengan menggunakan margin:
header {
margin: 40px 0;
}Selanjutnya kita buat style untuk box putih dengan border hitam (class .offset-styled). Kita tambahkan padding terlebih dahulu di class tersebut, kita tambahkan border hitam mengitari objek tersebut, kita atur juga posisinya menjadi relative:
.offset-styled {
border: 1px solid #000;
padding: 20px;
position: relative;
}Mengapa kita berikan posisi relative? hal ini berguna agar kita bisa memberikan background putih dibelakang objek tersebut dengan ukuran yang sama. Tambahkan kode dibawah ini:
.offset-styled::before {
content: '';
background-color: #fff;
position: absolute;
top: 8px;
left: 8px;
width: 100%;
height: 100%;
z-index: -1;
} Kita akan menggunakan pseudo selector ::before sebagai tempat melakukan styling background tersebut. Kita atur juga posisinya absolute agar mengikuti parent classnya yang telah kita berikan position relative tadi. Kita atur inset top dan leftnya agar memiliki offset (jarak) seperti preview diawal. untuk width dan heightnya kita atur 100% agar ukurannya sama seperti parentnya. Dan juga z-index (indeks layernya) -1 agar tidak menutupi teks dan bordernya.
Selanjutnya, kita atur titlenya agar berada di tengah dan widthnya tidak memenuhi layar. Kita atur class title agar alignnya menjadi center. Lalu, h1 (yang menjadi tempat peletakan judul) kita atur displaynya menjadi inline-block (default untuk heading adalah block).
.title {
text-align: center;
}
.title h1 {
display: inline-block;
}Langkah inilah yang menjadi kunci utama penilaian, kita akan membuat grid untuk section dengan id #article-grid. Kita mengatur jumlah kolomnya menjadi 3 dengan grid-template-columns serta kita mengatur juga jarak antar baris dan kolom dengan grid-column-gap dan grid-row-gap :
#article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 40px;
grid-row-gap: 40px;
}Informasi
Perlu diketahui, fr adalah satuan fractional unit, ukurannya sama dengan space yang tersedia saat ini, misal kita tulis 70fr 30fr untuk grid-template-columns maka kolom sebelah kiri akan lebih besar dari kolom sebelah kanan.
Kita atur desain responsivenya agar kita berada dibawah 1440px hanya akan menjadi satu kolom dengan menggunakan @media query:
@media screen and (max-width: 1439px){
#article-grid {
grid-template-columns: 1fr;
}
}Langkah terakhir adalah memperbaiki styling untuk link dan memberikan jarak untuk beberapa elemen:
article p {
margin: 15px 0;
}
a {
text-decoration: none;
color: #3399ff;
}Kode Akhir CSS
Setelah mengikuti tutorial diatas, seharusnya anda akan mendapatkan kode css (file styles.css) seperti dibawah ini:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #ffec53;
line-height: 1.5;
}
.container {
max-width: 1400px;
margin: auto;
padding: 0 40px;
}
header {
margin: 80px 0;
}
.offset-styled {
border: 1px solid #000;
padding: 20px;
position: relative;
}
.offset-styled::before {
content: '';
background-color: #fff;
position: absolute;
top: 8px;
left: 8px;
width: 100%;
height: 100%;
z-index: -1;
}
.title {
text-align: center;
}
.title h1 {
display: inline-block;
}
#article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 40px;
grid-row-gap: 40px;
}
@media screen and (max-width: 1439px){
#article-grid {
grid-template-columns: 1fr;
}
}
article p {
margin: 15px 0;
}
a {
text-decoration: none;
color: #3399ff;
}Silahkan coba jalankan file index.htmlnya maka anda akan mendapatkan tampilan seperti preview diatas.
Kesimpulan
Pembuatan modern layout ini menurut saya mudah bagi mereka yang sudah cukup memahami konsep grid layouting dengan css. Sebenarnya terdapat juga cara lain untuk mencapai target ini, seperti menggunakan flexbox maupun display table-cell. Namun, menurut saya grid adalah masa depan layouting untuk situs web.
Terima kasih telah membaca seri kedua pembahasan LKSN 2021 Web Technologies!