ทางเลือก Bootstrap 5 อันดับแรก

Bootstrap มีอยู่ทุกที่ แต่ก็ไม่ใช่เครื่องมือที่เหมาะสมสำหรับงานนี้เสมอไป นี่คือทางเลือกที่ยอดเยี่ยม!

หากคุณตรวจสอบซอร์สโค้ดของฟรอนต์เอนด์ของเว็บไซต์แบบสุ่มในทุกวันนี้ คุณอาจพบ Bootstrap อยู่ข้างใต้ เราทุกคนเคยชินกับแนวคิดเช่น container-fluid, row, col-sm-6 เป็นต้น ซึ่งยากที่จะจินตนาการว่ารูปแบบอื่น ๆ ของการพัฒนาส่วนหน้าจะเป็นไปได้ ดังนั้นเมื่อเราต้องสร้างโครงการต่อไป เราไปถึง Bootstrap โดยไม่รู้ตัว ที่กล่าวว่าความนิยมไม่ได้ทำให้ Bootstrap เหมาะสมกับทุกโครงการและทุกความต้องการ

อันที่จริงแล้วสำหรับส่วนหน้าแบบลีนจริงๆ โหลดทั้งหมด Bootstrap CSS และ JS อาจทำให้บวมได้

บทความนี้มีวัตถุประสงค์สองประการ:

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

    และด้วยเหตุนี้เรามาดูกันว่าเรามีทางเลือกใดบ้าง

    Flexbox Grid

    ลองคิดดูสักครู่: เหตุผลที่ใหญ่ที่สุดที่คุณเริ่มใช้ Bootstrap และยังคงใช้อยู่ก็คือระบบกริด แน่นอนว่าต้องใช้ความคุ้นเคยกับแถว col-md-6 ฯลฯ คลาส แต่ตอนนี้เป็นเรื่องธรรมดาที่จะคิดถึงเลย์เอาต์ในแง่ของแถว คอลัมน์ ออฟเซ็ต ฯลฯ

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

    ถ้าใช่ คุณทำได้ดีกว่านี้มากกับ Flexbox Grid.

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

    <div class="row around-xs">
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
    </div>

    ไฟล์ CSS ที่ย่อเล็กสุดสำหรับระบบกริดนี้มีขนาดเพียง 10.7 KB ซึ่งช่วยให้คุณประหยัดได้หลายร้อย KB ในขนาดการดาวน์โหลดสุดท้าย วันนี้ Flexbox Grid เป็นรายการโปรดของฉันเพราะฉันไม่ต้องการต่อสู้กับ Bootstrap เพื่อปรับแต่งอย่างเต็มที่ ฉันชอบเริ่มต้นด้วยองค์ประกอบวานิลลาและจัดรูปแบบด้วยตัวเอง โดยใช้ Flexbox Grid ทุกที่ที่ฉันต้องการ

      เหตุใดแอพของ iPhone จึง“ วางจาก” แอพอื่น ๆ

    เรียนรู้ Flexbox ที่นี่ ออนไลน์.

    PureCSS

    คงจะดีไม่น้อยถ้า Bootstrap ถูกแบ่งออกเป็นโมดูลและคุณสามารถนำเข้าเฉพาะโมดูลที่คุณต้องการได้หรือไม่

    ดี, PureCSS ได้ดำเนินการไปแล้ว นั่นคือชุดของโมดูลที่ครอบคลุมส่วนการทำงานต่างๆ ของเว็บไซต์ คุณสามารถเลือกดาวน์โหลดอย่างใดอย่างหนึ่งหรือทั้งหมดก็ได้ แต่ขนาดการดาวน์โหลดจะไม่เกิน 3.7 KB!

    ใช่คุณอ่านถูกต้อง

    โมดูลทั้งหมดเมื่อรวมเข้าด้วยกันและ gzipped คือ 3.7 KB แม้ว่าจะมีจำนวนมากกว่าก็ตาม โมดูลกริดมีขนาดเพียง 0.8 KB ในขณะที่โมดูลฐานคือ 1.0 KB ทีมงานที่อยู่เบื้องหลัง PureCSS กล่าวว่ามันถูกสร้างขึ้นโดยคำนึงถึงอุปกรณ์พกพา ดังนั้น CSS ทุกบรรทัดจึงได้รับการตรวจสอบประสิทธิภาพอย่างรอบคอบก่อนที่จะรวมเข้าไป

    สมมติว่าคุณต้องการแค่โมดูลกริดและฟอร์ม เพียงแค่ดาวน์โหลดสองสิ่งนี้ (พร้อมกับโมดูลฐาน) และคุณจะทำเสร็จในเวลาน้อยกว่า 3.4 KB! ไม่จำเป็นต้องรวม CSS จากโมดูลปุ่ม ตาราง และเมนู หากคุณไม่ต้องการใช้

    อย่างไรก็ตาม PureCSS มีคลาสของมัน และโค้ดที่ได้ไม่ได้เลียนแบบ Bootstrap ที่คุณอาจคุ้นเคย:

    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
            <div class="l-box">
                <h3>Lorem Ipsum</h3>
            </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Dolor Sit Amet</h3>
           </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Proident laborum</h3>
           </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Praesent consectetur</h3>
           </div>
        </div>
    </div>

    คุณจะสังเกตเห็นว่าไม่มีตาราง 12 คอลัมน์อีกต่อไป PureCSS มีระบบกริดที่ระบุว่าคอลัมน์ควรใช้ความกว้างเท่าใด ดังนั้น pure-u-lg-1-4 หมายความว่าองค์ประกอบนี้ควรใช้ 1/4 หรือ 25% ของความกว้างที่มีอยู่บนหน้าจอขนาดใหญ่ นอกจากนี้ยังมีความกว้างเป็นทวีคูณของ 1/5

    โดยรวมแล้ว PureCSS เป็นเครื่องมือ CSS ที่ปลดปล่อยและน่าทึ่ง (เฟรมเวิร์ก?) ที่คุณสามารถเลือกและเลือกได้ตามต้องการ ที่กล่าวมานั้นมาพร้อมกับการซื้ออินและการเรียนรู้ในปริมาณที่พอเหมาะ เนื่องจากคุณจำเป็นต้องเรียนรู้วิธีใหม่ (แตกต่างออกไปเล็กน้อย) ในการทำสิ่งต่างๆ

    PureCSS ยังมีคลาสของตัวเองและสไตล์เริ่มต้น ดังนั้นในเรื่องนี้ จึงไม่แตกต่างจาก Bootstrap มากนัก

    Zimit

    ดิ Zimit กรอบงานเป็นสิ่งที่แปลกในรายการนี้ ใช่ มันเป็นเฟรมเวิร์กสำหรับการสร้าง UI แต่มุ่งเป้าไปที่ UI บางประเภท: ม็อคอัพ

      “สแตน” คืออะไร และชื่อนี้มาจากไหน?

    มีบางครั้งที่คุณต้องพัฒนาส่วนหน้าเพื่อแสดงการทำงานของผลิตภัณฑ์ วิธีที่เหมาะสมที่สุดในการทำเช่นนี้คือการให้นักออกแบบ/นักพัฒนา UI มีส่วนร่วมและสร้างแบบจำลองบนหนึ่งในเครื่องมือสร้างโครงร่างขั้นสูง (Moqups, Blasmic เป็นต้น) หน้าเพจจะสมบูรณ์แบบพิกเซล โทนสีที่โฉบเฉี่ยว และได้รับการคัดเลือกมาอย่างดี และเพจจะเปิดให้เข้าร่วม วิจารณ์ แสดงความคิดเห็น ฯลฯ

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

    • ให้คุณเขียนโค้ดใน HTML/CSS
    • มีน้ำหนักเบา
    • มีส่วนประกอบพื้นฐานมากมาย
    • มีสไตล์ภาษาที่ดีและสม่ำเสมอ
    • ถ้าเป็นไปได้ ให้คล้ายกับโทน “สีเทา” ของการออกแบบโครงลวด
    • เรียนง่าย
    • มีตัวประมวลผลล่วงหน้า CSS ในตัว

    Zimit เลือกช่องเหล่านี้ทั้งหมด มีขนาดเพียง 84 KB และมีส่วนประกอบให้เลือกมากมาย ต่อไปนี้คือตัวอย่างบางส่วนที่ฉันพบว่าน่าสนใจมาก เนื่องจากการเขียนโค้ดด้วยตัวเองอาจใช้เวลานาน

    วิวต้นไม้

    เกล็ดขนมปัง

    แท็บ

    มีสารพัดอีกมากมายให้สำรวจ ตรวจสอบพวกเขาออก ที่นี่.

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

    <div class="row">
       <div class="c12">
          <div class="row">
             <div class="c4">4 columns</div>
             <div class="c4">4 columns</div>
          </div>
          <div class="row">
             <div class="c4">4 columns</div>
             <div class="c4">4 columns</div>
          </div>
       </div>
    </div>

    ตัว “c” ในที่นี้ย่อมาจาก “column” ดังนั้น “c4” จึงหมายถึงคอลัมน์ที่ครอบคลุมสี่หน่วย (ตารางมีขนาด 12 ขนาด เช่นเดียวกับ Bootstrap) คล้ายกับ Bootstrap และใช้งานง่ายมากในความคิดของฉัน

    สรุปแล้ว Zimit เป็นเฟรมเวิร์กที่สมบูรณ์และใช้งานง่ายในการพัฒนาต้นแบบ UI ที่ตอบสนองและดูดีได้อย่างรวดเร็ว ดีกว่า Bootstrap (เมื่อพูดถึงการสร้างต้นแบบ) เพราะ Bootstrap เป็นการดาวน์โหลดที่ใหญ่กว่ามากและการออกแบบที่ได้ก็ไม่มีรสนิยมที่ดี

    HTML KickStart

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

    HTML KickStart เสนอทางเลือกอื่น

    พูดง่ายๆ ; เป็นคอลเลกชั่นของส่วนประกอบที่ทันสมัยจริงๆ ที่คุณสามารถวางลงในโปรเจ็กต์ของคุณ และลดเวลาในการพัฒนาลงได้อย่างมาก นี่คือส่วนประกอบที่ดีที่ฉันพบ:

    หล่นลง

    ปุ่ม

    แท็บ (ตรงกลางและมีไอคอน)

    เป็นรูปเป็นร่าง

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

    Materialize ส่วนใหญ่จะเหมือนกับ Bootstrap — ระบบกริด 12 จุด, ออฟเซ็ต และส่วนประกอบที่คุ้นเคย เช่น แบบฟอร์ม การ์ด ฯลฯ อย่างไรก็ตาม มันมีสารพัดบางอย่างที่สามารถดึงดูดคนจำนวนมากได้

    ผลักดึง

    คุณสมบัติผลัก/ดึงของ Materialize CSS ช่วยให้คุณจัดลำดับคอลัมน์ใหม่ได้ สิ่งนี้ชวนให้นึกถึงมาตรฐาน CSS Grid ใหม่ ซึ่งเลย์เอาต์แตกต่างจากลำดับองค์ประกอบ

    <div class="row">
          <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
          <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
    </div>

    ส่งผลดังนี้

      วิธีติดต่อทางดนตรีเพื่อรับบัญชี

    คุณจะสังเกตเห็นว่าคอลัมน์ต่างๆ ได้เปลี่ยนตำแหน่ง ซึ่งเป็นสิ่งที่อาจไม่สามารถทำได้ใน CSS แบบ Bootstrap แบบดั้งเดิม

    สารพัด JavaScript

    มีฟีเจอร์และเอฟเฟกต์ JavaScript ค่อนข้างน้อยที่มาพร้อมกับ Materialize คำแนะนำเครื่องมือ, ขนมปังปิ้ง (การแจ้งเตือนชั่วคราวเหมือน Android), Parallex, Pushpin ฯลฯ เป็นบางส่วน เอฟเฟกต์ที่น่าทึ่งอย่างหนึ่งที่ฉันชอบคือ FeatureDiscovery ซึ่งโดยทั่วไปจะช่วยให้คุณสามารถเน้นองค์ประกอบบนหน้าในบางเหตุการณ์ (เช่น การกดปุ่ม) เพื่อให้ผู้ใช้สนใจองค์ประกอบนั้น เป็นการยากที่จะอธิบายเป็นคำพูดทั้งหมด ดังนั้นตรงไปที่ https://materializecss.com/feature-discovery.html เพื่อดูว่าฉันหมายถึงอะไร

    โดยรวมแล้ว Materialize เป็นทางเลือกที่ดีสำหรับ Bootstrap หรือสำหรับผู้ที่ต้องการใช้เฟรมเวิร์ก Material CSS ที่มีคุณสมบัติครบถ้วน

    บทสรุป

    Bootstrap มีความหมายเหมือนกันกับการออกแบบที่ตอบสนอง เป็น Bootstrap ที่ทำให้คำว่า “mobile-first design” เป็นที่นิยมและแสดงให้เห็นว่าสามารถทำได้อย่างไร แต่ในขณะที่ Bootstrap ทำงานให้เสร็จเกือบตลอดเวลา แค่ทำงานให้เสร็จก็ยังไม่เพียงพอเสมอไป หากคุณรู้สึกว่า Bootstrap จำกัดคุณและความต้องการของคุณเป็นพิเศษ ตัวเลือกใดตัวเลือกหนึ่งที่ระบุไว้ที่นี่จะช่วยคุณได้ 🙂

    เรื่องล่าสุด

    x