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

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 Διαφορές

3. HTML 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