Advanced css and sass flexbox, grid, animations and more!
0 likes99 views
A presentation Based on Udemy's course of Advanced css and sass flexbox, grid, animations and more! Topics: Responsive Design, Float Layout, Flexbox, CSS Grid, Animations
Advanced css and sass flexbox, grid, animations and more!
- 1. Advanced CSS and Sass: Flexbox, Grid, Animations and More! Στούμπος Βασίλης
- 2. CSS, SASS, Tι είναι και πού διαφέρουν Η λέξη CSS προέρχεται από τα αρχικά Cascading Style Sheets. Η CSS μας περιγράφει το τρόπο με τον οποίο τα HTML στοιχεία απεικονίζονται στην οθόνη (π.χ. χρώμα, μέγεθος, γραμματοσειρά κ.α.) Η Sass είναι μία γλώσσα υπολογιστή που πατάει πάνω στην CSS και χρησιμοποιείται με τον ίδιο τρόπο. Έχει καλύτερη δομή και περισσότερη δυναμη από την απλη CSS. Νesting Μεταβλητές Mixins Οι σπουδαιότερες διαφορές τους είναι 3 CSS SASS Διαφορές
- 4. 3 Βασικές Αρχές για σωστή χρήση της HTML & CSS 2) Maintanable Κώδικας 3) Web Performance Να μπορεί κάποιος να κάνει εύκολα αλλαγές στον κώδικα ωστε να συντηρεί το site στο επιθυμητό επίπεδο (πχ γραφοντας SASS λοιπόν καταφέρνουμε, με το Nesting ή με τις μεταβήτές, να μπορεί ο developer να βρει γρηγορότερα τα κομμάτια που θέλει να αλλάξει. Επίσης, αν εγώ αποφασίσω για κάποιο λόγο ότι θέλω να αλλάξω σε όλες τις παραγράφους μου χρώμα, δεν θα χρειαστεί να πάω και να κάνω την αλλαγή σε όλες τις παραγράφους χειροκίνητα παρά μόνο στην μεταβλητή που έχω ορίσει στην αρχή) Το λέει και η λέξη, στο παράδειγμα με τις εικόνες που τοποθετούμε ανάλογα το μέγεθος της οθόνης, θα ήταν λάθος ένας Χρήστης με κινητό να έβλεπε την εικόνα που προορίζεται για τα DESKTOP διότι θα καταναλώσει περισσότερα δεδομένα χωρίς λόγο Μία Ιστοσελίδα να μπορεί να αντοποκρίνεται ανάλογα με την οθόνη του χρήστη (phone - Desktop) 1) Responsive design
- 5. 3 Βασικές Αρχές για Responsive design 2) Flexible/Responsive Images 3) Media Quaries Να μπορεί να διαλέξει την καταληλη εικόνα ανάλογα με την οθόνη (π.χ. σε μεγαλες οθόνες να μπαίνει εικόνα με μεγαλύτρη ανάλυση) Τα παραπάνω λοιπόν επιτυγχάνονται γράφοντας media Quaries Να μπορεί δηλαδή ένα component (π.χ. το Header που είδαμε πριν) Να αλλάζει τις ιδιότητές του, όπως το σχήμα και το μέγεθος, αναλογα με την οθόνη. 1) Fluid Grids & Layouts
- 6. Το Ηeader σε οθόνη με πλάτος μεγαλύτερο των 500px Το ίδιο Ηeader σε οθόνη με πλάτος μικρότερο των 500px
- 7. Οι 3 τύποι Laytous που υπάρχουν
- 8. To Float Layout είναι η παλαιότερη μορφή Layout. Πλέον δεν χρησιμοποιείται τόσο πολύ, παρόλα αυτά, όλα τα παλαιώτερα sites είναι βασισμένα σε αυτό το μοντέλο διάταξης. Κάθε Developer λοιπόν πρέπει να την γνωρίζει για την σωστή συντήρηση αυτών των sites Float Layout
- 9. Το Flexible Box Layout είναι άλλο ένα μοντέλο διάταξης. Η ευέλικτη διάταξη επιτρέπει την αυτόματη τακτοποίηση στοιχείων σε ένα δοχείο ανάλογα με το μέγεθος της οθόνης. FLEXBOX
- 10. Tο πλέγμα CSS (CSS Grid) είναι το τελευταίο και πιο καινούριο μοντέλο διάταξης. Δημιουργεί πολύπλοκες και ευέλικτες διατάξεις σχεδίασης χωρίζοντας το χώρο σε γραμμές και στήλες. CSS Grid (1/2)
- 11. 1fr (fractional unit) 200px Στο προηγούμενο παράδειγμα είδαμετην υλοποίηση του Grid χρησιμοποιώντας το ακριβές μέγεθος κάθε στήλης. Το ίδιο ακριβώς αποτέλεσμα θα μπορούσαμε να το πετύχουμε με αλλους 2 τρόπους, δίνοντας Ονόματα στις στήλες, ή ονόματα στις περιοχές. CSS Grid (2/2) Παράδειγμα με ονόματα στις περιοχές
- 12. Αρχιτεκτονική Ένα ακόμη μικρό αλλά σημαντικό κομμάτι του course, ήταν η σωστή αρχιτεκτονική των φακέλων και των αρχείον SASS. Η παρακάτω αρχιτεκτονική εφαρμόζεται συνήθως σε μεγαλύτερα project, αλλά καλό θα ήταν κάποια βασικά χαρακτηριστικά της να τα ακολουθούμε και σε μικρότερα project abstract pages base variables mixins Components layout animations typography utility classes Cards header main grid footer Home Bio Contact
- 13. Ένα animation μπορεί να αναγκάσει ένα HTML στοιχείο να αλλάξει την μορφή του σταδιακά σε διάστημα προκαθορισμένου χρόνου. 'Ενας Developer μπορεί να αλλάξει όσα CSS properties θέλει, όσες φορές θέλει. Για να χρησιμοποιήσουμε το CSS animation, πρέπει πρώτα να ορίσουμε κάποια keyframes. Τα Keyframes κρατούν τις τιμές που θα έχουν τα CSS properties σε συγκεκριμένες χρονικές στιγμές. Παράδειγμα: Αν θέλουμε ένα animation να διαρκέσει 10s, μπορούμε να ορίσουμε τιμές διαφορετικές για όταν θα είναι στο 0% (αρχή), στο 50% (5s), στο 100% (τέλος) Μπορούμε όμως δημιουργίσουμε και πιο μικρά και εύκολα Animations, χρησιμοποιόντας τις εντολές transform & transition Animations Παράδειγμα
- 14. Τέλος θα ήθελα να επισημάνω το πόσο σημαντική ειναι η εντολή support η οποία μας δίνει την ευκαιρία να διαμορφόσουμε ένα site με περισσότερους τρόπους. Για παράδειγμα, το Flexbox και το Grid δεν υποστηρίζονται από όλους τους browsers, ειδικά τους πιο παλιούς. Με αυτή την εντολή λοιπόν μπορεί ο χρήστης να έχει μια σωστά δομημένη σελίδα με Float Layout που θα έχουμε διαμορφώσει εμείς ωστέ να έχει και αυτός μία όμορφη εμπειρία κατα την επισκεψη του στην Ιστοσελίδα μας. Για να ελέγξουμε τι κάνει υποστηρίζει ο κάθε Browser, επισκεπτόμαστε το: www.CANIUSE.com @supports