🏗️

Foundation

Herhangi bir cihazda çalışan erişilebilir web siteleri, uygulamalar ve e-postalar oluşturmak için en gelişmiş duyarlı ön yüz çerçevesi.

📅 2011
👤 ZURB
📦 6.8
📄 MIT
Resmi Site → GitHub

Özellikler

XY Grid

Gelişmiş ve son derece esnek bir grid sistemi olan XY Grid, hem yatay hem de dikey hizalamayı kolaylaştırır.

Erişilebilirlik Odaklı

ARIA etiketleri ve klavye gezinme desteği ile başından beri engelsiz web uygulamaları oluşturmaya olanak tanır.

E-posta Şablonları

Foundation for Emails ile her e-posta istemcisinde sorunsuz çalışan duyarlı bültenler tasarlayın.

Sass Mixin'leri

Güçlü bir Sass mimarisine sahip olan Foundation, projeyi kolayca özelleştirmenize yardımcı olur.

Motion UI

Sass destekli bir animasyon kütüphanesi olan Motion UI ile etkileşimlere yumuşak geçişler ekleyin.

Mobil Öncelikli

Responsive Everything felsefesiyle mobil öncelikli bir yaklaşım benimseyerek her ekranda kusursuz görünüm sağlar.

Avantajlar & Dezavantajlar

Avantajlar

  • Profesyonel kalite ve kurumsal projeler için uygun yapı
  • Varsayılan olarak erişilebilirlik (A11Y) standartlarını destekler
  • Gelişmiş ve esnek XY Grid sistemi
  • E-posta geliştirme için özel bir versiyona sahip olması
  • Modüler ve güçlü Sass mimarisi
  • Enterprise seviyesinde geliştirime hazır

Dezavantajlar

  • Bootstrap'e göre daha dik bir öğrenme eğrisi
  • Topluluk desteği ve popülerliğinin görece daha düşük olması
  • Daha az sayıda üçüncü parti tema ve şablon seçeneği
  • Gelişmiş özellikleri nedeniyle karmaşık yapılandırma gerektirebilmesi

Canlı Demolar

XY Grid Sistemi

Foundation'ın güçlü XY Grid sistemi ile esnek mizanpajlar.

S-12 M-6 L-4
S-12 M-6 L-4
S-12 M-12 L-4
Auto (Eşit Dağılım)
Auto (Eşit Dağılım)
<div class="grid-x grid-margin-x">
  <div class="cell small-12 medium-6 large-4">...</div>
  <div class="cell small-12 medium-6 large-4">...</div>
  <div class="cell small-12 medium-12 large-4">...</div>
</div>

<div class="grid-x grid-margin-x">
  <div class="cell auto">Auto</div>
  <div class="cell auto">Auto</div>
</div>

Off-Canvas & Reveal Modal

Gizli yan menü ve açılır pencere (modal) bileşenleri.

Harika Bir Modal!

Bunu tetiklemek çok kolay.

Foundation'ın Reveal bileşeni sayesinde şık pencereler oluşturabilirsiniz.

<!-- Off-Canvas Tetikleyici -->
<button type="button" class="button" data-toggle="offCanvas">Menüyü Aç</button>

<!-- Off-Canvas Menü -->
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <!-- İçerik -->
</div>

<!-- Modal Tetikleyici -->
<button class="button success" data-open="exampleModal1">Modal Aç</button>

<!-- Modal -->
<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Modal Başlığı</h1>
  <button class="close-button" data-close type="button">×</button>
</div>

Orbit Slider & Tabs

Görsel kaydırıcı ve sekmeli içerik gezinimi.

Birinci sekme içeriği. Tab bileşeni ile kolayca sekmeli menüler yapabilirsiniz.

İkinci sekme içeriği.

  • Space
    İlk Slayt Başlığı
  • Space
    İkinci Slayt Başlığı
<!-- Sekmeler -->
<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1">Sekme 1</a></li>
  <li class="tabs-title"><a href="#panel2">Sekme 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">...</div>
  <div class="tabs-panel" id="panel2">...</div>
</div>

<!-- Orbit Slider -->
<div class="orbit" data-orbit>
  <ul class="orbit-container">
    <li class="is-active orbit-slide">...</li>
    <li class="orbit-slide">...</li>
  </ul>
</div>

Callout, İlerleme Çubuğu & İpuçları (Tooltip)

Bilgilendirme kutuları ve diğer kullanıcı arayüzü elemanları.

Birincil Bildirim

Bu bir bilgilendirme kutusudur (callout).

Uyarı Bildirimi

Dikkat etmeniz gereken bir mesaj. Kapatabilirsiniz.

50%

Daha fazla bilgi almak için buraya gelin.

<!-- Callout -->
<div class="callout warning" data-closable>
  <h5>Uyarı</h5>
  <p>Mesaj...</p>
  <button class="close-button" data-close>×</button>
</div>

<!-- İlerleme Çubuğu -->
<div class="progress" role="progressbar" aria-valuenow="50">
  <span class="progress-meter" style="width: 50%">
    <p class="progress-meter-text">50%</p>
  </span>
</div>

<!-- Tooltip -->
<span data-tooltip title="Tooltip İçeriği" class="has-tip">Üzerime Gel</span>

Kullanım Senaryoları

Kurumsal Web Siteleri

Büyük ölçekli, kurumsal yapılar ve yoğun trafik alan profesyonel projelerde sağlam altyapısı sayesinde sıkça tercih edilir.

Erişilebilir Web Uygulamaları

Kamu kurumları ve erişilebilirlik standartlarına uyması gereken projeler için Foundation en güvenli limanlardan biridir.

E-posta Şablonları

Foundation for Emails, parçalanmadan ve her cihazda çalışan karmaşık HTML e-postalar hazırlamak için ideal bir araç setidir.

Karmaşık Responsive Düzenler

Gelişmiş XY Grid yapısı, standart grid sistemleriyle çözülmesi zor olan özel ve karmaşık mizanpajları kolayca inşa etmeyi sağlar.

Devlet ve Kurum Siteleri

A11y uyumluluğu yüksek olduğu için devlet ve eğitim kurumlarının sitelerinde kullanıma çok uygundur.