10 CSS Frameworks ที่ดีที่สุดสำหรับผู้พัฒนา Front-End

ฉันเคยได้ยินเรื่องตลกของนักพัฒนา Front-end“ NASA มีหุ่นยนต์บนดาวอังคารและที่นี่เรายังคงดิ้นรนเพื่อจัดแนว divs ของเรา!” และมันทำให้ฉันรู้สึกแย่ว่าเรื่องตลกนี้มีความจริงมากมายในนั้น การทำอะไรบางอย่างที่ฟังดูง่ายและสามัญสำนึกเหมือนการวางกล่องไว้ตรงกลางภายในกล่องนั้นทำได้ยากอย่างเหลือเชื่อใน CSS หากคุณไม่เคยพบมาก่อน และบันทึกข้อมูลโค้ดไว้ที่ใดที่หนึ่ง และแม้ว่าคุณจะสามารถดึงมันออกมาได้ แต่ก็มีความกลัวที่ซุ่มซ่อนอยู่เสมอว่ามันอาจทำลายเบราว์เซอร์ที่น่าเบื่อบางแห่งได้อย่างน่ากลัว! CSS เป็นจุดเริ่มต้นของ“ ความชั่วร้ายของเว็บที่จำเป็น” พร้อมกับ JavaScript มันเป็นมาตรฐานที่พัฒนาขึ้นอย่างส่งเดชถูกตีความแตกต่างจากผู้ผลิตเบราว์เซอร์ที่แตกต่างกันและขณะนี้เต็มไปด้วยความขัดแย้งที่ไม่มีใครกล้าเรียกตัวเองว่า “ผู้เชี่ยวชาญ CSS”.


ไม่น่าแปลกใจเลยว่า CSS frameworks นั้นโผล่ออกมาเมื่อเวลาผ่านไปและทำให้ความเจ็บปวดส่วนใหญ่หายไป วันนี้เรานึกภาพไม่ออกเลยว่าไม่มีกรอบ CSS โปรดเนื่องจากการกำหนดเป้าหมายหลายขนาดหน้าจอกลายเป็นสิ่งจำเป็น.

แต่คุณจะรู้ได้อย่างไรว่ากรอบงานของคุณดีที่สุดสำหรับงานที่ทำอยู่? นอกจากนี้หากคุณยังใหม่ต่อการพัฒนา Front-end กรอบใดที่จะช่วยคุณเลือก?

โพสต์นี้แสดงภาพรวมของการพัฒนาแบบ front-end และเปรียบเทียบ front-runners ของ CSS framework ดังนั้นหากคุณเบื่อกฎ CSS แบบเข้ารหัสด้วยมือให้ไปดำดิ่งเพื่อผ่อนคลายอย่างรวดเร็ว!

เงินทุน

ความคิดริเริ่มโดย Twitter, เงินทุน ใช้เครดิตในการแนะนำการออกแบบที่ตอบสนองได้ในขนาดใหญ่ มันเป็นกรอบแรกในการส่งเสริมปรัชญาของ “มือถือครั้งแรก” ไม่ได้ออกแบบมาสำหรับหน้าจอขนาดเล็กที่มีโครงการแยกต่างหากในตัวเอง สิ่งที่คุณต้องทำคือรวมคลาส Bootstrap ที่เกี่ยวข้องและการออกแบบจะปรับโดยอัตโนมัติสำหรับขนาดหน้าจอที่แตกต่างกัน (ดีเกือบ).

การออกแบบที่ตอบสนองใน Bootstrap (4.0 กับ 3.0)

Bootstrap ประสบความสำเร็จในการออกแบบที่ตอบสนองได้ด้วยการแนะนำแนวคิดของกริด กริดคือพาร์ติชันที่มองไม่เห็นของหน้าจอเป็นคอลัมน์ (พร้อมกับความกว้าง) ตัวอย่างเช่นหากคุณมี“ กล่อง” สามอันคุณต้องการวางตำแหน่งเคียงข้างกันบนหน้าจอขนาดใหญ่ แต่ในแนวตั้งบนหน้าจอขนาดเล็กนี่คือสิ่งที่คุณทำ:

หนึ่งในสามคอลัมน์

หนึ่งในสามคอลัมน์

หนึ่งในสามคอลัมน์

Bootstrap เวอร์ชั่นยอดนิยมในปัจจุบันคือ 4 ซึ่งเป็นชุดยกเครื่องที่สำคัญในซีรีส์ 3.3 ไวยากรณ์ข้างต้นเป็นวิธีที่คุณใช้รหัสใน Bootstrap 4 ซึ่งติดอันดับความสง่างามของพลังดิบของ flexbox และคุณสมบัติรูปแบบที่ทันสมัยอื่น ๆ ที่รองรับโดยเบราว์เซอร์โดยตรง ใน Bootstrap เวอร์ชันที่ต่ำกว่ากริดถูกกำหนดเป็นจำนวนทั้งหมด 12 คอลัมน์ซึ่งส่งผลให้เกิดโค้ดเช่น

เพื่อให้ div ใช้เวลาหนึ่งในสามของความกว้างของหน้าจอบนอุปกรณ์ขนาดใหญ่และครึ่งหนึ่งของความกว้างของอุปกรณ์ขนาดกลาง ไวยากรณ์ตอนนี้น่าพอใจมากขึ้นแม้ว่ามันจะต้องการความคุ้นเคยกับ Flexbox.

ข้อดี Bootstrap

มีสิ่งที่น่าสนใจเกี่ยวกับ Bootstrap โดยเฉพาะอย่างยิ่งสำหรับนักพัฒนาสแต็กเต็ม:

  • การสร้างต้นแบบอย่างรวดเร็ว: ด้วย Bootstrap แทบไม่จำเป็นต้องใช้ความคิดเกี่ยวกับการวางตำแหน่ง CSS ที่ยุ่งยากและความเข้ากันไม่ได้ของเบราว์เซอร์ สิ่งที่คุณต้องทำคือเขียน HTML จากนั้นใช้คลาส CSS ที่เหมาะสมทำให้การตอบสนองมีชีวิตชีวา.
  • ระบบนิเวศขนาดใหญ่: ณ วันนี้ Bootstrap มีระบบนิเวศที่ใหญ่ที่สุดในกรอบการทำงานส่วนหน้า จำนวนรูปแบบเว็บไซต์ธีมแผงผู้ดูแลระบบส่วนประกอบของ UI และอื่น ๆ ที่สร้างขึ้นโดยใช้ Bootstrap นั้นน่าเหลือเชื่อและมันก็เริ่มดีขึ้นเรื่อย ๆ สำหรับที่ปรึกษาและ บริษัท ผลิตภัณฑ์เหมือนกันนี่หมายถึงรายการที่สร้างไว้ล่วงหน้าและการสนับสนุนจากชุมชนจะมีมากมาย.
  • สนับสนุนโดย Twitter: แนวโน้มที่เกิดขึ้นใหม่ในโอเพนซอร์สคือโครงการที่ได้รับการสนับสนุนจากหน่วยงานพาณิชย์ บ่อยครั้งที่หน่วยงานเหล่านี้สร้างธุรกิจที่ทำกำไรให้ได้ Kotlin (JetBrains), WordPress (Automattic, Inc. ), Angular (Google), React (Facebook) เป็นต้นเป็นตัวอย่าง เมื่อโครงการได้รับการสนับสนุนโดยองค์กรที่จัดตั้งขึ้นและไม่ได้แสดงเพียงคนเดียวก็ให้ความเชื่อมั่นกับชุมชน (โดยเฉพาะลูกค้าองค์กร) ว่าโครงการจะมีแผนงานที่ชัดเจนและอนาคตระยะยาว.
  • ชุดใหญ่ของส่วนประกอบ: Bootstrap นำเสนอส่วนประกอบ UI เกือบทั้งหมดที่คุณต้องการ การนำทางแบบฟอร์มบัตร Modal ปุ่มป้ายแถบความคืบหน้าการแจ้งเตือน . . คุณตั้งชื่อมันและ Bootstrap มีมัน สำหรับหลาย ๆ บริษัท สิ่งนี้ช่วยลดความจำเป็นในการมีทีมงานส่วนหน้า.
  • รองรับ LESS และ SASS: ในบรรดาเฟรมเวิร์ค CSS ที่ได้รับความนิยมอย่างสูง Bootstrap เป็นหนึ่งเดียวที่รองรับทั้ง LESS และ SASS ใช่ฉันรู้ว่าคุณไม่ได้ใช้ LESS (เนื่องจากไม่มีนักพัฒนาที่เคารพตนเองควรใช่ไหม) แต่เดี๋ยวก่อนมีโครงการขนาดใหญ่ที่ต้องพึ่งพา LESS แน่นอนว่าคุณไม่สามารถเลือกและเขียนไฟล์ CSS ธรรมดาของคุณได้.

ข้อเสีย Bootstrap

ไม่มีราคาเลยใช่มั้ย Bootstrap ก็เช่นกัน เมื่อเวลาผ่านไป Bootstrap ได้รับความสนใจอย่างหนักจากนักออกแบบและผู้เชี่ยวชาญ UI นี่คือเหตุผล:

  • UX monotony: ความจริงอย่างมากที่ Bootstrap นั้นมีการรวบรวมผลลัพธ์ที่มีขนาดใหญ่ภายในเว็บไซต์ที่ดูคุ้นเคยและค่อนข้างตรงไปตรงมา คุณจะต้องตรงไปที่ ตัวอย่างเป็นทางการ เพื่อดูจำนวนของสิ่งที่เป็นค่าเริ่มต้น เพียงแค่ค้นหา“ เว็บไซต์บู๊ตสแตรปทั้งหมดมีลักษณะเหมือนกัน” และคุณจะรู้ว่าฉันหมายถึงอะไร ��
  • ความเศร้าโศกของสไตล์: Bootstrap คือสิ่งที่อาจถูกพิจารณาว่าเป็นกรอบความคิดเห็น กล่าวอีกนัยหนึ่งมันมีแนวคิดเกี่ยวกับเลย์เอาต์และทำให้คุณทำงานหนักเป็นพิเศษหากคุณต้องการให้มันดู / ประพฤติแตกต่างกัน พิจารณาจุดพัก CSS เริ่มต้นสำหรับความกว้างหน้าจอ: หน้าจอขนาดกลางสำหรับ Bootstrap เป็นหนึ่งที่เริ่มต้นที่ความกว้างของอุปกรณ์ 768px และถ้าคุณต้องการกำหนดเป้าหมายพูดว่าขีด จำกัด 600px คืออะไร ขอให้โชคดีด้วย! มันเหมือนกันกับส่วนประกอบอื่น ๆ เกือบทุกอย่างใน bootstrap: แถวและคอนเทนเนอร์มีช่องว่างภายในเริ่มต้นปุ่มมีสีและเส้นขอบที่ค่อนข้างยุ่งยากในการแทนที่โดยไม่ต้องทำงานมากและอื่น ๆ.

ต้องการที่จะ ควบคุม Bootstrap? ลองดูสิ หลักสูตรออนไลน์โดย Brad Traversy.

รากฐาน

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

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

อย่างไรก็ตามสานุศิษย์ของกรอบการทำงานของมูลนิธิทราบว่ามีความจริงบางประการเกี่ยวกับเรื่องนั้น มูลนิธิได้รับการพัฒนาเพื่อให้เป็นไปตามธรรมชาติด้วยกรอบ Rails และหลักการชี้นำ “เหมือน Zen” ของ Rails สามารถมองเห็นได้ในที่ทำงาน.

ตัวอย่างเช่นหากคุณต้องการแถวที่มีสององค์ประกอบบนหน้าจอขนาดเล็กสามในสื่อและสี่ในขนาดใหญ่รหัสเทียบเท่าในมูลนิธิจะมีลักษณะเช่นนี้:

เมื่อเทียบกับ Bootstrap เวอร์ชั่นก่อนหน้านี้ฉันพบว่าใช้งานง่ายและจดจำง่าย ไม่มีอีกสิบสองคอลัมน์กริดและการหาสิ่งที่ 4/12 ควรจะเป็น!

แม้ว่า Foundation จะได้รับความนิยมน้อยกว่า Bootstrap แต่เป็นความลับทางการค้าสำหรับนักพัฒนามืออาชีพจำนวนมาก.

ข้อดีของการวางรากฐาน

รากฐานมีคุณสมบัติผิดปกติบางประการจากเฟรมเวิร์ก CSS ทั้งหมดที่เราจะพิจารณาในบทความนี้:

  • เครื่องมือเต็มรูปแบบ: ในทางเทคนิคผิดที่จะกล่าวว่ามูลนิธิเป็นกรอบ CSS ฉันหมายความว่ามันเป็น แต่มันถูกสร้างขึ้นเป็นชุดใหญ่ของโมดูลเครื่องมือที่มีจุดมุ่งหมายเพื่อแก้ปัญหา front-end เกือบทุกชนิด มีการนำเสนอเฟรมเวิร์กแยกต่างหากสำหรับเว็บไซต์และอีเมลซึ่งได้รับการปรับปรุงอย่างมากสำหรับโดเมนที่เกี่ยวข้อง Foundation ยังมาพร้อมกับอินเตอร์เฟสบรรทัดคำสั่ง (CLI) ซึ่งจะฟังเพลงเหมือนกับหูของนักพัฒนาที่เคยทำงานกับ Webpack หรือโมดูลบันเดิลอื่น ๆ.
  • ความยืดหยุ่นสูง: มูลนิธิถูกสร้างขึ้นเพื่อให้นักพัฒนาส่วนหน้าควบคุม UIs ของพวกเขาได้อย่างสมบูรณ์ เป็นผลให้มูลนิธิจะรู้สึกอ่อนโยนและซับซ้อนอย่างมากสำหรับผู้มาใหม่ อย่างไรก็ตามเหตุผลก็คือมูลนิธิไม่ได้บังคับสไตล์ภาษาใด ๆ ให้กับคุณ แต่มุ่งหวังที่จะเป็นเพียงแค่สิ่งที่มันเป็น: กรอบงาน CSS ที่ยอดเยี่ยม.
  • เป็นมากกว่าองค์ประกอบ UI: ในขณะที่มูลนิธิมีคอลเล็กชั่นองค์ประกอบ UI ตามปกติมันจะไปไกลกว่าการเรียกร้อง นักพัฒนาได้รวมระบบภาพที่ตอบสนองขั้นสูงส่วนประกอบตารางการกำหนดราคา (ใช่ระบบที่ใช้ในการแสดงแผนการกำหนดราคาต่างๆ) การตรวจสอบความถูกต้องของฟอร์มการสนับสนุนจากขวาไปซ้ายการฝังแบบตอบสนองและอื่น ๆ ฉันต้องการเน้นย้ำอีกครั้งว่านี่เป็น overkill สำหรับเว็บไซต์ที่ง่ายที่สุด แต่สำหรับเว็บไซต์ขนาดใหญ่มันเป็นประโยชน์ที่นักพัฒนาที่มีประสบการณ์จะจดจำได้.
  • การฝึกอบรมและให้คำปรึกษา: ตอนนี้ในขณะที่ Bootstrap สร้างขึ้นโดย Twitter เป็นโครงการด้านข้างและเป็นส่วนเล็ก ๆ ของภาพรวม อย่างไรก็ตาม บริษัท ที่อยู่เบื้องหลังมูลนิธิ (ZURB) มีความมุ่งมั่นที่จะใช้พัฒนาและส่งเสริม หลักสูตรการฝึกอบรมและการให้คำปรึกษาอย่างมืออาชีพมีให้สำหรับลูกค้าขนาดใหญ่ซึ่งเหมาะสำหรับ บริษัท ที่กำหนดเป้าหมายโครงการขนาดใหญ่และยินดีจ่าย.

ข้อเสียของมูลนิธิกรอบ

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

  • ชุมชนขนาดเล็ก (เอ้อ): ชุมชนของมูลนิธินั้นเล็กกว่าของ Bootstrap มากและหากคุณกำลังลองสิ่งแปลกใหม่และติดขัดโอกาสในการค้นหาความช่วยเหลือที่เกี่ยวข้องจะลดลง อย่างไรก็ตามฉันจะเพิ่มนั้นเพื่อวัตถุประสงค์ในทางปฏิบัติทั้งหมด; มีชุมชนอยู่พอแล้ว เป็นเพียงคำสั่งซื้อที่มีขนาดเล็กกว่าคำสั่งบูตดังนั้นคุณอาจไม่พบคำตอบในทันที.
  • ซับซ้อน: หากคุณคุ้นเคยกับ Bootstrap หรือสิ่งที่ง่ายหรือแย่กว่านั้นสำหรับวานิลลา CSS มูลนิธิจะรู้สึกเหมือนการระเบิดที่ซับซ้อนอย่างไม่มีที่สิ้นสุด เลเยอร์ภายในเลเยอร์ส่วนประกอบที่มีส่วนประกอบตัวเลือกการปรับแต่งที่ไม่มีที่สิ้นสุด . . ไม่ช้าคุณจะเริ่มตั้งคำถามถึงประโยชน์ของชีวิต! แต่แล้วอีกครั้งมูลนิธิมีเป้าหมายที่แตกต่างกันมากและไม่สามารถถูกตำหนิได้.
  • มีตัวเลือกมากเกินไป: บางครั้งคุณแค่อยากทำเรื่องไร้สาระและกังวลเรื่องความสมบูรณ์แบบในภายหลัง ในช่วงเวลาดังกล่าวเป็นเรื่องน่าผิดหวังที่จะมีตัวเลือกมากเกินไปที่มีการเปลี่ยนแปลงเล็กน้อย ตัวอย่างเช่นคิดว่าต้องสั่งแซนวิช Subway เมื่อคุณหิวอย่างเจ็บปวดคุณสามารถกินโคลน โดยพื้นฐานแล้วมูลนิธิไม่ได้เป็นเช่นนั้น.
  • ความสามารถพิเศษ: เนื่องจาก Foundation เป็นที่นิยมน้อยกว่า Bootstrap ความสามารถที่มีอยู่จึงน้อยกว่ามาก ตามกฎทั่วไปแล้วการจ้างงานใหม่เกือบจะรู้ Bootstrap แต่จะไม่มีข้อมูลเกี่ยวกับมูลนิธิ การเรียนรู้ต้องใช้เวลาและมันก็เป็นความหรูหราที่ทุกคนสามารถทำได้.

Bulma

Bulma เป็นสมาชิกใหม่ของสนามรบของเฟรมเวิร์ก CSS และสร้างชื่อให้ตัวเองในเวลาอันสั้น ความน่าดึงดูดใจของมันอยู่ในวิธีการแบบ CSS เท่านั้นที่เข้มงวด (ไม่มีคอมโพเนนต์ JavaScript) และค่าเริ่มต้นที่สง่างามซึ่งเป็นสิ่งที่นักพัฒนาจำนวนมากที่มีสายตาที่ดีสำหรับการออกแบบมีปัญหาเมื่อทำงานกับ Bootstrap.

แรงผลักดันส่วนใหญ่ของ Bulma มาจากอัตราการยอมรับที่สูงกับชุมชน Laravel (กรอบเว็บ PHP ในกรณีที่คุณไม่ทราบ) ซึ่งฉันแน่ใจว่าเป็นสิ่งที่ช่วย Vue.js ได้รับความนิยม ระหว่างกรอบ JavaScript.

ทำไมต้องเลือก Bulma CSS Framework

มีหลายเหตุผลที่จะชอบ Bulma และใช้สำหรับโครงการต่อไปของคุณ:

  • ค่อนข้างเป็นที่นิยม: โอเคมันไม่ได้รับความนิยมมากกว่า Bootstrap แต่มันได้รับความนิยมมากกว่า Foundation Bulma มีดาวมากกว่า 30 พันดวงบน Github ประมาณ 3 พันกว่าฐานราก แน่นอนว่าดาวฤกษ์ Github จำนวนหนึ่งนั้นไม่ได้เป็นตัวชี้วัดของการทำบุญ แต่มันก็บอกได้ว่าชุมชนเห็นชอบ Bulma.
  • คลาสที่อ่านง่ายมาก: Bulma สำหรับฉันมี CSS คลาสที่สามารถอ่านได้มากที่สุดของเฟรมเวิร์กทั้งหมดที่ฉันได้ลอง นอกจากนี้ยังมีระบบที่เรียบง่ายและทรงพลังสำหรับสร้างกริดสไตล์เมโทรเรียกว่าไทล์ (ดูที่รหัสในครึ่งหลังของภาพหน้าจอและบอกฉันว่าคุณไม่ประทับใจ!).

  • เส้นโค้งการเรียนรู้แบบแบน: Bulma เป็นระบบแยกส่วนสูงและถูกสร้างขึ้นเพื่อแก้ปัญหาในทางปฏิบัติและปัญหาในชีวิตประจำวันที่ทีมเล็กและนักพัฒนารายย่อยเจอ คุณจะพบว่า Bulma นั้นเรียนรู้ได้ง่ายมาก แต่ฉันคิดว่าพื้นหลังที่เหมาะสมใน CSS นั้นดีเสมอที่จะมีความคิดว่าเกิดอะไรขึ้นภายใต้ประทุน สิ่งนี้จะช่วยคุณเมื่อคุณต้องการแทนที่พฤติกรรมเริ่มต้น.
  • สง่างาม: ลองดูที่ส่วนฮีโร่เริ่มต้นสำหรับ Bulma ด้านล่าง พูดพอแล้ว!

Bulma มีชุมชนเล็ก ๆ แต่มีความหลงใหลอย่างมากดังนั้นหากคุณต้องการกำจัดความยุ่งเหยิงทั้งหมดและต้องการสร้าง UIs ที่ดูหรูหราในเวลาที่บันทึก Bulma เป็นหนทางที่จะไป สำหรับนักพัฒนา Bootstrap นั้น Bulma มีส่วนที่แยกต่างหากเพื่อโน้มน้าวและช่วยให้พวกเขาโยกย้ายมากกว่า.

UIKit

สิ่งที่อยู่ในใจเมื่อนึกถึง UIKit เรียบง่าย Minimalism ไม่ได้อยู่ในฟีเจอร์ (อันที่จริงมันมีคุณสมบัติที่ดีที่สุดของเฟรมเวิร์กทั้งหมด) แต่อยู่ในการออกแบบ หากการออกแบบที่สะอาดหรูหราสง่างามและไม่ใช่ช่องว่างเป็นสิ่งที่ UIkit มีให้คุณ.

ตัวอย่างเช่นดูที่องค์ประกอบแถบความคืบหน้า:

หรือส่วนประกอบของเครื่องหมายรูปภาพ (เครื่องหมายโต้ตอบที่ขับเคลื่อนด้วย JS สำหรับรูปภาพ):

หรือแม้กระทั่งรูปแบบ HTML ที่ต่ำต้อย:

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

แต่มีสิ่งที่จับคุณสงสัย ใช่แล้ว เช่น Bootstrap, UIkit ทำงานกับ JavaScript และในขณะที่คุณสามารถใช้ jQuery สำหรับการจัดการ DOM โดยใช้กรอบ DOM เสมือนเช่น React เป็นไปไม่ได้.

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

UI ความหมาย

คู่แข่งอีกคนในการแข่งขันคือ UI ความหมาย, ซึ่งพยายามแยกตัวเองด้วยธีมและการปรับแต่งมากมาย มีตัวแปรชุดพารามิเตอร์มากกว่า 3000 ชุดซึ่งส่งผลให้เกิดความกว้างใหญ่ หรือว่าเอกสารพูด.

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

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

Susy

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

ในมือของผู้พัฒนาที่เชี่ยวชาญ Susy เป็นเหมือนช่างพ่นไฟมากกว่าที่จะทำทุกอย่างออกไป แน่นอนว่าปุถุชนที่น้อยกว่าจะจัดการเผามือของพวกเขาได้.

เพื่อให้ได้แนวคิดเกี่ยวกับพลังของ Susy ให้ลองตั้งค่าเริ่มต้นนี้ (SASS):

// 4 คอลัมน์สมมาตรและของไหล
// gutters มีขนาด 1/4 ของคอลัมน์
// องค์ประกอบครอบคลุม 1 รางน้ำน้อยกว่าคอลัมน์
// ตู้คอนเทนเนอร์มีรางน้ำน้อยกว่า 1 อัน
$ susy: (
‘คอลัมน์’: susy-repeat (4),
‘gutters’: 0.25,
‘spread’: ‘แคบ’,
‘กระจายตู้คอนเทนเนอร์’: ‘แคบ’,
);

ฉันคิดว่ารหัสนี้อธิบายตนเองได้ค่อนข้างดีแม้ว่าจะไม่ใช่สำหรับคนที่กำลังรีบ �� Susy ทำให้รู้สึกสมบูรณ์แบบถ้าคุณเบื่อกับการขยายตัวทั้งหมดที่เฟรมเวิร์กสมัยใหม่กำหนดไว้สำหรับคุณและคุณมีความต้องการเลย์เอาต์ที่คุณรู้ว่าไม่มีเฟรมเวิร์กธรรมดาที่สามารถให้บริการได้.

เป็นตัวเป็นตนขึ้น

หากคุณชื่นชอบการออกแบบวัสดุของ Google Materialize คือ กรอบ คุณจะเพลิดเพลิน สิ่งที่ดีที่สุดคือมันมีเพียงไม่กี่ชิ้นเท่านั้นที่จะเรียนรู้และมุ่งเน้นไปที่การทำให้คุณได้ผลผลิตเร็วที่สุด มีตัวเลือกการปรับแต่งไม่กี่แบบและ Materialize จะเป็นไปตามรูปแบบตาราง 12 คอลัมน์ยอดนิยมที่กำหนดโดย Bootstrap.

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

บริสุทธิ์

Yahoo กำลังจะตาย?

ไม่คำถามนี้ไม่ใช่การหันเหความสนใจ แต่เน้นถึงการสังเกตที่สำคัญ: Yahoo ได้สร้าง กรอบบริสุทธิ์ และเผยแพร่ภายใต้ใบอนุญาต BSD.

รูปลักษณ์ที่รวดเร็วสร้างความประทับใจให้ฉันและฉันสงสัยว่าทำไมคนอื่นถึงไม่รู้จักข้อเสนอนี้ อย่างไรก็ตามสิ่งที่ทำให้บริสุทธิ์ดีบริสุทธิ์คือกรอบ CSS ที่บริสุทธิ์ ��อันที่จริงแล้วนักพัฒนาได้ทำไมล์พิเศษแล้วแบ่งออกเป็นโมดูล CSS ที่แตกต่างกันซึ่งคุณสามารถนำเข้าได้ตามต้องการ ดังนั้นหากคุณต้องการเพียงระบบกริดคุณไม่จำเป็นต้องนำเข้า CSS ทั้งหมดและเพิ่มลงในความเร็วในการโหลดของเว็บไซต์.

Pure grid มีหลายรสชาติ: 5 จุด, 2 จุด, 24 จุดเป็นต้นดังนั้นเมื่อพูดถึงการสร้างคอลัมน์คุณจะมีความยืดหยุ่นมากขึ้น Pure ไม่ใช่กรอบ CSS ที่ดูดีที่สุดโดยค่าเริ่มต้น แต่ฉันสามารถดูได้ว่าจะเพิ่มคุณค่าให้กับผู้ที่ต้องการแก้ไขปัญหา CSS เล็ก ๆ ใน UI ของพวกเขาและประจบประแจงที่ “เป็นประโยชน์” ค่าเริ่มต้นกรอบอื่น ๆ มาพร้อมกับ.

โครงกระดูก

อย่างที่คุณเห็นในภาพหน้าจอ, โครงกระดูก มีน้อยมากจนไม่เรียกตัวเองว่าเป็นเฟรมเวิร์ก CSS, ไลบรารีหรือโมดูล มันเป็นสำเร็จรูปและมีซอร์สโค้ดเพียง 400 บรรทัด! อย่างไม่น่าเชื่อ? ฉันคิดอย่างนั้น แต่เพื่อให้สิ่งต่าง ๆ ในมุมมอง Skeleton ถูกออกแบบมาสำหรับโครงการขนาดเล็กหรือขนาดเล็กที่ต้องการมากกว่าเลย์เอาต์และการวางตำแหน่งเล็กน้อย.

คุ้มค่าดู; ท้ายที่สุดใครจะรู้ Skeleton อาจเป็นสิ่งที่คุณมองหามาตลอด!

มิลลิกรัม

สุดท้ายในรายการคือ มิลลิกรัม, เฟรมเวิร์ก CSS ที่ออกแบบมาเพื่อความเร็วและความสามารถในการผลิต นักพัฒนาได้รักษาขนาดไม่เกิน 2 KB ซึ่งตามมาตรฐานของวันนี้มีความหมายมาก.

milligram นั้นใช้เวลาสนุกกับเฟรมเวิร์ก CSS ที่คุณชื่นชอบในการทำงาน การขยายเป็นเรื่องง่ายและด้วย CSS แบบกำหนดเองไม่กี่บรรทัดคุณสามารถเปลี่ยนรูปลักษณ์ให้เป็นแบบที่คุณต้องการ.

ดังนั้นเฟรมเวิร์ค CSS ที่ดีที่สุด?

ยอมรับเลยว่าคุณเคยถามคำถามที่คล้ายกันมาก่อนและได้รับคำตอบที่น่าผิดหวังดังต่อไปนี้: ไม่มี ��การเลือกกรอบ (หรือเครื่องมือหรือแม้แต่บุคคลในชีวิตของคุณสำหรับเรื่องนั้น) ขึ้นอยู่กับปัจจัยหลายอย่าง หากคุณต้องการคำแนะนำของฉันนี่คือ: ตัดเสียงรบกวน เพียงเพราะผู้คนคลั่งไคล้กับสิ่งใหม่ ๆ และเป็นประกายไม่ได้หมายความว่าคุณต้องเรียนรู้หรือไม่ก็ถูกทิ้งไว้ข้างหลัง การลองสิ่งใหม่ ๆ นั้นยอดเยี่ยม แต่การวิ่งวนไปรอบ ๆ เพื่อค้นหาเครื่องมือที่สมบูรณ์แบบก็คือของเสีย.

ดังนั้นกรอบข้อใดบ้างที่คุณได้ลอง? หรืออาจจะมีบางสิ่งที่น่าประหลาดใจที่ฉันเพิ่งพลาดไป? กรุณาแจ้งให้เราทราบในความคิดเห็นโปรด ความรักความเกลียดชังการสุ่มสวัสดีทุกคนยินดีต้อนรับ!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map