Xây dựng trang web siêu tốc với Foundation 5 [Hướng dẫn]
Sử dụng khung frontend có thể cải thiện quy trình thiết kế web của bạn theo nhiều cách. Nó có thể giúp bạn tuân theo các nguyên tắc thiết kế hiện đại chẳng hạn như cách tiếp cận đầu tiên trên thiết bị di động, đánh dấu ngữ nghĩa và thiết kế đáp ứng. Bạn có thể tận dụng nhiều yếu tố CSS và JavaScript sẵn sàng để sử dụng và đáng kể tăng tốc quá trình phát triển của bạn, giải phóng nhiều thời gian hơn để tập trung vào thiết kế trải nghiệm người dùng và hình ảnh.
Zurb Foundation 5 là một trong những khung giao diện mạnh mẽ nhất trên thị trường. Nó được xây dựng hợp lý, dễ sử dụng và hoàn toàn miễn phí. Nó cho phép bạn sử dụng một lưới CSS linh hoạt cái đó tạo điều kiện cho việc tạo ra một bố cục sạch sẽ, thân thiện với người dùng. Khung nền tảng cũng được thử nghiệm rất nhiều, do đó, nó đảm nhiệm tính tương thích giữa trình duyệt và thiết bị chéo.
Trong hướng dẫn này tôi sẽ chỉ cho bạn Làm thế nào bạn có thể xây dựng một trang web cực nhanh với Zurb Foundation 5. Bạn có thể xem kết quả cuối cùng trên trang demo.
Tôi sẽ tạo bố cục của trang web, nhiệm vụ thêm các yếu tố thiết kế tinh tế đang chờ bạn. Trang web chúng tôi sẽ cùng nhau tạo ra trong hướng dẫn này sẽ thực hiện giấc mơ của nhà thiết kế UX hiện đại: nó sẽ đáp ứng, đầu tiên trên thiết bị di động, thân thiện với người dùng và ngữ nghĩa.
Do độ dài của hướng dẫn này, đây là các phím tắt để nhanh chóng đến phần bạn muốn:
- Đang tải xuống Foundation 5
- Hiểu về lưới
- Khi nào nên sử dụng các lớp N lớn, trung bình và nhỏ
- Thêm thanh menu trên cùng
- Dân trí phần chính
- Thêm bảng điều khiển cho bài viết phổ biến
- Thêm 3 bài viết khác vào bảng điều khiển phổ biến
- Làm đẹp CSS
- Thêm một số nội dung
- Thêm phân trang
- Phổ biến thanh bên
- Mẫu bản tin
- Video linh hoạt
- Menu Sidebar
- Phần kết luận
1. Đang tải xuống Foundation 5
Bạn có thể tải xuống Foundation 5 dưới 4 hình thức khác nhau:
- mã hoàn chỉnh
- một phiên bản nhẹ hơn chỉ với mã thiết yếu
- một phiên bản tùy chỉnh nơi bạn có thể tùy chỉnh những gì bạn cần và những gì không
- một phiên bản Sass nếu bạn muốn đặt các biến và mixin của mình trong SCSS.
Trong hướng dẫn này, tôi sẽ chọn Mã hoàn chỉnh với CSS vanilla, nhưng tất nhiên bạn có thể chọn bất kỳ phiên bản nào khác nếu bạn muốn hợp lý hóa trang web của mình và chỉ sử dụng những gì bạn thực sự cần.
Sau khi bạn đã tải xuống và giải nén tệp zip, hãy mở tệp index.html trong trình duyệt của bạn và bạn sẽ thấy một cái gì đó như thế này:
Đúng, các nhà phát triển bao gồm các liên kết tiện dụng trong tệp chỉ mục. Bạn có thể để nó theo cách này và tạo một tệp mới cho nguyên mẫu của bạn với tên home.html hoặc một cái gì đó tương tự, nhưng bạn không thực sự cần phải giữ nó vì bạn có thể dễ dàng tiếp cận Tài liệu Foundation bất cứ khi nào bạn muốn.
Mở tệp index.html trong trình chỉnh sửa mã yêu thích của bạn và xóa mọi thứ bên trong phần, nhưng trước khi kết thúc Các quy tắc phong cách mà chúng tôi thêm vào app.css tập tin để làm đẹp nguyên mẫu của chúng tôi là: Vì Foundation 5 sử dụng các đơn vị tương đối, chúng ta cần sử dụng “em”-s hoặc “còn lại”-s thay vì pixel để theo kịp các quy tắc. (Bạn có thể đọc về các đơn vị CSS: Pixels vs ems vs% tại đây.) Tôi đã sử dụng tiện ích mở rộng Firebird của Firefox để xác định nơi tôi phải ghi đè quy tắc CSS của Foundation 5, bạn có thể sử dụng bất kỳ tiện ích mở rộng trình duyệt phát triển web nào khác nếu bạn muốn. Ở đây trong đoạn mã CSS ngắn này, chúng tôi chỉ phải ghi đè CSS mặc định của Foundation chỉ một lần, ở quy tắc cuối cùng (.row .row.p phổ biến-chính). Đây là những gì trang web demo bây giờ trông như thế nào: Sử dụng các quy tắc tương tự như trước đây, chúng tôi sẽ thêm một số nội dung vào phần chính của trang. Nội dung mà chúng tôi sẽ thêm bây giờ sẽ là Bài viết mới nhất với hình thu nhỏ. Foundation 5 có các kiểu hình thu nhỏ được chuẩn bị trước thực sự tuyệt vời mà chúng ta sẽ sử dụng trong Bước này. Hình thu nhỏ nền tảng sử dụng một lớp CSS dựng sẵn được gọi là “thứ” rằng chúng ta cần thêm vào hình ảnh mà chúng ta muốn hiển thị dưới dạng hình thu nhỏ theo cách bạn có thể nhìn thấy nó trong đoạn mã dưới đây. Đối với mỗi Bài đăng mới nhất, chúng tôi thêm một hàng mới bên dưới Bảng điều khiển phổ biến với lớp CSS tùy chỉnh được gọi là “bài đăng Mới nhất”. Trên kích thước máy tính bảng và máy tính để bàn, chúng tôi sẽ hiển thị một hình thu nhỏ nhỏ bằng lớp hình thu nhỏ của Foundation ở bên trái, tiêu đề và mô tả ngắn ở bên phải. Trên thiết bị di động, tiêu đề và mô tả sẽ nằm bên dưới hình thu nhỏ. Bây giờ tôi đã sử dụng “3 cột vừa” và “cột trung bình 9” các lớp để làm cho chúng chia màn hình thành 1: 3, 25% cho hình ảnh và 75% cho văn bản lên từ kích thước trung bình. Chèn đoạn mã sau bên dưới Bảng điều khiển phổ biến ba lần (cho ba Bài đăng mới nhất). Ở đây tôi chỉ bao gồm mã của một hàng Bài đăng mới nhất, vì tất cả chúng đều sử dụng cùng một đánh dấu HTML, chỉ có nội dung khác nhau. Nội dung của bài mới nhất Tệp CSS tùy chỉnh của chúng tôi được tạo trong Bước 4.3, app.css cũng có một số quy tắc phong cách mới để giữ vẻ gọn gàng của bản demo. chú thích: Nếu bạn muốn thêm CSS tùy chỉnh của riêng mình vào Foundation, đừng bao giờ quên kiểm tra, với công cụ phát triển web, nơi bạn phải ghi đè các quy tắc mặc định. Trong đoạn mã CSS bên dưới, chúng ta cần ghi đè chúng theo quy tắc đầu tiên (.row .row.latest-post). Trong quy tắc thứ hai, chỉ cần sử dụng bộ chọn tùy chỉnh của chúng tôi (.latest-post h4) là đủ. Nguyên mẫu của chúng tôi bây giờ trông như thế này: Trong bước này, chúng tôi sẽ thêm một phân trang thú vị bên dưới Bài viết mới nhất. Foundation 5 giúp chúng tôi hỗ trợ bởi các lớp phân trang tiện lợi, sẵn sàng sử dụng. Chúng tôi sử dụng cùng một mã trong bước này mà bạn có thể tìm thấy trong “Nâng cao” phần bên trong Tài liệu phân trang. Dưới đây là những bài viết mới nhất với phần Pagination mới được thêm vào: Bây giờ chúng tôi đã sẵn sàng với nội dung chính của trang web demo của mình, đã đến lúc đưa vào thanh bên phải. Thanh bên phải sẽ trượt bên dưới nội dung chính trên kích thước điện thoại di động và máy tính bảng. Bạn cần chèn tất cả các đoạn mã trong phần này bên trong Thanh bên trái sẽ chứa Biểu mẫu Đăng ký Bản tin (1), Video mới nhất (2) và Menu Thanh bên theo phong cách accordion dưới tên hiệu “Sách dạy nấu ăn của chúng tôi” (3). Vào cuối bước này, chúng tôi sẽ sẵn sàng với bản demo của chúng tôi sẽ trông như thế này: Để tạo biểu mẫu trong Foundation 5, bạn không phải làm gì khác, chỉ cần đặt lưới bên trong Thẻ HTML. Nếu bạn xem đoạn mã bên dưới, bạn sẽ thấy rằng chúng tôi đặt biểu mẫu thành một hàng trong đó chúng tôi đặt các bộ chọn CSS khác nhau cho cả 3 lưới: “nhỏ-12”, “trung bình 9”, và “lớn-12”. Chúng tôi đã chọn giải pháp này vì Mẫu Bản tin rộng 100% trông tuyệt vời trên kích thước di động, nhưng thực sự rất khó xử về kích thước máy tính bảng khi nó trở thành rất rộng. May mắn thay Foundation 5 cho phép chúng tôi sử dụng “Hàng không đầy đủ”: chúng ta chỉ cần thêm “kết thúc” lớp theo định nghĩa lớp CSS của cột không đầy đủ. Vì vậy, đây là những gì sẽ xảy ra ở đây: trên kích thước điện thoại di động, thanh bên sẽ được hiển thị bên dưới nội dung chính với Biểu mẫu đăng ký bản tin bao phủ toàn bộ màn hình. Ở kích thước trung bình, thanh bên sẽ vẫn ở dưới nội dung chính, nhưng Bản tin sẽ chỉ chiếm 75% màn hình và 25% còn lại sẽ trống. Trên kích thước màn hình, thanh bên sẽ ở ngay bên cạnh nội dung chính và Biểu mẫu Bản tin sẽ bao phủ toàn bộ chiều rộng của thanh bên một lần nữa. Xem Tài liệu lưới để đọc thêm về Hàng chưa hoàn thành. Bây giờ hãy xem bên trong tiêu đề lề-dưới: 2em; .p Phổ biến-bổ sung h4 font-size: 1.125em; lề trên: 0,4em; .row .row.p Phổ biến-chính lề-dưới: 1,5em;
4.4 Thêm một số nội dung khác
Tiêu đề của bài mới nhất
.hàng .row.latest-post lề-bottom: 1.5em; .latest-post h4 lề-top: 0; cỡ chữ: 1.125em;
4.5 Thêm phân trang
5. Điền vào Sidebar
5.1 Bản tin
Đăng kí tờ báo của chúng tôi
Biểu mẫu nền tảng có nhiều tùy chọn bố cục khác như Nhãn tiền tố, Nhãn bán kính tiền tố, Nút Postfix và Nhãn Postfix. Chúng tôi đã chọn tùy chọn Nút Postfix ở đây vì nó thân thiện với người dùng hơn: người dùng có thể nhấp vào nó và gửi biểu mẫu cùng một lúc.
Trong biểu mẫu, chúng tôi sẽ thêm một hàng lồng nhau mới chia màn hình thành 2: 1. Nhập văn bản sẽ nhận được 8 cột và nút postfix sẽ nhận được 4. Vì chúng tôi muốn có bố cục này ngay cả trên màn hình di động, chúng tôi sẽ đặt “8 cột nhỏ” và “4 cột nhỏ” Bộ chọn CSS ở đây, Lưới nhỏ là kích thước nhỏ nhất mà chúng tôi muốn thực hiện đánh dấu này.
Bạn có thể thấy một điều mới trong mã HTML ở trên đó là “sập hàng” lớp học. Đây là phong cách tích hợp của Foundation 5. Theo mặc định, có một máng xối giữa hai cột liền kề, nhưng nếu chúng ta thêm “sự sụp đổ” Lớp đến hàng của chúng tôi, máng xối sẽ biến mất. Chúng tôi làm điều này bởi vì chúng tôi muốn nút ở ngay bên cạnh kiểu nhập văn bản mà không có khoảng trống giữa chúng.
Bây giờ là lúc chèn đoạn mã này vào
5.2 Video linh hoạt
Bên dưới Phần Bản tin, chúng tôi sẽ thêm Công thức Video hàng ngày vào thanh bên. Foundation 5 giúp chúng tôi làm cho các video nhúng trở nên nhạy và buộc chúng tự động chia tỷ lệ với tính năng Flex Video.
Video Flex sử dụng tích hợp “video flex” Lớp CSS. Chúng tôi tạo một hàng mới cho phần thanh bên Công thức video hàng ngày và đặt một cột rộng trong đó với phần “nhỏ-12 vừa-9 lớn-12 cột cuối” Các bộ chọn CSS vì lý do tương tự, chúng tôi đã sử dụng một hàng không hoàn chỉnh trong Lưới trung bình ở bước trước.
Đây là mã bạn cần dán bên dưới Phần Bản tin. Bạn có thể sử dụng bất kỳ video nào từ Youtube, Vimeo, v.v..
Công thức video hàng ngày
5.3 Menu Sidebar
Đối với Menu Sidebar, chúng tôi sẽ sử dụng tính năng Accordion của Foundation 5. Accordions là các yếu tố web mở rộng và thu gọn nội dung thành các phần hợp lý.
Trên trang demo của chúng tôi, các phần hợp lý này là 3 nhóm thực phẩm khác nhau (Món chính, Món phụ, Món tráng miệng) và mỗi nhóm chứa nhiều nhóm nhỏ hơn như “gia cầm”, “Thịt heo”, “Thịt bò”, “Ăn chay”.
Chúng tôi đặt toàn bộ thanh bên Accordion vào một cột rộng với logic tương tự như trong 5.1 và 5.2 Bước trước đó. Chúng tôi đặt accordion bên trong nó như một danh sách không có thứ tự với các lớp CSS tích hợp thích hợp như “đàn accordion” và “accordion-chuyển hướng”.
Vì Foundation Accordions hoạt động với JavaScript, bạn có thể tùy chỉnh hành vi của nó với sự trợ giúp của các biến JavaScript được xây dựng trước nếu bạn muốn. Để làm như vậy, nhìn vào “Cấu hình JavaScript tùy chọn” phần trong Tài liệu Accordion. Đoạn mã sau nằm bên dưới phần Flex Video bên trong tệp index.html.
Sách dạy nấu ăn của chúng tôi
Phần kết luận
Bây giờ chúng tôi đã sẵn sàng với trang web demo của chúng tôi, hãy xem bạn có thể làm gì khác với Foundation 5. Các yếu tố chúng tôi sử dụng trong bản demo này chỉ là một tập hợp nhỏ các tính năng của khung Foundation. Có nhiều thứ khác bạn có thể sử dụng trong thiết kế của mình, chẳng hạn như Thanh biểu tượng có thể tùy chỉnh, Breadcrumbs, Lightboxes, Range Sliders, Xác thực mẫu và nhiều thứ khác. Tài liệu được viết khá tốt và chúng giúp các nhà phát triển có nhiều ví dụ về mã.
Nếu bạn quen thuộc với Sass, bạn thậm chí còn có nhiều tùy chọn hơn vì mỗi phần trong Tài liệu giải thích cách bạn có thể xây dựng các mixins của riêng mình và biến Sass nào bạn có thể sử dụng để tùy chỉnh trang web của mình. Trước khi bạn bắt đầu thiết kế trang web của mình, đừng quên kiểm tra tính tương thích của khung Foundation để đảm bảo nó hoạt động trên tất cả các trình duyệt bạn cần xây dựng cho.
- Xem bản demo
- Tải xuống nguồn