Τώρα που έχουμε Photoshop τι ελπίζουμε να επιτύχουμε με την περιοχή αναζήτησης, ξεκινήσαμε να το δημιουργούμε με HTML και CSS. Έχουμε ήδη φορτώσει τη γραμματοσειρά εικονιδίων μας, γι 'αυτό το τοποθετούμε στη σελίδα. Το Font Explorer X μάς βοηθάει να δείξουμε τον κατάλληλο χαρακτήρα HTML για χρήση στον μεγεθυντικό φακό.
Προσθέτουμε τη σήμανση στο αρχείο include header και ξεκινάμε ένα ολοκαίνουργιο αρχείο Sass (_search.scss) για να γράψουμε το CSS για αυτήν τη νέα περιοχή. Βεβαιωθούμε ότι το CodeKit γνωρίζει αυτό το νέο αρχείο. Δυστυχώς σε αυτές τις πρώτες εκθέσεις, το CodeKit παίρνει μερικές φορές λίγο χρόνο για να ανανεωθεί, κάτι που αργότερα ανακαλύπτω είναι επειδή έχω ένα συγκεκριμένο έργο εκεί μέσα με πάρα πολλά αρχεία σε αυτό. Μπορείτε να το διορθώσετε περιορίζοντας τον κατάλογο στον οποίο έχετε ρολόι CodeKit.
Τοποθετούμε απολύτως την περιοχή αναζήτησης εντός της κεφαλίδας έτσι ώστε να τοποθετείται στα δεξιά και πάνω από την κύρια περιοχή περιεχομένου. Προσαρμόζουμε το μέγεθος και την τοποθέτηση του μεγεθυντικού φακού στοχεύοντας συγκεκριμένα το εικονίδιο. Τοποθετούμε τα πράγματα με ποσοστά έτσι ώστε να ταιριάζει απόλυτα με τον ανταποκρινόμενο σχεδιασμό μας. Προσθέτουμε :hoverκαι :focusδηλώνει επίσης, έτσι είναι προφανές ότι μπορείτε να κάνετε κλικ σε αυτό.
Τελειώνουμε γράφοντας κάποια JavaScript που θα ανοίξει και θα κλείσει την περιοχή αναζήτησης. Θα μπορούσαμε να είχαμε τα κινούμενα σχέδια απευθείας στο JavaScript (αφού χρησιμοποιούμε το jQuery), αλλά το μόνο που κάνουμε είναι να αλλάξουμε τα ονόματα τάξεων στο CSS. Αυτό θέλω να σκεφτώ ως "CSS βάσει πολιτείας" όπου το JavaScript ελέγχει απλώς ονόματα τάξεων που δηλώνουν σε ποια κατάσταση βρίσκεται η σελίδα (ή περιοχή) και το CSS ελέγχει την εμφάνιση της σελίδας σε αυτήν την κατάσταση (και πώς φτάνει εκεί ). Αυτό σημαίνει ότι κάνουμε πράγματα όπως μεταβάσεις σε CSS, κάτι που κατά τη γνώμη μου ανήκουν και θα είναι πολύ καλύτερα μακροπρόθεσμα (π.χ. οι μεταβάσεις CSS είναι επιταχυνόμενες με υλικό ενώ οι μεταβάσεις JavaScript δεν είναι, είναι απλώς γρήγορες επαναλήψεις των ενσωματωμένων στυλ)