Chúng tôi có một chút mô hình Photoshop để làm việc từ đây khi chúng tôi tiếp tục xây dựng mẫu cho trang thư viện riêng lẻ.
Đầu tiên, chúng tôi đã tạo kiểu cho các liên kết Tiếp theo và Trước đó. Chúng nằm ở vị trí tuyệt đối trong hộp trong thanh thư viện, vì vậy chúng tôi có thể căn giữa chúng trên trang mặc dù các nút và nội dung khác đã có trong thanh. Chúng đảm nhiệm cùng một lớp với nút Gửi Một nên có sự cố định ở đó.
Tiếp theo, chúng ta có cột bên trái rất mỏng này để lấy văn bản. Chúng tôi bắt đầu với lưới 1/8 7/8, nhưng 1/8 hơi quá mỏng. Chúng tôi thay đổi nó thành 1/4 3/4 nhưng như vậy là quá nhiều. Vì vậy, giống như con gấu con trong truyện ngụ ngôn, 1/6 5/6 là vừa phải.
Chúng tôi thực hiện một số công việc về kiểu chữ trong cột hẹp đó, thêm vào tiêu đề (trong
tất nhiên, vì nó là tiêu đề quan trọng nhất trên trang), mô tả và các phần khác. Hầu hết các kiểu chữ chỉ rơi vào vị trí dựa trên thiết lập kiểu chữ đơn giản và chắc chắn của chúng tôi.
Lưới 5/6 là tất cả cho hình ảnh. Đẹp và lớn, thật tuyệt. Nó có nền màu xám nhạt, giống như cách hình ảnh có trong các bài đăng trên blog (ví dụ:
Chúng tôi nghĩ về việc trở nên lạ mắt một chút với cách chúng tôi tạo kiểu cho các thẻ. Chúng tôi xem xét xung quanh CodePen (đây là liên kết đến thẻ “tags”, META ALERT). Cuối cùng chúng tôi nghĩ rằng đó là quá mức cần thiết và để chúng như các liên kết bình thường.
Chúng tôi làm cho nút “kích thước đầy đủ” hoạt động theo một trong những cách đơn giản nhất có thể, mở một cửa sổ mới có kích thước của hình ảnh kích thước đầy đủ và hiển thị hình ảnh trong đó. Nó giống như một hộp phương thức từ đầu những năm 2000! Nhưng tôi thích nó. Nó đơn giản, nó không cần nhiều mã (giống như một hộp đèn) và việc tương tác với nó là điều hiển nhiên. Nó thậm chí còn tốt hơn, nếu bạn hỏi tôi.