Tài nguyên mới dành cho nhà thiết kế và phát triển web (tháng 2 năm 2016)

2015 là một năm tuyệt vời cho web: công nghệ web đã được được áp dụng trong nhiều yếu tố hình thức ngoài việc xây dựng một trang web hoặc một ứng dụng web. Nhiều ứng dụng di động và máy tính để bàn hiện được xây dựng bằng HTML, CSS và JavaScript. Điều này được thực hiện nhờ tính chất di động của các công nghệ và thư viện web như React.js, Angular và Node.js.

Vì vậy, trong phần hôm nay của loạt bài này, chúng tôi đã tập hợp một số thư viện JavaScript và CSS.

Bấm để biết thêm tài nguyên

Tìm toàn bộ bộ sưu tập tài nguyên được đề xuất của chúng tôi và các công cụ thiết kế và phát triển web tốt nhất hiện có.

Thanh trượt phẳng

Giao diện người dùng jQuery đi kèm với một bộ giao diện web phổ biến bao gồm Thanh trượt - Giao diện người dùng cho phép người dùng chọn một phạm vi các giá trị số. Các Thanh trượt phẳng là một công cụ web giúp tùy chỉnh kiểu giao diện người dùng jQUery, trước đây là một nhiệm vụ rất khó khăn, giờ đây dễ dàng hơn rất nhiều.

Tiện ích loại mở

Tiện ích loại mở là một tập hợp các lớp học thả vào áp dụng các tính năng typographic CSS nâng cao chữ ghép chữ, chữ in hoa nhỏ, và nhiều hơn nữa. Về cơ bản, chúng cung cấp trải nghiệm đọc tốt nhất có thể cho người dùng của bạn một cách chi tiết. Nó xuống cấp độc đáo trong các trình duyệt cũ hơn, không được hỗ trợ.

ResponsifyJS

Một trong những hạn chế khét tiếng của khuôn mặt phản hồi hình ảnh là nó thường chia tỷ lệ hình ảnh đúng cách, nhưng điều này chuyển hướng tiêu điểm chính của hình ảnh khi nó được thu nhỏ xuống kích thước khung nhìn rất nhỏ.

ResponsifyJS là thư viện JavaScript nhẹ mà bạn có thể sử dụng để đặt tọa độ để duy trì tiêu điểm hình ảnh trong khi nó đang được thay đổi kích thước.

Tuyến tính

Tuyến tính là một ứng dụng thước cho Mac. Bạn có thể sử dụng thước đo để đo các trang web, tìm kích thước của một phần tử mà không cần phải mở DevTools hoặc tìm hiểu xem một phần tử có được căn giữa hoàn hảo không. Bạn có thể có nhiều thước đo và chuyển đổi đơn vị từ PX sang EM.

Chú ý

Chú ý là một plugin jQuery để tạo trải nghiệm cuộn ngăn xếp, khi một bảng điều khiển đạt đến đỉnh của chế độ xem, nó sẽ ở đó, trong khi cuộn tiếp tục kéo lên bảng tiếp theo. Nó là một plugin nhẹ với một vài tùy chọn để cấu hình bộ chứa trang, phần ngăn xếp, cũng như bóng hộp của ngăn xếp. Kiểm tra bản demo.

Người xem

Người xem là plugin jQuery cho hộp đèn hình ảnh - một cách phổ biến lạ mắt để phóng to hình ảnh trên web. Plugin đi kèm với một tùy chọn áp đảo cho phép bạn tùy chỉnh từng bit của hộp đèn giao diện.

Plugin cũng cung cấp một bộ API và Sự kiện tùy chỉnh để kiểm soát toàn bộ hộp đèn phản ứng và hành vi. Hơn nữa, nó hoạt động với Internet Explorer 8.

DeviceMock

DeviceMock là một thư viện JavaScript cho phép bạn tạo khung thiết bị hoặc mockup chẳng hạn như điện thoại, máy tính bảng và máy tính để bàn. Tương tự, các tùy chọn cung cấp thư viện để đặt màu chủ đề của khung, kích thước cũng như hướng khung.

Nó có thể là một lựa chọn tốt để giới thiệu web và ứng dụng của bạn thay vì sử dụng Photoshop.

Giáo sĩ

Giáo sĩ là một sáng kiến để xác định lại màu web mặc định thành tông màu hiện đại, thân thiện hơn. Ngoài ra, nó ủng hộ một tập hợp các kết hợp màu sắc để tiếp cận tốt hơn. Bạn có thể triển khai các màu này thông qua các mẫu màu NPM, Gem (Ruby) và Photoshop và Illustrator.

Tô màu

Tô màu là một thư viện JavaScript siêu nhẹ (giảm 3kb) trích xuất màu chủ đạo từ một hình ảnh với nhiều API để thao tác màu sắc. Bạn có thể sử dụng màu được trích xuất làm trình giữ chỗ trong khi chờ hình ảnh tải hoàn toàn, tạo nền gradient hoặc điều chỉnh giao diện lân cận để đáp ứng màu hình ảnh.

Khóa sách

Khóa sách là plugin jQuery để tạo một cuốn sách nhỏ với hiệu ứng lật trang. Đây là một thay thế đẹp mắt để hiển thị nhiều hình ảnh trên trang web của bạn, đặc biệt nếu có một chuỗi hoặc luồng mà bạn muốn hiển thị.

Bạn có thể xem bản demo tại đây để có ý tưởng về cách BookBlock hoạt động.