Online Learning

Menggunakan Template contoh untuk memulai mendesain Web

Setelah sebelumnya kita belajar mengenai Membuat Website dengan framework CSS Foundation, selanjutnya kita akan menggunakan beberapa contoh dari foundation framework untuk mendesain website kita.

Sebenarnya kita bisa juga belajar satu-persatu perintah dari framework css ini akan tetapi, menurut saya langkah ini terlalu lama. Terkecuali bila kita belum benar-benar belum terbiasa dengan framework atau css sebelumnya.

Pada situs foundation anda bisa temukan link yang menampilkan beberapa template contoh yang bisa anda pilih sebagai dasar desain template anda.

Berikut beberapa contoh dari template contoh yang bisa anda pilih sebelum melanjutkan ke tahap desain website anda.

Kita tinggal klik pada link HTML dan kemudian kita bisa dapatkan kode yang siap untuk kita letakkan pada halaman yang sudah terkonfigurasi dengan framework css ini.

Untuk mengkonfigurasi lagi-lagi kita tidak perlu bersusah payah. Cukup anda save as index.html yang ada pada folder foundation.css kemudian anda hapus seluruh kode di antara tag body

sebagai berikut :
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
</head>
<body>
    <!-- letakkan kode anda di sini --!>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
</body>
</html>
Ok semoga penggunaan template contoh untuk memulai mendesain web ini menolong anda untuk membuat template dan memahami framwork css ini lebih cepat.

Baca Juga : Membuat tabel yang responsif

Ada saatnya kita bosan, dengan templates gratis buatan orang lain. Ingin membuat sesuatu yang unik untuk website kita.

CSS framework adalah satu solusi tepat dan cepat untuk membangun suatu template atau theme suatu website.

Ada banyak sekali framework, satu yang terkenal atau setidaknya saya paling familiar adalah bootsrap. Logika layoutnya sangat mudah di cerna.

Untuk membuat template website dengan menggunakan framework memang dibutuhkan lebih banyak waktu belajar di awal tetapi akan mudah pada akhirnya.

Foundation.zurb.com menciptakan sebuah framework yang dilengkapi dengan dokumentasi yang sangat lengkap termasuk di dalamnya video pembalajaran bagaimana membuat template. Tetapi sebelum kita membuat template dengan menggunakan framework css ini ada baiknya mari kita lihat beberapa contoh website yang telah menggunakan framework css ini. Anda bisa lihat di

http://foundation.zurb.com/learn/website-examples.html
Berikut capture dari link di atas

Setelah mantap menyaksikan kehebatan dari framework ini marilah kita mengenal sedikit dari komponen dan layout yang ada pada framework css ini.

Setelah anda download dari situsnya, anda bisa intip keterangan layout dan komponen yang ada pada framework ini melui file index html.

Framework foundation ini terdiri atas 12 kolom di setiap barisnya, semuanya masuk dalam elemen div. Semua baris tidak membutuhkan grid.

Berikut button yang ada pada framework css foundation

komponen input html sudah berubah sebagai berikut

yang ada di atas merupakan komponen standard, ada lagi komponen yang telah dimodifikasi yang diberi nama dengan foundation. foundation di framework di peruntukkan bagi yang lebih ahli dalam menggunakan framework css. foundation memungkinkan digunakan untuk mobile atau biasa disebut dengan template responsive.

Untuk menggunakan foundation kita juga harus mendownload kodenya di sini. Silahkan anda download yang Download Everything sehingga bisa terdownload dengan manualnya.

itu sedikit tentang framework css foundation, mudah-mudahan lain waktu bisa belajar secara lengkap framework ini.

Baca juga Menggunakan Template contoh sebagai awal membuat template