Progress 3 - Belajar Grid Dengan Framework W3.CSS

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">&nbsp;
</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">&nbsp;
</div>
</div>

<div class="w3-row w3-light-grey tengah">
    <div class="w3-col s1">&nbsp;</div>
    <div class="w3-col s10">
        <h3>Form Berlangganan</h3>
    </div>
    <div class="w3-col s1">&nbsp;</div>
</div>


    <div class="w3-row">
        <div class="w3-col s2">&nbsp;</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">&nbsp;</div>
    </div>

<div class="w3-row w3-light-grey tengah">
    <div class="w3-col s1">&nbsp;</div>
    <div class="w3-col s10">
        <h3>Form Berlangganan</h3>
    </div>
    <div class="w3-col s1">&nbsp;</div>
</div>

<div class="w3-row w3-black-navy">
    <div class="w3-col s2">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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.

Terima kasih telah membaca artikel saya, dan tolong bantu saya bagikan artikel ini melalui timeline media sosial anda seperti Facebook, Twitter, Pinterest, Tumblr, dan Google Plus kepada teman-teman anda, karena artikel saya bermanfaat dan anda pun menyukainya.

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