Tutorial Framework CSS Blueprint
>> Sabtu, 25 Desember 2010
Framework adalah sekumpulan perintah/fungsi dasar yang dapat membantu dalammenyelesaikan proses-proses yang lebih kompleks: Ada banyak framework berdasarkanbahasa pemograman(yg pasti online programming).pemograman php ada codeigniter (next project). Java script ada jquery dan CSS ada blueprint.Saya akancoba bahasa dengan framework CSS blueprint supaya kita semua bisa mencobanya.
pertamax: download source blueprint di : http://www.blueprintcss.org/. buat
direktori blueprint,extract file downloander ke dalam direktori tsb. andaikan
direktori kerja saya di c:\my documents\wybweb\blueprint
OK . kita mulai buat template web-nya. Biasakan dengan menggambar template
web di kertas kosong. Template yang akan saya buat seperti ini :
background warna biru sebagai container-nya.
Membuat halaman utama(HTML)- Buka Notepad.Tulis perintah html berikut:
<html lang="en"><head>Ada apa di file-file blueprint?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Blueprint CSS</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="blueprint/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!-- Import fancy-type plugin for the sample page. -->
<link rel="stylesheet" href="blueprint/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
</head>
<body>
</body>
<div class="container">
<div class="span-24 last" id="header">
<h1 class="alt"> Sandal Jepit Web Page</h1>
<h3 class="title">Contoh web dengan Blueprint CSS</h3>
</div>
<hr>
<div class="span-7 colborder">
<h3>Adsense-1</h3>
<p>Mau belajar web mudah dan gampang,gabung aza di group facebook SANDAL JEPIT </p>
</div>
<div class="span-7 colborder">
<h3>Adsense-2</h3>
<p>KMP (Kirata Media Perkasa). Konsultan pembuatan web dan pemograman baik
yang desktop maupun online </p>
</div>
<div class="span-7 last">
<h3>Adsense-3</h3>
<p>Bintang Kejora. Menjual aneka macam jamu</p>
</div>
<hr>
<div class="span-15 colborder" id="content">
<h3>Framework CSS Blueprint</h3>
<p>Framework adalah....</p>
</div>
<div class="span-8 last" id="menu">
<h3>Menu </h3>
<ul>
<li>Nasi Goreng</li>
<li>Nasi uduk</li>
<li>Nasi kucing</li>
<li>Nasi ayam</li>
<li>Nasi kodok</li>
</ul>
</div>
<hr>
<div class="span-24" id="footer">
<p class="alert">Copy Black © SANDAL JEPIT 2010</p>
</div>
</div>
</html>
contoh diatas menggunakan hanya sedikit dari class yang ada di blueprint, so wajar kalo belum terlihat indah. Pelajari class-class yang
ada di blueprint dan mulailah berlatih dengan class-class tersebut. Berikut keterangan class-class apa saja
yang di blueprint.
Jika anda perhatikan isi file screen.css, semua style sudah tersusun rapi sesuai dengan fungsinya :) .
Bayangkan berapa lama waktu yang anda bisa hemat dari menulis CSS dari nol!
Belum lagi proses debugging browser IE yang menjengkelkan. :D .
Berikut ini uraian penjelasan stylesheet berdasarkan fungsinya:
Reset CSS
Isi dari Reset CSS ini kurang lebih fungsinya sama dengan CSS Reset yang lain seperti yang sudah saya jelaskan sebelumnya di artikel ini. Secara garis besar CSS Reset berfungsi untuk menetapkan standar CSS supaya setiap browser memiliki stylesheet standar yang sama.
Disarankan supaya anda tidak mengutak-atik apapun pada CSS Reset. Karena setiap style yang didefinisikan di Blueprint CSS ini berdasar pada CSS Reset yang sudah dibuat.
Typography
Sesuai dengan namanya, typography menetapkan peraturan untuk penggunaan CSS properties yang memiliki efek pada jenis dan gaya pada huruf. Properti-properti yang didefinisikan pada bagian ini adalah:
- font-family
- font-style
- font-weight
- font-size
- color
- line-height
- margin
- padding
- .small, untuk mengecilkan ukuran font
- . large, untuk membesarkan ukuran font
- .hide, untuk menyembunyikan elemen tertentu
- .quiet, untuk memberikan aksen “sunyi” dengan memberikan
warna font yang sangat muda - .loud, untuk memberikan aksen “lantang” dengan memberikan
warna font yang sangat terang - .highlight, untuk memberikan marka pada tulisan
- .added, berguna untuk memberitahu bahwa sebuah data telah
ditambahkan - .removed, berguna untuk memberitahu bahwa sebuah data
telah dihapus - .first, .last, .top, .bottom untuk mengatur letak floating
element.
CSS ini mendefinisikan style-style khusus untuk elemen-elemen form. Elemen-elemen tersebut adalah:
- label
- fieldset
- legend
- input (untuk tipe text, password, radio button dan checkbox)
- textarea
- .error, untuk memberikan informasi “Error” pada saat submit
form - .notice, untuk memberikan notifikasi pada saat mengisi
form - .success, untuk memberikan informasi “Success” pada saat
submit form
CSS ini seringkali menjadi alasan utama kenapa orang menggunakan CSS Framework karena Grid berfungsi untuk menentukan ukuran dan posisi dari elemen. Properti-properti yang sering dijumpai pada Grid ini adalah:
- float (left atau right)
- clear
- margin
- padding
- span-#, berfungsi menentukan ukuran width pada elemen.
Contohnya .span-1, akan memberikan width sebesar 30 pixel. Jika disandingkan
dengan elemen-elemen form, akan mengatur panjang dari masing-masing elemen
form berbasis box (input tipe text, password, submit dan textarea) - append-#, berfungsi memberikan padding kanan pada elemen
berbasis box sejumlah pixel tertentu. Dinamai “append” karena penambahan dilakukan
“setelah” konten. - prepend-#, kebalikan dari append, prepend justru menambahkan
padding kiri. - div.border, memberikan border kanan untuk kolom
- div.colborder, juga memberikan border kanan, namun lebih
menambahkan padding kanan untuk menimbulkan kesan yang lebih lapang - pull-#, memberikan margin kiri negatif untuk memberikan
kesan “tertarik” ke sebelah kiri - push-#, kebalikan dari pull, push memberi margin kiri
positif untuk memberikan kesan “terdorong” ke sebelah kanan - prepend-top dan append-bottom, memberikan
padding sesuai dengan namanya masing-masing - clear, clearfix, hr, hr.space; berfungsi untuk “membersihkan”
layout dari elemen-elemen floating