รากฐาน 6 - 10 คุณสมบัติใหม่ที่น่าทึ่ง

นักพัฒนาของเฟรมเวิร์ก Front-End Foundation ไม่เพียง แต่นั่งอยู่บนลอเรลในขณะที่ทีม Bootstrap ทำงานในรุ่นใหญ่ใหม่ที่น่าประทับใจ เมื่อปีที่แล้วพวกเขาได้ไปเที่ยวรอบโลกที่ยอดเยี่ยมเพื่อแบ่งปันความรู้กับผู้ใช้และถามพวกเขาเกี่ยวกับการใช้งานมูลนิธิในการทำงานจริง.

หลังจากกลับไปที่โต๊ะทำงานพวกเขาได้รวบรวมความต้องการและความปรารถนาของผู้ใช้และเริ่มวางแผนการปล่อยเฟรมเวิร์กรุ่นใหม่ที่สำคัญ: มูลนิธิ 6.

มันยังอยู่ภายใต้การพัฒนา แต่แผนมีแนวโน้มมาก คุณสมบัติที่จะมาถึงมุ่งเน้นไปที่ 3 พื้นที่หลัก: ประสิทธิภาพการปรับแต่งและการเข้าถึง. ลองดูที่ 10 ของคุณสมบัติเหล่านี้ตอนนี้.

1. คล่องตัวเวิร์กโฟลว์

จากประสบการณ์ของผู้ใช้ทีมงานมูลนิธิได้พัฒนาสโลแกนใหม่คือ “ต้นแบบการผลิต”, สำหรับมูลนิธิ 6 ซึ่งหมายถึงเวิร์กโฟลว์ใหม่ที่คล่องตัวซึ่งจะช่วยให้นักออกแบบและนักพัฒนา ตรงจากต้นแบบการผลิต.

เป้าหมายของมูลนิธิใหม่ 6 คือการให้กรอบที่ยืดหยุ่นและปรับแต่งได้ง่ายซึ่งทำให้เป็นไปได้ เขียนโค้ดที่สะอาดและมีความหมายตั้งแต่เริ่มต้น. รุ่นปัจจุบัน Foundation 5 ยังอนุญาตให้สร้างต้นแบบอย่างรวดเร็ว แต่เราทำได้ คาดว่าการเพิ่มประสิทธิภาพเวิร์กโฟลว์เพิ่มเติม ในการเปิดตัวที่จะมาถึง.

2. กระบวนการติดตั้งแบบง่ายสำหรับรุ่น Sass

หนึ่งในสิ่งที่ยอดเยี่ยมที่สุดเกี่ยวกับกรอบการทำงานของมูลนิธิคือมันสร้างขึ้นด้วยภาษาสไตล์ชีต Sass ดังนั้นจึงเป็นไปได้ ปรับแต่งกฎสไตล์เริ่มต้นอย่างรวดเร็วตามความต้องการจริงของเรา.

กระบวนการติดตั้ง Sass นั้นค่อนข้างน่ากลัวสำหรับผู้ใช้หลายคนดังนั้นการเปิดตัวรุ่นใหญ่ครั้งใหม่จะเกิดขึ้น รับขั้นตอนการติดตั้งแบบง่ายสำหรับเวอร์ชั่น Sass. ซึ่งหมายความว่าการตั้งค่า Sass จะ ต้องพึ่งพาน้อยลงมาก กว่าก่อน แน่นอนถ้าคุณชอบเวอร์ชันของ vanilla CSS คุณก็สามารถเลือกได้.

3. ใหม่เซ็ตอัพกองซ้อนสำหรับ Maximalists

นอกจากรุ่น Sass ปกติแล้วมูลนิธิ 6 จะมาพร้อมซุป รุ่น Sass ที่จะช่วยให้นักพัฒนามีตัวเลือกการปรับแต่งที่มีประสิทธิภาพ.

ZURB ผู้สร้างมูลนิธิจะเปิดสแต็คการพัฒนาของพวกเขาสำหรับสาธารณะรวมถึงของพวกเขาเอง ตัวสร้างไซต์แบบคงที่, เซิร์ฟเวอร์สดโหลด และ โหลดเทคนิคการเพิ่มประสิทธิภาพภายใน รวมถึงการรวม UnCSS สำหรับการลบสไตล์ที่ไม่ได้ใช้และ UglifyJS สำหรับการบีบอัด JavaScript.

ดังนั้นโดยพื้นฐานเราจะเปิดใช้งานให้ทำงานในสภาพแวดล้อมการพัฒนาเดียวกันกับที่ ZURB ใช้ภายใน.

4. เวลาในการโหลดหน้าเว็บลดลง

ทีมงานมูลนิธิต้องเผชิญกับการวิจารณ์เชิงสร้างสรรค์ที่อ้างว่าในโครงการของมูลนิธิส่วนใหญ่ประมาณ 90% ของรหัส CSS นั้นผิดปกติ สิ่งนี้ไม่เพียงเกิดขึ้นกับมูลนิธิเท่านั้น แต่ยังรวมถึงเฟรมเวิร์ก CSS หลักอื่น ๆ เช่น Bootstrap และ TopCoat เป็นส่วนหนึ่งของการตอบกลับ Zurb จึงตัดสินใจลดขนาดไฟล์ของ CSS เอาท์พุทอย่างมีนัยสำคัญโดยใช้การลดรหัสประมาณ 40-50%.

มันน่าสนใจที่จะทราบว่าพวกเขาพยายามแยกแยะตัวเองจาก Bootstrap โดยระบุว่า "รากฐานไม่ได้เป็นกรอบที่จะมีการกำหนดคลาสโวหารและระยะห่างระหว่างหรือรอบและรัศมี". (สำหรับการอ้างอิงดู Bootstrap 4 ใหม่ยูทิลิตี้คลาสในโพสต์ก่อนหน้าของเรา).

5. รูปแบบฐานทำหน้าที่เป็น Wireframes

อีกส่วนหนึ่งของความพยายามในการปรับปรุงประสิทธิภาพคือ สร้างรูปแบบพื้นฐานที่ทำหน้าที่เป็นโครงลวดแทนการออกแบบขั้นสุดท้าย. สิ่งนี้นำไปสู่ธีมที่เบากว่า แต่ก็มีข้อได้เปรียบที่สำคัญอีกประการหนึ่ง เนื่องจากกฎสไตล์มากขึ้นจะถูกย้ายไปยังแต่ละองค์ประกอบนักพัฒนาจะมีโอกาส ออกแบบสไตล์ของพวกเขาได้ง่ายขึ้น.

หวังว่านี่จะหมายความว่าเว็บไซต์ที่อยู่บนพื้นฐานของมูลนิธิจะ มีลักษณะคล้ายมาตรฐานน้อยกว่า, และนักออกแบบจะมีพื้นที่มากขึ้นเพื่อประสบการณ์ชะล้างด้วย Solut ที่สวยงามและเป็นเอกลักษณ์ไอออนที่จะลบล้างความกังวลล่าสุดเกี่ยวกับเว็บที่ดูน่าเบื่อ.

6. อำนวยความสะดวกในการนำเข้าเลือก

รากฐาน 5 ช่วยให้นักพัฒนาเลือกเฉพาะส่วนประกอบที่ต้องการใช้ มูลนิธิ 6 จะใช้ความพยายามนี้ไปอีกระดับโดย ย้ายคุณลักษณะการนำเข้าแบบเลือกไปยังไฟล์ _settings.scss Sass.

วิธีนี้ _settings.scss จะเป็น ไฟล์กำหนดค่าสากลอย่างแท้จริง, เนื่องจากเราจะไม่สามารถปรับแต่งคุณสมบัติต่าง ๆ เช่นความกว้างของแถวหรือแบบอักษรเริ่มต้นได้ด้วยความช่วยเหลือ แต่ยังง่าย ยกเลิกการเลือกส่วนประกอบที่เราไม่ต้องการ. ถ้าเราทำเช่นนั้นเราสามารถบรรลุการปรับปรุงประสิทธิภาพต่อไป.

7. Leaner และ Cleaner Sass

ในกระบวนการออกแบบทีมของมูลนิธิคิดใหม่ทุกแง่มุมของกรอบงาน เปลี่ยนวิธีที่พวกเขาใช้ภาษาสไตล์ชีตของ Sass. พวกเขาพบว่าในบางกรณีพวกเขาใช้ Sass มากเกินไปจนนำไปสู่ overcomplication ที่ไม่จำเป็นของ CSS output. ด้วยเป้าหมายของรหัสที่มีความเอนเอียงและสะอาดขึ้นในใจพวกเขาได้ปรับโครงสร้าง Sass ของพวกเขาด้วย.

ในมูลนิธิ 6 เราทำได้ คาดว่าจะลดการซ้อนและความเจาะจง, ลดความซับซ้อนของการสืบค้นสื่อ (พวกเขารวมรหัสซ้ำ ๆ ) และ ปรับสัดส่วนส่วนผสมด้านหลัง. หลังหมายถึงว่าจะมีการผสมส่วนประกอบน้อยลงและส่วนที่เหลือจะมีพารามิเตอร์น้อยลงซึ่งจะนำไปสู่รหัสที่ง่ายขึ้นและตรรกะมากขึ้น

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

8. ปรับปรุง Grid Mixins

ในขณะที่ตัดส่วนประสมส่วนผสม 6 จะมาพร้อมกับ Foundation มิกซ์อินกริดที่ได้รับการปรับปรุง ที่จะช่วยให้เรา สร้างกริดที่กำหนดเองมากขึ้น.

Zurb สัญญาว่าเราจะสามารถ สร้างได้อย่างง่ายดายเป็นระบบกริดที่ซับซ้อน ตามที่เราต้องการรวมถึง แถวที่กำหนดเองที่ซับซ้อนมากขึ้น และ ซ้อนซ้อนกริด, และความสามารถในการแปลงคลาสเริ่มต้นเป็นมาร์กอัปความหมาย การปรับปรุงตารางผสมจะทำให้ปัจจุบัน การสร้างตารางที่ใช้งานง่ายยืดหยุ่นและรวดเร็วยิ่งขึ้น.

9. การรวม JavaScript ปลั๊กอินที่กำหนดเองได้อย่างราบรื่น

ปัจจุบันมูลนิธิ 5 มีองค์ประกอบ JavaScript มากมายเช่นกล่องโต้ตอบโมดอลที่ยอดเยี่ยมเคล็ดลับแถบการนำทางที่ติดหนึบกล่องรวมภาพและอื่น ๆ อีกมากมายที่เว็บไซต์ทันสมัยต้องการ แต่การเปิดตัวครั้งสำคัญจะทำให้เราสามารถ เขียนปลั๊กอิน JavaScript ที่กำหนดเองของเรา การใช้ประโยชน์จากแกนกลางของมูลนิธิ มันเป็นก้าวใหญ่ในทั้งสองข้าง ใช้งานง่ายและประสิทธิภาพ.

ในอนาคตเราจะสามารถ เข้าถึงวิธีการเริ่มต้นในตัว, สลับทริกเกอร์ และ จุดพัก, และใช้ประโยชน์จากคุณสมบัติอื่น ๆ ทั้งหมดของจาวาสคริปต์ทั่วโลกของมูลนิธิ.

10. การเข้าถึงอย่างเต็มรูปแบบ

น่าจะเป็นคุณสมบัติที่น่าทึ่งที่สุดของมูลนิธิใหม่ 6 คือสามารถเข้าถึงได้อย่างเต็มที่ ข้อมูลโค้ดและส่วนประกอบทุกชิ้นจะมาพร้อมกับคุณสมบัติ WAI-ARIA และบทบาทสำคัญ ยิ่งไปกว่านั้นนักพัฒนาจะต้องเป็น ที่ให้มาพร้อมกับคู่มือผู้ใช้ เกี่ยวกับ วิธีใช้มาตรฐานเว็บ a11y.

ดังนั้นหากเราต้องการให้เว็บไซต์ของเราเข้าถึงได้โดยสมบูรณ์เราไม่จำเป็นต้องทำอะไรนอกจากการสร้างการออกแบบของเรากับมูลนิธิ 6 โปรดทราบว่าเรายังต้อง เพิ่มกฎ ARIA ที่เหมาะสมให้กับหน้า HTML ของเราด้วยตัวเราเอง, แม้ว่าคู่มือผู้ใช้ a11y ที่จะเกิดขึ้นของ Zurb จะช่วยให้กระบวนการเรียนรู้ง่ายขึ้น.