
Tutorial membuat website #2: Desain header navigation bar
Tutorial desain header navigation bar ini adalah part ke dua dari seri tutorial membuat website bagian pertama. Sesi ini mulai coding secara ‘drag and drop’ kepingan ‘puzzle’ class-class Basscss, lalu insert ke dalam file HTML.
Sebelum ’lets go to coding’, seperti biasa izinkan InsertApps menjelaskan beberapa rule dan konsep koding nya seperti apa? Yang sudah paham dasar web design, silahkan scroll down ke cara membuat header navigation bar yang responsive.
Untuk lebih mudah memahami konsep web design programming. tutorial ini, InsertApps mencoba pendekatan konsep desain grafis. Desainer biasanya menggunakan beberapa alat bantu untuk memvisualisasi bentuk desain.
Layaknya tukang bangunan, konstruksi bangunan tidak terlepas dari namanya alat bantu perancah (scaffolding). Tampa menggunakan perancah, sulit sekali membangun dan membentuk sebuah bangunan.
Graphic Designer pun tidak terlepas dari alat bantu saat layout majalah, desain logo dan lainnya. Alat bantu yang sering sekali dipakai desainer grafis adalah grid (garis bantu), colorful (warna-warni), rectangle dan circle tool untuk membuat objek kotak maupun bulat.
Alat bantu coding dalam tutorial ini juga sama, yaitu memanfaatkan utilitas dari class-class framework Basscss itu sendiri, sebagai garis bantu juga sekaligus komponen objek desainnya.
Untuk perancah garis bantu tutorial ini akan kita pakai class border
. Utilitas dan variasi model border lainnya lihat di basscss-border.
Cat warna-warni, nama class sesuai dengan identitas warna asli, seperti; black
, gray
, siver
, purple
dll untuk warna text. Class bg-blue
untuk mewarnai isi (fill) kotak container dan class border-teal
untuk mewarnai garis kotak container.
Utilitas dan variasi warna yang sudah include dalam Basscss Ace
ini jumlahnya terbatas, modul warna hasil import dari color palette pihak ketiga clrs.cc. Lihat juga dokumentasi masing-masing perilaku dari class Basscss beserta class Add on di https://github.com/basscss/addons.
Sedangkan ‘grid’ dalam framework css adalah real grid untuk layout kolom dalam berbagai variasi (responsive) web desain. Oya, tidak ada nama class grid
, grid hanya istilah saja.
Coding cara membuat header navigator bar yang responsive
Buka kembali file template dasar index.html
lalu fokus codingnya di bagian tag <header> <p>InsertApps</p> </header>
dan abaikan dulu tag yang lain.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Web Desain oleh InsertApps</title>
<link rel="stylesheet" href="https://unpkg.com/ace-css/css/ace.min.css">
</head>
<body>
<!-- ## START FOCUS ON CODING HERE -->
<header>
<p>InsertApps</p>
</header>
<!-- ## END FOCUS CODING HERE -->
<main>
<h1>Hello World...</h1>
</main>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
🔥 QUICK TIPS: Penjelasan lengkap kode di atas baca tutorial Part #1: Menyiapkan template dasar Dokument HTML.
Langkah pertama, kita akan memvisualisasi bentuk desain dulu dengan menampilkan garis bantu, yaitu add class border
ke dalam tiga wadah semantic html tag; <header class="border">
, <main class="border">
dan <footer class="border">
.
Hasilnya render browser akan menampilkan tiga balok kontainer yang isinya sesuai dengan yang kalian input.
Ngoding dengan app editor Brackets, langsung saja aktifkan fitur Live Preview dan layar desktop kamu, di-split dua layar, agar aktifitas ngoding kamu lebih menyenangkan.
Selanjutnya kembali fokus ke bagian #FOCUS ON CODING
tag <header>
hingga selesai coding tutorial part kedua ini.
Tambahkan lagi class bg-blue
ke dalam tag header pembuka <header class="border bg-blue">
dan jangan pernah mengganggu tag penutup </header>
. Tapi jaga-jaga saja, agar tidak hilang, otomatis desain kamu berubah berantakan.
Masih dalam tag header, tambah class px2
untuk menambah white space di dalam wadah container <header> <header>
. Class px2
adalah class name Basscss dari struktur style CSS berikut: .px2 { padding-left: 1rem; padding-right: 1rem; }
.
<!-- ## START FOCUS CODING HERE -->
<header class="border bg-blue px2">
<p>InsertApps</p>
</header>
<!-- ## END FOCUS CODING HERE -->
Padding
adalah properti CSS untuk menciptakan white space dari dalam element HTML
, memberi spasi di antara konten dan border wadah pembungkus itu sendiri. Lawan dari property padding adalah property margin
untuk menciptakan white space ke luar elemen HTML
, sama seperti perilaku setting margin dalam dokumen MS Word and friend.
Kemudian tambahkan satu elemen kosong tag div
, lalu isi dengan karakter burger → ☰ ← Copy paste saja kode itu.
Tambakan juga tag <nav>
beserta isi menu-menu web dev—di sini terserah kamu ketik apapun boleh—misalnya <nav> About Blog Contact </nav>
. Tag nav adalah elemen HTML yang semantik untuk membungkus menu-menu navigasi website; | About
| Blog
| Contact
|.
<!-- ## START FOCUS CODING HERE -->
<header class="border bg-blue px2">
<div>
☰
</div>
<p>InsertApps</p>
<nav>
About Blog Contact
</nav>
</header>
<!-- ## END FOCUS CODING HERE -->
Sementara hasil render desain <header>
kamu di peramban sedikit berantakan. 😱 Jangan panik, enjoy saja, namanya juga web desain.
Kemudian add class flex
dan items-center
ke dalam tag <header class="border bg-blue px2 flex items-center">
. Tambah juga utility mr1
ke dalam tag div
pembungkus tombol burger <div class="mr1">
.
Sedangkan dalam tag <nav>
add class ml-auto
menjadi seperti ini: <nav class="ml-auto">
.
Struktur code sementara menjadi seperti ini:
<!-- ## START FOCUS CODING HERE -->
<header class="border bg-blue px2 flex items-center">
<div class="mr1">
☰
</div>
<p>InsertApps</p>
<nav class="ml-auto">
About Blog Contact
</nav>
</header>
<!-- ## END FOCUS CODING HERE -->
Hasil render peramban web sudah membentuk sebuah navbar yang lengkap dengan tombol burger, logo web, dan menu category di posisi kanan. 😄
Berikut penjelasan code yang sudah berhasil kamu insert ke dalam file web desain kamu.
- Class name
border bg-blue px2
adalah utility style Basscss, perilaku dari class tersebut sudah dijelaskan di bagian atas. - Code
flex
class name Basscss. Flex itu sendiri salah satu atribut baru di CSS3 yang berfungsi untuk pengaturan display layout yang lebih fleksibel. Nama kelasflex
dalam utility Basscss, struktur penulisan style CSS-nya seperti ini:.flex { display: flex; }
. - Sedangkan untuk
items-center
class name Basscss, untuk memaksa isi (item-item) dalam kontainer pembungkus header berjejer secara vertikal. Struktur penulisan style CSS-nya seperti ini:.items-center { align-items: center; }
. Properti CSSalign-items
dengan value inputcenter;
tidak bisa berdiri sendiri, ia sangat bergantung ke propertyflex
. - Pada baris kode yang menampung tombol burger, ada tambahan kode
mr1
adalah utility class name dari Basscss. Tugasmr1
memberi jarakmargin-right: 1rem;
white space sebelah tombol sejauh1rem
. Bingung dengan pengukuranrem
? Lihat posting Konversi ukuran Pixel ke ukuran REM dalam CSS. - Baris code
<p>InsertApps</p>
, biarin dulu, karena belum di apa-apain. Lanjut ke; - Baris
<nav class="ml-auto">
ada penambahan kodeml-auto
, masih kode class name Basscss. Berfungsi untuk meratakan suatu objek berada pada pojok kanan layar. Struktur asli penulisan style CSS-nya seperti ini:.ml-auto { margin-left: auto; }
.
Lanjut coding lagi. Penulisan sintak berikutnya perbaikan dan penambahan warna, agar hasilnya lebih cantik.
Pada baris kode <header class="border bg-blue px2 flex items-center">
tambahkan class warna white
, kemudian hapus class border
. Boleh add class bantu mb4
untuk menambah jarak white space antara batas tag <header>
dengan batas tag <main>
.
<!-- ## START FOCUS CODING HERE -->
<header class="bg-blue px2 flex items-center white mb4">
<div class="mr1">
☰
</div>
<p>InsertApps</p>
<nav class="ml-auto">
About Blog Contact
</nav>
</header>
<!-- ## END FOCUS CODING HERE -->
Dalam wadah pembungkus tombol burger, tambah class name btn
. Add juga class px0
untuk reset space padding, lalu sertakan mr2
untuk jarak margin kanan sejauh 1rem
(16pixel) dengan batas logo.
Baris code <p>InsertApps</p>
yang dari tadi belum ada sentuhan manis, rombak sintak code-nya menjadi link hidup <a href="#">Brand</a>
.
Perbaiki juga struktur kode <nav> ... </nav>
yang membungkus menu-menu website kalian dengan cara yang benar, seperti berikut ini;
<nav class="ml-auto">
<ul>
<li>About</li>
<li>BLog</li>
<li>Contact</li>
</ul>
</nav>
Kalau hasilnya berantakan lagi, mari lanjutkan dengan menghias lagi header website nya.
Drop lagi class name Basscss berikut: btn
, caps
, h3
dan jangan lupa add class px0
reset padding, insert ke dalam baris kode <a href="#">Logo</a>
sehingga menjadi:
<a class="btn caps h3 px0" href="#">Logo</a> <!-- Ganti logo dengan nama yang kamu suka -->
Insert juga class name list-reset
ke dalam tag <ul>
menjadi:
<ul class="list-reset">
Baris code tersebut untuk menghilangkan bullet dalam tag <li>
.
Dalam list <li> ... </li>
insert class name Basscss inline-block
menjadi:
<li class="inline-block btn">About</li>
Code itu berfungsi merubah listing secara default: vertical menjadi listing berjejer secara horizontal.
Hasil akhir perbaikan kode menjadi:
<!-- ## START FOCUS CODING HERE -->
<header class="bg-blue px2 flex items-center white mb4">
<div class="btn px0 mr2">
☰
</div>
<a class="btn caps h3 px0" href="#">Logo</a>
<nav class="ml-auto">
<ul class="list-reset">
<li class="inline-block btn">About</li>
<li class="inline-block btn">Blog</li>
<li class="inline-block btn">Contact</li>
</ul>
</nav>
</header>
<!-- ## END FOCUS CODING HERE -->
Hasil akhir rendering di peramban setelah perbaikan kode di atas, lihat Demo.
Penjelasan code hasil akhir sementara.
- Setiap baris yang ada penambahan code
btn
, berarti element yang dibungkus akan berubah sifatnya menjadi sebuah tombol. Pointer mouse secara otomatis berubah menjadi fungsi click. - Bari code yang ditambah class name
caps
adalah struktur style CSS dari.caps { text-transform: uppercase; letter-spacing: .2em;
untuk merubah text, menjadi huruf besar semua (uppercase), dan jarak antar karakter sedikit renggang (letter-spacing: .2em
) - Sedangkan
h3
bukanlah tag heading<h3>
, tapi sebuah class name Basscss dari struktur kode style css.h3 { font-size: 1.25rem; }
untuk memperbesar ukuran huruf (font size) logo sebesar20px
(1.25rem). Kreator Basscss secara sengaja menulis class name yang modular dan readable seperti itu, selengkapnya baca dokumentasinya di https://basscss.com/#basscss-type-scale.
Rekap Kode Keseluruhan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Web Desain oleh InsertApps</title>
<link rel="stylesheet" href="https://unpkg.com/ace-css/css/ace.min.css">
</head>
<body>
<!-- ## START FOCUS CODING HERE -->
<header class="bg-blue px2 flex items-center white mb4">
<div class="btn px0 mr2">
☰
</div>
<a class="btn caps h3 px0" href="#">Logo</a>
<nav class="ml-auto">
<ul class="list-reset">
<li class="inline-block btn">About</li>
<li class="inline-block btn">BLog</li>
<li class="inline-block btn">Contact</li>
</ul>
</nav>
</header>
<!-- ## END FOCUS CODING HERE -->
<main class="border">
<h1>Hello World...</h1>
</main>
<footer class="border">
<p>Copyright</p>
</footer>
</body>
</html>
CONCLUSION
- Hingga kode terakhir sudah diketik dalam tutorial ini, belum ada satupun kode CSS tambahan lainnya. Semua class yang barusan kalian insert satu-persatu hingga menjadi banyak, murni class utility bawaan dari framework Basscss.
- Untuk lebih familiar lagi dengan class Basscss, sering-sering baca dokumentasinya.
CODE CHALLENGE
- Tombol burger pada tutorial di atas, masih belum perfect. Tugas kalian untuk membuat tombol burger yang lebih keren lagi. Caranya sudah ada tutorial cara simple membuat icon burger
- Pada menu LOGO, setelah click mouse, muncul frame kotak tebal. Tugas kalian untuk menghilangkan border box bekas click mouse itu.
Comment
comments powered by Disqus