Foundation, Framework CSS untuk Disain Web Dengan Cepat

Karena sekarang musimnya framework untuk rapid development plus banyak klien yang bawel minta cepet dan bagus, kita ikut-ikutan juga deh nulis tentang framework.

Foundation adalah framework untuk membuat disain web responsive dengan cepat. Cepat disini bukan berarti instan kayak popmie. Mengetahui dasar HTML dan CSS akan sangat membantu menggunakan framework ini. But fear not, foundation ini cuma ready made CSS dan javascript untuk membantu para disainer. Yep, thats right, designer, not engineer. Belajar foundation tidak akan memakan waktu lama. Easy as a pie.

Mungkin ada yang sudah tahu responsive web design, tapi mungkin banyak juga yang belum. Responsive website singkatnya adalah sebuah website yang secara responsive mengikuti lebar browser dan/ atau monitor tanpa harus melakukan request tambahan ke server. Atau boleh juga dibilang client side mobile detect. Untuk lebih jelasnya, berikut ini adalah beberapa contoh web responsive yang manis dan sedap dipandang.

Coba buka di browser kesayangan anda (misalnya Google Chrome atau Mozilla Firefox). Kemudian resize jendela browser. Ajaib! websitenya langsung mengikuti lebar jendela (tolong dekatkan kameranya). Manis kan? Kalau anda punya Android/Tab atau iPhone/Pad, atau err… Blackberry, tentunya harus yang paket full (damn, I hate Blackberry and its stupid service), coba browsing disitu. Tampilannya pasti mengikuti lebar screen smartphone anda kan? Coba juga mode landscapenya. Nice kan?

Okay, back to foundation. Nah, foundation ini memungkinkan anda untuk membuat website responsive seperti diatas. Kalau sudah lancar, anda bahkan bisa membuat kerangkanya hanya dalam waktu kurang dari 10 menit. Mudah-mudahan postingan berikutnya saya bikin tutorial quick and easy membuat draft website dari Foundation ini.

Contoh Draft Website dengan Foundation

Contoh Draft Website dengan Foundation

Download foundation di:
http://foundation.zurb.com/

Disitu tersedia dokumentasinya super lengkap. Tapi jangan kuatir nanti saya juga tulis tutorialnya yang super simple.

Iklan

Using definition list to Generate Wordpress Pages

To generate wordpress page, normally we use:

<?php wp_list_pages(); ?>

But that code also automatically generate <li>. What if you want to use definition list to generate wordpress page like this?

<dl class="nice vertical tabs">
  <dd><a href="#">Ekonomi</a></dd>
  <dd><a href="#">Politik</a></dd>
  <dd><a href="#">Korupsi</a></dd>
  <dd><a href="#">Sports</a></dd>
  <dd><a href="#">Nasional</a></dd>
  <dd><a href="#">Hiburan</a></dd>
  <dd><a href="#">Megapolitan</a></dd>
  <dd><a href="#">Internasional</a></dd>
  <dd><a href="#">Teknologi</a></dd>
  <dd><a href="#">Kesehatan</a></dd>
  <dd><a href="#">Wisata</a></dd>
  <dd><a href="#">Syiar</a></dd>
  <dd><a href="#">Renungan</a></dd>
  <dd><a href="#">Kopi Tumpah</a></dd>
  <dd><a href="#">Terbit Foto</a></dd>
</dl>

Easy, use get_pages and loop it. Like this:

<dl>
 <?php 
  $pgs = get_pages();
  foreach ($pgs as $pg) {
     $title = $pg->post_title;
     $link = get_page_link($pg->ID);
  ?>
  <dd><a href="<?php echo $link ?>"><?php echo $title ?></a></dd>
<?php } ?>
</dl>

I recently use foundation framework and the code proved to be quite useful with foundation’s vertical tab.

Further Reading: