Resep Rahasia CSS Custom Properties

Mengatur strategi dalam menerapkan CSS Variable agar lebih dinamis

Transcript

1. https://app.sli.do/event/46fzj4qa
2. Resep Rahasia CSS Custom Properties Oleh isatrio - CC-by-SA 4.0 license
3. Selamat datang developer LEMAH yang kalau bikin situs web pakai Bootstrap -- Pinjem Coki Anwar
4. CSS itu mudah!
5. Siapa yang bilang?
6. CSS itu “TRICKY”!
7. Saya adalah tim “CSS adalah bahasa pemrograman”
8. 1. CSS enggak punya variabel 2. CSS itu bahasa komputer untuk menginstruksikan komputer untuk merender gaya
9. Saya adalah orang pertama yang skeptis dengan variabel css, karena saya adalah pengguna css-preprocessor
10. Variabel dari CSS Preprocessor
11. Assign variabel
12. https://codepen.io/isatrio/pen/yLeMLPg Hasil kompilasi
13. CSS Custom Properties Variabel
14. Assign variabel Nilai bawaan bila nilai variabel kosong Deklarasi nilai variabel
15. Implementasi Variabel
18. Tidak valid
19. Invalid Invalid
20. Valid
22. Preprocessor variabel itu statis
24. Variabel CSS itu dinamis
26. Global dan Lokal
28. Terkadang variabel lokal juga masih perlu diimplementasikan
29. Mengaduk ramuan variabel statis dengan variabel dinamis
30. Variabel sass statis Variabel css dinamis Implementasi nilai variabel
31. “Jangan lakukan pada saat runtime, lakukanlah pada saat mendesain” -- Bill Sourour
34. Pisahkan antara desain dan logika
37. Jangan mengubah tema warna secara langsung
39. Memperbarui nilai menggunakan JS
42. Komponen VueJS https://codepen.io/isatrio/pen/MWKpjar
43. Referensi 1. Smashing Book 6: New Frontiers In Web Design Bab “A Strategy Guide to CSS Custom Properties” oleh MIKE RIETHMULLER 2. Using CSS custom properties MDN 3. Don’t do it at runtime. Do it at design time oleh Bill Sourour