Pine CSS O Yerli Bir CSS Frameworkü

Web konusunda çalışmalar yürüten geliştiricilerin arayüz kodlama kısmında en çok yardımına koşan araçlardır CSS frameworkleri. Framework Türkçe’ye çevrildiğinde çatı olarak anlam kazanmaktadır. Bu yapılar hali hazırda arayüz ekipmanlarını hizmetimize sunmaktadır. Günümüzde bu yapılara örnek verebileceğimiz en önemli araç olarak Bootstrap’ı belirtebiliriz. Konu başlığıyla çelişkili bir giriş yapmış olsam da tamamen konuya bu terimleri tam anlamıyla bilmeyenler için de bir karşılaştırma yapmak için girizgahı böyle tertip ettim.

Gelelim bizim konumuza ; Pine CSS yerli bir CSS kütüphanesi geliştiricisi de camiada iyi kötü adını duymuş olabileceğiniz Savaş Can ALTUN. Geliştirici değilde öncü diyebiliriz. Bunun sebebi kütüphaneyi kendi başına başlatmış olmasına rağmen Github üzerinden de erişime açarak çeşitli düzenleme ve eksiklerde destek sağlayan geliştiricilerin de olması.

Öncelikle şunu belirtmeliyim ki bu kütüphaneyi bir çok projemde kullandım. Ancak biraz daha gelişmesi gerekli. Sakın bu sözüm sizleri yanıltmasın çünkü gerçekten neredeyse aradığımız her araca Pine CSS içerisinde rastlayabiliyoruz.

Pine CSS’i an itibarı ile küçük ve orta ölçekteki projelerinizde performansa olumsuz yönde etki etmeksizin gönül rahatlığı ile kullanabilirsiniz.

Pine CSS İnternet Sitesi : pinecss.com

İnternet sitesinde bulunan indir butonuna tıklayarak indirebilmeniz mümkün. İndirdiğiniz dosyalar içerisinde minimize edilmiş versiyonu da mevcut. Minimize edilmiş css dosyasını kullanmanızı öneririm. Çünkü sıkıştırılmış versiyon performans artışı olarak bize artı sağlamaktadır.

Gelelim Pine CSS’i projemize dahil etmeye. Yapmamız gereken şey çok basit HTML sayfamızı oluşturuyoruz ve CSS dosyamızı projemize dahil ediyoruz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PineCSS</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="./css/pine.min.css"/>
</head>
<body>
    <div class="container">
      <p>Örnek Sayfa</p>
    </div>
  
</body>
</html>

Dikkat etmeniz gereken alan şu arkadaşlar sayfa üstüne mutlaka viewport meta etiketini eklemeliyiz aksi taktirde çeşitli mobil tarayıcılarda uyum sorunu yaşayabiliyoruz.

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

Bunu söylemişken Pine CSS Responsive‘dir. Responsive nedir diye soranlarınız için el cevap ; farklı çözünürlükteki cihazlar için uyumlu kodlama yapısını muhteva etmesidir. Yani bir kez yaz birden fazla cihazda sorunsuz görüntüle.

Kullanımı gayet kolay ve söz dizimi kesinlikle akılda kalıcı ve kafa kurcalamayan tarzdan. Bu da geliştirme süresini daha da kısaltıcı bir etken olarak kesinlikle önemlidir.

Eklemeden geçmeyelim V2 ile yani ikinci sürümü ile JS componentlerde  eklendi. Bu sayede tab, responsive açılır menü, akordion ve alertbox gibi özelliklerde geldi.

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir