Lấy sức mạnh của khung nền tảng ZURB trong một chủ đề Drupal
Trước khi có Twitter Bootstrap , đã có (và là) ZURB Foundation, một khuôn khổ cho phép bạn thêm các nút đẹp, khối lưới, thanh tiến trình, bảng giá và nhiều hơn nữa với một vài lớp CSS được đặt tốt. Với chủ đề ZURB Foundation dành cho Drupal, bạn có thể giải phóng tất cả những điều này trên trang web Drupal của bạn một cách dễ dàng.
Khung nền tảng ZURB là gì?
Khung nền tảng ZURB là một bộ sưu tập mã CSS và Javascript cho một loạt các công cụ mà bạn có thể muốn trên trang web của mình. Điều này bao gồm không chỉ kẹo mắt có thể nhấp như các nút nói trên mà còn một số năng lượng đáp ứng thực sự tuyệt vời.
Bạn sử dụng hầu hết các tính năng này bằng cách thêm các lớp CSS đặc biệt. Ví dụ:
Đây là nút . Và đây là nút nút nhỏ . Khung nền tảng ZURB hoàn toàn tách biệt với Drupal. Mọi người sử dụng nó trên WordPress, Joomla, và thậm chí cả các trang HTML tĩnh . Chủ đề của Quỹ Drupal ZURB cho phép bạn giải phóng tất cả sức mạnh ZURBish này chỉ bằng cách tải xuống và bật chủ đề (và đọc tài liệu và thực hiện thêm một vài bước). Ví dụ, ZURB Foundation dựa vào thư viện Javascript của jQuery, vì vậy có thể bạn sẽ phải cài đặt jQuery Update. Kiểm tra xem bạn có đang sử dụng bất kỳ mô-đun nào khác dựa trên jQuery hay không. Nếu bạn sử dụng phiên bản jQuery quá mới, các mô-đun này có thể ngừng hoạt động. Ngoài ra, có thể bạn sẽ muốn sử dụng chủ đề này làm chủ đề cơ sở cho chủ đề tùy chỉnh của riêng bạn. Tùy biến là nơi Quỹ ZURB thực sự tỏa sáng. Bạn không cần chủ đề này để sử dụng khung công tác ZURB Foundation. Theo cách đơn giản nhất, chủ đề này chỉ thêm ZURB Foundation CSS và Javascript vào trang web của bạn và bạn có thể làm điều đó theo cách thủ công. Nhưng chủ đề này làm cho dễ dàng hơn, và nó cũng bao gồm một số tích hợp hơn nữa với Drupal. Ngoài ra, bạn có thể thêm các mô-đun bổ sung nhỏ hơn để tích hợp thêm. Ví dụ, mô-đun ZURB Orbit cho phép bạn xây dựng một trình chiếu Orbit với các trường hình ảnh. Mô-đun Xóa ZURB cho phép bạn tạo các hộp đèn đáp ứng với hình ảnh Phương tiện. Lưu ý: Tôi đã không sử dụng các mô-đun nhỏ nhưng bản thân mình, vì vậy họ có thể bị đầy nguy hiểm. Theo văn bản này, ZURB Clearing yêu cầu Media-2.x-dev, có thể là bản nâng cấp nguy hiểm nếu bạn hiện đang sử dụng Media 1.x. Và một yêu cầu cho một phiên bản phát triển của một mô-đun nên luôn luôn cho một tạm dừng. Tuy nhiên, các mô-đun ZURB này và các mô-đun ZURB khác đáng xem xét. Trước khi bạn tải xuống chủ đề ZURB Foundation, hãy kiểm tra phiên bản bạn nên sử dụng. Có nhiều phiên bản chính khác nhau của khung công tác ZURB Foundation và số phiên bản chính cho chủ đề tương ứng với khuôn khổ mà nó hoạt động. Vì vậy, các phiên bản 7.x- 3.x của chủ đề làm việc với Foundation 3 , các phiên bản 7.x- 4.x làm việc với Foundation 4 , và các phiên bản 7.x- 5.x làm việc với Foundation 5 . Theo văn bản này, phiên bản ổn định mới nhất của chủ đề là 7.x-4.x, hoạt động với Foundation 4. Phiên bản 7.x-5.x vẫn đang được phát triển. Vì vậy, mặc dù trang web khuôn khổ Foundation giả sử bạn sẽ sử dụng Nền tảng 5, bạn có thể muốn gắn bó với Foundation 4 bây giờ. Cũng lưu ý rằng Nền tảng 5 có các yêu cầu bổ sung, đặc biệt là jQuery 1.10. Nền tảng 4 chỉ cần jQuery 1.7+. Hãy nhận biết bạn đang sử dụng phiên bản Foundation nào khi đọc tài liệu trực tuyến. Điều này đặc biệt đúng nếu bạn không sử dụng phiên bản mới nhất của khung công tác. Thật dễ dàng để đọc tài liệu, ví dụ, Foundation 5, sau đó cảm thấy thất vọng khi một tính năng mới không hoạt động trên trang web Foundation 4 của bạn. Ví dụ, Foundation 5 bao gồm một tập hợp toàn bộ các lớp trung bình cho các màn hình cỡ trung bình. Trong Foundation 4, những điều này sẽ thất bại một cách bí ẩn trừ khi bạn thực hiện thêm các bước. Nếu bạn định tinh chỉnh CSS cho chủ đề này, hãy đảm bảo bạn: Tệp _variables.scss được tạo tự động bởi drst fst. Tệp đơn này chứa các biến cho hầu hết mọi thứ bạn có thể muốn tinh chỉnh trong CSS chủ đề của mình. Ngạc nhiên! Tất cả ở một nơi, bạn có thể đặt mọi thứ từ phông chữ mặc định thành chiều rộng màn hình đến đường viền trên đường dẫn. Tất nhiên, bạn luôn có thể thiết lập các tệp bổ sung. Nhưng _variables.scss là một nơi tuyệt vời để bắt đầu. Chú ý phần mở rộng tập tin: scss, chứ không phải css. Để sử dụng _variables.scss, bạn sẽ cần phải thiết lập SASS (một ngôn ngữ mở rộng CSS) và Compass (một khung được xây dựng với SASS). Khi bạn chạy la bàn biên dịch, các tệp scss của bạn sẽ biến thành CSS đáng yêu trong các tệp riêng biệt. (Tôi thích la bàn đồng hồ - điều này tiếp tục chạy và cập nhật CSS khi bạn tinh chỉnh các tệp scss.) Nếu bạn thực sự, thực sự không muốn bận tâm với SASS, bạn có thể viết các tệp CSS như thường lệ và liệt kê chúng trong tệp .info của chủ đề của bạn. Nhưng hãy tin tôi - đầu tư thời gian nhỏ để học đủ để biên dịch _variables.scss sẽ được trả lại gần như ngay lập tức. ZURB Foundation là tuyệt vời nhất, nhưng nó không phải là khuôn khổ front-end duy nhất được tích hợp với Drupal. Bạn có thể muốn xem xét Bootstrap , một khuôn khổ tương tự cũng có một chủ đề Drupal. Hiện tại, tôi đang sử dụng ZURB Foundation, nhưng đó là bởi vì nghiên cứu của tôi cho thấy dễ dàng tùy chỉnh hơn Bootstrap. Ngoài ra, thành phần Joyride khá ngọt ngào. Và cho dù bạn sử dụng ZURB Foundation, Bootstrap hay một số khung công tác khác, hãy chắc chắn để có được những lời khuyên này về cách sử dụng một khung công tác với Drupal . Chủ đề Drupal Foundation của ZURB là gì?
Bạn có cần chủ đề này để sử dụng ZURB Foundation trong Drupal?
Chọn phiên bản nào của ZURB Foundation để sử dụng
Sử dụng SASS, Compass và & # 34; _variables.scss & # 34 ;!
Trước khi bạn sử dụng ZURB Foundation