ก่อนที่จะมี Twitter Bootstrap มี (และเป็น) ZURB Foundation ซึ่งเป็นเฟรมเวิร์คที่ช่วยให้คุณสามารถเพิ่มปุ่มสวย ๆ บล็อกกริดแถบความคืบหน้าตารางราคาและอื่น ๆ อีกมากมายโดยมีคลาส CSS ที่วางไว้อย่างดี ด้วยธีม ZURB Foundation สำหรับ Drupal คุณสามารถปลดปล่อยสิ่งนี้ได้ทั้งหมดบนไซต์ Drupal ด้วยความสะดวกสบายที่ร้ายแรง
ZURB Foundation Framework คืออะไร?
กรอบแนวคิด ZURB คือชุดของโค้ด CSS และ JavaScript สำหรับกลุ่มเนื้อหาที่คุณอาจต้องการบนเว็บไซต์ของคุณ ไม่เพียงแค่ลูกกวาดที่สามารถคลิกได้เช่นปุ่มดังกล่าวเท่านั้น แต่ยังมีพลังตอบสนองที่ยอดเยี่ยมอย่างแท้จริง
คุณใช้คุณลักษณะเหล่านี้ได้โดยการเพิ่มชั้น CSS พิเศษ ตัวอย่างเช่น
นี่คือ a .
และนี่คือ a ปุ่มเล็ก ๆ.
กรอบ ZURB Foundation ถูกแยกออกจาก Drupal โดยสิ้นเชิง ผู้คนใช้ WordPress, Joomla และแม้กระทั่งเว็บไซต์ HTML แบบสแตติก
ZURB Foundation Drupal Theme คืออะไร?
มูลนิธิ Drupal ZURB กระทู้ ช่วยให้คุณสามารถปลดปล่อยพลัง ZURBish ทั้งหมดนี้ได้ด้วยการดาวน์โหลดและเปิดใช้ชุดรูปแบบ (และอ่านเอกสารประกอบและทำตามขั้นตอนเพิ่มเติมบางอย่างแน่นอน)
ตัวอย่างเช่นมูลนิธิ ZURB อาศัยไลบรารี jQuery Javascript ดังนั้นคุณอาจต้องติดตั้ง jQuery Update ตรวจสอบว่าคุณใช้โมดูลอื่น ๆ ที่ใช้ jQuery หรือไม่ ถ้าคุณใช้รุ่นใหม่เกินไปของ jQuery โมดูลเหล่านี้อาจหยุดทำงาน
นอกจากนี้คุณอาจต้องการใช้ชุดรูปแบบนี้เป็นชุดรูปแบบพื้นฐานสำหรับธีมที่กำหนดเองของคุณเอง การปรับแต่งคือที่มูลนิธิ ZURB ส่องจริงๆ
คุณต้องการชุดรูปแบบนี้ในการใช้ ZURB Foundation ใน Drupal หรือไม่?
คุณไม่ได้ จำเป็นต้อง ชุดรูปแบบนี้จะใช้กรอบ ZURB Foundation ที่ง่ายที่สุดชุดรูปแบบนี้เพียงแค่เพิ่ม ZURB Foundation CSS และ Javascript ลงในไซต์ของคุณและคุณสามารถดำเนินการได้ด้วยตนเอง
แต่ชุดรูปแบบนี้ทำให้ง่ายขึ้นและรวมถึงการผสานรวมเพิ่มเติมกับ Drupal
นอกจากนี้คุณสามารถเพิ่มโมดูลเพิ่มเติมที่มีขนาดเล็กลงสำหรับการรวมระบบเพิ่มเติมได้ ตัวอย่างเช่นโมดูล ZURB Orbit ช่วยให้คุณสามารถสร้างสไลด์โชว์ Orbit พร้อมกับฟิลด์ภาพ โมดูลการหักบัญชี ZURB ช่วยให้คุณสามารถสร้างไลเบรทแบบตอบสนองได้ด้วยภาพมีเดีย
หมายเหตุ: ฉันยังไม่เคยใช้โมดูลเล็ก ๆ เหล่านี้มาก่อนดังนั้นพวกเขาอาจจะเต็มไปด้วยอันตราย ในการเขียนนี้จำเป็นต้องใช้การหักล้าง ZURB
สื่อ 2.x-devซึ่งอาจเป็นการอัพเกรดที่เป็นอันตรายหากคุณกำลังใช้ Media 1.x อยู่ และข้อกำหนดสำหรับโมดูลสำหรับพัฒนาเวอร์ชันควรให้หยุดชั่วคราวหนึ่งครั้ง ยังคงเหล่านี้และโมดูล ZURB อื่น ๆ มีมูลค่าดู
เลือกรุ่นของ ZURB Foundation ที่จะใช้
ก่อนที่คุณจะดาวน์โหลดธีม ZURB Foundation โปรดตรวจสอบว่าคุณควรใช้เวอร์ชันใด มีกรอบหลัก ZURB Foundation ที่สำคัญต่างกันและหมายเลขเวอร์ชันหลักสำหรับธีมสอดคล้องกับกรอบการทำงานที่ใช้ร่วมกัน ดังนั้น
7.x-3.x รุ่นของชุดรูปแบบการทำงานกับมูลนิธิ 3,
7.x-4.x รุ่นทำงานร่วมกับมูลนิธิ 4, และ
7.x-5.x รุ่นทำงานร่วมกับมูลนิธิ 5.
เมื่อเขียนงานฉบับนี้ชุดรูปแบบที่เสถียรล่าสุดของชุดรูปแบบคือ 7.x-4.x ซึ่งทำงานร่วมกับมูลนิธิ 4. รุ่น 7.x-5.x ยังคงพัฒนาอยู่ ดังนั้นแม้ว่าเว็บไซต์ของมูลนิธิกรอบสมมติว่าคุณจะใช้มูลนิธิ 5 คุณอาจต้องการติดมูลนิธิ 4 ตอนนี้
โปรดทราบว่า Foundation 5 มีข้อกำหนดเพิ่มเติมโดยเฉพาะ jQuery
1.10. มูลนิธิ 4 ต้องการเฉพาะ jQuery
1.7+.
รับทราบว่าคุณกำลังใช้มูลนิธิรุ่นใดอยู่บ้างเมื่ออ่านเอกสารออนไลน์ โดยเฉพาะอย่างยิ่งถ้าคุณไม่ได้ใช้กรอบงานเวอร์ชันล่าสุด เป็นเรื่องง่ายที่จะอ่านเอกสารสำหรับพูด Foundation 5 จากนั้นจึงผิดหวังเมื่อคุณลักษณะใหม่ไม่สามารถใช้งานได้กับเว็บไซต์ Foundation 4 ของคุณ
ตัวอย่างเช่น Foundation 5 มีทั้งชุด
กลาง ชั้นเรียนสำหรับหน้าจอขนาดกลาง ในมูลนิธิ 4 เหล่านี้จะล้มเหลวลึกลับเว้นแต่คุณจะทำตามขั้นตอนพิเศษ
ใช้ SASS, เข็มทิศและ "_variables.scss"!
หากคุณต้องการปรับแต่ง CSS สำหรับธีมนี้ทั้งหมดตรวจสอบให้แน่ใจว่าคุณ:
- ใช้ชุดรูปแบบ ZURB Foundation เป็นธีมพื้นฐานสำหรับหัวข้อย่อยที่กำหนดเองของคุณเอง
- สร้าง subtheme นี้โดยใช้
drush คำสั่งตามรูปแบบ อย่างนี้:
drush fst your_theme_name
- ดื่มด่ำกับความยอดเยี่ยม
_variables.scss ไฟล์
_variables.scss ไฟล์ถูกสร้างขึ้นโดยอัตโนมัติ
drush fst. ไฟล์เดียวมีตัวแปรเกือบ สิ่งใด คุณอาจต้องการปรับแต่งในธีม CSS ของคุณ มันน่าทึ่ง! ทั้งหมดในที่เดียวคุณสามารถตั้งค่าทุกอย่างจากแบบอักษรเริ่มต้นไปที่ความกว้างของหน้าจอไปยังขอบบน breadcrumbs
แน่นอนคุณสามารถตั้งค่าไฟล์เพิ่มเติมได้ตลอดเวลา แต่
_variables.scss เป็นสถานที่ยอดเยี่ยมในการเริ่มต้น
สังเกตเห็นส่วนขยายของไฟล์:
SCSSไม่ใช่
CSS. ใช้
_variables.scss, คุณจะต้องตั้งค่า SASS (ภาษาส่วนขยายของ CSS) และเข็มทิศ (กรอบที่สร้างขึ้นด้วย SASS) เมื่อคุณรัน
คอมไพล์คอมไพล์, ของคุณ
SCSS ไฟล์จะกลายเป็น CSS ที่น่ารักในไฟล์แยกต่างหาก (ฉันชอบ
นาฬิกาเข็มทิศ - นี้ช่วยให้ทำงานและปรับปรุง CSS ในขณะที่คุณปรับแต่ง
SCSS ไฟล์.)
ถ้าคุณจริงๆไม่ต้องการที่จะรำคาญกับ SASS คุณสามารถเขียนไฟล์ CSS ได้ตามปกติและใส่ลงในธีมของคุณ
.ข้อมูล ไฟล์. แต่เชื่อใจฉัน - การลงทุนเล็ก ๆ ที่จะเรียนรู้มากพอที่จะรวบรวม
_variables.scss จะได้รับเงินคืนเกือบจะทันที
ก่อนที่คุณจะใช้ ZURB Foundation
ZURB Foundation เป็นสิ่งที่ยอดเยี่ยมที่สุด แต่ก็ไม่ใช่กรอบด้านหน้าเท่านั้นที่ถูกรวมเข้ากับ Drupal คุณอาจต้องการพิจารณา Bootstrap กรอบที่คล้ายกันซึ่งมีธีม Drupal สำหรับตอนนี้ฉันใช้ ZURB Foundation ด้วยตัวเอง แต่นั่นเป็นเพราะผลการวิจัยของฉันระบุว่าง่ายกว่าการปรับแต่งเองมากกว่า Bootstrap
นอกจากนี้องค์ประกอบ Joyride เป็นหวานสวย
และไม่ว่าคุณจะใช้ ZURB Foundation, Bootstrap หรือกรอบอื่น ๆ โปรดอ่านเคล็ดลับเหล่านี้เกี่ยวกับการใช้กรอบงานกับ Drupal
