Show HN: Büyücüler için minimalist CSS, 'magick.css'

 (css.winterveil.net)
7 puan yazan GN⁺ 2024-03-24 | 1 yorum | WhatsApp'ta paylaş

MAGICK.CSS Temelleri

  • magick.css, kullanımı ve anlaşılması kolay, minimalist, (çoğunlukla) sınıfsız bir CSS framework'üdür.
  • Tek bir dosyadan oluşur ve tüm seçenekler yorum satırlarıyla açıklanmıştır.
  • Amaç, zarif ve sihirli biçimde oyuncu bir görünüm elde ederken okunabilirliği ve bilgi aktarımını en üst düzeye çıkarmaktır.

MAGICK.CSS Nasıl Kullanılır

  • magick.css'in normalize.css ile birlikte kullanılması önerilir.
  • CDN üzerinden HTML <head> içine iki satır ekleyerek projeye uygulanabilir.
  • Alternatif olarak magick.css dosyası indirilip HTML <head> içine dahil edilebilir.
  • JS projelerinde npm install ile kurulup kod içinde import edilerek kullanılabilir.
  • HTML5 belgeleriyle birlikte kullanıldığında vakaların %99'unda sınıfa ihtiyaç duyulmaz ve bazı hoş özelliklerden yararlanılabilir.

Yerleşim

  • Sayfayı duyarlı ve okunması kolay sütunlar halinde yapılandırmak için tüm içerik <main> etiketiyle sarılabilir ve uzun içerikler <section> etiketleriyle bölümlere ayrılabilir.
  • <aside> etiketi kullanılarak ek bilgiler eklenebilir; yan notlar aracılığıyla noktalar genişletilebilir veya ek bağlam sağlanabilir.

Tipografi

  • magick.css'in sunduğu tipografinin örnekleri gösterilir.
  • <h4> ve altındaki başlıklar stillendirilmez; gerekirse kullanıcı bunlara doğrudan stil uygulayabilir.

Yapılandırılmış içerik

  • Listeler ve tablolar, içerikten dikkati dağıtmayacak şekilde sade tutulur.

Formlar ve girdiler

  • Etkileşimli öğeler tek başına ya da bir formun parçası olarak kullanılabilir.
  • Butonlar, metin girdileri, onay kutuları, radyo düğmeleri, fieldset'ler vb. örnek olarak sunulur.

Medya ve figürler

  • Görsel ve video gibi medya öğeleri tek başına kullanılabilir ya da figür olarak sunularak içeriğe yapı ve zarafet katılabilir; altyazılarla ek bağlam sağlanabilir.

Kod, alıntılar ve önceden biçimlendirilmiş içerik

  • Kod, satır içinde veya ayrı bloklar halinde gösterilebilir; alıntılar ise <blockquote> etiketi kullanılarak eklenir.

Ek özellikler

  • Yan notlar ve otomatik numaralandırma gibi ek özellikler kullanılabilir; ancak bu özellikler özel sınıflar gerektirdiği için magick.css'in ana işlevleri arasında yer almaz.

GN⁺ Görüşü

  • magick.css, kullanıcılara CSS'nin karmaşıklığını azaltma ve web sayfası tasarımını sadeleştirme yöntemi sunar.
  • Bu framework özellikle doküman veya blog gibi metin odaklı web siteleri için uygun olabilir ve kullanıcıların içeriğe odaklanmasına yardımcı olabilir.
  • Ancak karmaşık etkileşimli özellikler veya dinamik web uygulamaları oluşturmak isteyen geliştiriciler için sınırlı kalabilir.
  • Benzer işlevler sunan diğer CSS framework'leri arasında Bootstrap, Foundation ve Bulma bulunur; her biri belirli kullanım senaryoları ve tercihlere göre seçilebilir.
  • magick.css'i benimserken projenin tasarım gereksinimleri ile framework'ün kısıtları dikkate alınmalı ve sadelik ile kullanım kolaylığı arasındaki denge iyi kurulmalıdır.

İlgili okumalar

1 yorum

 
GN⁺ 2024-03-24
Hacker News görüşleri

  • Yazı tipinin stille çok iyi uyum sağladığı, hatta bu kadar iyi uyduğu için fark edilmediği yönünde bir görüş.

    "Yazı tipinin stili tamamladığı harika bir örnek; o kadar iyi uyuyor ki neredeyse fark edilmiyor."

  • Tasarım sisteminin ve onun sunuluş biçiminin güzel olduğu, satır yüksekliği ve ağırlık gibi ayrıntılara gösterilen özenin de beğenildiği söyleniyor. Kodla ilgilenenler için bir bağlantı da paylaşılıyor. Özel checkbox ve radio button'ların olmamasının sürükleyiciliği bozduğu yönünde bir hayal kırıklığı ifade edilirken, bunun bir blog yapma ilhamı verdiği de belirtiliyor.

    "Güzel tasarım sistemi ve ayrıntılara gösterilen özenle öne çıkan sunuma övgü. Özel checkbox ve radio button'ların eksikliği üzücü. Blog oluşturmak için ilham verdi."

  • Basit örnekte küçük bir yazım hatasına dikkat çekilerek, header yerine main etiketinin kapatılması gerektiği söyleniyor.

    "Örnek kodda header yerine main etiketinin kapatılması gerektiğine dair yazım hatası uyarısı."

  • LaTeX belgelerini andıran kişisel site havasının çekiciliğinden söz ediliyor ve eski üniversite hocalarının aşırı minimalist web sitesi tarzı havalı bulunuyor. Kişisel blogların daha popüler olması yönünde bir temenni de dile getiriliyor.

    "LaTeX belge tarzı ve aşırı minimalist web sitelerinin çekiciliğine değiniliyor. Kişisel blogların daha popüler olması isteniyor."

  • Tufte CSS'i sevebileceğine dair bir öneriyle birlikte ilgili bağlantı paylaşılıyor.

    "Tufte CSS önerisi ve ilgili bağlantı."

  • Büyük harfli script fontların okunabilirlik açısından çok kötü olduğu, vurgu için büyük harflerden kaçınılıp boyut, ağırlık ve italik kullanımının tercih edilmesi gerektiği söyleniyor.

    "Büyük harfli script fontların okunabilirlik sorunu yarattığı belirtiliyor. Vurgu için alternatif olarak boyut, ağırlık ve italik kullanımı öneriliyor."

  • Yazı tipinin çok kolay okunabildiği, sevimli olduğu ama abartılı olmadığı yönünde olumlu geri bildirim var.

    "Yazı tipinin okunabilirliği ve çekiciliği hakkında olumlu değerlendirme."

  • Uzak yazı tipleri engellendiğinde metnin Comic Sans ile render edilmesinin kötü bir izlenim verdiği söyleniyor.

    "Uzak yazı tipleri engellendiğinde Comic Sans ile render edilmesine yönelik olumsuz görüş."

  • Daha fazla minimalist CSS framework'ü görmek istendiği, özellikle karakter sahibi stilleri bulmanın zor olduğu ifade ediliyor.

    "Karakter sahibi minimalist CSS framework'lerine yönelik talep dile getiriliyor."

  • Tasarımın beğenildiği, Çince çeviri görüldükten sonra Çince okuyabilen birinin görüşünün merak edildiği söyleniyor. İngilizceye kıyasla yazı tipi seçeneklerinin sınırlı olduğu belirtilirken, fotoğrafların da farklı kullanıldığına dikkat çekiliyor.

    "Tasarıma duyulan beğeni ve Çince çevirinin okunabilirliğine dair merak ifade ediliyor. Yazı tipi seçeneklerinin sınırlı olması ve farklı fotoğraf kullanımı da belirtiliyor."