สร้างเว็บไซต์อย่างรวดเร็วด้วย Foundation 5 [คำแนะนำ]
การใช้เฟรมเวิร์กส่วนหน้าสามารถปรับปรุงเวิร์กโฟลว์การออกแบบเว็บไซต์ของคุณได้หลายวิธี มันสามารถ ช่วยให้คุณปฏิบัติตามหลักการออกแบบที่ทันสมัย เช่นวิธีการใช้อุปกรณ์พกพาครั้งแรกมาร์กอัปความหมายและการออกแบบที่ตอบสนองได้ คุณสามารถ ใช้ประโยชน์จากองค์ประกอบ CSS และ JavaScript ที่พร้อมใช้งานมากมาย และอย่างมีนัยสำคัญ เร่งกระบวนการพัฒนาของคุณ, ปล่อยเวลามากขึ้นเพื่อมุ่งเน้นไปที่การออกแบบด้วยภาพและประสบการณ์ผู้ใช้.
Zurb Foundation 5 เป็นหนึ่งในเฟรมเวิร์กส่วนหน้าที่ทรงพลังที่สุดในตลาด มันสร้างขึ้นด้วยเหตุผลใช้งานง่ายและสมบูรณ์ฟรี มันช่วยให้คุณใช้ประโยชน์จาก ตาราง CSS ที่ยืดหยุ่น ที่ อำนวยความสะดวกในการสร้างเค้าโครงที่สะอาดและใช้งานง่าย. เฟรมเวิร์กของมูลนิธิได้รับการทดสอบอย่างหนักดังนั้นจึงดูแลความเข้ากันได้ข้ามเบราว์เซอร์และข้ามอุปกรณ์.
ในบทช่วยสอนนี้ฉันจะแสดงให้คุณ คุณจะสร้างเว็บไซต์ได้อย่างรวดเร็วด้วย Zurb Foundation 5 ได้อย่างไร. คุณสามารถดูผลสุดท้ายในหน้าตัวอย่าง.
ฉันจะสร้างเลย์เอาต์ของเว็บไซต์งานของการเพิ่มองค์ประกอบการออกแบบที่ละเอียดอ่อนกำลังรอคุณอยู่ เว็บไซต์ที่เราจะสร้างร่วมกันในบทช่วยสอนนี้จะทำให้ความฝันของนักออกแบบ UX ที่ทันสมัย: มันจะตอบสนองมือถือเป็นครั้งแรกที่ใช้งานง่ายและความหมาย.
เนื่องจากความยาวของคู่มือนี้นี่เป็นทางลัดเพื่อไปยังส่วนที่คุณต้องการได้อย่างรวดเร็ว:
- กำลังดาวน์โหลด Foundation 5
- ทำความเข้าใจกับกริด
- เมื่อใดควรใช้คลาสขนาดใหญ่ -N, Medium-N และ Small-N
- การเพิ่มแถบเมนูด้านบน
- การเติมส่วนหลัก
- การเพิ่มแผงสำหรับโพสต์ยอดนิยม
- เพิ่ม 3 กระทู้เพิ่มเติมไปที่แผงยอดนิยม
- พริตตี้ CSS
- การเพิ่มเนื้อหาเพิ่มเติมบางส่วน
- เพิ่มการแบ่งหน้า
- การเติมแถบข้าง
- แบบฟอร์มจดหมายข่าว
- Flex วิดีโอ
- เมนูด้านข้าง
- ข้อสรุป
1. กำลังดาวน์โหลด Foundation 5
คุณสามารถดาวน์โหลด Foundation 5 ใน 4 รูปแบบที่แตกต่างกัน:
- รหัสที่สมบูรณ์
- รุ่นที่เบากว่าด้วยรหัสที่จำเป็นเท่านั้น
- รุ่นที่กำหนดเองซึ่งคุณสามารถปรับแต่งสิ่งที่คุณต้องการและสิ่งที่ไม่
- เวอร์ชัน Sass หากคุณต้องการตั้งค่าตัวแปรและมิกซ์อินใน SCSS.
ในบทช่วยสอนนี้ฉันจะเลือกรหัสที่สมบูรณ์แบบด้วยวานิลลา CSS แต่แน่นอนคุณสามารถเลือกรุ่นอื่น ๆ ได้หากคุณต้องการปรับปรุงเว็บไซต์ของคุณและใช้เฉพาะสิ่งที่คุณต้องการจริงๆ.
หลังจากคุณดาวน์โหลดและคลายไฟล์ zip แล้วให้เปิดไฟล์ index.html ในเบราว์เซอร์ของคุณแล้วคุณจะเห็นดังนี้:
ใช่ devs รวมลิงค์ที่มีประโยชน์ในไฟล์ดัชนี คุณสามารถปล่อยให้เป็นเช่นนี้และสร้างไฟล์ใหม่สำหรับต้นแบบของคุณด้วยชื่อ home.html หรือสิ่งที่คล้ายกัน แต่คุณไม่จำเป็นต้องเก็บไว้เพราะคุณสามารถเข้าถึงเอกสารพื้นฐานได้ทุกเมื่อที่คุณต้องการ.
เปิดไฟล์ index.html ในโปรแกรมแก้ไขรหัสที่คุณโปรดปรานและ ลบทุกอย่างภายใน แต่ก่อนปิด กฎสไตล์ที่เราเพิ่มเข้าไป app.css ไฟล์เพื่อสวยต้นแบบของเราคือ: ในฐานะที่เป็นมูลนิธิ 5 ใช้หน่วยที่เกี่ยวข้อง, เราจำเป็นต้องใช้ “em”-s หรือ “REM”-s แทนพิกเซล เพื่อให้ทันกับกฎ (คุณสามารถอ่านเกี่ยวกับหน่วย CSS: Pixels vs ems vs% ได้ที่นี่) ฉันใช้ส่วนขยาย Firebug ของ Firefox เพื่อพิจารณาว่าฉันจะต้องแทนที่กฎ CSS ของ Foundation 5 ได้อย่างไรคุณสามารถใช้ส่วนขยายของเบราว์เซอร์พัฒนาเว็บอื่น ๆ ได้ถ้าต้องการ. ที่นี่ในตัวอย่าง CSS สั้น ๆ นี้เราต้องแทนที่ CSS เริ่มต้นของมูลนิธิเพียงครั้งเดียวที่กฎสุดท้าย (.row .row.p นิยม-main) นี่คือหน้าตาของตัวอย่างตอนนี้: การใช้กฎเดียวกันกับก่อนหน้านี้เราจะเพิ่มเนื้อหาเพิ่มเติมลงในส่วนหลักของหน้า เนื้อหาที่เราจะเพิ่มตอนนี้จะเป็น โพสต์ล่าสุด มีภาพขนาดเล็ก. Foundation 5 มีรูปแบบภาพขนาดย่อที่เตรียมไว้ล่วงหน้าอย่างยอดเยี่ยมซึ่งเราจะใช้ในขั้นตอนนี้ รูปขนาดย่อของมูลนิธิใช้ คลาส CSS ที่สร้างไว้ล่วงหน้าที่เรียกว่า “TH” ที่เราต้องเพิ่มให้กับภาพที่เราต้องการแสดงเป็นภาพขนาดเล็กในแบบที่คุณสามารถดูได้ในตัวอย่างโค้ดด้านล่าง. สำหรับแต่ละโพสต์ล่าสุดเราเพิ่มแถวใหม่ด้านล่างแผงยอดนิยมของเรา คลาส CSS ที่กำหนดเองที่เรียกว่า “โพสต์ล่าสุด”. ขนาดแท็บเล็ตและเดสก์ท็อปเราจะแสดงภาพย่อขนาดเล็กโดยใช้คลาสรูปย่อของมูลนิธิทางด้านซ้ายและชื่อเรื่องและคำอธิบายสั้น ๆ ทางด้านขวา บนมือถือหัวเรื่องและคำอธิบายจะอยู่ใต้รูปขนาดย่อ. ตอนนี้ฉันใช้ “คอลัมน์ขนาดกลาง 3” และ “ขนาดกลาง -9 คอลัมน์” ชั้นเรียนที่จะทำให้พวกเขาแบ่งหน้าจอเป็น 1: 3, 25% สำหรับภาพและ 75% สำหรับข้อความขึ้นจากขนาดกลาง. ใส่ข้อมูลโค้ดต่อไปนี้ใต้แผงยอดนิยมสามครั้ง (สำหรับสามกระทู้ล่าสุด) ที่นี่ฉันเพิ่งรวมรหัสของหนึ่งแถวการโพสต์ล่าสุดเนื่องจากพวกเขาทั้งหมดใช้มาร์กอัป HTML เดียวกันเนื้อหาแตกต่างกันเท่านั้น. เนื้อหาของโพสต์ล่าสุด ... ไฟล์ CSS ที่กำหนดเองของเราสร้างขึ้นในขั้นตอนที่ 4.3, app.css ยังได้รับกฎสไตล์ใหม่บางอย่างเพื่อให้หน้าตาของการสาธิตเป็นระเบียบเรียบร้อย. บันทึก: หากคุณต้องการเพิ่ม CSS ที่กำหนดเองของคุณเองลงใน Foundation อย่าลืมตรวจสอบด้วยเครื่องมือพัฒนาเว็บซึ่งคุณจะต้องแทนที่กฎเริ่มต้น. ในตัวอย่าง CSS ด้านล่างเราจำเป็นต้องแทนที่มันในกฎข้อแรก (.row .row.latest-post) ในกฎข้อที่สองก็เพียงพอที่จะใช้ตัวเลือกที่กำหนดเองของเราเอง (.latest-post h4). ต้นแบบของเราตอนนี้มีลักษณะเช่นนี้: ในขั้นตอนนี้เราจะเพิ่มเลขหน้าเจ๋ง ๆ ใต้โพสต์ล่าสุด มูลนิธิ 5 ช่วยให้เราได้รับความช่วยเหลือจากคลาสการให้เลขหน้าที่สะดวกและพร้อมใช้งาน เราใช้รหัสเดียวกันในขั้นตอนนี้ที่คุณสามารถหาได้ใน “สูง” ส่วนภายในเอกสารการแบ่งหน้า. นี่คือกระทู้ล่าสุดที่มีส่วนการแบ่งหน้าใหม่ล่าสุด: ตอนนี้เราพร้อมแล้วกับเนื้อหาหลักของเว็บไซต์ตัวอย่างของเราถึงเวลาที่จะเติมแถบด้านข้างขวา แถบด้านข้างขวาจะลื่นด้านล่างเนื้อหาหลักในขนาดมือถือและแท็บเล็ต. คุณต้องแทรกข้อมูลโค้ดทั้งหมดในส่วนนี้ภายใน แถบด้านข้างซ้ายจะมีฟอร์มสมัครสมาชิกจดหมายข่าว (1), วิดีโอล่าสุด (2) และเมนูแถบด้านข้างสไตล์หีบเพลงภายใต้ชื่อเล่น “ตำราของเรา” (3). ในตอนท้ายของขั้นตอนนี้เราจะพร้อมกับตัวอย่างของเราที่จะมีลักษณะเช่นนี้: ในการสร้างแบบฟอร์มในมูลนิธิ 5 คุณไม่ต้องทำอะไรเลยเพียงวางกริดภายใน a แท็ก HTML. หากคุณดูข้อมูลโค้ดด้านล่างคุณจะเห็นว่าเราใส่แบบฟอร์มในแถวที่เราตั้งตัวเลือก CSS ที่แตกต่างกันสำหรับ 3 กริดทั้งหมด: “ขนาดเล็ก 12”, “กลาง 9”, และ “ขนาดใหญ่ 12”. เราเลือกวิธีนี้เพราะแบบฟอร์มจดหมายข่าวที่กว้าง 100% ดูเท่ห์บนขนาดมือถือ แต่มันเจอะไม่น่าเชื่อขนาดเท่าแท็บเล็ต มาก กว้าง. โชคดีที่มูลนิธิ 5 ให้เราใช้ “แถวไม่สมบูรณ์”: เราแค่ต้องเพิ่ม “ปลาย” class เป็น CSS class definition ของคอลัมน์ที่ไม่สมบูรณ์. ดังนั้นนี่คือสิ่งที่จะเกิดขึ้นที่นี่: บนขนาดมือถือแถบด้านข้างจะแสดงด้านล่างเนื้อหาหลักด้วยแบบฟอร์มลงทะเบียนจดหมายข่าวที่ครอบคลุมทั้งหน้าจอ. ขนาดกลางแถบด้านข้างจะยังคงอยู่ภายใต้เนื้อหาหลัก แต่แบบฟอร์มจดหมายข่าวจะครอบคลุมถึง 75% ของหน้าจอและ 25% ที่เหลือจะว่างเปล่า. บนเดสก์ท็อปขนาดแถบด้านข้างจะอยู่ถัดจากเนื้อหาหลักและแบบฟอร์มจดหมายข่าวจะครอบคลุมความกว้างทั้งหมดของแถบด้านข้างอีกครั้ง. ดูเอกสารกริดเพื่ออ่านเพิ่มเติมเกี่ยวกับแถวที่ไม่สมบูรณ์. ตอนนี้ลองดูข้างใน header margin-bottom: 2em; .p4 เพิ่มเติมยอดนิยม ขนาดตัวอักษร: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 การเพิ่มเนื้อหาเพิ่มเติม
ชื่อโพสต์ล่าสุด
.แถว. row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; ขนาดตัวอักษร: 1.125em;
4.5 การเพิ่มการแบ่งหน้า
5. การเติมแถบข้าง
5.1 แบบฟอร์มจดหมายข่าว
ลงทะเบียนเพื่อรับจดหมายข่าวของเรา
ฟอร์มพื้นฐานมีตัวเลือกเลย์เอาต์อื่น ๆ อีกมากมายเช่น Prefix Label, Prefix Radius Label, Postfix Button และ Postfix Label เราเลือกตัวเลือก Postfix Button ที่นี่เนื่องจากเป็นมิตรกับผู้ใช้มากขึ้น: ผู้ใช้สามารถคลิกที่มันและส่งแบบฟอร์มในครั้งเดียว.
ภายในฟอร์มเราจะเพิ่มแถวที่ซ้อนกันใหม่ที่แบ่งหน้าจอเป็น 2: 1 การป้อนข้อความจะได้รับ 8 คอลัมน์และปุ่ม postfix จะได้รับ 4 เนื่องจากเราต้องการให้รูปแบบนี้แม้บนหน้าจอมือถือเราจะตั้งค่า “คอลัมน์ขนาดเล็ก -8” และ “คอลัมน์ขนาดเล็ก 4” CSS-selectors ที่นี่, Small Grid เป็นขนาดที่เล็กที่สุดที่เราต้องการใช้มาร์กอัปนี้.
คุณสามารถเห็นสิ่งใหม่ในโค้ด HTML ด้านบนซึ่งก็คือ “แถวล่มสลาย” ชั้น นี่คือสไตล์ในตัวของ Foundation 5 โดยค่าเริ่มต้นจะมีช่องว่างระหว่างสองคอลัมน์ติดกัน แต่ ถ้าเราเพิ่ม “ล่มสลาย” ชั้นเรียนของเราแถวรางน้ำจะหายไป. เราทำเช่นนี้เพราะเราต้องการให้ปุ่มอยู่ติดกับการป้อนข้อความโดยไม่มีช่องว่างระหว่างปุ่ม.
ตอนนี้ได้เวลาแทรกข้อมูลโค้ดนี้ลงใน
5.2 Flex Video
ด้านล่างของส่วนจดหมายข่าวเราจะเพิ่มสูตรวิดีโอรายวันในแถบด้านข้างของเรา มูลนิธิ 5 ช่วยเรา ทำวิดีโอแบบฝังเพื่อตอบสนองและบังคับให้ปรับขนาดโดยอัตโนมัติ พร้อมคุณสมบัติ Flex Video.
วิดีโอ Flex ใช้ในตัว “ดิ้นวิดีโอ” คลาส CSS เราสร้างแถวใหม่สำหรับส่วนแถบสูตรวิดีโอรายวันและวางคอลัมน์กว้างหนึ่งคอลัมน์ในคอลัมน์นั้น “small-12 medium-9 large-12 column สิ้นสุด” ตัวเลือก CSS ด้วยเหตุผลเดียวกันกับที่เราใช้แถวที่ไม่สมบูรณ์ใน Medium Grid ในขั้นตอนก่อนหน้า.
นี่คือรหัสที่คุณต้องวางใต้ส่วนของจดหมายข่าว คุณสามารถใช้วิดีโอใดก็ได้จาก Youtube, Vimeo และอื่น ๆ.
สูตรวิดีโอประจำวัน
5.3 เมนูแถบด้านข้าง
สำหรับเมนูด้านข้างเราจะใช้คุณสมบัติการหีบเพลงของมูลนิธิ 5 ข้อตกลงเป็นองค์ประกอบของเว็บที่ขยายและยุบเนื้อหาออกเป็นส่วนตรรกะ.
บนเว็บไซต์สาธิตของเราส่วนที่เป็นตรรกะเหล่านี้มี 3 กลุ่มอาหารที่แตกต่างกัน (อาหารจานหลัก, กับข้าว, ของหวาน) และแต่ละกลุ่มมีกลุ่มที่เล็กกว่าเช่น “สัตว์ปีก”, “เนื้อหมู”, “เนื้อวัว”, “มังสวิรัติ”.
เราวาง Accordion แถบด้านข้างทั้งหมดไว้ในคอลัมน์กว้างเดียวโดยใช้ตรรกะเดียวกันกับในขั้นตอน 5.1 และ 5.2 ก่อนหน้านี้ เราใส่หีบเพลงไว้ข้างในเป็นรายการที่ไม่ได้เรียงลำดับด้วยคลาส CSS ที่มีอยู่แล้วภายในเช่น “หีบเพลง” และ “หีบเพลงนำทาง”.
เนื่องจาก Foundation Accordions ทำงานกับ JavaScript คุณสามารถกำหนดลักษณะการทำงานได้ด้วยความช่วยเหลือของตัวแปร JavaScript ที่สร้างไว้ล่วงหน้าหากคุณต้องการ หากต้องการทำเช่นนั้นดูที่ “การกำหนดค่า JavaScript เสริม” ส่วนใน Accordion Docs ข้อมูลโค้ดต่อไปนี้อยู่ใต้ส่วนของ Flex Video ในไฟล์ index.html.
ข้อสรุป
ตอนนี้เราพร้อมแล้วกับเว็บไซต์ตัวอย่างของเรามาดูกันว่าคุณสามารถทำอะไรได้บ้างกับ Foundation 5 องค์ประกอบที่เราใช้ในการสาธิตนี้เป็นเพียงชุดเล็ก ๆ ของคุณสมบัติของกรอบงานพื้นฐาน มีสิ่งอื่น ๆ อีกมากมายที่คุณสามารถใช้ในการออกแบบของคุณเช่นไอคอนบาร์ที่ปรับแต่งได้, เกล็ดขนมปัง, กล่องไฟ, แถบเลื่อนช่วง, การตรวจสอบความถูกต้องของฟอร์มและอื่น ๆ อีกมากมาย เอกสารนั้นเขียนได้ค่อนข้างดีและพวกเขาช่วยนักพัฒนาด้วยตัวอย่างโค้ดจำนวนมาก.
หากคุณคุ้นเคยกับ Sass คุณจะมีตัวเลือกมากขึ้นเนื่องจากแต่ละส่วนในเอกสารอธิบายถึงวิธีการสร้างมิกซ์อินของคุณเองและตัวแปร Sass ใดที่คุณสามารถใช้กำหนดไซต์ของคุณเอง ก่อนที่คุณจะเริ่มออกแบบหน้าเว็บของคุณอย่าลืมตรวจสอบความเข้ากันได้ของเฟรมเวิร์กของมูลนิธิเพื่อให้แน่ใจว่าใช้ได้กับเบราว์เซอร์ทั้งหมดที่คุณต้องการสร้าง.
- ดูการสาธิต
- แหล่งดาวน์โหลด
