अब जब हमने फ़ोटोशोप कर लिया है तो हम खोज क्षेत्र के साथ जो हासिल करने की उम्मीद करते हैं, हम उसे HTML और CSS के साथ बनाने के बारे में निर्धारित करते हैं। हमारे पास पहले से ही हमारा आइकन फ़ॉन्ट लोड है, इसलिए हम उसे पृष्ठ पर रखते हैं। फ़ॉन्ट एक्सप्लोरर एक्स हमें आवर्धक कांच के लिए उपयोग करने के लिए उचित HTML चरित्र दिखाने में मदद करता है।
हम अपने हेडर में मार्कअप को फाइल में शामिल करते हैं और इस नए क्षेत्र के लिए CSS लिखने के लिए एक बिलकुल नई Sass फाइल (_search.scss) शुरू करते हैं। हमें यकीन है कि CodeKit इस नई फ़ाइल के बारे में जानता है। दुर्भाग्य से इन शुरुआती स्क्रैंचोडों में कोडकिट को कभी-कभी ताज़ा करने में थोड़ा समय लगता है, जो मुझे बाद में पता चलता है, क्योंकि मेरे पास एक विशेष परियोजना है, जिस तरह से इसमें बहुत सारी फाइलें हैं। आप उस निर्देशिका को ठीक कर सकते हैं, जिसमें आपके पास CodeKit घड़ी है।
हम हेडर के भीतर खोज क्षेत्र को पूरी तरह से स्थिति देते हैं ताकि यह मुख्य सामग्री क्षेत्र के दाईं और शीर्ष पर रखा जाए। हम विशेष रूप से आइकन को लक्षित करके आवर्धक कांच के आकार और प्लेसमेंट को समायोजित करते हैं। हम चीजों को प्रतिशत के साथ रखते हैं ताकि यह हमारे उत्तरदायी डिजाइन के साथ अच्छी तरह फिट हो। हम जोड़ते हैं :hoverऔर :focusकहते हैं कि यह स्पष्ट है कि आप इस पर क्लिक कर सकते हैं।
हम कुछ जावास्क्रिप्ट लिखते हैं जो खोज क्षेत्र को खोलेंगे और बंद करेंगे। जावास्क्रिप्ट में हमारे पास एनिमेशन सही हो सकते थे (क्योंकि हम jQuery का उपयोग कर रहे हैं), लेकिन इसके बजाय हम सभी सीएसएस पर वर्ग नाम बदल रहे हैं। यह वही है जो मुझे "राज्य आधारित सीएसएस" के रूप में लगता है, जहां जावास्क्रिप्ट केवल उन क्लास नामों को नियंत्रित करता है जो यह घोषित करते हैं कि पृष्ठ किस राज्य (या क्षेत्र) में है, और सीएसएस नियंत्रित करता है कि पृष्ठ उस स्थिति में कैसा दिखता है (और यह वहां कैसे मिलता है) ) का है। इसका मतलब है कि हम CSS में बदलावों की तरह काम कर रहे हैं, जो मेरी राय में हैं, जहां वे संबंधित हैं और बेहतर दीर्घकालिक होंगे (यानी सीएसएस बदलाव हार्डवेयर त्वरित हैं जबकि जावास्क्रिप्ट संक्रमण नहीं हैं, वे इनलाइन शैलियों के तेजी से पुनरावृत्तियों हैं)।