Matcha.css – pustaka styling semantik drop-in yang dibuat dengan CSS murni

 (matcha.mizu.sh)
4 poin oleh GN⁺ 2024-05-25 | 1 komentar | Bagikan ke WhatsApp
  • matcha.css adalah pustaka yang langsung mempercantik elemen HTML seperti stylesheet browser bawaan, sehingga mengurangi pekerjaan CSS manual untuk prototipe cepat, HTML statis, dan dokumen hasil generator Markdown
  • Dapat diterapkan hanya dengan satu baris link tanpa tahap build, dependensi, JavaScript, atau konfigurasi, dengan ukuran gzip bawaan sekitar 8.81kB
  • Dengan memanfaatkan struktur dokumen dan elemen semantik, hal seperti submenu menu, penanda input wajib *, dan warna border berdasarkan status validasi input dapat ditangani hanya dengan CSS
  • Menyediakan preset Default, Lite, Utility classes, Istanbul coverage, serta custom builder, dan direktori style yang lebih rinci juga bisa diimpor langsung
  • Ini adalah open source berlisensi MIT, dan meski utility class serta fitur layout-nya praktis, keduanya menambahkan class ke dokumen sehingga agak menjauh dari penggunaan yang benar-benar berbasis semantik

CSS drop-in yang langsung mempercantik dokumen HTML

  • matcha.css adalah pustaka drop-in yang menata elemen HTML dengan CSS murni
  • Fokusnya adalah membuat elemen HTML terlihat rapi seperti stylesheet browser bawaan, tanpa mengharuskan pengguna menambal dokumen secara manual
  • Cocok untuk prototipe cepat, halaman HTML statis, dokumen yang dihasilkan dari Markdown, dan pengembang yang ingin memanfaatkan cakupan penuh elemen HTML tanpa terlalu dalam mengurus detail CSS
  • Halaman ini sendiri juga ditata dengan matcha.css

Bisa dipasang dalam satu baris dan mudah dibatalkan

  • Dapat digunakan tanpa tahap build, dependensi, JavaScript, konfigurasi, atau refaktorisasi dokumen
  • Ukuran build bawaan dalam gzip adalah ~8.81kB
  • Cukup tambahkan satu baris berikut ke `` dokumen
  • Saat ingin menghapusnya, cukup hilangkan `` tersebut, dan pustaka ini dirancang agar tidak memerlukan refaktorisasi atau pembersihan dokumen
  • Aset di-host di Vercel, dan juga bisa digunakan melalui JSdelivr, layanan CDN yang mendistribusikan paket npm
  • Semua versi publik tersedia di direktori /v/, dan secara default branch main yang disajikan

Styling yang memanfaatkan struktur semantik

  • matcha.css menyesuaikan style berdasarkan struktur dokumen dan hierarki elemen

  • Contoh perilaku otomatis

    • Dengan menumpuk elemen `` akan terbentuk submenu implisit
    • Jika digunakan bersama, penanda field wajib * akan ditambahkan otomatis
    • [data-color-scheme="light"] memaksa mode terang, dan [data-color-scheme="dark"] memaksa mode gelap
    • [data-color-scheme] dapat diterapkan ke elemen tertentu untuk memaksa skema warna secara selektif
    • :root menetapkan variabel CSS, dan @media (prefers-color-scheme) menetapkan mode sesuai preferensi pengguna
    • Karena tidak memakai aturan !important, style mudah dioverride saat diperlukan

Opsi build dan distribusi

  • Selain build bawaan, tersedia preset build untuk tujuan berbeda
    • Default ~8.81kB: semua styling semantik dan fitur tambahan kecuali @istanbul-coverage
    • Lite ~5.59kB: semua styling semantik, @break-words, @discrete-scrollbars
    • Utility classes ~3.43kB: @root, @utilities
    • Istanbul coverage ~1.94kB: @root, @syntax-highlighting, @istanbul-coverage
  • Jika ingin memilih hanya fitur yang dibutuhkan, bisa memakai custom builder
  • Untuk kustomisasi yang lebih kompleks, bisa juga melakukan fork lalu menambalnya sendiri
  • Setiap subdirektori di github.com/lowlighter/matcha/styles disajikan langsung melalui situs web
    • Misalnya, jika hanya ingin memakai @syntax-highlighting, Anda bisa langsung menyertakan mod.css terkait
    • Jika tidak menyediakan variabel CSS sendiri, kemungkinan besar paket @root akan dibutuhkan
    • Semua file mod.css juga tersedia melalui alias direktori induk demi kemudahan

Cakupan elemen HTML yang ditata

  • Struktur dokumen

    • Menata section, article, header, footer, aside, nav, menu, hgroup, elemen judul, dan lainnya
    • `` dirancang agar terintegrasi alami ketika kontainer induknya memakai display: flex
    • di dalam ditampilkan seperti breadcrumb, dan `` ditampilkan seperti daftar navigasi

  • Teks dan elemen inline

    • Menyediakan style untuk , , , , , , , , , , , , , , , , , , `` dan lainnya
    • Karena tooltip bawaan browser tidak bisa ditata, tooltip CSS dianjurkan memakai atribut [data-title] alih-alih [title]

  • Elemen form

    • Menata , , , , , , , , ``
    • Elemen input tidak melakukan validasi tambahan di luar validasi yang dijalankan browser
    • :user-valid menerapkan border --success, dan :user-invalid menerapkan border --danger
    • Dengan pola status required dapat dideteksi otomatis, tetapi hal ini tidak memungkinkan pada pola

  • Tabel dan media

    • `` menerapkan border collapse, dan jika elemen induk memiliki lebar maka overflow digunakan otomatis
    • Bisa juga dibungkus dengan kontainer .table-responsive
    • , , `` diberi style sudut membulat

  • dan

    • dan juga termasuk target styling bawaan
    • ::backdrop pada `` akan tampil saat memakai dialog.showModal()
    • Disarankan menggunakan `` agar browser bisa menutup dialog saat submit tanpa JavaScript

Kenyamanan dan biaya fitur layout

  • matcha.css juga menyediakan opsi layout dokumen
  • Menambahkan class .layout-simple ke elemen akan mengaktifkan layout sederhana
  • Struktur yang dibutuhkan mencakup .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type, dan lainnya
  • Struktur berubah sesuai kondisi media
    • Pada layar dasar, susunannya berpusat pada header dan main
    • Pada min-width: 960px, digunakan susunan aside dan main
    • Pada min-width: 1280px, digunakan susunan dua aside dan main
  • Pada layar kecil, aside:nth-of-type(1) disembunyikan, dan bisa ditampilkan kembali dengan data-expand atau dibuat bisa diciutkan dengan data-expandable
  • Penggunaan layout bisa memerlukan refaktorisasi dokumen, dan saat berhenti memakai matcha.css nanti mungkin perlu refaktorisasi lagi

Utility class lebih dekat ke fitur tambahan

  • matcha.css juga menyediakan beberapa utility class demi kemudahan
  • Class terkait warna meliputi
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* mengubah warna border, bg-* mengubah warna latar, dan fg-* mengubah style foreground
  • .flash membuat blok yang menarik perhatian, dan bisa digabungkan dengan class warna
  • Tersedia utility untuk teks, ukuran, posisi, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow, serta SVG fill/stroke
  • Margin dan padding memakai class bernomor berdasarkan nilai 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4
  • Karena utility class mengharuskan penambahan class ke dokumen, hal ini bisa membuat migrasi keluar dari matcha.css menjadi lebih sulit
  • Jika utility yang tersedia kurang atau terlalu terbatas, penggunaan atau migrasi ke framework CSS utility-first patut dipertimbangkan
  • matcha.css tidak bertujuan menjadi framework CSS yang lengkap

Tampilan kode, gaya editor, dan Shadow DOM

  • matcha.css menyediakan class syntax highlighting yang mengikuti @media (prefers-color-scheme)
  • Juga mencakup class untuk membuat tampilan editor kode
    • Struktur yang dibutuhkan adalah .editor, > textarea, > div.highlight
    • Style tambahan ini tidak melakukan syntax highlighting yang sebenarnya, hanya menata tampilannya seperti editor kode
    • Untuk highlighting yang nyata tetap dibutuhkan pustaka syntax highlighting seperti highlight.js
  • matcha.css juga mendefinisikan variabel CSS dengan pseudo-class :host, sehingga kompatibel dengan Shadow DOM
  • Di dalam Shadow DOM, matcha.css bisa di-import ulang dan diberi custom styles terpisah agar tetap terisolasi tanpa bentrok dengan bagian dokumen lain

Dukungan browser dan lisensi

  • matcha.css menyatakan dibuat agar kompatibel dengan semua browser modern
  • Tabel dukungan mencakup Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96%, dan lainnya
  • Proyek ini dirilis sebagai open source dan menggunakan MIT License
  • Repositorinya ada di github.com/lowlighter/matcha

Bacaan terkait

1 komentar

 
GN⁺ 2024-05-25
Opini Hacker News

  • Saya suka konsep menghidupkan kembali HTML sebagai satu-satunya sumber kebenaran untuk tata letak dokumen, dan ini tampak bisa produktif untuk dokumen yang tidak memerlukan desain rumit
    Meski begitu, pilihan desain default-nya, terutama warna dan finishing, terasa kurang memuaskan. Saya bukan desainer profesional, tetapi saya cukup sering menerima keluhan pengguna atas perangkat lunak yang saya buat sendiri, jadi saya masih bisa merasakan ada sesuatu yang terasa janggal dibanding karya desainer bagus yang punya latar belakang teori warna, kepadatan informasi, gradien, dan semacamnya
    Jika pembuatnya membaca ini, saya penasaran apakah pernah mempertimbangkan memanfaatkan estetika dari proyek FOSS lain seperti Bulma atau Tailwind, atau bekerja sama dengan desainer profesional. Setahu saya jgthms juga kadang ada di situs ini

    • Terima kasih untuk masukan yang konstruktif, dan sejujurnya saya agak panik karena ini sudah naik ke HN sebelum saya sempat mem-posting Show HN sendiri
      Saya bukan pengembang frontend maupun desainer, jadi kurangnya pengetahuan saya soal teori warna, aksesibilitas, dan elemen-elemen yang mungkin terlihat jelas bagi orang lain bisa saja tampak jelas. Mungkin itu juga yang membuatnya terasa agak buatan tangan
      Hal-hal yang Anda sebutkan akan saya pelajari lebih lanjut ke depan. Saya terbuka untuk menerima saran dari desainer profesional, tetapi karena ini proyek sampingan saya tidak berencana mempekerjakan orang secara khusus. Untuk saat ini, target utamanya juga bukan profesional, melainkan lebih ke pengguna hobi
    • Saya juga merasa ada sesuatu yang janggal, tetapi saya pernah merasakan hal yang sama pada karya buatan desainer. Tetap saja ini terlihat cukup bagus, jadi rasanya seperti dibuat oleh seseorang yang punya selera desain atau desainer junior
      Semakin lama dilihat, keseluruhannya justru tampak makin bagus, tetapi pada saat yang sama rasa sedikit janggal itu juga makin kuat, dan itu cukup menarik
      Edit: mungkin warna cangkir tehnya yang terasa agak janggal. Saya suka keseluruhan logonya, tetapi mungkin warna cangkirnya bisa dibuat lebih mendekati warna latar bagian atas
    • Setuju. Contoh yang terasa janggal adalah gaya hover pada tombol
      Teks hitam di atas latar gelap tidak cocok, baik secara estetika maupun dari sisi aksesibilitas. Kalau setelan default-nya lebih dipoles lagi, hasilnya akan jauh lebih baik
    • Ada bagian di situsnya untuk membuat custom build sendiri, jadi pilihan gaya default itu bisa dikendalikan sampai batas tertentu
      Namun jika Anda desainer yang ingin menyesuaikannya dengan tampilan desain perusahaan, Anda mungkin rela menghabiskan berjam-jam hanya untuk hal seperti spasi, dan alat ini tampaknya bukan ditujukan untuk orang seperti itu

  • Saya suka pustaka kecil seperti ini. Saat ini saya memakai pico.css dan akan mencoba yang ini juga. Menurut saya, elemen DOM standar browser memang seharusnya terlihat seperti ini
    Tapi kenyataannya tidak begitu, maka pustaka seperti ini pun ada. Setelah membaca komentar pengguna lain, saya mencari tahu apa maksud “classless” di pustaka ini dan menemukan daftar pustaka serupa
    https://github.com/dbohdan/classless-css

    • Saya setuju dengan “elemen DOM standar browser seharusnya terlihat seperti ini”, tetapi bagi orang yang ingin membuat gaya sendiri ini bisa menjadi mimpi buruk. Gaya default yang ada sekarang pun dalam hal ini sudah agak merepotkan
      Sudah lama saya merasa akan bagus kalau ada cara untuk beralih antara gaya chrome dan gaya konten. Bilah navigasi atau visualisasi/interaksi tertanam bisa dibiarkan dalam mode chrome yang hanya menerima gaya default minimal, sementara isi artikel mendapat gaya sesuai preferensi pengguna
    • Ada juga situs untuk langsung menguji hal-hal seperti ini. Yang saya tahu adalah https://www.cssbed.com/
    • Saya sangat suka pico.css. Ini titik kompromi yang cepat dan mudah dipelajari, tetapi tetap cukup lengkap fiturnya
      Kombinasi Flask + HTMX + AlpineJS + PicoCSS saat ini adalah “All Python and HTML SPA” saya

  • Terlihat menarik, tetapi menghapus garis bawah tautan dan sebelum hover hanya mengandalkan warna adalah hal yang sangat buruk dari sisi aksesibilitas

    • Orang dengan gangguan persepsi warna bisa menambahkan ekstensi CSS yang memberi garis bawah atau penekanan pada tautan
      Orang dengan gangguan penglihatan memakai pembaca layar atau display braille, jadi mereka tidak memerlukan garis bawah. Lalu siapa lagi yang membutuhkan garis bawah?

  • Terlihat menjanjikan. Saya sudah memakai Simple.css: https://simplecss.org/
    Sekilas matcha.css tampak sedikit lebih maju, jadi saya ingin mencobanya

  • Mungkin kita butuh alat untuk menghasilkan framework CSS tanpa kelas seperti ini. Dengan begitu, masing-masing orang bisa menyetel palet warna, padding, ukuran font, dan sebagainya dengan lebih rinci

  • Selama 30 tahun kita memakai scrollbar proporsional sebagai kontrol standar. Kita bisa tahu seberapa besar bagian dokumen yang sedang ditampilkan jendela saat ini, dan bisa mengklik scrollbar untuk berpindah dengan mudah ke posisi yang proporsional dengan ukuran dokumen
    Tombol panah di atas dan bawah scrollbar juga bisa dipakai, dan kita bisa memfokuskannya dengan tab lalu mengoperasikannya lewat keyboard. Jika ada keterbatasan visual atau motorik, kita bisa menaikkan kontras atau memperbesarnya lewat pengaturan sistem operasi
    Namun di web tahun 2024, orang-orang rutin merusak scrollbar dan mengubahnya menjadi mimpi buruk pengalaman pengguna. Sungguh memalukan bahwa UI/UX browser jadi merosot karena CSS memungkinkan kontrol standar bawaan sistem operasi yang tadinya bekerja baik menjadi rusak total
    Tolong jangan gunakan ini

    • Saya sangat tidak setuju
      Kontrol standar bawaan sistem operasi juga memburuk seiring waktu. Contohnya scrollbar Apple yang menghilang dan checkbox membulat
      Itu tidak mudah diubah, tetapi dengan CSS kita setidaknya bisa memperbaiki kontrol standar seperti itu

  • Saya suka adanya fitur pratinjau untuk melihat bagaimana tampilannya di situs web lain. Sangat intuitif dan cocok untuk halaman CSS

  • Repositori Spark Joy dari Swyx juga wajib disebut:
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • Kenapa masih terus muncul framework CSS baru? Kenapa ini belum menjadi masalah yang sudah selesai?

    • Ini bukan framework CSS, melainkan stylesheet yang bisa langsung dipakai saat Anda tidak ingin memikirkan CSS atau styling tetapi tetap ingin membuat situs yang terlihat layak
    • Banyak bagian CSS berkaitan dengan seni dan estetika. Pekerjaan CSS tidak akan pernah benar-benar “selesai”
      Selama para seniman ingin mengekspresikan diri mereka melalui medium web, stylesheet dan “framework” baru akan terus muncul