Tutorial membuat website #3: Design main content
Web design main article

Tutorial membuat website #3: Design main content

Setelah tutorial membuat header bar navigasi, selanjutkan tata letak desain bagian utama beranda website yang akan menampilkan posting artikel, slide feature artikel dan kolom-kolom rubrik lainnya.

Untuk layout main content web desain ini, tata letak desainnya yang simpel-simpel saja seperti template blog dua kolom dengan desain minimalis dan mobile first responsive.

Di layar desktop tampilan normal dua kolom. Di layar smartphone auto responsive menjadi satu grid list baris.

Main container yang akan menampung isi konten dibelah dua kolom dengan perbandingan 7:3. Kolom kiri seluas 70% untuk listing artikel. Sedangkan kolom kanan, sisa 30% sebagai sidebar.

Sebelum lanjut ngoding serius, seperti biasa, fokus code pindah dalam tag <main> ... </main>. Dan inilah hasil akhir sintak tutorial yang sebelumnya, header bar navigasi:

<!DOCTYPE html>
<html lang="en">
<!--
	## Tag head hidden mode ## <= menghemat ruang
-->
<body>
    <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>

    <!-- ## START FOCUS CODING HERE ##-->

    <main class="border">

        <h1>Hello World...</h1>

    </main>

     <!-- ## END FOCUS CODING HERE ## -->

    <footer class="border">
        <p>Copyright</p>
    </footer>
</body>
</html>

Hingga selesai tutorial part #2, jumlah baris sintak yang sudah ditulis kurang lebih sekitar 40 baris. Masih sangat sedikit sekali, tapi sudah menampakkan hasil desain yang serius.

Pendekatan desain web yang responsive, akan banyak berkutat dengan sistem grid. Dalam CSS3 sudah ada fungsi display: grid value layout grid dua dimensi yang lebih modern lagi. Karena tutorial ini menggunakan CSS framework Basscss, sistem grid layout masih menggunakan media breakpoint (setting lebar pembagian kolom berdasarkan ukuran layar viewport).

Modul dan class name grid Basscss untuk layout responsive, serta kombinasi variasi kolom yang akan kita pakai, selengkapnya ada di Basscss#basscss-grid.

Semua css framework, secara default jumlah grid terbatas 12 kolom saja. Tapi jumlah kolom yang mau dibuat bisa lebih dari 12 kolom.

Dari 12 kolom grid, kreatifitas desainer web bisa membuat berbagai bentuk layout di inginkan.

Caranya bagaimana? Mudah saja, let go code.

Aturan pertama, harus ada kontainer pembungkus paling luar dulu. Kalau di Bootstrap, wajib panggil class .container atau container-fluid, lalu class row kemudian baru panggil grid kolom. Dalam Basscss tidak ada namanya class .container dan class row, tapi langsung gas dengan class utiliti .clearfix si pembersih float. Sangat irit sintak, hasilnya render grid kolom yang diinginkan sama saja, baik hasil kerja Basscss dengan Bootstrap atau CSS framework lainnya.

<!-- ## START FOCUS CODING HERE ##-->

	<main class="max-width-4 mx-auto border">

	    <div class="clearfix">
           
            <div class="col p2 border">
                
                Kolom kiri: List artikel
                
            </div>
            
            <aside class="col-right p2 border">
            
                Kolom kanan: Sidebar
                
            </aside>
            
        </div>

	</main>

<!-- ## END FOCUS CODING HERE ## -->

Hasil render sintak di atas lihat Demo: Preview 1

Nah…. Lho… Sekali muncul kode kok jadi banyak sekali, tidak seperti biasanya?

Makin lanjut sesi tutorialnya, seharusnya penulisan sintak tidak lagi pelan-pelan.

Tapi tenang, penjelasan code, maksud dan tujuan class name yang di panggil akan selalu ada, tapi khusus untuk yang belum dipanggil sebelumnya.

  • Kode baris pertama <main class="max-width-4 mx-auto border"> ada yang baru, yaitu ada penambahan max-width-4 dan mx-auto masih utility dari modul Basscss.
    • Fungsi dari max-width-4 untuk membatasi lebar maksimal wadah main selebar 64rem (1024px) khusus untuk layar komputer yang wide. Kalau tidak ada pembatasan max-width maka lebar kolom full kiri-kanan.
    • Fungsi dari mx-auto untuk memposisikan sebuah elemen HTML berada di tengah. Class mx-auto bentuk penulisan style CSS-nya seperti ini: .mx-auto { margin-right: auto; margin-left: auto}.
  • Baris berikutnya ada penambahan kontainer baru <div class="clearfix"> ... </div> untuk membungkus grid kolom. Di dalam kontainer ini, ada class utiliti clearfix dari Basscss yang berfungsi untuk membersihkan wadah <main> dari element sebelum atau sesudahnya agar tidak tumpang tindih. Pada beberapa khasus layout kolom, utiliti clearfix bisa di abaikan.
  • Selanjutnya dalam wadah yang sudah clearfix tadi, ada dua buah kotak kosong: tag <div>... </div> dan tag <aside></aside>, lalu insert class grid kolom, yaitu: class name col dan p2.
    • Class name col adalah kolom grid paling awal yang tidak memiliki batasan lebar, secara default float left, lawannya ada col-right untuk posisi tata letak sebelah kanan.
    • Grid col selanjutnya ada col-1 hingga col-12. Lebar grid col-1 hanya 8.33333% dari total lebar 100%. Selanjutnya lebar col-2 hingga col-12 adalah kelipatan dari lebar col-1.
  • Sedangkan class border sebagai alat bantu konstruksi bentuk.

Lanjut ngoding lagi. Sekarang waktunya bongkar pasang ‘puzzle’ grid class name Basscss. Sesuai dengan konsep layout tema blog dua kolam, maka insert class md-col md-col-8 kedalam kotak <div> sebelah kiri dan md-col md-col-4 di kolom kotak <aside> sebagai sidebar posisi sebelah kanan.

Class md-col berarti kolom ukuran medium, fungsinya sama seperti col dan col-8 sebelumnya untuk membuat kolom. Penambahan md adalah lebar medium, yang artinya pada layar min-width:40em (832px), maka grid md-col akan bekerja untuk merender kolom.

Hasil rombak sintaknya seperti berikut ini:

<!-- ## START FOCUS CODING HERE ##-->

	<main class="max-width-4 mx-auto my4">

	    <div class="clearfix">
           
            <div class="md-col md-col-8 p2 border border-silver">
                
                Kolom kiri: List artikel
                
            </div>
            
            <aside class="md-col md-col-4 p2 bg-silver">
            
                Kolom kanan: Sidebar
                
            </aside>
            
        </div>

	</main>

<!-- ## END FOCUS CODING HERE ## -->

Hasil render sintak di atas lihat Demo: Preview 2

Penjelasan code:

  • Baris kode yang ada class name md-col dan md-col-8 untuk membuat grid kolom kiri selebar 70% hasil merge 8 kolom, pada ukuran layar medium, min-width 832px.
  • Selanjutnya, baris kode yang ada class name md-col dan md-col-4 untuk membuat grid kolom kanan selebar 30% hasil merge 3 kolom.
  • Class border, border-silver dan bg-silver sebagai alat bantu untuk memvisualisasi hasil desain semwntara.

Hingga selesai kita drop class name md-col-4 dan hasilnya sudah tampil dua buah kolom dengan perbandingan 7:3 hasil bagi dari total 12 kolom. Maka cara desain kolom untuk menampung konten artikel yang responsive sudah selesai.

Selanjutnya, tinggal mendesain isi content.

Ada berbagai cara untuk mendesain tampilan listing konten khusus halaman beranda, seperti tata letak, card, horizontal slide dan list artikel dengan media image di samping kiri atau kanan artikel.

Untuk desain isi konten utama tutorial ini, tata letaknya model listing artikel dengan media image sebelah kiri.

Maka fokus code berpindah ke dalam wadah kolom kiri yang ada class name md-col-8 dan abaikan dulu baris code yang lain.

<!-- ## START FOCUS CODING HERE ##-->

<div class="md-col md-col-8 p2 border border-silver">
	
	Kolom kiri: List artikel
	
</div>

<!-- ## END FOCUS CODING HERE ## -->

Mari berkreasi lagi dengan menambah grid di dalam grid atau istilah kerennya “nesting grids” untuk membuat listing artikel. Selain tata letak pakai grid, cara mudah lainnya memanfaatkan flexbox, atau modul ‘Media Object’ yang sudah disediakan Basscss.

Penggunaan grid bersarang bisanya sedikit membingungkan. Coba pahami pelan-pelan, kalau bingung, tinggal pertanyaan di kolom komentar.

Rule untuk membuat grid bersarang di dalam Basscss panggil lagi class clearfix.

<!-- ## START FOCUS CODING HERE ##-->
<div class="md-col md-col-8 p2 border border-silver">

	<div class="clearfix mxn2 mb1"> <!-- Start clearfix in right column -->

		<div class="col col-4 px2"> <!-- Img column -->

		</div> <!-- /Img column -->

		<div class="col col-8 px2 mb2"> <!-- Title column -->

		</div><!-- /Title column -->

	</div> <!-- end clearfix in right column -->

</div>
<!-- ## END FOCUS CODING HERE ## -->

Tambahkan judul kolom list konten di luar grid kolom yang kedua, seperti ini:

<h3 class="caps h4 mt0 mb3 gray pb1 border-bottom border-silver">Recent post</h3>

Panggil tag <figure> untuk menampung properti gambar. Insert code dibawah ini ke dalam kolom Img column col-4:

<figure class="m0 block">
	<img src="https://freebiespic.com/images/2019/0506_wireless-keyboard_1087.jpg"
	alt="Wireless keyboard" style="min-width: 33%">
</figure>

Tambahkan kode berikut untuk menampilkan judul artikel ke dalam Title column col-8:

<a class="text-decoration-none" href="#">
	<h2 class="h3 blue m0">
		Lorem ipsum dolor sit amet consectetur adipiscing elit
	</h2>
</a>

Tambahkan juga list untuk mencetak meta data artikel di bawah code judul artikel.

<ul class="list-reset h5 gray">
	<li class="inline-block mr1">Teknologi</li>
	<li class="inline-block">2 jam yang lalu</li>
</ul>

Hasilnya akhir penambahan kode untuk menampilkan isi artikel, sebagai berikut:

<!-- ## START FOCUS CODING HERE ##-->

<div class="md-col md-col-8 p2 border border-silver">

<h3 class="caps h4 mt0 mb3 gray pb1 border-bottom border-silver">Recent post</h3>

	<div class="clearfix mxn2 mb1">

		<div class="col col-4 px2">
			<figure class="m0 block">
				<img src="https://freebiespic.com/images/2019/0506_wireless-keyboard_1087.jpg"
				alt="Wireless keyboard" style="min-width: 33%">
			</figure>
		</div>

		<div class="col col-8 px2 mb2">
			<a class="text-decoration-none" href="#">
				<h2 class="h3 blue m0">
					Lorem ipsum dolor sit amet consectetur adipiscing elit
				</h2>
			</a>
			<ul class="list-reset h5 gray">
				<li class="inline-block mr1">Teknologi</li>
				<li class="inline-block">2 jam yang lalu</li>
			</ul>
		</div>

	</div>

</div>

<!-- ## END FOCUS CODING HERE ## -->

Hasil render sintak di atas lihat Demo: Preview 3

Untuk menampilkan artikel lainnya sebanyak yang diinginkan, tinggal looping saja code bagian ini: <div class="clearfix mxn2 mb1"> ... </div>.

Hasilnya lihat Demo: Preview Content Article

Tutorial sebelumnya

Tutorial Selanjutnya

Comment

comments powered by Disqus