Foundation 4 Very Basic Tutorial

Taqabbal Allahu minna wa minkum (May Allah accept it from us and you). Happy Eid 1434 H. Mohon maaf lahir batin.

Daripada kebanyakan makan santen dan makanan berminyak lain, mari kita belajar disain web menggunakan framework Foundation 4. Buat yang belum tahu, foundation adalah framework untuk membuat website. Buat yang sudah familier dengan konsep framework, atau pernah menggunakan yang lain seperti Twitter Bootstrap, foundation ini kurang lebih sejenis.

Tentu saja, beda merk beda pula syntax dan metode yang digunakan. Bumbu-bumbu di dalam foundation termasuk di dalamnya adalah CSS yang siap pakai untuk membuat responsive website, pustaka atau library javascript (menggunakan jquery atau zepto) yang siap digunakan seperti slider yang diberi nama orbit atau pustaka form yang memudahkan kita membuat tampilan form yang kompleks. Hingga tutorial ini dibuat, foundation sudah memasuki versi 4.3.1.

Untuk lebih lengkapnya bisa dilihat disini.

Disain yang baik biasanya dimulai dari sketsa. Kali ini saya sudah punya sketsa sebuah website perusahaan fiktif. Umumnya website profil perusahaan atau company profile lebih mudah dibuat karena informasi yang ditampilkan tidak terlalu banyak.

Company Profile Sketch

Company Profile Sketch

Download file foundation disini. Langsung pilih tombol biru Download Foundation CSS. Untuk mendisain tampilan HTML static, kita tidak membutuhkan webserver. Yang kita butuhkan hanyalah sebuah browser dan editor. Browser disarankan menggunakan browser modern masa kini seperti Firefox terbaru, Google Chrome terbaru, Internet Explorer terbaru. Untuk editor favorit saya adalah notepad++, namun jika anda bukan pengguna windows, editor lain juga boleh. Tapi saya tidak menyarankan menggunakan notepad bawaan Windows.

Setelah selesai di download akan keluar folder-folder dan file seperti ini:

Foundation 4 files

Untuk tutorial ini kita hanya fokus di index.html. Untuk melihat tampilan, buka file index.html di browser anda dan untuk melihat kode HTML nya, buka index.html di editor pilihan anda.

Tampilan di browser akan seperti ini:
Foundation 4 Demo Page

Sementara tampilan di kode akan seperti ini:
Foundation 4 Npp
Untuk memulai disain, hapuslah baris 19 yang berisi <div class="row"> hingga baris 97 yang berisi </div>. Kemudian dibawah <script src="js/foundation.min.js"> hapuslah seluruh referensi pustaka javascript dari mulai tanda <!-- hingga -->. Hasil download telah secara default memasukkan seluruh pustaka ke dalam file js/foundation.min.js.

Sehingga keseluruhan kode yang tersisa di file index.html akan menjadi seperti ini:

<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Foundation 4</title>

  
  <link rel="stylesheet" href="css/foundation.css">
  

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>


  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  
  <script src="js/foundation.min.js"></script>
  
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Catatan: Kita akan mulai menulis kode di bawah tag <body>. Jadi semua kode yang akan ditampilkan disini harus diletakkan di bawah tag <body>.

Berdasarkan sketsa diatas kita akan mulai membuat navigasi di atas website (top bar navigation). Foundation mempermudah developer untuk membuat navigasi top bar. Berdasarkan dokumentasi foundation, kode html di situs kita adalah sebagai berikut:

<div class="contain-to-grid">
	<nav class="top-bar">

		<ul class="title-area">
			<li class="name">
				<h1><a href="#">Home</a></h1>
			</li>			
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
		</ul>
		
		<section class="top-bar-section">
		
			<ul class="left">				
				<li><a href="#">News</a></li>
				<li><a href="#">About</a></li>
			</ul>
			
			<ul class="right">
				<li><a href="#">Contact</a></li>
			</ul>			
			
		</section>
		
	</nav>
</div>

Tampilan header navigasi atas akan menjadi seperti ini.
header

Setelah itu kita buat baris Judul Website dan di sebelah kanannya terdapat 3 icon social media dan 1 icon RSS. Letakkan kode berikut ini tepat di bawah kode top-bar navigation setelah </div> terakhir.

<div class="row">
	<div class="large-6 columns">
		<h3>Judul Website</h3>
	</div>
	<div class="large-6 columns text-right">
		<img src="http://placehold.it/50x50" alt=""/>
		<img src="http://placehold.it/50x50" alt=""/>
		<img src="http://placehold.it/50x50" alt=""/>
		<img src="http://placehold.it/50x50" alt=""/>
	</div>
</div>

Kelas .row berarti kita membuat baris baru. Kemudian di dalamnya terdapat dua buah kelas .large-6.columns. Secara default, Foundation memiliki 12 kolom yang bisa dibagi-bagi sesuai kebutuhan. Untuk keperluan tutorial ini, kita membagi 2 dengan porsi sama besar. Sebelah kiri untuk judul dan sebelah kanan untuk icon social media. Kelas .text-right di kolom kanan digunakan untuk merapatkan gambar ke kanan.

Untuk dummy image kita menggunakan layanan dari placehold.it yang relatif mudah digunakan, namun sayangnya harus digunakan secara online.

Refresh browser anda dan lihat hasilnya.

Header dan Judul

Kemudian kita akan membuat slideshow menggunakan javascript library orbit yang sudah disediakan oleh Foundation. Menggunakan orbit sangat mudah. Kita akan meletakkan orbit secara penuh memenuhi semua kolom. Letakkan kode berikut ini tepat di bawah kode Judul Website setelah setelah </div> terakhir.

<div class="row">
	<div class="large-12 columns">
		<ul data-orbit>
			<li>
				<img src="http://placehold.it/980x500&text=1" />
			</li>
			<li class="active">
				<img src="http://placehold.it/980x500&text=2" />
			</li>
			<li>
				<img src="http://placehold.it/980x500&text=3" />
			</li>
		</ul>
	</div>
</div>

Seperti yang bisa dilihat, kita memulai baris baru dengan .row dan menggunakan ke 12 kolom untuk menempatkan slideshow dengan kelas .large-12.columns.

Refresh browser anda dan lihat hasilnya.

With Orbit

Setelah itu kita akan membuat 3 kolom di bawah slideshow besar tadi. Berarti 12 kolom dibagi 3 sama dengan 4. Jadi kita akan menggunakan .large-4.columns sebanyak 3. Letakkan kode berikut ini tepat di bawah kode Slideshow setelah setelah </div> terakhir.

<div class="row">
	<div class="large-4 columns">
		<img src="http://placehold.it/400x200&text=Service A" />
		<h4>Service A</h4>
	</div>
	<div class="large-4 columns">
		<img src="http://placehold.it/400x200&text=Service B" />
		<h4>Service B</h4>
	</div>
	<div class="large-4 columns">
		<img src="http://placehold.it/400x200&text=Service C" />
		<h4>Service C</h4>
	</div>	
</div>

Refresh browser anda dan lihat hasilnya.

Foundation

Sudah mulai terlihat hasil dari sketsa. Kemudian kita akan membuat footer sederhana. Letakkan kode berikut ini tepat di bawah kode services setelah </div> terakhir.

<div class="row">
	<div class="large-6 columns">
	</div>
	<div class="large-6 columns text-right">
		Copyright &copy; 2013 Some Copyright
	</div>
</div>

Refresh browser anda dan lihat hasilnya.

Berikut ini adalah keseluruhan kode:

<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Foundation 4</title>

  
  <link rel="stylesheet" href="css/foundation.css">
  

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>
<div class="contain-to-grid">
	<nav class="top-bar">

		<ul class="title-area">
			<li class="name">
				<h1><a href="#">Home</a></h1>
			</li>			
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
		</ul>
		
		<section class="top-bar-section">
		
			<ul class="left">				
				<li><a href="#">News</a></li>
				<li><a href="#">About</a></li>
			</ul>
			
			<ul class="right">
				<li><a href="#">Contact</a></li>
			</ul>			
			
		</section>
		
	</nav>
</div>

<div class="row">
	<div class="large-6 columns">
		<h3>Judul Website</h3>
	</div>
	<div class="large-6 columns text-right">
		<img src="http://placehold.it/50x50" alt=""/>
		<img src="http://placehold.it/50x50" alt=""/>
		<img src="http://placehold.it/50x50" alt=""/>
		<img src="http://placehold.it/50x50" alt=""/>
	</div>
</div>

<div class="row">
	<div class="large-12 columns">
		<ul data-orbit>
			<li>
				<img src="http://placehold.it/980x500&text=1" />
			</li>
			<li class="active">
				<img src="http://placehold.it/980x500&text=2" />
			</li>
			<li>
				<img src="http://placehold.it/980x500&text=3" />
			</li>
		</ul>
	</div>
</div>

<div class="row">
	<div class="large-4 columns">
		<img src="http://placehold.it/400x200&text=Service A" />
		<h4>Service A</h4>
	</div>
	<div class="large-4 columns">
		<img src="http://placehold.it/400x200&text=Service B" />
		<h4>Service B</h4>
	</div>
	<div class="large-4 columns">
		<img src="http://placehold.it/400x200&text=Service C" />
		<h4>Service C</h4>
	</div>	
</div>

<div class="row">
	<div class="large-6 columns">
	</div>
	<div class="large-6 columns text-right">
		Copyright &copy; 2013 Some Copyright
	</div>
</div>


  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  
  <script src="js/foundation.min.js"></script>
  
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Tampilan sudah hampir sesuai sketsa tangan diatas. Namun masih ada beberapa hal yang bisa ditingkatkan. Insya Allah di tutorial berikutnya, saya akan memberikan trik untuk meng-overwrite style default foundation dan menambah style sesuai keinginan. Tapi ada 1 tips yang tidak kalah pentingnya jika ingin cepat lancar; Kode diatas jangan di kopi paste, tapi diketik sehingga terbiasa dengan tag-tag html.

Jika ada pertanyaan atau ada tambahan, jangan malu-malu komen ya. Mudah-mudahan bermanfaat.

7 thoughts on “Foundation 4 Very Basic Tutorial

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s