Projects

prince.gr, version 8.0

Μπήκε η Άνοιξη, ευκαιρία για ανανέωση, ώρα για ένα νέο theme! Οπτικά, δεν διαφέρει πολύ από το προηγούμενο αλλά είναι φτιαγμένο από το μηδέν και δεν βασίζεται σε κάποιο framework. Είναι responsive -όπως επιτάσσει η μόδα- και δεν το έχω χτίσει για συγκεκριμένες αναλύσεις αλλά προσθέτοντας ένα breakpoint όποτε το περιεχόμενο φαινόταν «λάθος»…

Το design κατά βάση είναι δίστηλο, όσο το πλάτος του browser είναι μικρότερο από 80em και μεγαλύτερο από 40em. Αν υπάρχει αρκετός χώρος, εμφανίζω μία ακόμα πλαϊνή στήλη με widgets στα δεξιά. Προτίμησα να σχεδιάσω desktop first, αντίθετα με το mobile first που είναι (επίσης) της μόδας ώστε να φαίνεται καλά και σε Internet Explorer 8. Εκτός από αυτό το breakpoint (80em), έχω επιλέξει άλλα 4: (το default) 57.5em, 40em, 30em και 20em. Αν σε ενδιαφέρει να μετατρέψεις σε pixels, υπολόγισε 1em = 16px, μια συνηθισμένη, αυθαίρετη, industry standard παραδοχή αλλά, τα νούμερα δεν έχουν σημασία. Εκείνο που έχει σημασία είναι το design να προσαρμόζεται στον διαθέσιμο χώρο με τον καλύτερο δυνατό τρόπο και αυτό δεν σημαίνει απλώς να κρύβονται τα sidebars!

Οι κολώνες γενικώς αλλάζουν μέγεθος. Η αριστερή sidebar… παύει να είναι sidebar σε στενή οθόνη. Τα margins μειώνονται, το ίδιο και τα paddings. Το λογότυπο μικραίνει και μετακινείται, το βασικό μενού αλλάζει θέση, ο τίτλος του άρθρου μικραίνει, η φωτογραφία αλλάζει διαστάσεις και θέση. Είναι responsive και είναι 50-60ΚΒ ελαφρύτερο από το Bootstrap, κάτι απόλυτα λογικό αν σκεφτείς πως ένα οποιοδήποτε framework έχει πολύ περισσότερα CSS (ή και Javascript) από αυτά που χρειάζεται το site σου!

Τα βασικά CSS είναι ήδη έτοιμα όπως μπορείς να δεις, και μένει να ελέγξω τα παλαιότερα άρθρα μου, διορθώνοντας ενδεχομένως τον κώδικα· μετά θα το τρέξω σε mobile emulators, έτσι για να μην έχω απορία. Θεωρώ πως θα είναι μια χαρά είτε υποστηρίζονται media queries είτε όχι αλλά, μέχρι στιγμής, δεν έχω αφήσει τίποτα στην τύχη. Ευτυχώς έχω χρησιμοποιήσει ελάχιστα γραφικά και είναι τετράγωνο (κι άλλη μόδα) οπότε, όλα θα πάνε καλά!

Σχολιάστε

Η ηλ. διεύθυνσή σας δεν κοινοποιείται. Τα υποχρεωτικά πεδία σημειώνονται με *