--- title: "CSS Frameworkleri Tanıyoruz | 2. Bölüm: Foundation" category: "General" date: "2025-04-27" readTime: "4 min read" author: "Poyraz Avsever" slug: "css-frameworkleri-tan-yoruz-2-b-l-m-foundation" excerpt: "CSS Frameworkleri Tanıyoruz | 2. Bölüm: Foundation Merhaba arkadaşlar, bugün yeni konuğumuz “Foundation”. Gelin hep beraber tanışalım. Foundation Nedir? Foundation, ZURB tarafından …" coverImage: "/blog/images/css-frameworkleri-tan-yoruz-2-b-l-m-foundation-cover.jpg" canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoruz-2-b%C3%B6l%C3%BCm-foundation-68b08997cea3" --- # CSS Frameworkleri Tanıyoruz | 2. Bölüm: Foundation Merhaba arkadaşlar, bugün yeni konuğumuz “Foundation”. Gelin hep beraber tanışalım. ![](/blog/images/css-frameworkleri-tan-yoruz-2-b-l-m-foundation-img-2.jpg) ## Foundation Nedir? **Foundation**, ZURB tarafından geliştirilmiş, responsive web tasarımını ön planda tutan bir CSS framework’üdür. Modern web tasarımları için güçlü bir altyapı sanan ve projenizin hızlıca şekillendirilmesini sağlayan bir framework ‘tür. - **Responsive Design**: Mobil uyumlu, masaüstü uyumlu web siteleri oluşturur. - **Flexbox ve Grid Sistemleri**: Kullanımı kolay grid ve flexbox destekleri sunar. - **Özelleştirilebilir Bileşenler**: Kendi tasarımınızı oluşturabileceğiniz hazır bileşenlerle gelir. ## 1\. Foundation’ın Temel Yapısı Foundation ile bir sayfa tasarlarken, diğer framework’lerde olduğu gibi **grid sistemini** kullanacağız. Ancak Foundation, çok daha esnek yapıları destekleyebiliyor. ### Grid Sistemi Örneğin bir sayfada 2 sütunlu bir düzen oluşturmak için: ```html
Sütun 1
Sütun 2 ``` Burada; - `grid-x`: Grid sistemini x ekseninde başlatır. - `cell`: Her bir hücreyi tanımlar. - `small-12`: Mobilde 12 sütun kullan, tam genişlik ver anlamına geliyor. - `medium-6`: Masaüstünde 6 sütun, yani 2 sütunlu bir yapı anlamına geliyor. Daha detaylı incelemek için [Foundation Framework Doc](https://get.foundation/sites/docs/index.html) sayfasından dökümantasyonu inceleyebilirsin. ## 2\. Foundation Kurulumu ### Hızlı Başlangıç (CDN ile) Eğer hemen başlamak istiyorsan: ```html ``` Ardından HTML dosyanda Foundation class’larını kullanmaya başlayabilirsin. ### Daha Kapsamlı Projeler İçin Kurulum Daha kapsamlı projelerde `npm` ile kurulumunu öneririm: ```bash npm install foundation-sites ``` Sonrasında: ```bash npx foundation new ``` Bu komutla, sana temel bir Foundation projesi kurabilirsin. ## 3\. Foundation İle Mini Bir Proje: Duyuru Kutusu Tasarlayalım Bu kısımda, Foundation’ın sunduğu **callout** bileşenini kullanarak **duyuru kutusu** tasarımı yapacağız. Bu basit proje, Foundation’ın bileşenlerini nasıl kullanabileceğimizi ve responsive (duyarlı) bir tasarım nasıl oluşturulacağını göstermek için bence çok ideal. ### Adım 1: Duyuru Kutusu Bileşenini Oluşturma Foundation’da duyuru, uyarı ya da önemli bilgileri vurgulamak için **callout** bileşeni kullanılabiliriz. **Callout** bileşeni, dikkat çekici bir stil sunarak mesajları öne çıkarır. Hadi hemen bir örnek üzerinden başlayalım: ```html Foundation Duyuru Kutusu
Yeni Özellik Duyurusu! Web sitemizde yeni özellikler eklendi. Hızlıca göz atın ve denemek için tıklayın! Özellikleri Keşfedin