Menyesuaikan gaya

Pengantar

Slidde.co menawarkan pendekatan unik untuk desain web dengan memungkinkan Anda menyesuaikan gaya menggunakan CSS langsung di dalam setiap komponen. Berbeda dengan pembuat situs web tradisional seperti Webflow, Slidde.co menonjol dengan:

• Penggunaan CSS Standar:
  • Mencapai gaya situs web apa pun.
  • Mengekspor gaya ke pembuat situs web mana pun, membuatnya dapat digunakan kembali jika Anda beralih ke pengembangan berbasis kode.
• Nilai Preset:
  • Terinspirasi oleh perpustakaan seperti Tailwind, Slidde.co menyediakan nilai preset untuk gaya, memungkinkan Anda memilih opsi dengan klik mouse daripada mengetik.
• Struktur Jelas:
  • Bahkan untuk gaya yang kompleks, pengaturan tetap jelas dan tidak akan mengganggu struktur DOM.

Komponen Contoh: Bilah Navigasi Horizontal

Mari kita ambil komponen yang kompleks, bilah navigasi horizontal, dan jelajahi lima area kustomisasi:

1. Gaya Kustom: CSS untuk seluruh bilah navigasi.
2. Gaya Kustom Kontainer: Gaya untuk kontainer kiri, biasanya menampung logo atau judul.
3. Gaya Kustom Tombol: Gaya untuk tombol desktop.
4. Gaya Aktif Tombol: Gaya untuk tombol desktop yang aktif.
5. Gaya Kustom Tombol Toggle: Gaya untuk tombol menu hamburger seluler.

Anda dapat melihat contoh lengkap bilah navigasi di sini template.

Sintaks CSS Lanjutan

Slidde.co mendukung sintaks CSS lanjutan untuk penataan yang lebih tepat:

• Pemisah Titik: Gunakan . untuk memisahkan properti dari modifier.
• CamelCase: Gunakan camelCase untuk nama properti CSS.

Contoh:

• &:hover.color: Warna font saat hover.
• &:hover.borderColor: Warna border saat hover.
• padding: Padding untuk semua ukuran layar.
• md.padding: Padding untuk layar yang lebih besar dari medium (desktop).

Untuk mengatur padding yang berbeda untuk seluler dan desktop: padding: .5rem & md.padding:2rem

Selektor CSS Standar:

• & > img.height: Tinggi elemen img tingkat pertama di dalam elemen saat ini.
• &:first-child.color: Pseudo-class ::first-child untuk elemen anak pertama.
• &::after.content: Pseudo-class ::after untuk menambahkan elemen tambahan.

Dengan mengikuti panduan ini, Anda dapat menggunakan Slidde.co secara efektif untuk merancang dan menyesuaikan komponen web Anda dengan presisi dan kemudahan.