Tutorial Menggunakan Blueprint CSS Framework

24 November 2009 - 17:56 by Firewalker Tutorial

Blueprint CSS

CSS Framework merupakan salah satu sarana yang baik bagi para web developer untuk menggunakan CSS tanpa harus mendalami syntax dari CSS. Ada beberapa CSS Framework yang tersedia secara gratis di internet. Beberapa diantaranya dibuat oleh situs yang tak lagi asing bagi anda: Google dan Yahoo.

Tutorial ini khusus mengulas mengenai kode-kode CSS yang sudah terdapat di dalam Blueprint CSS. Perihal penggunaan script Ruby tambahan yang termasuk di dalam bundle framework ini akan dibahas dalam sesi yang lebih advanced (ketika saya sudah bisa pakai Ruby ).

Tutorial ini terdiri dari 3 halaman.

Mendapatkan Source Code Blueprint CSS

Blueprint dapat diakses dan diunduh melalui situs Blueprintcss.org. Anda akan disuguhi oleh file ZIP atau TAR yang kemudian membutuhkan software decompressor untuk membukanya. Untungnya setiap Operating System (XP, Mac, Linux) sudah memilikinya, jadi saya asumsikan anda sudah membuka dan mengekstrak file tersebut.

Jenis-Jenis File CSS di Dalam Blueprint CSS

File-File Blueprint CSS

Untuk tutorial ini, harap langsung menuju folder “blueprint” dan melihat ketiga file CSS di dalam folder tersebut. Blueprint membagi style-style CSS mereka ke dalam 3 file:

screen.css : CSS yang berperan untuk menentukan layout seperti yang anda lihat di layar monitor anda saat ini. File ini digunakan untuk tipe media “screen” dan “projection”, hal ini meliputi semua tipe layar monitor yang diproyeksikan dari PC atau Laptop. Keterangan selengkapnya bisa dilihat dalam deskripsi tipe media berikut ini.
print.css : Seperti screen.css, hanya kali ini ditujukan untuk media printing. Style ini muncul ketika anda menekan tombol “Print” pada browser anda.
ie.css : Style ini ditujukan khusus untuk Internet Explorer (IE).Bagi yang belum mengetahui, IE adalah browser besutan perusahaan raksasa Microsoft. Browser ini memiliki masalah yang bertumpuk-tumpuk yang selalu muncul setiap kali ada update terbaru.
Banyak aturan-aturan yang sudah disepakati di dalam World Wide Web Consortium (konsorsium yang menyebabkan setiap website yang anda lihat di dunia ini sama di browser manapun) tidak berlaku untuk browser IE.
Karena sifat IE yang tidak konsisten inilah, maka hampir setiap website memiliki “aturan khusus” untuk memperbaiki tampilan pada browser IE. Karena bagaimanapun, pengguna IE di dunia masih sangat banyak mengingat IE adalah browser yang didapat oleh pengguna Windows langsung dari CD/DVD instalasinya.

Untuk menggunakannya, masukkan kode berikut ini di dalam tag head:

<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]-->

Atribut media digunakan untuk mempertegas penggunaan CSS tersebut. Print.css diletakkan setelah screen.css supaya dapat mendifinisikan ulang aturan-aturan CSS pada media printing.

Sedangkan ie.css diletakkan di dalam Conditional Comment. Conditional Comment ini hanya dapat dilihat oleh browser IE. Hal ini dikarenakan IE merender halaman web dengan metode yang berbeda dengan browser-browser lainnya. “Kejanggalan” inilah yang justru menjadi celah yang dimanfaatkan website designer untuk memperbaiki kebobrokan ini.

halaman berikutnya… Membedah file-file Blueprint CSS

Pages : 1 2 3

gozali says:

November 24, 2009 at 6:22 pm

wah keren tutorialnya gan

Firewalker says:
November 24, 2009 at 6:25 pm
Yoi, boi. Semoga bermanfaat . Cuman bagian script ruby nya belum aku telusurin.

Isa says:

November 25, 2009 at 1:42 pm

Thx Gan..
Tutorial yg muanteb..

Herman T says:

December 29, 2009 at 6:08 pm

Hati – Hati. CSS Framework berdasarkan hasil riset saya hanya diperuntukkan bagi yang sudah mature atau experience di bidang CSS. Jadi usahakan anda belajar CSS dahulu baru gunakan frameworknya .

Firewalker says:
December 29, 2009 at 6:32 pm
Saya rasa justru developer yang masih awam terhadap CSS yang membutuhkan CSS Framework
Karena mereka dapat menggunakan class-class yang sudah ditentukan di dalam framework tanpa perlu mengetahui kegunaan-kegunaan atribut CSS di dalamnya.
Namun apabila tidak suka dengan style default pada framework dan ingin mengubah atribut-atribut CSS nya, tentu perlu (harus!) mempunyai pengetahuan CSS yang teramat sangat dalam. hehehe
- Herman T says:
  December 31, 2009 at 9:58 am
  Hmm betul dan justru karena alasan inilah “Karena mereka dapat menggunakan class-class yang sudah ditentukan di dalam framework tanpa perlu mengetahui kegunaan-kegunaan atribut CSS di dalamnya.” maka para expert menyarankan mereka yg masih awam untuk belajar CSS(minimal tahu atributnya) karena CSS Framework bisa memanjakan kita (melihat dari sudut pandang psikologi bukan web developer):D. Gimana menurut anda?
  - Herman T says:
    December 31, 2009 at 10:09 am
    Coba deh liat bagian bawah diskusinya/commentnya di
    http://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/
    Malahan banyak yang mengatakan bahwa jangan belajar CSS Framework tetapi belajar CSS, akan tetapi ada juga yang mendukung (saya mendukung) jika bisa hemat byk waktu .
  - Firewalker says:
    December 31, 2009 at 10:57 am
    Menurut saya, bagi web developer yang sudah “puas” dengan tampilan yang disajikan CSS Framework, ga perlu dipelajari lebih lanjut.
    Tapi kalau ingin mempercantik tampilan, tentunya wajib belajar CSS.
    Sedangkan bagi saya sendiri, hanya beberapa bagian dari CSS Framework saja yang saya butuhkan. Misalnya, CSS Resets. Karena bikin CSS Resets ini makan waktu, analisa, dan pikiran.
    Kalau sudah ada yang bikin dan terbukti tokcer, ga perlu repot2 lagi

kencurdotcom says:

January 1, 2010 at 9:40 pm

masih nubi, nyimak dulu, pelhjari dulu, thx banget ni info eh tutorialnya keren banget

John Keylerg says:

January 16, 2010 at 2:22 pm

very nice info . .
thx for share!

Ipewannasay says:

January 28, 2010 at 7:57 am

translet nya jago gan
css 3 dah keluar uy tapi ane blom paham css 2
nyimak mode on sajalah ane mah

eh itu file css blueprint-nya buat ditaro di hostingan ato cuma panduan buat bikin file css baru ?

Firewalker says:
January 28, 2010 at 1:04 pm
Kalau gw ga pernah make CSS Blueprint ini sepenuhnya. Cuman comot beberapa hal aja, misalnya CSS Reset dan Form. Jadi, dipake buat panduan bikin file CSS baru
CSS 3 gw pelajari nya nanti aja, nunggu IE 6 musnah dari muka bumi ini.

Surya Adi Sapoetra says:

May 12, 2010 at 9:35 am

waw tutorialnya sangat baik,. sekedar saran, kalau bisa buatin tutorial untuk penggunaannya juga mas, buat grid / layout wordpress, yang penting implementasi. terima kasih.

Toekangweb » 10 Artikel / Tutorial CSS Framework dalam Bahasa Indonesia says:

May 16, 2010 at 12:34 pm

[...] Tutorial Menggunakan Blueprint CSS Framework [...]