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

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

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

April 30, 2020
Tweet

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