20 กรอบ Front-End ที่ดีที่สุดสำหรับ Bootstrap Alternative

• 2019

Frameworks เป็นหนึ่งในเครื่องมือพัฒนา front-end ที่มีประโยชน์สำหรับการพัฒนาที่รวดเร็วและดีขึ้น ด้วยเฟรมเวิร์กคุณสามารถสร้างเว็บไซต์ที่มี โครงสร้างที่ดีบำรุงรักษาและปรับระดับ ได้ นอกจากนี้ยังช่วยให้คุณ ประหยัดเวลาได้ มากเนื่องจากมีองค์ประกอบที่พร้อมใช้งานมากมายที่คุณสามารถใช้ได้

ทุกวันนี้จำนวนของเฟรมเวิร์กเพิ่มขึ้นอย่างมากและอย่างที่คุณอาจทราบ Bootstrap จาก Twitter นั้นอยู่ในอันดับสูงสุด เพื่อช่วยคุณเลือกเฟรมเวิร์กที่เหมาะสมที่สุดเราได้จัดทำ เฟรมเวิร์กที่ดีที่สุดกว่า 21+ รายการสำหรับ ทางเลือก Bootstrap พวกเขามีคุณสมบัติที่เป็นเอกลักษณ์และล้อเล่นที่แตกต่างกัน เช็คเอาท์!

1. บริสุทธิ์

หากคุณวางแผนที่จะสร้างเว็บแอปที่ใช้งานได้ทั้งบนเดสก์ท็อปและมือถือคุณควรพิจารณาใช้ Pure จาก Yahoo Pure มีประสิทธิภาพที่ดีกว่ามากเมื่อพูดถึงอุปกรณ์มือถือกว่า Bootstrap ตามที่ชื่อแนะนำ Pure มาในฐานะเฟรมเวิร์ก CSS เท่านั้น สร้างบน Normalize.css Pure มีขนาดไฟล์เล็กมากเพียง 4.5KB (ย่อและ gzip)

2. UI Kit

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

3. การตัดต่อ JS

MontageJS เป็นกรอบโอเพนซอร์ซโอเพนซอร์ซที่ให้บริการฟรีสำหรับ การสร้างแอพพลิเคชั่นหน้าเดียว (SPA) ที่ ทันสมัย โดยการใช้พื้นฐานของแอพพลิเคชั่นเฟรมเวิร์กที่ผ่านการพิสูจน์แล้วจำนวนมาก Montage จะทำให้กระบวนการพัฒนาของคุณง่ายขึ้นในขณะที่โค้ด HTML ที่แสดงออกยังคงสามารถบำรุงรักษาได้ ด้วย MontageJS คุณสามารถซิงโครไนซ์อัพเดต DOM เพื่อประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้นสร้างและขยายส่วนประกอบ UI ซึ่งสามารถนำมาใช้ซ้ำและอีกมากมาย

4. รากฐาน

Groundwork เป็นเฟรมเวิร์กเอนด์ที่มีน้ำหนักเบายืดหยุ่นและตอบสนองที่สร้างและดูแลโดย Gary Hepting สร้างขึ้นบน Sass และ Compass Groundwork เสนอระบบกริดที่ยอดเยี่ยมซึ่ง มีความยืดหยุ่นลื่นไหลและทำรัง ได้ ด้วยระบบกริดของมันคุณสามารถสร้างเลย์เอาต์ของเลย์เอาต์ที่เหมาะกับหน้าจอทุกขนาด

5. Gumby

Gumby เป็นกรอบที่ยืดหยุ่นและตอบสนองสร้างขึ้นด้วยพลังของ Sass สำหรับการพัฒนาเว็บที่รวดเร็วขึ้น เครื่องมือปรับแต่งมันช่วยให้คุณปรับแต่งได้อย่างง่ายดายและปรับแต่งการออกแบบชุด UI ทั้งหมดเพื่อตอบสนองความต้องการที่ดีที่สุดของคุณ Gumby มีกริดหลายประเภทที่มีรูปแบบคอลัมน์แตกต่างกัน แต่โดยค่าเริ่มต้น Gumby มาพร้อมกับระบบกริด 960

6. หม้อไอน้ำ HTML5

เช่นเดียวกับชื่อของมัน HTML5 Boilerplate ให้เทมเพลตพร้อม HTML5 ที่ได้รับการปรับปรุงเพื่อให้ตรงตามมาตรฐานสูงสุดของคุณลักษณะใหม่ของ HTML ด้วยการใช้เทมเพลตนี้คุณสามารถสร้าง เว็บไซต์ที่รวดเร็วมีประสิทธิภาพและตอบสนองได้ ซึ่งสามารถปรับให้เข้ากับเบราว์เซอร์ประเภทใดก็ได้แม้แต่ของเก่าเช่น Internet Explorer

7. โครงกระดูก

Skeleton เป็นเฟรมเวิร์ค CSS น้ำหนักเบาที่ใช้ระบบกริด 12 คอลัมน์ ซึ่งแตกต่างจาก Bootstrap หรือมูลนิธิ Skeleton ให้คุณมีองค์ประกอบพื้นฐานบางอย่างเช่นปุ่มรายการตารางแบบฟอร์มที่มีจุดมุ่งหมายเพื่อเริ่มกระบวนการพัฒนาของคุณ

8. Bootflat

Bootflat เป็นเฟรมเวิร์ก CSS แบบโอเพ่นซอร์สที่สร้างขึ้นด้วย Bootstrap 3 อันทรงพลัง Bootflat ถูกออกแบบมาเพื่อสร้างการออกแบบเว็บแบนที่น่าทึ่งด้วยวิธีที่ เร็วขึ้นง่ายขึ้นและซ้ำซ้อนน้อยลง ดังนั้น UI Kit จึงมาพร้อมกับแพ็คอินเทอร์เฟซผู้ใช้ PSD ที่สวยงามที่คุณสามารถใช้กับเว็บไซต์ของคุณ, iOS หรือ Android

9. ชาวเอสกิโม

Inuit.css เป็นอีกหนึ่ง CSS famework ที่ยอดเยี่ยมที่มุ่งเน้นวิธีการแบบ Mobile First และออกแบบให้คุณ ในขณะที่เฟรมเวิร์กอื่น ๆ มาพร้อมกับ CSS ที่ออกแบบมาเอง แต่ Inuit.css ก็ทำไม่ได้ Inuit.css ทำงานในลักษณะ OOCSS (Object Oriented CSS) ซึ่งเป็นวิธีการเขียน CSS ที่ใช้ซ้ำได้อย่างรวดเร็วปรับขนาดได้และบำรุงรักษาได้

10. 960 ระบบกริด

960 Grid System เป็นเฟรมเวิร์กส่วนหน้าที่สามารถทำให้ขั้นตอนการพัฒนาเว็บของคุณคล่องตัวขึ้นโดยอ้างอิงจากคอนเทนเนอร์ขนาด 960px จากนั้นคอนเทนเนอร์สามารถแบ่งเป็น 12, 16 หรือ 24 คอลัมน์เพื่อให้จัดวางเนื้อหาได้ง่ายขึ้น

11. เป็นรูปเป็นร่างขึ้น

สร้างขึ้นตามหลักการออกแบบวัสดุของ Google Materialize มาเป็นเฟรมเวิร์กเอนด์ตอบสนองที่ทันสมัย เฟรมเวิร์กนี้เหมาะมากสำหรับผู้ที่ต้องการนำรูปลักษณ์และการออกแบบของวัสดุไปใช้ในเว็บไซต์ของพวกเขาโดยไม่มีความซับซ้อนใด ๆ มันมี การออกแบบการ์ด, เอนิเมชั่นเอฟเฟกต์กระเพื่อม, Sass mixin, ลากเมนูมือถือ และอื่น ๆ อีกมากมาย

12. Jeet

Jeet เป็นระบบกริดที่รวดเร็วยืดหยุ่นและก้าวหน้าที่สุดที่มีอยู่ในปัจจุบัน Jeet ช่วยให้คุณสร้างกริดได้ทันทีในลักษณะที่ใช้งานง่ายสะอาดและเป็นระเบียบ รองรับเบราว์เซอร์ที่ทันสมัยและเก่าเกือบทั้งหมด

13. ซูซี่

Susy เป็นระบบกริดอัตโนมัติที่สามารถช่วยคุณสร้างเค้าโครงเว็บในคอลัมน์ประเภทใดก็ได้ที่คุณต้องการ มันให้อิสระและความยืดหยุ่นในการสร้างการออกแบบที่คุณเลือก สามารถจัดการได้ว่าการออกแบบของคุณมีคอลัมน์ 5, 12, 24, 48 หรือไม่เท่ากัน

14. Metro UI

Metro UI เป็นเฟรมเวิร์กที่ใช้ 12 กริดซึ่งได้รับแรงบันดาลใจจากอินเตอร์เฟสสไตล์ Windows 8 Metro มันใช้งานง่ายมากและมีสไตล์พร้อมองค์ประกอบทั่วไปมากมายเช่นปุ่มไทล์เมนูตัวเลือกวันที่และอื่น ๆ อีกมากมาย นอกจากนี้ยังมีเทมเพลตพอร์ทัลข่าวเพื่อให้คุณเริ่มต้นได้อย่างง่ายดาย

15. KickStart HTML

HTML KickStart เป็นแผ่นความร้อน HTML, CSS และ Javascript ที่เพรียวบางเป็นพิเศษเพื่อการพัฒนาเว็บที่รวดเร็วยิ่งขึ้น HTML KickStart ได้รับการพัฒนาบนพื้นฐานของ Twitter Bootstrap ด้วยการสนับสนุนไอคอนจาก Font Awesome ด้วยเมนูพร้อมรายการตารางปุ่มระบบกริดและองค์ประกอบที่ยอดเยี่ยมมากมายคุณจะบันทึกขั้นตอนการสร้างโครงการเว็บของคุณได้นานถึง 10 ชั่วโมงหรือมากกว่านั้น

16. กริดง่าย

Simple Grid เป็นระบบกริดที่มีน้ำหนักเบาและตอบสนองได้ดี มันไม่เหมือนกับเฟรมเวิร์กอื่น ๆ ที่มีปุ่มแฟนซีเมนูตาราง ฯลฯ Simple Grid ให้เฉพาะกริดล้วนๆ ฟีเจอร์กริดนั้นมาจาก ขนาดหน้าจอ 1140 px ที่มี 12 คอลัมน์ ที่คุณสามารถปรับแต่งเพื่อให้ได้เลย์เอาต์ที่ดีที่สุดของคุณ

17. มูลนิธิ

มูลนิธิน่าจะเป็นคู่แข่งที่แข็งแกร่งที่สุดสำหรับ Twitter Bootstrap มันเป็นเอกสารที่ดีมีความเสถียรยืดหยุ่นและกรอบโอเพนซอร์ซ มันมีเครื่องมือที่มีประโยชน์มากมายสำหรับการสร้างโปรเจ็กต์แรกบนเว็บที่ตอบสนองต่อมือถือได้เร็วขึ้น รองรับเบราว์เซอร์ที่มีอยู่เกือบทั้งหมดในวันนี้ยกเว้น IE7 แม้ว่านักพัฒนาซอฟต์แวร์ส่วนใหญ่จะใช้ Foundation สำหรับ HTML และ CSS เท่านั้น แต่คุณมีตัวเลือกในการพอร์ตกับ Sass และ Rails

18. UI วัสดุ

Material UI เป็นอีกหนึ่งเฟรมเวิร์กที่ใช้ข้อกำหนด การออกแบบวัสดุ สิ่งเดียวที่แตกต่างจาก Materialize คือมันสร้างขึ้นโดยความรักของห้องสมุดปฏิกิริยาจาวาสคริปต์จาก Facebook มันมีองค์ประกอบ UI ที่สวยงามมากมายที่คุณสามารถใช้ได้อย่างอิสระบนหน้าเว็บของคุณ

19. Topcoat

TopCoat เป็นเฟรมเวิร์กส่วนหน้าที่มีประสิทธิภาพซึ่งสร้างโดยทีม Adobe สำหรับการพัฒนาเว็บแอปพลิเคชันที่ออกแบบมาโดยคำนึงถึงความเร็ว ทุกรายละเอียดใน TopCoat ได้รับการปรับให้เหมาะสมสำหรับการจัดลำดับความสำคัญตามประสิทธิภาพ นอกจากนี้ยังนำเสนอชุดรูปแบบที่ปรับแต่งได้ตัวอักษรโอเพนซอร์สและ PSD UI Kit เพื่อใช้กับโครงการของคุณ

20. หมึก

Ink เป็นเฟรมเวิร์กส่วนหน้าที่พัฒนาขึ้นเพื่อการพัฒนา UI ที่รวดเร็วยิ่งขึ้นโดยใช้ HTML, CSS และ Javascript เหมือนกับที่ Bootstrap ทำ คุณสามารถสร้างเลย์เอาต์ที่ทันสมัยได้อย่างง่ายดายด้วยองค์ประกอบอินเทอร์เฟซที่นำกลับมาใช้ใหม่เช่นตารางแท็บตัวเลือกข้อมูลโมดอลรายการที่เรียงได้มุมมองแบบต้นไม้แกลเลอรีตัวตรวจสอบรูปแบบและอื่น ๆ นอกจากนี้ยังช่วยให้คุณสามารถจัดการ DOM, สิ่งอำนวยความสะดวกด้านการสื่อสารและเอฟเฟ็กต์หน้าแฟนซีด้วยเอ็นจิน JS Core

21. UI ออนเซ็น

Onsen UI เป็นเฟรมเวิร์กแบบผสมที่ทำงานได้ดีกับ PhoneGap และ Cordova ด้วย AngularJS, jQuery, Font Awesome และ TopCoat ในฐานะรากฐาน Onsen UI สามารถเป็นเครื่องมือที่มีแนวโน้มสำหรับการพัฒนาแอพมือถือที่ยอดเยี่ยม Onsen UI สามารถช่วยคุณสร้างแอพมือถือได้อย่างง่ายดายโดยใช้แนวคิดของ Web Components

Bootstrap ตัวโปรดของคุณอันไหนเป็นทางเลือก? แจ้งให้เราทราบในความคิดเห็นด้านล่าง