Tailwind CSS - Ένας σύγχρονος τρόπος για να (μην) γράφετε CSS - Χρυσόστομος Ζαμπετάκης

Transcript

1. Tailwind CSS Ένας σύγχρονος τρόπος για να (μην) γράφετε CSS Χρυσόστομος Ζαμπετάκης Full stack web developer | www.istogram.com
2. Tailwind CSS Ένας τρόπος για να αγαπήσουν τη CSS οι back-end developers Χρυσόστομος Ζαμπετάκης Full stack web developer | www.istogram.com
3. Ποιος είμαι
4. Ποιος είμαι
5. Ποιος είμαι
6. Ποιος είμαι
7. Τι αφορά η παρουσίαση
8. Τι αφορά η παρουσίαση • Το custom theme development
9. Τι αφορά η παρουσίαση • Το custom theme development • To responsive web design
10. Τι αφορά η παρουσίαση • Το custom theme development • To responsive web design • Τις σύγχρονες πρακτικές CSS
11. Τι αφορά η παρουσίαση • Το custom theme development • To responsive web design • Τις σύγχρονες πρακτικές CSS • To performance optimization
12. Τι είναι το Tailwind CSS
13. Τι είναι το Tailwind CSS • A utility-first CSS framework for rapidly building custom designs (https://tailwindcss.com)
14. Τι είναι το Tailwind CSS • A utility-first CSS framework for rapidly building custom designs (https://tailwindcss.com) • Ένα CSS framework που χρησιμοποιεί βοηθητικές κλάσεις (utility classes) για την ταχύτατη ανάπτυξη προσαρμοσμένων σχεδιασμών
15. Χρειαζόμαστε κι άλλο ένα CSS framework ?
16. Χρειαζόμαστε κι άλλο ένα CSS framework ? • Bootstrap - https://getbootstrap.com/
17. Χρειαζόμαστε κι άλλο ένα CSS framework ? • Foundation - https://get.foundation/
18. Χρειαζόμαστε κι άλλο ένα CSS framework ? • Bulma - https://bulma.io/
19. Χρειαζόμαστε κι άλλο ένα CSS framework ? • UIKit - https://getuikit.com/
20. Χρειαζόμαστε κι άλλο ένα CSS framework ? και η λίστα συνεχίζεται…
21. Τι κοινό έχουν όλα τα παραπάνω CSS frameworks ?
22. Τι κοινό έχουν όλα τα παραπάνω CSS frameworks ? • Όλα κάνουν πολύ περισσότερα απ’ όσα χρειαζόμαστε από ένα CSS Framework
23. Τι κοινό έχουν όλα τα παραπάνω CSS frameworks ? • Όλα κάνουν πολύ περισσότερα απ’ όσα χρειαζόμαστε από ένα CSS Framework • Προσφέρουν δικά τους UI components (buttons, modals, alerts, navigation menus) που απαιτούν προσπάθεια για να αλλάξουν, σύμφωνα με τον επιθυμητό σχεδιασμό
24. Τι κοινό έχουν όλα τα παραπάνω CSS frameworks ? • Όλα κάνουν πολύ περισσότερα απ’ όσα χρειαζόμαστε από ένα CSS Framework • Προσφέρουν δικά τους UI components (buttons, modals, alerts, navigation menus) που απαιτούν προσπάθεια για να αλλάξουν, σύμφωνα με τον επιθυμητό σχεδιασμό • Τα περισσότερα (αν όχι όλα) προσφέρονται με ενσωματωμένο JS κώδικα
25. Τι θα θέλαμε από ένα CSS framework ?
26. Τι θα θέλαμε από ένα CSS framework ? • Να είναι «καθαρό» CSS framework (no JS please!)
27. Τι θα θέλαμε από ένα CSS framework ? • Να είναι «καθαρό» CSS framework (no JS please!) • Να επιτρέπει γρήγορη ανάπτυξη των responsive designs
28. Τι θα θέλαμε από ένα CSS framework ? • Να είναι «καθαρό» CSS framework (no JS please!) • Να επιτρέπει γρήγορη ανάπτυξη των responsive designs • Να προσαρμόζεται πλήρως στις εκάστοτε ανάγκες
29. Τι θα θέλαμε από ένα CSS framework ? • Να είναι «καθαρό» CSS framework (no JS please!) • Να επιτρέπει γρήγορη ανάπτυξη των responsive designs • Να προσαρμόζεται πλήρως στις εκάστοτε ανάγκες • Να είναι - όσο το δυνατόν - μικρότερο σε μέγεθος
30. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε :
31. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox!
32. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox! Συγκεκριμένα π.χ.
33. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox! Συγκεκριμένα π.χ.  Να μπορούμε γρήγορα να κάνουμε «τέλεια κεντρική στοίχιση» (οριζοντίως & καθέτως!)
34. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox! Συγκεκριμένα π.χ.  Να μπορούμε γρήγορα να κάνουμε «τέλεια κεντρική στοίχιση» (οριζοντίως & καθέτως!)  Να μπορούμε εύκολα να αλλάζουμε τον προσανατολισμό του (σε γραμμή ή στήλη), για να επιτευχθεί το ταχύτερο responsive web design
35. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε :
36. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels
37. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels html { font-size: 16px; }
38. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels html { font-size: 16px; } 1rem = 16px 1.5rem = 24px
39. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels
40. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  1 pixel = 1 pixel (στα 96 dpi)
41. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  1 pixel = 1 pixel (στα 96 dpi)  1 pixel = 2 pixels (οθόνες Retina)
42. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Είναι ασφαλές;
43. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Είναι ασφαλές; Ναι! (96% των browsers την υποστηρίζουν)
44. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Σεβασμός στις προτιμήσεις του χρήστη
45. Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Σεβασμός στις προτιμήσεις του χρήστη  Αυτόματη αναπροσαρμογή, αν αλλάξουμε τη βασική μονάδα
46. Ιδανικά, από ένα CSS framework θα θέλαμε ακόμη :
47. Ιδανικά, από ένα CSS framework θα θέλαμε ακόμη : • Η ονομασία των βοηθητικών κλάσεων να είναι διαισθητική
48. Ιδανικά, από ένα CSS framework θα θέλαμε ακόμη : • Η ονομασία των βοηθητικών κλάσεων να είναι διαισθητική, για να τις ανακαλούμε από τη μνήμη μας ταχύτερα!
49. Βασικά στοιχεία του Tailwind CSS
50. Βασικά στοιχεία του Tailwind CSS • Προκαθορισμένη κλίμακα διαστημάτων
51. Βασικά στοιχεία του Tailwind CSS • Προκαθορισμένη κλίμακα διαστημάτων Βασική μονάδα μέτρησης διαστήματος = 0.25 rem ( 4px )
52. Βασικά στοιχεία του Tailwind CSS • Προκαθορισμένη κλίμακα διαστημάτων Βασική μονάδα μέτρησης διαστήματος = 0.25 rem ( 4px ) 1 = 0.25rem 2 = 0.5rem 3 = 0.75rem 4 = 1rem
53. Βασικά στοιχεία του Tailwind CSS • Μεγέθη & διαστήματα (sizing & spacing) Padding : p{t|r|b|l}-{size} / Margin : m{t|r|b|l}-{size}
54. Βασικά στοιχεία του Tailwind CSS • Μεγέθη & διαστήματα (sizing & spacing) Padding : p{t|r|b|l}-{size} / Margin : m{t|r|b|l}-{size} .p-4 padding: 1rem;
55. Βασικά στοιχεία του Tailwind CSS • Μεγέθη & διαστήματα (sizing & spacing) Padding : p{t|r|b|l}-{size} / Margin : m{t|r|b|l}-{size} .p-4 padding: 1rem; .pt-2 padding-top: 0.5rem;
56. Βασικά στοιχεία του Tailwind CSS • Μεγέθη & διαστήματα (sizing & spacing) Padding : p{t|r|b|l}-{size} / Margin : m{t|r|b|l}-{size} .p-4 padding: 1rem; .pt-2 padding-top: 0.5rem; .px-6 padding: 0 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem
57. Βασικά στοιχεία του Tailwind CSS • Μεγέθη & διαστήματα (sizing & spacing) Padding : p{t|r|b|l}-{size} / Margin : m{t|r|b|l}-{size} .p-4 padding: 1rem; .pt-2 padding-top: 0.5rem; .px-6 padding: 0 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem .py-8 padding: 2rem 0; padding-top: 2rem; padding-bottom: 2rem;
58. Βασικά στοιχεία του Tailwind CSS • Η χρωματική παλέτα
59. Βασικά στοιχεία του Tailwind CSS • Η χρωματική παλέτα tailwind.config.js colors = { . . . 'premium-green-light': '#1B827C', . . . }
60. Βασικά στοιχεία του Tailwind CSS • Τα χρώματα γίνονται διαθέσιμα για το κείμενο (text), το φόντο (background) και το σύνορο (border).
61. Βασικά στοιχεία του Tailwind CSS • Τα χρώματα γίνονται διαθέσιμα για το κείμενο (text), το φόντο (background) και το σύνορο (border). .text-premium-green-light .bg-premium-green-light .border-premium-green-light
62. Τι μας προσφέρει το Tailwind CSS
63. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να γράφουμε βοηθητικές κλάσεις, τις οποίες ενσωματώνουμε στον κώδικα HTML
64. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να γράφουμε βοηθητικές κλάσεις, τις οποίες ενσωματώνουμε στον κώδικα HTML <div class="w-64 flex justify-center items-center bg-grey-lighter rounded-xl text-premium-green-light py-4"> <div class="text-2xl pr-4"> <i class="fas fa-map-marked-alt"></i> </div> <div class="font-bold">Δείτε μας στο χάρτη</div> </div>
65. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να γράφουμε βοηθητικές κλάσεις, τις οποίες ενσωματώνουμε στον κώδικα HTML <div class="w-64 flex justify-center items-center bg-grey-lighter rounded-xl text-premium-green-light py-4"> <div class="text-2xl pr-4"> <i class="fas fa-map-marked-alt"></i> </div> <div class="font-bold">Δείτε μας στο χάρτη</div> </div>
66. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να εξάγουμε τις βοηθητικές κλάσεις, για να φτιάξουμε τα δικά μας στοιχεία
67. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να εξάγουμε τις βοηθητικές κλάσεις, για να φτιάξουμε τα δικά μας στοιχεία <div class="btn-map"> <div class="text-2xl pr-4"> <i class="fas fa-map-marked-alt"></i> </div> <div class="font-bold">Δείτε μας στο χάρτη</div> </div> SCSS : .btn-map { @apply w-64 flex justify-center items-center bg-grey-lighter rounded-xl text-premium-green-light py-4; }
68. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να καθορίσουμε, εύκολα, διαφορετικές βοηθητικές κλάσεις για τα διαφορετικά states (π.χ. hover, focus, active)
69. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να καθορίσουμε, εύκολα, διαφορετικές βοηθητικές κλάσεις για τα διαφορετικά states (π.χ. hover, focus, active) <div class=“bg-grey-lighter hover:bg-premium-green-light text-premium-green-light hover:text-white"> . . . </div>
70. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να καθορίσουμε, εύκολα, διαφορετικές βοηθητικές κλάσεις για τα διαφορετικά states (π.χ. hover, focus, active) <div class=“bg-grey-lighter hover:bg-premium-green-light text-premium-green-light hover:text-white"> . . . </div>
71. Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να το προσαρμόσουμε, πλήρως, σύμφωνα με τις δικές μας ανάγκες
72. Τι μας προσφέρει το Tailwind CSS • Π.χ. να ορίσουμε τα δικά μας σημεία αλλαγής του responsive design (breakpoints) screens: { 'xs': ‘340px', // extra breakpoint 'sm': ‘640px', 'md': '768px', 'lg': ‘1024px', 'xl': '1280px', },
73. Τι μας προσφέρει το Tailwind CSS • Π.χ. να ορίσουμε τα δικά μας μεγέθη για την τυπογραφία textSizes: { . . . 'base': '1rem', // 16px 'lg': '1.125rem', // 18px 'xl': '1.25rem', // 20px '1xl': '1.375rem', // 22px },
74. Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design
75. Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design  To Tailwind CSS είναι ένα mobile-first framework
76. Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design  To Tailwind CSS είναι ένα mobile-first framework Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση.
77. Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design  To Tailwind CSS είναι ένα mobile-first framework Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση. Αν θελήσουμε να εφαρμόσουμε διαφορετική κλάση σε μία μεγαλύτερη ανάλυση, προσθέτουμε το αντίστοιχο πρόθεμα.
78. Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design  To Tailwind CSS είναι ένα mobile-first framework Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση. Αν θελήσουμε να εφαρμόσουμε διαφορετική κλάση σε μία μεγαλύτερη ανάλυση, προσθέτουμε το αντίστοιχο πρόθεμα. class=“flex flex-col” => class=“flex flex-col md:flex-row”
79. Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design <section class="w-full flex flex-col md:flex-row mt-8 xl:mt-0"> <div class="md:w-1/2 md:pr-5"> </div> <div class="md:w-1/2 mt-8 md:mt-0 md:pl-5"> </div> </section>
80. Τι μας προσφέρει το Tailwind CSS • Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS
81. Τι μας προσφέρει το Tailwind CSS • Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν χρειάζεστε
82. Τι μας προσφέρει το Tailwind CSS • Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν χρειάζεστε (αξιοποιώντας το εργαλείο purgeCSS)
83. Τι μας προσφέρει το Tailwind CSS • Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν χρειάζεστε (αξιοποιώντας το εργαλείο purgeCSS) Breaking News (30/04/2020) : https://github.com/tailwindcss/tailwindcss/pull/1639
84. Τι μας προσφέρει το Tailwind CSS • Το purgeCSS ενσωματώθηκε ήδη στο Tailwind!
85. Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme
86. Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme • Τι χρειάζεται να εγκαταστήσουμε :
87. Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme • Τι χρειάζεται να εγκαταστήσουμε :  Το node.js και το npm (απαραίτητα)
88. Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme • Τι χρειάζεται να εγκαταστήσουμε :  Το node.js και το npm (απαραίτητα)  To webpack (προαιρετικά, εφόσον θέλουμε να συνδυάσουμε και άλλα εργαλεία π.χ. purgeCSS)
89. Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme • Τι χρειάζεται να εγκαταστήσουμε :  Το node.js και το npm (απαραίτητα)  To webpack (προαιρετικά, εφόσον θέλουμε να συνδυάσουμε και άλλα εργαλεία π.χ. purgeCSS) Ένας εύκολος τρόπος να ενσωματώσουμε το webpack, είναι με χρήση του πακέτου laravel-mix
90. Χρήσιμοι σύνδεσμοι • Official Tailwind CSS website : https://tailwindcss.com • Component library made with Tailwind CSS : https://tailwindui.com/ • A repository for community components using TailwindCSS : https://tailwindcomponents.com/ • Using Laravel Mix for Your WordPress Theme : https://dotdev.co/laravel-mix-wordpress/ • Setting up TailwindCSS in a WordPress theme (Underscores) : https://www.youtube.com/watch?v=TWzp_gDh5EU
91. Σας ευχαριστώ! Χρυσόστομος Ζαμπετάκης Full stack web developer | www.istogram.com