CSS Framework dengan 960 Grid System

22 May, 2009 | Written by maolana | under Art & Design, Programming, Web Stuff

Tiga bulan belakangan ini saya mulai serius menekuni bidang Web Development. Salah satu tempat belajar favorit saya yaitu di NetTuts. Saya menyarankan Anda mengunjungi site ini, karena banyak sekali ilmu yang Anda kan dapatkan, mulai dari HTML, jQuery, PHP dan lain-lain tentang Web Development.

Dalam mempelajari sesuatu saya memang lebih suka menggunakan media audio visual ketimbang membaca karena dengan audio visual (menurut saya) lebih mudah dan cepat memahami pelajaran. Buku tentu saja penting sebagai referensi, namun perlu banyak waktu untuk mempelajarinya lewat textbook. Kalo saya lebih suka menyimpannya secara digital. Nah, di NetTuts Anda dapat belajar visual dengan pakarnya, dan Anda juga bisa langsung berinteraksi melalui blognya.

OK, Salah satu pelajaran yang sedang saya pelajari yaitu CSS Framework menggunakan 960 Grid System.

Apa itu 960 Grid System?

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Read more.
– http://sonspring.com/journal/960-grid-system

Jadi secara garis besarnya 960 Grid System ini adalah suatu cara membangun web dengan cepat menggunakan kolom-kolom yang dirancang sedemikan rupa menggunakan CSS. Dimensi yang digunakan yaitu 12 dan 16 kolom. Sebagai contoh visual Anda dapat lihat di http://960.gs/demo.html

Ok, bagi Anda yang “ngebet” ingin melihat bagaimana cara kerja sistem ini, Anda bisa lihat tutorialnya yang dipresentasikan oleh Jeffrey Way di bawah ini.

Setelah mempelajari Video diatas sangat jelas Framework ini dapat meng-cut waktu Anda membangun sebuah website menggunakan CSS. Yang menjadi tantangan selanjutnya adalah bagaimana memadukan desain yang Anda buat menggunakan Adob Phostohop/Illustrator menggunakan sistem ini. Saya akan lanjutkan di tulisan berikutnya mengenai ini.

Selamat belajar dan mencoba. Everyone is Designer!

Resourcses:

http://nettuts.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

http://960.gs/

http://blog.themeforest.net/resources/html-css-php-and-jquery-killer-tutorials/

One Response so far | Have Your Say!

pakpenyo | September 17th, 2009 at 4:36 am #

Setuju! dengan 960Grid kita bisa bikin layout dengan banyak kolom dan tentu saja sangat fleksibel….. Btw, banyak kok tutorial tentang 960grid ini. Lihat aja di A List A Part, atau WPRecipe atau PSDVibe dll…..