CSS Kütüphanesi

Modern ve kullanımı kolay bir CSS kütüphanesi.

Özellikler

• Modern ve responsive tasarım
• SASS/SCSS ile geliştirilmiş
• Özelleştirilebilir bileşenler
• Yardımcı sınıflar
• Kolay entegrasyon
• CDN desteği

Kurulum

CDN ile Kullanım

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/csslib.min.css">

npm ile Kurulum

npm install csslib

Bileşenler

Başlık

<header class="baslik">
  <nav class="baslik__nav">
    <div class="baslik__logo">Logo</div>
    <div class="baslik__menu">
      <a href="#">Ana Sayfa</a>
      <a href="#">Hakkımızda</a>
      <a href="#">İletişim</a>
    </div>
  </nav>
</header>

Yan Menü

<aside class="yan-menu">
  <ul class="yan-menu__liste">
    <li><a href="#">Panel</a></li>
    <li><a href="#">Profil</a></li>
    <li><a href="#">Ayarlar</a></li>
  </ul>
</aside>

Alt Bilgi

<footer class="alt-bilgi">
  <div class="alt-bilgi__icerik">
    <div class="alt-bilgi__bolum">
      <h3>Hakkımızda</h3>
      <ul>
        <li><a href="#">Şirket</a></li>
        <li><a href="#">Kariyer</a></li>
      </ul>
    </div>
    <div class="alt-bilgi__bolum">
      <h3>İletişim</h3>
      <ul>
        <li><a href="#">Bize Ulaşın</a></li>
        <li><a href="#">Destek</a></li>
      </ul>
    </div>
  </div>
</footer>

Arama Kutusu

<div class="arama-kutusu">
  <input type="text" class="arama-kutusu__input" placeholder="Ara...">
  <span class="arama-kutusu__ikon">🔍</span>
</div>

Kaydırıcı

<div class="kaydirici">
  <div class="kaydirici__kapsayici">
    <div class="kaydirici__slayt" style="background-image: url('slayt1.jpg')"></div>
    <div class="kaydirici__slayt" style="background-image: url('slayt2.jpg')"></div>
    <div class="kaydirici__slayt" style="background-image: url('slayt3.jpg')"></div>
  </div>
  <button class="kaydirici__onceki">❮</button>
  <button class="kaydirici__sonraki">❯</button>
  <div class="kaydirici__kontroller">
    <span class="kaydirici__nokta kaydirici__nokta--aktif"></span>
    <span class="kaydirici__nokta"></span>
    <span class="kaydirici__nokta"></span>
  </div>
</div>

Özelleştirme

Renkler

<div class="arkaplan-ana">Ana Renk Arkaplan</div>
<div class="arkaplan-ikincil">İkincil Renk Arkaplan</div>
<div class="yazi-basarili">Başarılı Yazı</div>
<div class="yazi-tehlike">Tehlike Yazı</div>

Boşluklar

<div class="kenar-orta">Orta Kenar Boşluğu</div>
<div class="dolgu-buyuk">Büyük Dolgu Boşluğu</div>
<div class="kenar-ust-kucuk">Küçük Üst Kenar Boşluğu</div>
<div class="dolgu-alt-cok-buyuk">Çok Büyük Alt Dolgu Boşluğu</div>

Boşluk boyutları:

• cok-kucuk: 0.25rem
• kucuk: 0.5rem
• orta: 1rem
• buyuk: 1.5rem
• cok-buyuk: 2rem

Geliştirme

Projeyi geliştirmek için:

1. Repoyu klonlayın
2. Bağımlılıkları yükleyin: npm install
3. Geliştirme modunu başlatın: npm run dev
4. Dağıtım için derleyin: npm run build

Lisans

MIT