Tutorial membuat website #2: Desain header navigation bar

3 Aug 2020
#basscss
#html
#css

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 kelas flex 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 CSS align-items dengan value input center; tidak bisa berdiri sendiri, ia sangat bergantung ke property flex.
Pada baris kode yang menampung tombol burger, ada tambahan kode mr1 adalah utility class name dari Basscss. Tugas mr1 memberi jarak margin-right: 1rem; white space sebelah tombol sejauh 1rem. Bingung dengan pengukuran rem? 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 kode ml-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 sebesar 20px (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.

⬅ Tutorial sebelumnya

➡ Tutorial Selanjutnya

Coding cara membuat header navigator bar yang responsive

Sharing

Comment