Pico CSS – Semantik HTML için minimal bir CSS framework'ü

• Pico CSS, HTML etiketlerini doğrudan stillendirerek sınıf kullanımını en aza indirir
• Harici kütüphaneler veya JavaScript olmadan, yalnızca saf CSS ile temiz bir UI deneyimi sunar
• Mobil dahil tüm cihazlarda duyarlı ekranları otomatik olarak destekler
• Açık/koyu modu, kullanıcının ortam ayarlarına göre otomatik olarak uygular
• 130'dan fazla CSS değişkeni ile çeşitli özel temalar ve bileşenler sayesinde serbestçe özelleştirilebilir

---

Giriş

Pico CSS, sadelik ve semantiği en üst düzeye çıkaran minimal bir CSS framework'üdür. HTML'nin semantik öğelerini doğrudan stillendirir ve genel olarak sınıf kullanımını 10'un altına indirerek bakım kolaylığı ve okunabilir kod sunar. Hiç sınıf içermeyen bir sürüm de sunduğu için, saf HTML yaklaşımını benimseyen kullanıcılar için de uygundur.

Başlıca özellikler

Class-light & Semantic

• Stilleri doğrudan HTML etiketlerine uygulayarak gerekli CSS sınıfı sayısını büyük ölçüde azaltır
• Sınıfsız (class-less) sürümü de destekleyerek öğe tabanlı stillendirmenin ötesinde esneklik sağlar

Just CSS, No Dependencies

• Harici kütüphaneler, paket yöneticileri ve JavaScript olmadan çalışır
• Yalnızca HTML işaretlemesiyle kolayca zarif stiller uygulanabilir

Duyarlı tasarım

• Yazı tipi boyutu ve boşlukları, ekran boyutuna göre otomatik ayarlayarak tüm cihazlarda tutarlı ve şık bir UI deneyimi sunar
• Ek sınıf tanımı veya ayar olmadan otomatik olarak uyum sağlar

Açık/koyu mod arasında otomatik geçiş

• Açık tema ve koyu tema varsayılan olarak sunulur
• Tarayıcı veya işletim sistemi ortamındaki prefers-color-scheme ayarına göre renk teması otomatik olarak uygulanır
• JavaScript kullanmadan, tamamen CSS ile gerçekleştirilir

Kolay özelleştirme

• 130'dan fazla CSS değişkeni sayesinde stiller kolayca özelleştirilebilir
• SASS ile daha ileri düzey özelleştirme de desteklenir
• 20 adet elle hazırlanmış renk teması ve 30'dan fazla modüler bileşen sunar; böylece markaya özel UI'lar kolayca genişletilebilir

Optimize edilmiş performans

• HTML hafif ve sade kaldığı için gereksiz kod yükü ve bellek kullanımı azalır
• Aşırı CSS tekrarına veya JS yüklemeye gerek kalmadan hızlı yükleme performansı sunar

Sonuç

Pico CSS, gereksiz bağımlılıklar olmadan semantik, duyarlı ve kolay özelleştirilebilir UI stilleri sunar. Hızlı geliştirme ortamları için idealdir ve IT girişimleri ile geliştiriciler için verimli bir framework seçeneğidir.

[joyfui]

Bunu eskiden görmüştüm, ama o zamandan beri epey değişmiş.

[GN⁺]

Hacker News yorumları

• Bu siteyi önermek istiyorum; class'sız CSS temalarını kolayca değiştirip önizleme yapabileceğiniz cssbed.com

  • Bu kaynağı beğeniyorum ama önemli bir tema eksik: github-markdown-css. Bugünlerde çoğu geliştirici sık sık GitHub Markdown okuduğu için, bir CSS sistemi için iyi bir başlangıç noktası olduğunu düşünüyorum. github-markdown-css
  • Tufte gerçekten çok zarif hissettiriyor
  • Daha fazla tema istiyorsanız dropin-minimal-css'i de önermek isterim. Burada sibling'de bahsedilen github-markdown-css de var

• Pico'yu gerçekten seviyorum. Neredeyse tüm yan projelerde varsayılan başlangıç noktası olarak kullanıyorum. Bazen daha küçük ve hafif olan Neat'i de kullanıyorum(neat.joeldare.com)

  • Vay, o benim projem. Bahsettiğin için teşekkürler. Ben de neredeyse her şeyde kullanıyorum. Şimdi Pico'dan biraz fikir alırken Neat'in boyutunu da çok küçük tutmayı düşünüyorum

• Tailwind CSS'i çoğunlukla büyük projelerde kullanıyorum ama daha küçük ve bağımsız durumlar için Pico CSS mükemmel uyuyor. Pico CSS'in kullanım senaryoları sayfası bunu çok iyi özetliyor. Ben de Pico CSS'i daha geçen hafta keşfettim ve küçük bir Hugo teması için (govanity, Go modülü/paketi vanity URL sağlamak için: hugo-theme-govanity) tam uygun bir seçenekti. Pico'yu bulup belgeleri okuyup entegre etmem iki saat sürdü. Bir de sık sık gözden kaçan bir nokta var: CSS değişkenleri(css-variables) ve renklerin(colors) kullanımı

  • URL'yi güncelledim

• Pico'yu gerçekten ama gerçekten seviyorum. Harika bir başlangıç noktası ve pek çok yönde kolayca özelleştirilebiliyor. Tailwind'in tam tersi gibi hissettiriyor

• Yeni bir projede Pico'yu LLM kod üretimiyle birlikte kullanıyorum. LLM'lerin varsayılan olarak Tailwind ya da karmaşık kurumsal stiller üretmeye meyilli olması nedeniyle, tüm Pico belgelerini bağlama ekleyip belirli istemlerle (CLAUDE.md gibi) sadece Pico kullanmaya yönlendirmek iyi bir ipucu

  • Tüm Pico belgelerini bağlama koyarken özel bir yöntem kullandınız mı merak ediyorum. Resmî belgeler birden fazla sayfaya dağılmış gibi görünüyordu; her sayfayı tek tek kopyalayıp büyük bir istem belgesi mi oluşturdunuz diye merak ettim. Tek sayfalık indirilebilir bir belge var mı diye baktım ama bulamadım

• Kişisel sitemde(g5t.de) picocss kullanıyorum. Yakın zamanda plain html'e geçtim ve çok basit vanilla js ile tüm sayfalarda ortak üstbilgi ve altbilgiyi de hemen oluşturabiliyorum. Nasıl olsa işaretlemeye ihtiyaç var; neden ayrıca başka bir şey yazayım ki, doğrudan html yazıyorum. picocss'in dark mode'u kutudan çıktığı gibi desteklemesi de ayrıca hoşuma gidiyor

• Butonlar ve form giriş alanları, mevcut masaüstü UI öğelerine kıyasla fazla büyük

  • Evet. Tarayıcıda %75'e küçültünce ancak metin az çok doğal görünüyor. Ama bileşenler hâlâ büyük ve garip. Acaba sadece mobil hedeflenerek mi tasarlandı diye düşündürüyor

• CSS aslında böyle yazılmalı. Neden eğitim materyallerinin hepsinde class adlarına öğenin anlamını tekrar tekrar eklemek gerektiğini anlayamıyorum

  • Sanırım bir nesil div öğesi yüzünden yanlış yola girdi. Anlamı zayıf ve fazla yaygın kullanıldığı için, genel olarak semantik yapıya duyulan güven azalmış gibi geliyor

• Kesinlikle katılıyorum! Eksisi, yalnızca piksel kullanması; fiziksel + göreli birimler (pt/mm + em/ex/rem vb.) kullanmaması. Yine de tailwind ya da bootstrap'tan çok daha iyi

• Pico'nun sıkı bir hayranıyım… raku.org için yeni resmî ana sayfayı doğrudan Pico ile açtım

  • raku.org yenilemesi için tebrikler! HTMX/PicoCSS ile Cro kombinasyonu özellikle ilgi çekici