ใช้ชุดรูปแบบ ZURB Foundation for Drupal

รับพลังของ ZURB Foundation Framework ในธีม Drupal

ก่อนที่จะมี Twitter Bootstrap มี (และเป็น) ZURB Foundation ซึ่งเป็นเฟรมเวิร์คที่ช่วยให้คุณสามารถเพิ่มปุ่มสวย ๆ บล็อกกริดแถบความคืบหน้าตารางราคาและอื่น ๆ อีกมากมายโดยมีคลาส CSS ที่วางไว้อย่างดี ด้วยธีม ZURB Foundation สำหรับ Drupal คุณสามารถปลดปล่อยสิ่งนี้ได้ทั้งหมดบนไซต์ Drupal ด้วยความสะดวกสบายที่ร้ายแรง

ZURB Foundation Framework คืออะไร?

กรอบแนวคิด ZURB คือชุดของโค้ด CSS และ JavaScript สำหรับกลุ่มเนื้อหาที่คุณอาจต้องการบนเว็บไซต์ของคุณ ไม่เพียงแค่ลูกกวาดที่สามารถคลิกได้เช่นปุ่มดังกล่าวเท่านั้น แต่ยังมีพลัง ตอบสนองที่ ยอดเยี่ยมอย่างแท้จริง

คุณใช้คุณลักษณะเหล่านี้ได้โดยการเพิ่มชั้น CSS พิเศษ ตัวอย่างเช่น

นี่คือปุ่ม

และนี่คือ ปุ่มเล็ก ๆ

กรอบ ZURB Foundation ถูกแยกออกจาก Drupal โดยสิ้นเชิง ผู้คนใช้ WordPress, Joomla และแม้กระทั่งเว็บไซต์ HTML แบบสแตติก

ZURB Foundation Drupal Theme คืออะไร?

ธีม Drupal ZURB Foundation ช่วยให้คุณสามารถปลดปล่อยพลัง ZURBish ทั้งหมดนี้ได้ด้วยการดาวน์โหลดและเปิดใช้ชุดรูปแบบ (และอ่านเอกสารประกอบและทำตามขั้นตอนเพิ่มเติมบางอย่างแน่นอน)

ตัวอย่างเช่นมูลนิธิ ZURB อาศัยไลบรารี jQuery Javascript ดังนั้นคุณอาจต้องติดตั้ง jQuery Update ตรวจสอบว่าคุณใช้โมดูลอื่น ๆ ที่ใช้ jQuery หรือไม่ ถ้าคุณใช้รุ่นใหม่เกินไปของ jQuery โมดูลเหล่านี้อาจหยุดทำงาน

นอกจากนี้คุณอาจต้องการใช้ชุดรูปแบบนี้เป็นชุดรูปแบบพื้นฐานสำหรับธีมที่กำหนดเองของคุณเอง การปรับแต่งคือที่มูลนิธิ ZURB ส่องจริงๆ

คุณต้องการชุดรูปแบบนี้ในการใช้ ZURB Foundation ใน Drupal หรือไม่?

คุณไม่ จำเป็นต้องใช้ ชุดรูปแบบ ZURB Foundation ที่ง่ายที่สุดชุดรูปแบบนี้เพียงแค่เพิ่ม ZURB Foundation CSS และ Javascript ลงในไซต์ของคุณและคุณสามารถดำเนินการได้ด้วยตนเอง

แต่ชุดรูปแบบนี้ทำให้ง่ายขึ้นและรวมถึงการผสานรวมเพิ่มเติมกับ Drupal

นอกจากนี้คุณสามารถเพิ่มโมดูลเพิ่มเติมที่มีขนาดเล็กลงสำหรับการรวมระบบเพิ่มเติมได้ ตัวอย่างเช่นโมดูล ZURB Orbit ช่วยให้คุณสามารถสร้างสไลด์โชว์ Orbit พร้อมกับฟิลด์ภาพ โมดูลการหักบัญชี ZURB ช่วยให้คุณสามารถสร้างไลเบรทแบบตอบสนองได้ด้วยภาพมีเดีย

หมายเหตุ: ฉันยังไม่เคยใช้โมดูลเล็ก ๆ เหล่านี้มาก่อนดังนั้นพวกเขาอาจจะเต็มไปด้วยอันตราย ตั้งแต่การเขียนนี้การหักล้าง ZURB ต้องใช้ Media-2.x-dev ซึ่งอาจเป็นการอัปเกรดที่เป็นอันตรายหากคุณกำลังใช้ Media 1.x อยู่ และข้อกำหนดสำหรับโมดูลสำหรับพัฒนาเวอร์ชันควรให้หยุดชั่วคราวหนึ่งครั้ง ยังคงเหล่านี้และโมดูล ZURB อื่น ๆ มีมูลค่าดู

เลือกรุ่นของ ZURB Foundation ที่จะใช้

ก่อนที่คุณจะดาวน์โหลดธีม ZURB Foundation โปรดตรวจสอบว่าคุณควรใช้เวอร์ชันใด มีกรอบหลัก ZURB Foundation ที่สำคัญต่างกันและ หมายเลขเวอร์ชันหลัก สำหรับธีมสอดคล้องกับกรอบการทำงานที่ใช้ร่วมกัน ดังนั้นชุดรูปแบบ 7.x- 3 .x ของชุดรูปแบบทำงานกับ Foundation 3 รุ่น 7.x- 4 .x ทำงานร่วมกับ Foundation 4 และรุ่น 7.x- 5 .x ทำงานร่วมกับ Foundation 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 ของคุณ

ตัวอย่างเช่นมูลนิธิ 5 มีทั้งชั้นเรียนขนาดกลางสำหรับหน้าจอขนาดกลาง ในมูลนิธิ 4 เหล่านี้จะล้มเหลวลึกลับเว้นแต่คุณจะทำตามขั้นตอนพิเศษ

ใช้ SASS, เข็มทิศและ & # 34; _variables.scss & # 34 ;!

หากคุณต้องการปรับแต่ง 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) เมื่อคุณเรียกใช้ compass compile ไฟล์ scss ของคุณจะกลายเป็น CSS ที่น่ารักในไฟล์แยกต่างหาก (ฉันชอบนาฬิกาเข็มทิศ - นี้ช่วยให้การทำงานและการปรับปรุง CSS เป็นคุณปรับแต่งไฟล์ scss.)

ถ้าคุณจริงๆไม่ต้องกังวลกับ SASS คุณสามารถเขียนไฟล์ CSS ได้ตามปกติและใส่ลงในไฟล์. infif ของธีมของคุณ แต่เชื่อใจฉัน - การลงทุนในเวลาอันสั้นที่จะเรียนรู้มากพอที่จะรวบรวม _variables.scss จะได้รับเงินคืนเกือบจะทันที

ก่อนที่คุณจะใช้ ZURB Foundation

ZURB Foundation เป็นสิ่งที่ยอดเยี่ยมที่สุด แต่ก็ไม่ใช่กรอบด้านหน้าเท่านั้นที่ถูกรวมเข้ากับ Drupal คุณอาจต้องการพิจารณา Bootstrap กรอบที่คล้ายกันซึ่งมีธีม Drupal สำหรับตอนนี้ฉันใช้ ZURB Foundation ด้วยตัวเอง แต่นั่นเป็นเพราะผลการวิจัยของฉันระบุว่าง่ายกว่าการปรับแต่งเองมากกว่า Bootstrap

นอกจากนี้องค์ประกอบ Joyride เป็นหวานสวย

และไม่ว่าคุณจะใช้ ZURB Foundation, Bootstrap หรือกรอบอื่น ๆ โปรดอ่าน เคล็ดลับ เหล่านี้ เกี่ยวกับการใช้กรอบงานกับ Drupal