Như bạn đã biết, đó không phải là thời điểm ra đời của internet và mọi người hầu như đã quên các trang web, có văn bản đoạn đơn và một số siêu liên kết. Nếu bạn muốn tiếp tục với các tiêu chuẩn web hiện tại, bạn phải làm cho trang web của mình trở nên thú vị hơn là có thể xem một cách thẳng thắn. Bất kể ngôn ngữ mã hóa chẳng hạn như HTML or PHP được sử dụng để xây dựng giao diện người dùng, CSS sẽ là công cụ của bạn để làm cho trang web trông có phong cách. Khi chúng tôi so sánh một trang web với cơ thể con người, HTML hoạt động như xương của bạn trong khi CSS là thứ gần gũi với da và cơ bắp, được tạo ra để tạo hình dạng và cấu trúc.
Cũng giống như tất cả những thứ khác trong thế giới thiết kế và phát triển, CSS cũng có những bản cập nhật nhỏ và lớn để phù hợp với CSS3, đây là cặp tốt nhất khi HTML5 đồng hành cùng cuộc hành trình. Tuy nhiên, ngôi sao của trò chơi là xu hướng hoặc mẫu CSS mà bạn chọn sử dụng! Như bạn đã biết, có nhiều khung CSS khác nhau có sẵn cho bạn với các giao diện và tính năng khác nhau, chẳng hạn như bootstrap, Zurb vv Những gì chúng tôi giới thiệu với bạn hôm nay là CSS thuần túy, một CSS Framework đơn giản dựa trên coolgrid từ Yahoo !, gã khổng lồ internet hàng đầu. Thật hạnh phúc, bạn có thể sử dụng khuôn khổ này mà không phải trả một xu nào.
CSS thuần túy
Bạn có thể đã sử dụng các khuôn khổ khác như Zurb Foundation để xây dựng các trang và trang web hấp dẫn. Sử dụng CSS framework rất hữu ích vì bạn có thể lấy các mẫu cho các phần tử khác nhau trong trang như phân chia, biểu mẫu, menu, v.v. Đây là chức năng tương tự của CSS thuần túy của Yahoo! Thay vì tải xuống và thêm tệp vào thư mục 'CSS', Pure CSS có thể hoạt động như Google Fonts, nơi bạn phải thêm một dòng mã để tích hợp khung vào HTML. Vì khung là phiên bản mới nhất nên nó hoàn toàn đáp ứng được. Trên hết, Pure CSS là một trong những khung công tác đơn giản nhất mà bạn có thể tìm thấy trên web. Bạn có thể sử dụng khuôn khổ để cung cấp năng lượng cho trang web của mình hoặc tải xuống các mô-đun cụ thể cho các phần tạo kiểu như biểu mẫu, menu, v.v. Có sáu mô-đun riêng lẻ có sẵn miễn phí. Các mô-đun của Pure CSS như sau, có vẻ như có kích thước nhẹ (nhỏ hơn 2 Kb) khi được trích xuất.
- Căn cứ: Các phần tử trang web cơ bản như tiêu đề, đoạn văn, kiểu chữ
- Buttons: Các nút khác nhau với các hiệu ứng như hoạt động, khi di chuột, v.v.
- Những cái bàn: Các bảng cơ sở có sẵn với đường viền, v.v.
- Thực đơn: Ngang, dọc, thả xuống.
- Lưới: Lưới đáp ứng.
- Các hình thức: Đầu vào theo nhóm, nhiều cột, v.v.
XEM THÊM: Bookmarklet các mẫu tinh tế: Xem trước các mẫu nền trên trang web của bạn.
Tại sao sử dụng CSS thuần túy
- Mã ít sử dụng hơn: Một điều rất bình thường là bạn có thể thấy một số lượng lớn mã không được sử dụng khi sử dụng các khung công tác css khác. Mặt khác, trong trường hợp Pure CSS, bạn sẽ không bao giờ phải đối mặt với vấn đề này vì bạn có thể sử dụng phiên bản khung cụ thể và sử dụng nó để tạo kiểu cho các phần cụ thể của trang web. Tất nhiên, ít mã hơn dường như thậm chí còn tuyệt vời!
- Tất cả các bên trong: Ít nhất trong một số khuôn khổ khác, chúng đang sử dụng các mã và plugin JavaScript của bên thứ ba để tạo tác động trực quan tốt hơn. Tuy nhiên, Pure CSS không sử dụng bất kỳ loại plugin JS nào ngoại trừ trường hợp plugin được sử dụng trong hiệu ứng thả xuống. Ít mã của bên thứ ba hơn có thể cung cấp cho bạn tải trang nhanh hơn và mã gọn gàng hơn.
- Templates: Nếu bạn không phải là chuyên gia để thiết kế bố cục riêng cho trang web của mình, Pure CSS có thể giúp bạn trong phần đó. Trang web chứa một số ví dụ về bố cục, phù hợp với các trang web có mục đích khác nhau như tiếp thị, trang đích, v.v.
- Trình tạo da: Trong trường hợp các mẫu và kiểu có thể làm hài lòng nhà thiết kế sáng tạo trong bạn, bạn có thể sử dụng trình tạo da của Pure CSS để xây dựng da của riêng mình. Như bạn có thể đoán, trình tạo da không xem xét kiến thức chuyên môn về cấp độ mã hóa của bạn.
XEM THÊM: Phông chữ biểu tượng: Ưu và nhược điểm của Trình tạo phông chữ tuyệt vời.
Sử dụng CSS thuần túy
Như đã chỉ rõ trước đó Pure CSS, có nhiều tính năng ưu việt khi so sánh với các khung công tác khác. Nhớ lại những gì chúng tôi đã nói trước đây, bạn có thể sử dụng Pure CSS thông qua cùng một phương pháp của Google Fonts. Bạn phải thêm một dòng liên kết tệp bên ngoài để mang lại phong cách cho trang web của bạn. Tính năng này khá hữu ích khi bạn phải xây dựng các trang web tệp đơn lẻ và khi bạn không có đủ dung lượng để đặt tất cả các tệp css (Đoán điều này sẽ không xảy ra bao giờ). Như Yahoo! quay bánh xe của dự án dự án, bạn không muốn căng thẳng về lỗi tải hoặc hỏng hóc kỹ thuật.
Nếu bạn muốn sử dụng các mẫu CSS đầy đủ của Pure CSS, bạn có thể thêm mã sau vào trang web chính. Bạn cũng có thể nhấp vào liên kết tệp CSS và tải xuống tệp CSS để sử dụng.
[html]
[/ html]
Trong trường hợp, nếu bạn chỉ muốn sử dụng các phiên bản CSS cụ thể như menu, biểu mẫu, v.v. thì có sẵn các mã đặc biệt cùng với các tệp CSS chuyên dụng. Danh sách các URL như sau:
Sử dụng trình tạo da của Pure CSS cũng là một nhiệm vụ dễ dàng hơn vì bạn có thể kiểm soát thuộc tính của các phần tử bằng cách sử dụng các nút điều khiển trực quan của trang trình tạo da. Tuy nhiên, chúng tôi khuyên bạn nên tải xuống các tệp CSS để hiểu tên của các phần tử. Như chúng tôi đã nói, việc đặt các tệp nhỏ hơn 2 Kb này sẽ không tiêu tốn dung lượng ổ đĩa của bạn.
Trang web của Pure CSS được thiết lập theo cách mà ngay cả một người mới cũng có thể chèn các phần tử dựa trên Pure CSS vào trang web của họ. Bạn có thể thấy một thanh bên đơn giản ở phía bên trái, liệt kê các phần như biểu mẫu, nút, v.v. Trong mỗi trang, các bản xem trước có sẵn cùng với mã HTML để đưa hiệu ứng đó vào trang web của bạn. Do đó, rất dễ dàng để chèn các phần tử như vậy vào trang web của bạn. Dưới đây là bản xem trước và mã của một biểu mẫu đăng nhập duy nhất.
Kết luận
Khi phân tích tất cả các tính năng của Pure CSS, đây là một trong những đóng góp tối ưu của Yahoo! để thiết kế thế giới. Yahoo! Giao diện người dùng, thường được gọi là YUI hỗ trợ tất cả các chuỗi gắn liền với Pure CSS làm cho khung trở nên tốt nhất khi có sự so sánh. Ngoài việc sử dụng các phần tử được thiết lập trước, bạn cũng có thể tùy chỉnh Pure CSS. Bạn phải tự dẫn mình đến trang web Pure CSS để sử dụng và tìm hiểu thêm về framework đơn giản nhỏ gọn. Hãy cho chúng tôi biết ý kiến của bạn về khuôn khổ này sau khi xem các ví dụ và sử dụng nó trong dự án của bạn.
Cảm ơn vì đã đăng bài đánh giá tuyệt vời này về css thuần túy. Vì tôi đang cố gắng phát triển các chủ đề wordpress của riêng mình cho cộng đồng, tôi nghĩ css mới này từ yahoo.com có thể giúp tôi rất nhiều.
Tôi thấy nó thực sự rất hữu ích. Sẽ khám phá từng người trong số họ sau.
Ồ. Điều này thực sự thú vị. Cảm ơn bạn đã chia sẻ thông tin này.
Bạn sẽ giới thiệu Pure thay vì Bootstrap hay Foundation vào thời điểm này? Tôi thấy Bootstrap ít hơn một chút so với tài liệu tối ưu khi là người dùng lần đầu tiên sử dụng nó.
Xin chào Abhijith N Arjunan, tôi phải nói với bạn rằng bạn đã làm rất tốt và cảm ơn vì đã khai sáng kiến thức và kỹ năng của tôi.
Bài báo tuyệt vời Abhijit. Tôi đã sử dụng PureCSS để tạo chủ đề cho hệ thống quản lý nội dung mới có tên là PyroCMS. Hãy xem [PyroPure]).
Thật là vui khi phát triển chủ đề. Tôi nghĩ rằng nó nhẹ hơn nhiều so với các khuôn khổ khác ngoài kia. Kiểu dáng cũng rất có thể tùy chỉnh.
Wow .. Đây là một điều thú vị để học, tôi biết mình không có tài lập trình và thiết kế, nhưng thật thú vị khi làm được điều đó. PureCSS có lẽ là thứ mà tôi rất cần.
Xin chào, tôi đã sử dụng tính năng thuần khiết (PureCss) từ Yahoo trên 3 dự án và nó thực sự là một khung công tác nhẹ tuyệt vời, có thể nói, so với Bootstrap hoặc nền tảng, trọng tâm của nó là ánh sáng và mang lại thiết kế cho nhà phát triển và dựa trên bộ giao diện người dùng 300kb rằng bạn không sử dụng 70% các phần tử, và nếu bạn lấy các phần từ Bootstrap ra khỏi Bootstrap thì nó vẫn cần Java, nó vẫn nằm trong phần 200kb. Chưa kể mọi trang web đều trông giống Bootstrappy, đó là lý do tại sao tôi sẽ không bao giờ sử dụng Bootstrap để xây dựng một trang web hoặc nền tảng Zurb, tất cả chúng đều nặng và bạn cần phải sử dụng lưới 12 cột của chúng, điều này thực sự nhàm chán. Tôi thấy tất cả các trang web đều trông đẹp và bắt mắt tuy nhiên chúng trông rất hình hộp và tốt là nền tảng Bootstrap, Yahoo PureCss là bộ giao diện người dùng tuyệt vời, nhẹ, dễ sử dụng, sửa đổi và tốt nhất là hoạt động rất nhanh với WordPress làm chủ đề! Tôi đã sử dụng nó cho 4 dự án WordPress với YUI PureCss và khách hàng đã rất ngạc nhiên sau khi chuyển từ Bootstrap, nhận thấy đầu tiên là tốc độ của trang web thứ hai là thiết kế FLAT đẹp theo mặc định.