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

Slide 1

Slide 1 text

Tailwind CSS Ένας σύγχρονος τρόπος για να (μην) γράφετε CSS Χρυσόστομος Ζαμπετάκης Full stack web developer | www.istogram.com

Slide 2

Slide 2 text

Tailwind CSS Ένας τρόπος για να αγαπήσουν τη CSS οι back-end developers Χρυσόστομος Ζαμπετάκης Full stack web developer | www.istogram.com

Slide 3

Slide 3 text

Ποιος είμαι

Slide 4

Slide 4 text

Ποιος είμαι

Slide 5

Slide 5 text

Ποιος είμαι

Slide 6

Slide 6 text

Ποιος είμαι

Slide 7

Slide 7 text

Τι αφορά η παρουσίαση

Slide 8

Slide 8 text

Τι αφορά η παρουσίαση • Το custom theme development

Slide 9

Slide 9 text

Τι αφορά η παρουσίαση • Το custom theme development • To responsive web design

Slide 10

Slide 10 text

Τι αφορά η παρουσίαση • Το custom theme development • To responsive web design • Τις σύγχρονες πρακτικές CSS

Slide 11

Slide 11 text

Τι αφορά η παρουσίαση • Το custom theme development • To responsive web design • Τις σύγχρονες πρακτικές CSS • To performance optimization

Slide 12

Slide 12 text

Τι είναι το Tailwind CSS

Slide 13

Slide 13 text

Τι είναι το Tailwind CSS • A utility-first CSS framework for rapidly building custom designs (https://tailwindcss.com)

Slide 14

Slide 14 text

Τι είναι το Tailwind CSS • A utility-first CSS framework for rapidly building custom designs (https://tailwindcss.com) • Ένα CSS framework που χρησιμοποιεί βοηθητικές κλάσεις (utility classes) για την ταχύτατη ανάπτυξη προσαρμοσμένων σχεδιασμών

Slide 15

Slide 15 text

Χρειαζόμαστε κι άλλο ένα CSS framework ?

Slide 16

Slide 16 text

Χρειαζόμαστε κι άλλο ένα CSS framework ? • Bootstrap - https://getbootstrap.com/

Slide 17

Slide 17 text

Χρειαζόμαστε κι άλλο ένα CSS framework ? • Foundation - https://get.foundation/

Slide 18

Slide 18 text

Χρειαζόμαστε κι άλλο ένα CSS framework ? • Bulma - https://bulma.io/

Slide 19

Slide 19 text

Χρειαζόμαστε κι άλλο ένα CSS framework ? • UIKit - https://getuikit.com/

Slide 20

Slide 20 text

Χρειαζόμαστε κι άλλο ένα CSS framework ? και η λίστα συνεχίζεται…

Slide 21

Slide 21 text

Τι κοινό έχουν όλα τα παραπάνω CSS frameworks ?

Slide 22

Slide 22 text

Τι κοινό έχουν όλα τα παραπάνω CSS frameworks ? • Όλα κάνουν πολύ περισσότερα απ’ όσα χρειαζόμαστε από ένα CSS Framework

Slide 23

Slide 23 text

Τι κοινό έχουν όλα τα παραπάνω CSS frameworks ? • Όλα κάνουν πολύ περισσότερα απ’ όσα χρειαζόμαστε από ένα CSS Framework • Προσφέρουν δικά τους UI components (buttons, modals, alerts, navigation menus) που απαιτούν προσπάθεια για να αλλάξουν, σύμφωνα με τον επιθυμητό σχεδιασμό

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Τι θα θέλαμε από ένα CSS framework ?

Slide 26

Slide 26 text

Τι θα θέλαμε από ένα CSS framework ? • Να είναι «καθαρό» CSS framework (no JS please!)

Slide 27

Slide 27 text

Τι θα θέλαμε από ένα CSS framework ? • Να είναι «καθαρό» CSS framework (no JS please!) • Να επιτρέπει γρήγορη ανάπτυξη των responsive designs

Slide 28

Slide 28 text

Τι θα θέλαμε από ένα CSS framework ? • Να είναι «καθαρό» CSS framework (no JS please!) • Να επιτρέπει γρήγορη ανάπτυξη των responsive designs • Να προσαρμόζεται πλήρως στις εκάστοτε ανάγκες

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε :

Slide 31

Slide 31 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox!

Slide 32

Slide 32 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox! Συγκεκριμένα π.χ.

Slide 33

Slide 33 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox! Συγκεκριμένα π.χ.  Να μπορούμε γρήγορα να κάνουμε «τέλεια κεντρική στοίχιση» (οριζοντίως & καθέτως!)

Slide 34

Slide 34 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Το flexbox! Συγκεκριμένα π.χ.  Να μπορούμε γρήγορα να κάνουμε «τέλεια κεντρική στοίχιση» (οριζοντίως & καθέτως!)  Να μπορούμε εύκολα να αλλάζουμε τον προσανατολισμό του (σε γραμμή ή στήλη), για να επιτευχθεί το ταχύτερο responsive web design

Slide 35

Slide 35 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε :

Slide 36

Slide 36 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels

Slide 37

Slide 37 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels html { font-size: 16px; }

Slide 38

Slide 38 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels html { font-size: 16px; } 1rem = 16px 1.5rem = 24px

Slide 39

Slide 39 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels

Slide 40

Slide 40 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  1 pixel = 1 pixel (στα 96 dpi)

Slide 41

Slide 41 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  1 pixel = 1 pixel (στα 96 dpi)  1 pixel = 2 pixels (οθόνες Retina)

Slide 42

Slide 42 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Είναι ασφαλές;

Slide 43

Slide 43 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Είναι ασφαλές; Ναι! (96% των browsers την υποστηρίζουν)

Slide 44

Slide 44 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Σεβασμός στις προτιμήσεις του χρήστη

Slide 45

Slide 45 text

Επίσης, θα ήταν ιδανικό να αξιοποιήσουμε : • Τη χρήση των rem units αντί των pixels  Σεβασμός στις προτιμήσεις του χρήστη  Αυτόματη αναπροσαρμογή, αν αλλάξουμε τη βασική μονάδα

Slide 46

Slide 46 text

Ιδανικά, από ένα CSS framework θα θέλαμε ακόμη :

Slide 47

Slide 47 text

Ιδανικά, από ένα CSS framework θα θέλαμε ακόμη : • Η ονομασία των βοηθητικών κλάσεων να είναι διαισθητική

Slide 48

Slide 48 text

Ιδανικά, από ένα CSS framework θα θέλαμε ακόμη : • Η ονομασία των βοηθητικών κλάσεων να είναι διαισθητική, για να τις ανακαλούμε από τη μνήμη μας ταχύτερα!

Slide 49

Slide 49 text

Βασικά στοιχεία του Tailwind CSS

Slide 50

Slide 50 text

Βασικά στοιχεία του Tailwind CSS • Προκαθορισμένη κλίμακα διαστημάτων

Slide 51

Slide 51 text

Βασικά στοιχεία του Tailwind CSS • Προκαθορισμένη κλίμακα διαστημάτων Βασική μονάδα μέτρησης διαστήματος = 0.25 rem ( 4px )

Slide 52

Slide 52 text

Βασικά στοιχεία του Tailwind CSS • Προκαθορισμένη κλίμακα διαστημάτων Βασική μονάδα μέτρησης διαστήματος = 0.25 rem ( 4px ) 1 = 0.25rem 2 = 0.5rem 3 = 0.75rem 4 = 1rem

Slide 53

Slide 53 text

Βασικά στοιχεία του Tailwind CSS • Μεγέθη & διαστήματα (sizing & spacing) Padding : p{t|r|b|l}-{size} / Margin : m{t|r|b|l}-{size}

Slide 54

Slide 54 text

Βασικά στοιχεία του Tailwind CSS • Μεγέθη & διαστήματα (sizing & spacing) Padding : p{t|r|b|l}-{size} / Margin : m{t|r|b|l}-{size} .p-4 padding: 1rem;

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Βασικά στοιχεία του 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

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Βασικά στοιχεία του Tailwind CSS • Η χρωματική παλέτα

Slide 59

Slide 59 text

Βασικά στοιχεία του Tailwind CSS • Η χρωματική παλέτα tailwind.config.js colors = { . . . 'premium-green-light': '#1B827C', . . . }

Slide 60

Slide 60 text

Βασικά στοιχεία του Tailwind CSS • Τα χρώματα γίνονται διαθέσιμα για το κείμενο (text), το φόντο (background) και το σύνορο (border).

Slide 61

Slide 61 text

Βασικά στοιχεία του Tailwind CSS • Τα χρώματα γίνονται διαθέσιμα για το κείμενο (text), το φόντο (background) και το σύνορο (border). .text-premium-green-light .bg-premium-green-light .border-premium-green-light

Slide 62

Slide 62 text

Τι μας προσφέρει το Tailwind CSS

Slide 63

Slide 63 text

Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να γράφουμε βοηθητικές κλάσεις, τις οποίες ενσωματώνουμε στον κώδικα HTML

Slide 64

Slide 64 text

Δείτε μας στο χάρτη

Slide 65

Slide 65 text

Δείτε μας στο χάρτη

Slide 66

Slide 66 text

Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να εξάγουμε τις βοηθητικές κλάσεις, για να φτιάξουμε τα δικά μας στοιχεία

Slide 67

Slide 67 text

Δείτε μας στο χάρτη

SCSS : .btn-map { @apply w-64 flex justify-center items-center bg-grey-lighter rounded-xl text-premium-green-light py-4; }

Slide 68

Slide 68 text

Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να καθορίσουμε, εύκολα, διαφορετικές βοηθητικές κλάσεις για τα διαφορετικά states (π.χ. hover, focus, active)

Slide 69

Slide 69 text

. . .

Slide 70

Slide 70 text

. . .

Slide 71

Slide 71 text

Τι μας προσφέρει το Tailwind CSS • Τη δυνατότητα να το προσαρμόσουμε, πλήρως, σύμφωνα με τις δικές μας ανάγκες

Slide 72

Slide 72 text

Τι μας προσφέρει το Tailwind CSS • Π.χ. να ορίσουμε τα δικά μας σημεία αλλαγής του responsive design (breakpoints) screens: { 'xs': ‘340px', // extra breakpoint 'sm': ‘640px', 'md': '768px', 'lg': ‘1024px', 'xl': '1280px', },

Slide 73

Slide 73 text

Τι μας προσφέρει το Tailwind CSS • Π.χ. να ορίσουμε τα δικά μας μεγέθη για την τυπογραφία textSizes: { . . . 'base': '1rem', // 16px 'lg': '1.125rem', // 18px 'xl': '1.25rem', // 20px '1xl': '1.375rem', // 22px },

Slide 74

Slide 74 text

Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design

Slide 75

Slide 75 text

Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design  To Tailwind CSS είναι ένα mobile-first framework

Slide 76

Slide 76 text

Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design  To Tailwind CSS είναι ένα mobile-first framework Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση.

Slide 77

Slide 77 text

Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design  To Tailwind CSS είναι ένα mobile-first framework Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση. Αν θελήσουμε να εφαρμόσουμε διαφορετική κλάση σε μία μεγαλύτερη ανάλυση, προσθέτουμε το αντίστοιχο πρόθεμα.

Slide 78

Slide 78 text

Slide 79

Slide 79 text

Τι μας προσφέρει το Tailwind CSS • Ταχύτατο responsive design

Slide 80

Slide 80 text

Τι μας προσφέρει το Tailwind CSS • Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS

Slide 81

Slide 81 text

Τι μας προσφέρει το Tailwind CSS • Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν χρειάζεστε

Slide 82

Slide 82 text

Τι μας προσφέρει το Tailwind CSS • Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν χρειάζεστε (αξιοποιώντας το εργαλείο purgeCSS)

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Τι μας προσφέρει το Tailwind CSS • Το purgeCSS ενσωματώθηκε ήδη στο Tailwind!

Slide 85

Slide 85 text

Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme

Slide 86

Slide 86 text

Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme • Τι χρειάζεται να εγκαταστήσουμε :

Slide 87

Slide 87 text

Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme • Τι χρειάζεται να εγκαταστήσουμε :  Το node.js και το npm (απαραίτητα)

Slide 88

Slide 88 text

Πως ενσωματώνουμε το Tailwind CSS σε ένα WordPress theme • Τι χρειάζεται να εγκαταστήσουμε :  Το node.js και το npm (απαραίτητα)  To webpack (προαιρετικά, εφόσον θέλουμε να συνδυάσουμε και άλλα εργαλεία π.χ. purgeCSS)

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Χρήσιμοι σύνδεσμοι • 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

Slide 91

Slide 91 text

Σας ευχαριστώ! Χρυσόστομος Ζαμπετάκης Full stack web developer | www.istogram.com