10 ทางเลือกที่มีน้ำหนักเบาเพื่อ Bootstrap & มูลนิธิ
การเลือกเฟรมเวิร์กที่เหมาะสมที่เหมาะกับโครงการของคุณอาจจะค่อนข้างล้นหลาม - มี มีให้เลือกมากมาย. บางทีคุณต้องการเลือกที่นิยมเช่น Bootstrap หรือ Foundation แต่ถ้าเว็บไซต์ของคุณเป็นเว็บที่เรียบง่าย, คุณจะไม่ต้องการหน่วยการสร้างและวัสดุส่วนใหญ่ รวมอยู่ในแพ็คเกจเริ่มต้น.
ข่าวดีก็คือว่ามีทางเลือกไม่กี่แบบที่เอนเอียงไปได้มากกว่า Bootstrap หรือ Foundation เฟรมเวิร์กส่วนใหญ่มาพร้อมกับ เพียงแค่สไตล์และส่วนประกอบที่เหมาะสม เพื่อช่วยให้คุณเริ่มต้นใช้งานในขณะที่ช่วยให้คุณสามารถขยายพวกเขาไปในทิศทางที่คุณต้องการสำหรับโครงการของคุณ.
นี่ 10 ทางเลือกที่มีน้ำหนักเบาเพื่อ Bootstrap และมูลนิธิ ที่คุณควรใช้ สร้างเว็บไซต์ขนาดเล็ก.
เพิ่มเติมเกี่ยวกับ Hongkiat.com:
- เริ่มต้นใช้งาน Twitter Bootstrap
- ใช้ Bootstrap 3 ด้วย Sass
- เครื่องมือ Bootstrap: สร้างเลย์เอาต์ Bootstrap HTML
- การทำงานกับ Bootstrap Plugin: Modal Window
- เครื่องมือ Bootstrap: สร้าง Megamenu ด้วย YAMM3
1. โครงกระดูก
Skeleton ได้รับการปรับโฉมในที่สุด มันเป็นการปรับปรุงทั้งหมดจากพื้นดินขึ้นมา แต่มันก็ยังเบาเหมือนที่เคยเป็นมา ขณะนี้ระบบกริด Skeleton ใหม่นำเอาปรมาจารย์มือถือมาเป็นอันดับแรกซึ่งทำให้มั่นใจว่าเลย์เอาต์จะอยู่ตรงกลางไม่ว่าหน้าจอของอุปกรณ์จะเล็กเพียงใด.
ส่วนประกอบทั้งหมดที่รวมอยู่ในเวอร์ชั่นก่อนหน้านี้ - ปุ่มฟอร์มและองค์ประกอบอินพุต - ยังคงมีอยู่ แต่ขณะนี้มีการตั้งค่าลักษณะการพิมพ์เบื้องต้นไว้แล้ว REM หน่วย.
2. CardinalCSS
CardinalCSS เป็นเฟรมเวิร์ก CSS ที่สร้างขึ้นโดยมุ่งเน้นที่ประสิทธิภาพความสามารถในการอ่านและการบำรุงรักษาที่สำคัญที่สุด CardinalCSS ใช้วิธีการที่ทันสมัยบางอย่างเช่นมือถือเป็นครั้งแรกสำหรับการสร้างตาราง; และ CSS Box Model ที่ให้คุณสามารถกำหนดความกว้างและความสูงขององค์ประกอบได้อย่างง่ายดาย.
CardinalCSS ยังมาพร้อมกับคลาสผู้ช่วยจำนวนหนึ่งซึ่งอนุญาตให้คุณใช้สไตล์กับองค์ประกอบได้อย่างรวดเร็วตัวอย่างเช่น หล่นหมวก ซึ่งใช้ลักษณะพิเศษแบบหล่นหมวกสำหรับอักขระตัวแรกในย่อหน้า.
3. ConciseCSS
ConciseCSS เป็นเฟรมเวิร์ก CSS - โดยไม่มีการขยายตัว มันเป็นเฟรมเวิร์กแบบลีนที่สร้างขึ้นบน Sass, LESS และ Stylus ที่ปูเส้นทางทองของมันไปสู่การดูแลรักษา CSS แต่ถ้าคุณชอบวานิลลา CSS แบบธรรมดาคุณก็สามารถมีได้เช่นกัน.
ในทำนองเดียวกัน ConciseCSS ยังมาพร้อมกับรูปแบบพื้นฐานสำหรับองค์ประกอบที่จำเป็นเช่นส่วนหัว, ย่อหน้า, ตาราง, แบบฟอร์มและชุดของผู้ช่วยชั้นเรียนเพื่อสร้าง UI ปุ่ม.
4. PowertoCSS
PowertoCSS มีน้ำหนักเบาและเฟรมเวิร์กส่วนหน้าที่มั่นคง ชื่อคลาสที่ใช้ในการสร้างกริดและใช้สไตล์นั้นง่ายและจดจำได้ง่ายเช่น. .ปุ่ม. คุณยังสามารถเพิ่มธีมของคุณเอง ตรงไปที่ StarterKit เพื่อเริ่มต้น.
5. แอบแฝง
Furtive เป็นเฟรมเวิร์ก CSS สำหรับอุปกรณ์พกพาตัวแรกที่สร้างขึ้นตามมาตรฐานเว็บที่ทันสมัยเช่นการใช้ Flexbox สำหรับกริดและ REM หน่วยสำหรับองค์ประกอบการปรับขนาด (รวมถึงขนาดตัวอักษร) Furtive ยังคงมี CSS footprint ขนาดเล็กโดยไม่สนับสนุนเบราว์เซอร์รุ่นเก่า (* ไอ * Internet Explorer) เนื่องจากต้องการแฮ็ก CSS ดังนั้น Furtive เป็นกรอบที่สมบูรณ์แบบหากคุณกำลังออกแบบเว็บไซต์สำหรับอนาคต.
6. BassCSS
BassCSS นำเสนอชุดรูปแบบองค์ประกอบพื้นฐานของยูทิลิตี้การวางเลย์เอาต์และรูปแบบสีในรูปแบบโมดูลาร์สำหรับการสร้างแอพพลิเคชั่นเว็บที่ตอบสนองได้ ไฟล์ SCSS รวมอยู่ในการปรับแต่งสไตล์ได้อย่างง่ายดาย คุณสามารถเล่นกับการพิมพ์พื้นที่สีขาวจุดพักและองค์ประกอบ UI.
7. มูลเลอร์
Mueller เป็นระบบกริดตอบสนองแบบแยกส่วนที่สร้างขึ้นบน Sass และ Compass ด้วย Mueller คุณสามารถสร้างกริดได้โดยเพิ่มคลาสเข้ากับองค์ประกอบ HTML หรือถ้าคุณต้องการให้องค์ประกอบ HTML ของคุณดูเรียบร้อยและสะอาดโดยใช้ ตาราง () ฟังก์ชัน ตาราง Mueller สามารถใช้ควบคู่กับไลบรารี Masonry Javascript เพื่อสร้างเค้าโครงเหมือน Pinterest.
8. ตุ๊กตุ๊ก
ตุ๊กตุ๊กเป็นชื่อที่ไม่ซ้ำกันมากสำหรับกรอบ เมื่อเปรียบเทียบกับ Bootstrap หรือ Foundation แล้ว Tuktuk นั้นเบากว่ามากเพราะมันมีส่วนประกอบที่เหมาะสมในการสร้างเว็บไซต์ที่นำเสนอได้รวมถึงระบบกริด, การออกแบบพื้นฐานสำหรับการพิมพ์, ตารางและ UI สองอย่างเช่น navbar Modals.
9. ฐาน
ฐานถูกสร้างขึ้นบน LESS และ Sass และมีเฉพาะส่วนประกอบที่สำคัญที่สุดในการสร้างเว็บไซต์: ตารางและสไตล์พื้นฐานขององค์ประกอบ HTML Base ไม่ได้มาพร้อมกับองค์ประกอบของ Javascript แต่ก็ให้ความเข้ากันได้กับเบราว์เซอร์ที่ยอดเยี่ยมมากดังนั้นมันจึงทำงานได้แม้กับ IE7.
10. ขนมปัง
รายการสุดท้ายของเราคือ Toast ผ่านสไตล์ชีต SCSS รวมอยู่ในแพคเกจ Toast ช่วยให้คุณสามารถกำหนดชื่อคลาสกริดรางน้ำและแม้แต่คอลัมน์ฐานได้อย่างง่ายดาย ตัวอย่างเช่นถ้าคุณต้องการให้กริดเป็นคอลัมน์ 9 ฐานแทนที่จะเป็น 12 คุณสามารถทำได้ Toast เป็นเฟรมเวิร์ก CSS ขั้นต่ำที่มีการกำหนดค่าความยืดหยุ่นสูงเพื่อรองรับความต้องการของคุณ.
