Foundation Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar. Bir önceki yazımda sizlere bootstrap’ten bahsetmiştim. Şimdi ise bir diğer ön-uç arayüz çatısı olan Foundation’dan bahsedeceğim.

Foundation Nedir?

Ücretsiz olarak kullanabileceğiniz , web gelitiricilerinin işini hızlandıran ve kolaylaştıran bir çatıdır.
HTML ve CSS tasarım şablonları, formlar, butonlar, tablolar, navigasyon barları(menüler) gibi bir çok isteğe bağlı Javascript eklentilerini içerir.
Mobil öncelikli responsive(hassas) siteleri oluşturmanızda kolaylık sağlar.
Hem profesyonel tasarımcılar hem de tasarıma yeni başlayanlar kullanabilir.
Ayrıca facebook , ebay, samsung, amazon, disney gibi devler tarafından da kullanılmıştır.

Nereden bulabilirim?

İndirip kullanmaya başlayabileceğiniz 2 yol mevcut;

oundation.zurb.com adresinden kütüphane indirmek,
CDN ( içerik dağıtım ağı) üzerinden içeri aktarmak.

İndirme;

Eğer kendi sunucunuz’da kullanmak istiyorsanız foundation.zurb.com adresine gidip kurulum yönergelerini uygulayabilirsiniz.

CDN üzerinden ;

Eğer serverınızda bulunmasını istemiyorsanız, CDN(İçeri dağıtım ağı) üzerinden indirebilirsiniz.

Cloudflare Foundation için CSS ve Javascript desteği sağlamakta. ( Bileşenlerin fonksiyonelliği için jQuery’i içeri aktarmayı unutmayın.)

CDN üzerinden kullanmak, ziyaretçilerin sitenizi ziyaret ettiklerinde daha hızlı sayfa yüklemesi olacaktır. Çünkü Cloudflare sunucuları sizin sitenizin bulunduğu sunucuların genelinden çok daha hızlıdır. Cloudflare’dan dosya isteği yapıldığında cevap süresi sizin kullandığınız sunucudan çok daha kısa olacaktır.

Foundation kurulu sayfa oluşturmak.
1-HTML5 Kodlarını Sayfamıza eklemek.

HTML5 döküman tipini gerektiren, HTML elementleri ve CSS özelliklerini kullanır.

Her zaman için HTML5 döküman tipini sayfanızın başında dil niteliği ve doğru karakter seti ile birlikte kullanın.

Örnek:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

2-Mobil önceliklidir.

Mobil cihazlara duyarlı sayfalar için tasarlanmıştır. Mobil öncelikli stiller çekirdek çatı’nın parçalarıdır.

Mobil cihazda dokunma ve yakınlaştırma işini sağlama almak için aşağıdaki meta kodlarını sayfanızın <head>..</head> bölümüne ekleyin.

<meta name="viewport" content="width=device-width, initial-scale=1">

3-Bileşenlerin başlatılması

Kütüphanedeki bazı bileşenler çalışmak için jQUERY gerektirir. Bu bileşenler için(açılır menüler ve modüller) aşağıdaki script kodlarını sayfanıza ekleyin.

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Temel bir Foundation Sayfası:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
</head>
<body>

<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <h1>Page</h1>
      <p>Resize this responsive page to see the effect!</p>
      <button type="button" class="button small">I Like It!</button>
    </div>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <h3>Column 1</h3>
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 2</h3>
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 3</h3>
    <p>Lorem ipsum..</p>
  </div>
</div>

</body>
</html>

Kaynaklar

Foundation