Tutorial Membuat Template Website Dengan Blueprint CSS

By | January 15, 2013

Tutorial Membuat Template Website Dengan Blueprint CSS – Salam hangat sobat blogger sekalian, kali ini saya mau membahas cara membuat template website dengan blueprint css. Apakah sobat sudah tahu apa itu Blueprint CSS? Yuk kita simak.

Blueprint css adalah framework css yang dikembangkan menggunakan prinsip dasar grid atau berupa kolom-kolom.

blueprint css grid

Blueprint css grid

Terdapat 24 kolom atau grid. 1 grid memiliki lebar 30px. Margin antarkolom 10px. Jadi total canvas yang dapat kita gunakan adalah sepanjang 950px dengan resolusi terbaik 1024×768.

Untuk menggunakan blueprint css ini, kita dapat mengunduh file masternya di blueprintcss.org. Di website resminya juga terdapat informasi website-website ternama yang menggunakan framework css ini.

Tutorial Membuat Template Website Dengan Blueprint CSS

Setelah kita mengunduh file master berupa .zip, kita mendapatkan beberapa file di dalamnya. Ada banyak file, namun file inti yang kita gunakan  adalah ie.css, print.css dan screen.css yang ada pada folder blueprint. File yang lain bisa sobat gunakan jika ingin menggunakan plugin atau tambahan lainnya.

Sekarang kita coba buat folder di server lokal kita dengan nama folder latihan_css. Saya menggunakan Appserv sebagai server, jadi folder ini kita letakkan di dalam foler www. Jika sobat menggunakan server XAMPP silahkan letakkan di dalam folder htdocs.

Jadi saat ini kita memiliki folder www/latihan_css. Kemudian, agar lebih mudah mengklasifikasikan file css, kita buat folder css. So, sekarang kita mempunyai folder www/latihan_css/css. Ekstrak 3 file blueprint css tadi (ie.css, print.css dan screen.css) ke dalam folder css.

Sekarang kita buat file index.html untuk mencoba membuat template website menggunakan blueprint css. Import atau panggil file blueprint css tadi yang berada pada folder css dengan cara.

Tutorial Membuat Template Website Dengan Blueprint CSS

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">

<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]>

<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> 

Masukkan kode di atas diantara tag <head>….</head>.

Selanjutnya, untuk membuat template website dengan blueprint css kita tinggal memanggil grid-grid atau kolom yang sudah di-generate oleh blueprint css.

Contohnya seperti ini:

Tutorial Membuat Template Website Dengan Blueprint CSS

<div class="container">
<div class="span-24 last">
    The header
</div>

<div class="span-4">
    The first column
</div>
<div class="span-16">
    The center column
</div>
<div class="span-4 last">
    The last column
</div>

<div class="span-24 last">
    The footer
</div>
</div>

Kode di atas tulis diantara tag <body>….</body>.

Jadi, file index.html tadi berisi kode sebagai berikut:

Tutorial Membuat Template Website Dengan Blueprint CSS

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="iqbalparabi" />
    <link rel="stylesheet" href="asset/css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="asset/css/blueprint/print.css" type="text/css" media="print"> 
    <!--[if lt IE 8]>
      <link rel="stylesheet" href="asset/css/blueprint/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <title>Tutorial Blueprint CSS</title>
</head>

<body>

    <div>
    <div>
        The header
    </div>

    <div>
        The first column
    </div>
    <div>
        The center column
    </div>
    <div>
        The last column
    </div>

    <div>
        The footer
    </div>
    </div>

</body>
</html>

Sekarang kita coba untuk melihatnya di browser, maka hasilnya akan seperti ini:

Tutorial Membuat Template Website Dengan Blueprint CSS - Contoh Default Blueprint

Tutorial Membuat Template Website Dengan Blueprint CSS – Contoh Default Blueprint

Bagaimana? Mudah bukan? Kita tidak perlu lagi mendesain web menggunakan table melainkan menggunakan tag <div></div>.

Hal-hal yang perlu diperhatikan:

  1. Jangan sampai salah memanggil atau import file inti dari Blueprint CSS. Perhatikan path tempat sobat menyimpannya.
  2. Terdapat 24 kolom dimana tiap kolom harus terdapat class “last”. Jangan lupa untuk menutup tiap kolom terakhir dengan class “last”. Jika kita menggunakan seluruhnya (24 kolom) maka penulisannya: <div class=”span-24 last”>….</div>. Jika kita bagi menjadi beberapa kolom misalnya 2, kita menjumlahkan besar span menjadi 24 seperti ini: <div class=”span-8″>…</div> <div class=”span-16 last”>…</div>. Ingat, jangan lupakan “last” jika sudah diakhir.
  3. Gunakan file CSS untuk melakukan variasi tiap kolom yang akan sobat buat. Variasi warna dan gambar yang bagus. Jika sudah paham maka tinggal mencari Inspirasi style seperti apa yang akan kita bangun.

Contoh halaman yang saya buat menggunakan Blueprint CSS.

Tutorial Membuat Template Website Dengan Blueprint CSS

Tutorial Membuat Template Website Dengan Blueprint CSS - Contoh Hasil

Tutorial Membuat Template Website Dengan Blueprint CSS – Contoh Hasil

Demikian tulisan mengenai tutorial membuat template website dengan blueprint css. Semoga dapat bermanfaat.

Salam hangat.

Iqbal Parabi

Tutorial Membuat Template Website Dengan Blueprint CSS



Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.