Membangun Komponen Pengaturan

Ini adalah tutorial berfokus CSS yang luar biasa dari Adam Argyle. Saya sangat suka konsep "hanya untuk celah" di sini. Grid sangat kuat , tetapi Anda tidak harus menggunakan semua kemampuannya setiap kali Anda meraihnya. Di sini, Adam meraihnya untuk alasan yang sangat ringan seperti menggunakannya sebagai alternatif di antara border serta spasi yang lebih umum. Saya kira dia menempatkan uang di tempat yang mulutnya berada dalam hal gap menggantikan margin !

Saya juga sangat suka menyebut nama luar biasa Una Kravet untuk grid fleksibel : RAM . Mungkin Anda pernah melihat trik jumlah kolom fleksibel dengan kisi CSS? Trik bonus di sini (yang pertama saya lihat dari Evan Minto) adalah menggunakan min() . Dengan begitu, tidak hanya tata letak besar yang tercakup, tetapi bahkan tata letak yang paling kecil pun tidak memiliki kode minimum (seperti jika 100% lebih kecil dari 10ch sini):

 .el { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch)); }

Ada banyak tipuan lagi di posting blog. "Warna muncul" dengan :focus-within itu menyenangkan dan cerdas. Begitu banyak CSS praktis dalam membangun sesuatu yang begitu praktis! 🧡 lebih banyak posting blog seperti ini. Untungnya, kami tidak perlu menunggu, karena Adam memiliki postingan lain yang berfokus pada komponen seperti ini di Tab dan yang ini di Sidenav .

Tautan Langsung ke ArtikelTautan permanen


Posting Membangun Komponen Pengaturan muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 15, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *