Bây giờ chúng tôi đã Photoshopped những gì chúng tôi hy vọng sẽ đạt được với khu vực tìm kiếm, chúng tôi bắt đầu xây dựng nó bằng HTML và CSS. Chúng tôi đã tải xong phông chữ biểu tượng của mình, vì vậy chúng tôi đặt nó trên trang. Font Explorer X giúp chúng tôi hiển thị ký tự HTML thích hợp để sử dụng cho kính lúp.
Chúng tôi thêm đánh dấu vào tệp bao gồm tiêu đề của mình và bắt đầu tệp Sass hoàn toàn mới (_search.scss) để viết CSS cho khu vực mới này. Chúng tôi đảm bảo CodeKit biết về tệp mới này. Thật không may trong những video phát màn hình ban đầu này, đôi khi CodeKit phải mất một lúc để làm mới, điều mà sau này tôi phát hiện ra chỉ là do tôi có một dự án cụ thể trong đó với quá nhiều tệp trong đó. Bạn có thể khắc phục điều đó bằng cách thu hẹp thư mục mà bạn có đồng hồ CodeKit.
Chúng tôi hoàn toàn định vị vùng tìm kiếm trong tiêu đề để nó được đặt ở bên phải và trên cùng của vùng nội dung chính. Chúng tôi điều chỉnh kích thước và vị trí của kính lúp bằng cách nhắm mục tiêu cụ thể vào biểu tượng. Chúng tôi định vị mọi thứ bằng tỷ lệ phần trăm để nó vừa khít với thiết kế đáp ứng của chúng tôi. Chúng tôi cũng thêm :hovervà :focusnêu rõ ràng nên bạn có thể nhấp vào nó.
Chúng tôi kết thúc bằng cách viết một số JavaScript sẽ mở và đóng vùng tìm kiếm. Chúng tôi có thể có các hoạt ảnh ngay trong JavaScript (vì chúng tôi đang sử dụng jQuery), nhưng thay vào đó, tất cả những gì chúng tôi làm là thay đổi tên lớp trên CSS. Đây là những gì tôi muốn coi là "CSS dựa trên trạng thái" trong đó JavaScript chỉ kiểm soát các tên lớp khai báo trạng thái của trang (hoặc khu vực) và CSS kiểm soát trang trông như thế nào trong trạng thái đó (và cách nó đến đó ). Điều này có nghĩa là chúng tôi đang thực hiện những thứ như chuyển tiếp trong CSS, theo tôi, theo ý kiến của tôi, chúng thuộc về nơi nào và sẽ tốt hơn nhiều về lâu dài (tức là chuyển tiếp CSS được tăng tốc phần cứng trong khi chuyển tiếp JavaScript thì không, chúng chỉ là sự lặp lại nhanh chóng của các kiểu nội tuyến).