Resep Rahasia CSS Custom Properties

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

16. None
17. None

18. Tidak valid

19. Invalid Invalid

20. Valid

21. None

22. Preprocessor variabel itu statis

23. None

24. Variabel CSS itu dinamis

25. None

26. Global dan Lokal

27. None

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
32. None
33. None

34. Pisahkan antara desain dan logika

35. None
36. None

37. Jangan mengubah tema warna secara langsung

38. None

39. Memperbarui nilai menggunakan JS

40. None
41. None

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