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>
<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.
Ada apa di file-file 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:
  1. font-family
  2. font-style
  3. font-weight
  4. font-size
  5. color
  6. line-height
  7. margin
  8. padding

Blueprint juga menambahkan class-class yang juga berfungsi untuk memberikan aksen khusus pada fungsi tertentu:
  1. .small, untuk mengecilkan ukuran font
  2. . large, untuk membesarkan ukuran font
  3. .hide, untuk menyembunyikan elemen tertentu
  4. .quiet, untuk memberikan aksen “sunyi” dengan memberikan
    warna font yang sangat muda
  5. .loud, untuk memberikan aksen “lantang” dengan memberikan
    warna font yang sangat terang
  6. .highlight, untuk memberikan marka pada tulisan
  7. .added, berguna untuk memberitahu bahwa sebuah data telah
    ditambahkan
  8. .removed, berguna untuk memberitahu bahwa sebuah data
    telah dihapus
  9. .first, .last, .top, .bottom untuk mengatur letak floating
    element.
Forms
CSS ini mendefinisikan style-style khusus untuk elemen-elemen form. Elemen-elemen tersebut adalah:
  1. label
  2. fieldset
  3. legend
  4. input (untuk tipe text, password, radio button dan checkbox)
  5. textarea
form Class-class khusus untuk elemen-elemen form pada CSS ini adalah:
  1. .error, untuk memberikan informasi “Error” pada saat submit
    form
  2. .notice, untuk memberikan notifikasi pada saat mengisi
    form
  3. .success, untuk memberikan informasi “Success” pada saat
    submit form
Grid

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:
  1. float (left atau right)
  2. clear
  3. margin
  4. padding
Pada CSS Grid terdapat segudang class. Sangat banyak, mendetail, dan setiap class memiliki ciri khas masing-masing. Namun masih dapat dikelompokkan menjadi daftar berikut ini:
  1. 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)
  2. append-#, berfungsi memberikan padding kanan pada elemen
    berbasis box sejumlah pixel tertentu. Dinamai “append” karena penambahan dilakukan
    “setelah” konten.
  3. prepend-#, kebalikan dari append, prepend justru menambahkan
    padding kiri.
  4. div.border, memberikan border kanan untuk kolom
  5. div.colborder, juga memberikan border kanan, namun lebih
    menambahkan padding kanan untuk menimbulkan kesan yang lebih lapang
  6. pull-#, memberikan margin kiri negatif untuk memberikan
    kesan “tertarik” ke sebelah kiri
  7. push-#, kebalikan dari pull, push memberi margin kiri
    positif untuk memberikan kesan “terdorong” ke sebelah kanan
  8. prepend-top dan append-bottom, memberikan
    padding sesuai dengan namanya masing-masing
  9. clear, clearfix, hr, hr.space; berfungsi untuk “membersihkan”
    layout dari elemen-elemen floating

Satu hal yang patut diperhatikan untuk Blueprint CSS ini adalah asumsi bahwa lebar website adalah 950pixel (dapat dilihat pada class .container). Hal ini patut diperhatikan bagi para website developer bahwa class-class pada Grid ini bisa berfungsi secara optimal untuk website dengan lebar 950 pixel. Anda bisa saja menambah atau mengurangi lebar website anda. Namun patut diperhatikan bahwa beberapa class memiliki width yang cukup besar, misalnya .prepend-23 memiliki padding kiri sebesar 920 pixel tentunya tidak baik untuk website yang lebarnya hanya 900 pixel. Saya pribadi tidak pernah menggunakan Grid CSS karena terlalu banyak class yang “tidak perlu”. Dalam arti, saya tidak akan 100% menggunakan seluruh span-# atau append-# ke dalam desain-desain saya. Lebih baik kelebihan alokasi space tersebut saya salurkan untuk membuat class dengan ukuran seperlunya saja. :) Tapi ini hanya masalah preferensi saja, anda tentu saja bebas menggunakan class-class tersebut.

Nah.., gimana dah mulai bisa mencobanya?? Learning by doing guys...

Read more...

  © Blogger template Webnolia by Ourblogtemplates.com 2009

Back to TOP