Sebelumnya saya telah menulis tentang apa itu CSS Framework di artikel membuat desain website dengan css framework, namun pada artikel kali ini berisi tutorial bagaimana cara membuat desain website dengan framework css. Jadi saya ingin mengajak anda praktek langsung membuat desain website dengan framework css.
Cara membuat desain website dengan CSS Framework
Sekarang kita akan coba praktek membuat desain website menggunakan CSS Framework. Pada tutorial kali ini untuk pemula jadi kita akan pakai css framework yang ringan dan sederhana, yaitu skeleton
Dalam framework ini, di samping terdapat aturan-aturan css untuk class tertentu juga sudah ada base css, jadi tanpa menggunakan class pun sudah ada style / desain dasarnya.
Langkah-langkah membuat desain website dengan CSS Framework
Sebenarnya ketika anda membuat dan mengedit file HTML, hasilnya bisa langsung dilihat saat file html tersebut dibuka secara langsung dengan chrome, firefox, edge, dll, tetapi akan lebih baik jika anda menggunakan server lokal di komputer, jadi mirip seperti website betulan di hosting online. Membukanya melalui url di adress bar browser, bukan diklik langsung file html nya. Jika anda belum membuat server lokal, silahkan baca tutorial cara membuat server lokal dengan mudah dan cepat.
Setelah anda mengaktifkan server lokal, buatlah folder baru di root server lokal anda. Biasanya di folder www atau htdocs. Lalu rename folder tersebut sebagai alamat web, misalnya situsbaruku.com.
Selanjutnya buat file index.html di dalam folder baru tersebut. Jika anda belum tahu cara membuat file baru di windows explorer, silahkan ikuti langkah di bawah ini.
Membuat file baru di windows explorer
Buka pengaturan Folder Option, klik untuk menonaktifkan (tidak dicentang) Hide extensions for known file types
Buka folder situsbaruku (atau nama folder lain yg telah anda tentukan) lalu klik kanan pada area kosong lalu klik New, klik Text Document
Ubah nama file baru New Text Document.txt (klik kanan => klik Rename) menjadi index.html (diketik lengkap dengan extensinya .html) lalu tekan tombol Enter, klik Yes jika muncul pop up jendela konfirmasi.
Oke, pada tahap ini anda sudah memiliki folder sebagai alamat web dan file index.html sebagai halaman websitenya. Jika diakses di browser chrome tampilannya masih kosong.
Langkah selanjutnya adalah mendownload CSS Framework, lalu letakan di folder situs baru tersebut. Silahkan download CSS Framework Skeleton
Setelah didownload, extract lalu copy folder css dan images yang ada di folder skeleton => dist
Paste / letakan di folder situs baru anda, hasilnya seperti gambar di bawah ini
Langkah selanjutnya adalah edit file index.html dengan program notepad atau software editor lain yang memiliki fitur lebih lengkap. Silahkan cek tutorial 7 software coding gratis untuk pemula. Dalam tutorial membuat desain website dengan css framework ini saya menggunakan software Notepad Plus.
Buat code dasar HTML seperti di bawah ini di file index.html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
Tambahkan meta viewport untuk tampilan responsive dan title untuk menentukan judul website, di bagian HEAD (diantara tag <head> … </head>)
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contoh desain website dengan Skeleton</title>
Tambahkan link tautan ke file css yang ada di folder css, masih di bagian HEAD
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
Sekarang tinggal menambahkan code di bagian BODY untuk konten halamannya. Bagaimana cara membuat layout halaman dengan skeleton? Misalnya saya akan membuat website landing page yang berisi satu halaman penjualan produk/jasa.
Lihat panduan di situs skeleton, untuk membuat layout menggunakan GRID responsive, memakai class container => row => columns/column, tempatkan class nya pada elemen div. Dalam contoh pembuatan landing page ini, saya bagi halaman menjadi beberapa section, dengan code html <section> </section>, setiap section dikasih id unik untuk styling cssnya.
- Section pertama untuk headline dan gambar produk. Layout ini memakai satu kolom.
- Section kedua untuk fitur produk. Layout ini memakai satu kolom untuk heading dan dibawahnya ada tiga kolom untuk daftar fitur.
- Section ketiga untuk spesifikasi produk. Layout ini memakai satu kolom untuk heading dan dua kolom di bawahnya.
- Section keempat untuk menampilkan testimoni. Layout memakai satu kolom untuk heading dan di bawahnya ada 3 kolom untuk daftar testimoni.
- Section kelima untuk FAQ, layout satu kolom untuk heading dan dua kolom di bawahnya
- Section keenam untuk tombol order. Layoutnya 1 kolom
- Section ketujuh untuk teks footer/copyright, layout satu kolom
Perlu saya ulangi lagi, mulai baris ini, code ditempatkan di bawah tag <body>
Pertama, kita buat section headline dengan satu kolom maka codenya seperti ini:
<section id="headline">
<div class="container">
<div class="row">
<div class="twelve column center">
<h2>Tulis Headline Anda disini</h2>
<h3>Sub Headline Juga Mungkin Perlu Anda Tulis di Sini</h3>
</div>
</div>
<div class="row">
<div class="twelve column mt5 center">
<img class="u-max-full-width" src="images/produk.png">
</div>
</div>
</div>
</section>
Penjelasan: menggunakan <section> … </section> agar mudah membagi bagian-bagian halaman web yang memiliki layout maupun style berbeda. Untuk menggunakan grid responsive skeleton, kita harus memakai class container atau wadah, dengan kata lain, lebar konten kanan kiri dibatasi dengan wadah tersebut yaitu 960px. Di dalam container terdapat row atau baris, lalu di dalam row terdapat column atau kolom untuk menempatkan beberapa block yang jumlah dan lebarnya bisa kita sesuaikan.
Dalam container di atas, ada dua row atau baris, row yang pertama berisi satu kolom untuk headline, kolom ini cuma satu yang lebarnya selebar container, maka classnya yaitu twelve column, dan di situ juga ada class center, ini custom class untuk menampilkan teks rata tengah yang saya tambahkan sendiri di file skeleton.css:
.center {
text-align: center;
}
Kemudian di row yang kedua, di class column yang berisi gambar produk ada tambahan class mt5, ini custom class juga untuk menambahkan jarak dengan teks headline di atasnya. Menggunakan css margin atas 5 % :
.mt5 {
margin-top: 5%;
}
Lalu untuk apa class u-max-full-width pada elemen img untuk menampilkan gambar produk? Itu class bawaan skeleton untuk mengatur tampilan gambar menjadi responsive.
Section di atas, jika diakses di browser tampilannya seperti ini
Jika anda ingin mengganti warna background untuk section di atas, tinggal tambahkan rule css untuk class atau id yang diterapkan di section tersebut. Karna section itu menggunakan id headline, maka rule cssnya (tambahkan di file skeleton.css) adalah:
#headline {
background:#f0f0f0;
}
Contoh di atas, menggunakan warna background #F0F0F0, untuk code warna yang lebih lengkap silahkan cek di situs yang menyediakan color picker, atau situs w3schools.com
Section selanjutnya untuk fitur produk, menggunakan satu kolom dan di bawahnya pakai 3 kolom. Karna ada dua baris kolom yang berbeda, maka harus di pisah dengan elemen div dengan class row.
<section id="fitur">
<div class="container">
<div class="row">
<div class="twelve column center">
<h2>Heading Fitur Produk</h2>
<h5>Ini deskripsi fitur produk</h5>
</div>
</div>
<div class="row">
<div class="one-third column mt5 center">
<h4>Judul Fitur Satu</h4>
<p>Ini fitur produk satu.</p>
</div>
<div class="one-third column mt5 center">
<h4>Judul Fitur Dua</h4>
<p>Ini fitur produk dua</p>
</div>
<div class="one-third column mt5 center">
<h4>Judul Fitur Tiga</h4>
<p>Ini fitur produk tiga</p>
</div>
</div>
</div>
</section>
Perhatikan kontruksi kode di atas, yang paling penting adalah elemen pembuka dan penutup harus tepat, itu saya buat sejajar antara pembuka dan penutupnya. <section> harus di tutup dengan </section>, <div> harus ditutup dengan </div>.
Perhatikan div class row yang pertama berisi satu column seperti pada section headline di atas. Sedangkan div class row yang yang kedua berisi tiga kolom. Sesuai rumus layout grid responsive pada skeleton, jika layout tiga kolom maka elemen <div> harus pakai class one-third column. Saya tambah class mt5 dan center seperti penjelasan saya untuk section sebelumnya.
Section berikutnya adalah untuk menampilkan spesifikasi produk. Dalam contoh ini, desain layout saya buat seperti gambar di bawah ini.
Pada section sebelumnya menggunakan layout satu kolom dan tiga kolom yang dipisah dengan dua baris div class row. Sedangkan untuk section ini, perhatikan gambar desain di atas, ada tiga baris div class row yang saya tandai dengan garis kotak, yang pertama untuk heading fitur dengan satu kolom. Lalu di bawahnya ada gambar dan teks paragrap dengan dua kolom, dan di bawahnya lagi juga sama dua kolom, anda juga bisa menambahkan di bawahnya lagi dengan div class row yang baru. Untuk membuat dua kolom menggunakan class one-half column.
<section id="spek">
<div class="container">
<div class="row">
<div class="twelve column center">
<h2>Ini untuk heading</h2>
<h5>Ini teks deskripsi heading</h5>
</div>
</div>
<div class="row">
<div class="one-half column mt5">
<img class="u-max-full-width" src="images/split-1.jpg">
</div>
<div class="one-half column mt5">
<h3>Tulis judul di sini</h3>
<p>Tulis teks panjang paragrap satu</p>
<p>Ini paragrap dua</p>
</div>
</div>
<div class="row">
<div class="one-half column mt5">
<h3>Every Apps you wanted</h3>
<p>Tulis teks panjang paragrap satu</p>
<p>Ini paragrap dua</p>
</div>
<div class="one-half column mt5">
<img class="u-max-full-width" src="images/split-2.jpg">
</div>
</div>
</div>
</section>
Untuk mengatur warna baground pada section di atas, tambahkan custom css di bawah ini.
#spek {
background:#f0f0f0;
}Saya kira tidak perlu saya jelaskan lagi tentang kode di atas, karna sudah ada penjelasan di section-section sebelumnya. Begitu juga dengan pembuatan section testimony dan FAQ, anda bisa melanjutkan sendiri, bisa meniru dengan code section-section yang telah kita buat di atas dan tambahkan custom css yang diperlukan.
Kita akan langsung loncat ke section tombol order dan footer, sedikit penjelasan saja. Untuk section tombol order itu pakai layout satu column. Copy paste section yang telah anda buat di atas, lalu sesuaikan agar menjadi hanya satu baris div class row yang berisi satu column saja. Untuk code tombol order menggunakan class button button-primary seperti di bawah ini.
<a class="button button-primary" href="ini url atau link order">TOMBOL ORDER</a>
Jika anda ingin mengubah ukuran teks tombol order, buat rule css untuk class button
.button {
font-size: 20px;
}
Jika ingin mengbuah background dan property lain yang harus di override, tambahkan !important
.button {
background-color : red !important;
border-color: red !important
}
Selanjutnya untuk section footer, codenya seperti di bawah ini
<section id="footer">
<div class="container">
<div class="row">
<div class="twelve column ">
Copyright Nama situs anda
</div>
</div>
</div>
</section>
Hanya perlu menambahkan rule css untuk warna backround section, warna teks dan jarak atas bawah teks. Section ini pakai id footer, maka code cssnya seperti dibawah ini
#footer {
background-color:#333;
color:#fff;
padding-top:10px;
padding-bottom:10px
}
Untuk hasil dari praktek membuat desain website dengan css framework ini, bisa dilihat di template html landing page sales page. Jika ingin mendownload sorce codenya silahkan klik download template html landing page.
Kesimpulanya, untuk membuat desain website dengan css framework, kita perlu mempelajari dulu panduannya di situs penyedia css framework tersebut. Selain itu, paling tidak perlu menguasai dasar-dasar HTML dan CSS. Dan harus jeli dalam melihat struktur codenya, terutama elemen pembuka dan penutup harus pas penempatannya.
