 |
| Belajar grid layout website menggunakan CSS Framework W3.CSS |
Saya masih ingat ketika pertama kalinya belajar merancang layout website pada tahun 2000an. Di zaman itu, sebuah desain tampilan website portfolio yang bermodalkan HTML saja, sudah sangat diburu dan sangat diminati.
Cara praktis mengonversi layout website JPG ke HTML
Prosesnya pun sangat mudah.Pertama, saya memerlukan taste of design yang ciamik. Dilanjutkan dengan menuangkannya ke software design bernama Adobe Photoshop. Kemudian saya melakukan slice atau pemotongan dengan pola kotak-kotak. Dan diakhiri dengan menyimpannya dalam format images dan HTML.
JRENG! JREENGGG!
Sebuah tampilan website pun jadi dalam waktu 1 hari hingga 1 minggu saja sudah termasuk mikirin desain layout untuk 5 pages.
Menyempurnakannya dalam bentuk kode-kode HTML lanjutan adalah opsional. Jika tidak dilakukan, tetap no problem. Namun, jika dilakukan, maka hasilnya akan lebih baik.
Sahabatku, tahukah anda?
Bahwa, pada tahun 2000an bahkan jauh sebelumnya, masih banyak lembaga atau perusahaan besar yang bersedia mengeluarkan kocek hingga jutaan rupiah untuk sebuah website portfolio dengan proses pengerjaan sederhana.
Okay. Then, dapat disimpulkan bahwa proses grid pada CSS Framework, sama halnya dengan slice pada Adobe Photoshop.
By the way, sahabatku, anda bisa merefresh ingatan anda kembali dengan mengikuti proses awal saya merancang sketsa tampilan website menggunakan Adobe Photoshop. Atau, anda juga bisa langsung membaca summary proses pemilihan framework CSS yang akan saya gunakan antara Bootstrap, Foundation, Skeleton, atau W3.CSS.
Melakukan Grid atau Slice ala CSS Frameworks
Mari kembali kepada pekerjaan rumah saya sebelumnya.Persamaan keempat framework CSS tersebut adalah membagi tampilannya menjadi 12 kolom di setiap baris. Sedangkan perbedaannya, mereka menggunakan nama class yang berbeda untuk penggunaan fitur yang sama.
Gambar di bawah ini merupakan contoh penggunaan nama class yang berbeda pada framework Bootsrap, Foundation, W3.CSS, dan Skeleton :
 |
| Perbedaan pemakaian class pada framework CSS |
Jika diterapkan ke dalam rancangan yang telah saya buat, maka memiliki 8 rows, dengan 1 sub-row, 2 sub-sub-rows. Jumlah kolom pada setiap row pun berbeda, tergantung efesiensi dan efektifitas. Perhatikan sketsa di bawah ini :
 |
| Sketsa atau grid concept pada framework css |
Kode HTML
Berdasarkan sketsa tersebut, saya mengaplikasikannya ke dalam kode-kode HTML di bawah ini. Silakan anda salin dan pelajari bagaimana saya menerapkan grid W3.CSS Framework :
<header class="w3-container w3-light-teal w3-text-white-opacity tengah">
<h4>di sini tertulis header</h4>
</header>
<div class="w3-row w3-black-navy padding-atas-bawah">
<div class="w3-col s1">
</div>
<div class="w3-col s4">
<img src="https://lh3.googleusercontent.com/-xEWVaDoCois/VeU2ympBBrI/AAAAAAAADX8/i1EB9lEaDyc/s800-Ic42/trademark%252520trans.png" width="150px" height="auto">
</div>
<div class="w3-topnav w3-col s6 w3-text-white-opacity kanan">
menu
</div>
<div class="w3-col s1">
</div>
</div>
<div class="w3-row w3-light-grey tengah">
<div class="w3-col s1"> </div>
<div class="w3-col s10">
<h3>Form Berlangganan</h3>
</div>
<div class="w3-col s1"> </div>
</div>
<div class="w3-row">
<div class="w3-col s2"> </div>
<div class="w3-col s5">
<div class="w3-row">
<div class="w3-col s4">
<h5>Gambar</h5>
</div>
<div class="w3-col s6">
<h4>Judul</h4>
<p>Penulis | Ditulis pada tanggal</p>
<p>Beberapa kalimat awal pada artikel</p>
</div>
</div>
</div>
<div class="w3-col s3">
<div class="w3-row">
<div class="w3-col kanan">Social Accounts</div>
<div class="w3-col kanan">
<ul class="social-media kanan">
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-flickr"></i></li>
<li><i class="fa fa-tumblr-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
</ul>
</div>
</div>
</div>
<div class="w3-col s2"> </div>
</div>
<div class="w3-row w3-light-grey tengah">
<div class="w3-col s1"> </div>
<div class="w3-col s10">
<h3>Form Berlangganan</h3>
</div>
<div class="w3-col s1"> </div>
</div>
<div class="w3-row w3-black-navy">
<div class="w3-col s2"> </div>
<div class="w3-col s2">
<h5>kolom 1</h5>
</div>
<div class="w3-col s2">
<h5>kolom 2</h5>
</div>
<div class="w3-col s4 kanan">
<h5>kolom 3</h5>
</div>
<div class="w3-col s2"> </div>
</div>
<div class="w3-row w3-black-navy">
<div class="w3-container w3-text-white tengah">
________________________________________________________________________________
</div>
</div>
<footer class="w3-row w3-black-navy padding-atas-bawah">
<div class="w3-col s1"> </div>
<div class="w3-col s3">
<img src="https://lh3.googleusercontent.com/-xEWVaDoCois/VeU2ympBBrI/AAAAAAAADX8/i1EB9lEaDyc/s800-Ic42/trademark%252520trans.png" width="150px" height="auto">
</div>
<div class="w3-col s7 tengah">
<h5>Alamat dan lain-lain</h5>
</div>
<div class="w3-col s1"> </div>
</footer>
Jika anda menggunakan Framework Bootsrap, anda bisa mengganti grid code "w3-col m1" dengan "col-md-1". Contoh lainnya, "w3-col m5" menjadi "col-md-5".
Kode CSS
Saya pun menambahkan kode-kode CSS sebagai pelengkap sekaligus kostumisasi. Silakan anda grab dan pelajari kode CSS di bawah ini :
.kanan { text-align: right; }
.tengah { text-align : center; }
.padding-atas-bawah {
padding-left: 0px;
padding-top : 30px;
padding-right : 0px;
padding-bottom : 30px; }
.social-media li {
list-style:none;
float:right;
padding-left:10px; }
/* Warna tambahan untuk W3.CSS */
.w3-text-light-teal {color:#0eae6c !important}.w3-light-teal {color:#fff !important;background-color:#0eae6c !important}
.w3-text-light-orange {color:#ff7f3f !important}.w3-light-orange {color:#fff !important;background-color:#ff7f3f !important}
.w3-text-black-navy {color:#010519 !important}.w3-black-navy {color:#fff !important;background-color:#010519 !important}
Result - Tampilan Sementara
Hasilnya adalah seperti gambar di bawah ini : |
| Masih belajar nge-grid pakai W3.CSS, belum di fill secara sempurna |
Alhamdulillah... Akhirnya, selesai juga tahapan ketiga dalam perancangan tampilan template website menggunakan Framework W3.CSS.
Ikuti terus perkembangannya melalui newsletter Finally, It's Solved! - www.mewdavinci.com dengan cara berlangganan artikel saya. Setiap kali ada artikel baru, anda akan mendapatkan notifikasinya langsung ke email anda. Daftarkan email anda sekarang juga, tanpa pakai nanti, gak perlu mikir-mikir lagi.
Sampai jumpa lagi bersama saya, Mew da Vinci, di artikel selanjutnya. Wassalamu'alaikum warahmatullah!
Komentar
Posting Komentar
Apa yang Anda pikirkan setelah membaca tulisan ini?