Trang chủ » Thiết kế web » Xây dựng trang web siêu tốc với Foundation 5 [Hướng dẫn]

    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:

    1. mã hoàn chỉnh
    2. một phiên bản nhẹ hơn chỉ với mã thiết yếu
    3. 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
    4. 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à:

     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;  

    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:

    4.4 Thêm một số nội dung khác

    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.

     

    Tiêu đề của bài mới nhất

    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à đủ.

     .hàng .row.latest-post lề-bottom: 1.5em;  .latest-post h4 lề-top: 0; cỡ chữ: 1.125em; 

    Nguyên mẫu của chúng tôi bây giờ trông như thế này:

    4.5 Thêm phân trang

    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:

    5. Điền vào Sidebar

    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