Cái gì đang thay thế Bootstrap?

Mọi giai đoạn của quy trình phát triển web đều rất quan trọng, đặc biệt là giai đoạn giao diện người dùng. Vì frontend là nơi người dùng tương tác với website nên frontend được nhà phát triển đặc biệt chú trọng. Khi nói đến giao diện người dùng, có vô số công cụ và phần mềm có sẵn để giúp các nhà phát triển trong quá trình thiết kế, một trong số đó là Bootstrap

Bootstrap là một khung phát triển web nguồn mở bao gồm một số mẫu và mã, cho phép các nhà phát triển xây dựng các trang web chức năng và hấp dẫn trực quan trong thời gian ngắn hơn. Mục tiêu cơ bản của Bootstrap là phát triển các trang web đáp ứng, ưu tiên thiết bị di động. Nó đảm bảo rằng các phần tử giao diện người dùng của trang web được tối ưu hóa cho mọi kích thước màn hình

Nhưng bạn có biết rằng có một số lựa chọn thay thế tuyệt vời cho Bootstrap mà bạn có thể xem xét không? . Đến cuối bài viết này, chúng tôi chắc chắn rằng bạn sẽ có thông tin chi tiết về các tùy chọn khác nhau, tính năng của chúng và cấu trúc giá.  

Bootstrap có ở khắp mọi nơi, nhưng không phải lúc nào nó cũng là công cụ phù hợp cho công việc. Dưới đây là một số lựa chọn thay thế tuyệt vời

Nếu bạn kiểm tra ngẫu nhiên mã nguồn của giao diện người dùng của một trang web trong những ngày này, rất có thể bạn sẽ tìm thấy Bootstrap bên dưới. Tất cả chúng ta đã quá quen với những khái niệm như container-fluid, row, col-sm-6, v.v. , thật khó để tưởng tượng rằng bất kỳ phong cách phát triển giao diện người dùng nào khác thậm chí có thể thực hiện được. Và vì vậy, khi chúng tôi phải xây dựng dự án tiếp theo, chúng tôi tìm đến Bootstrap một cách vô thức. Điều đó nói rằng, sự phổ biến không làm cho Bootstrap phù hợp với tất cả các dự án và nhu cầu

Trên thực tế, đối với các giao diện người dùng thực sự tinh gọn, việc tải tất cả Bootstrap CSS và JS có thể gây ra sự phình to lớn

Bài viết này có hai mục đích

1. Cung cấp các lựa chọn thay thế trực tiếp không giống Bootstrap cho Bootstrap
2. Giải thích lý do tại sao bạn có thể muốn xem xét các lựa chọn thay thế này trên Bootstrap

Tôi nghĩ phần giải thích thực sự quan trọng bởi vì trong hầu hết các trường hợp, mọi người thậm chí không nhận ra rằng họ có vấn đề hoặc họ đang khiến công việc của mình khó khăn hơn bằng cách sử dụng Bootstrap. Cuối cùng, xin lưu ý rằng đây không phải là bài đăng chống Bootstrap dưới bất kỳ hình thức nào. Tôi yêu Bootstrap 4 và sử dụng nó bất cứ khi nào có thể. Nhưng sau đó, tôi là một nhà phát triển cá nhân phải nghĩ đến việc sử dụng giải pháp phổ biến nhất;

Và với điều đó, chúng ta hãy xem chúng ta có những lựa chọn thay thế nào

Lưới Flexbox

Hãy suy nghĩ về nó trong một phút. lý do lớn nhất khiến bạn bắt đầu sử dụng Bootstrap và vẫn đang sử dụng nó là hệ thống lưới của nó. Chắc chắn rồi, phải mất một số thời gian để làm quen với row, col-md-6, v.v. , các lớp, nhưng giờ đây, bản chất thứ hai là nghĩ về bố cục theo hàng, cột, độ lệch, v.v.

Và nếu bạn trung thực với chính mình, bạn sẽ thấy rằng mọi thứ khác trong Bootstrap đều là một việc vặt. Có rất nhiều lớp cần nhớ, cho dù bạn đang thực hiện biểu mẫu, điều hướng, nút, bảng hay bất kỳ thứ gì khác. Nếu bạn giống tôi, bạn vẫn chưa quen với tất cả các lớp và công việc của chúng, và bạn thường chỉ sử dụng Bootstrap cho lưới và tự viết tất cả các CSS khác

Nếu có, bạn có thể làm tốt hơn rất nhiều với Flexbox Grid

Lưới Flexbox, như tên gợi ý, là một hệ thống lưới dựa trên các thuộc tính CSS Flexbox. Tuy nhiên, không giống như kỹ thuật CSS, tất cả sự phức tạp được trừu tượng hóa một cách độc đáo để bạn chỉ tập trung vào việc đặt các phần tử theo cách bạn muốn. Phần tốt nhất là tất cả các mã và tên lớp bắt chước những gì bạn muốn trong Bootstrap 4, có nghĩa là chuyển đổi giữa hai công cụ này không cần ma sát tinh thần. Chẳng hạn, đây là mã cho “không gian xung quanh” trông như thế nào trong Flexbox Grid

    

        

            around
        
    

    

        

            around
        
    

    

        

            around
        
    

Tệp CSS được rút gọn cho hệ thống lưới này chỉ là 10. 7 KB giúp bạn tiết kiệm vài trăm KB ở kích thước tải xuống cuối cùng. Ngày nay, Lưới Flexbox là sở thích của tôi vì tôi không muốn chiến đấu với Bootstrap để tùy chỉnh nó hoàn toàn. Tôi thích bắt đầu với các phần tử vanilla và tự tạo kiểu cho chúng, sử dụng Flexbox Grid bất cứ nơi nào tôi cần

Tìm hiểu Flexbox tại đây, trực tuyến

PureCSS

Sẽ không hay sao nếu Bootstrap được chia thành các mô-đun và bạn chỉ có thể nhập mô-đun mình cần?

Chà, PureCSS đã đi trước và làm được điều đó — đó là một tập hợp các mô-đun bao gồm các khu vực chức năng khác nhau của một trang web. Bạn có thể chọn tải xuống một hoặc tất cả nhưng kích thước tải xuống sẽ không vượt quá 3. 7KB

Bạn đã đọc đúng

Tất cả các mô-đun khi được nhóm lại với nhau và được nén là 3. 7 KB, mặc dù riêng lẻ chúng lên tới nhiều hơn. Mô-đun lưới chỉ là 0. 8 KB, trong khi mô-đun Cơ sở là 1. 0KB. Nhóm đằng sau PureCSS nói rằng nó được xây dựng hoàn toàn dành cho thiết bị di động và vì vậy mọi dòng CSS đều được xem xét kỹ lưỡng về hiệu quả trước khi được đưa vào

Vì vậy, giả sử bạn chỉ cần mô-đun lưới và biểu mẫu. Chà, chỉ cần tải xuống hai thứ này (cùng với mô-đun Cơ sở) và bạn sẽ hoàn thành trong vòng chưa đầy 3. 4KB. Không cần thêm CSS từ các mô-đun Nút, Bảng và Menu nếu bạn không sử dụng chúng

Tuy nhiên, PureCSS có các lớp của nó và mã kết quả không bắt chước Bootstrap mà bạn có thể đã rất quen thuộc

    

        

            
Lorem Ipsum
        

    

    
    

       

           
Dolor Sit Amet
       

    

    
    

       

           
Proident laborum
       

    

    
    

       

           
Praesent consectetur
       

    

Bạn sẽ nhận thấy rằng không còn lưới 12 cột nữa. PureCSS có hệ thống lưới xác định độ rộng của một cột. Vì vậy, pure-u-lg-1-4 có nghĩa là phần tử này sẽ chiếm 1/4 hoặc 25% chiều rộng có sẵn trên màn hình lớn. Chiều rộng là bội số của 1/5 cũng có sẵn

Nói chung, PureCSS là một công cụ (khung?) CSS miễn phí và tuyệt vời mà bạn có thể chọn khi cần. Điều đó nói rằng, nó đi kèm với một lượng lớn đường cong mua và học hỏi khi bạn cần học một cách làm việc mới (hơi khác một chút)

PureCSS cũng có các lớp và kiểu dáng mặc định riêng, vì vậy nó không quá khác biệt so với Bootstrap.

Zimit

Khung Zimit là một loại người kỳ lạ trong danh sách này. Vâng, đó là một khuôn khổ để xây dựng giao diện người dùng, nhưng nó hướng đến các loại giao diện người dùng cụ thể. mô hình

Có những lúc bạn phải phát triển giao diện người dùng để hiển thị chức năng của sản phẩm. Tất nhiên, cách lý tưởng để làm điều này là mời một nhà thiết kế/nhà phát triển giao diện người dùng tham gia và tạo các mô hình mô phỏng trên một trong những công cụ tạo khung tiên tiến (Moqups, Blasmic, v.v. , đến với ý nghĩ). Các trang sẽ có pixel hoàn hảo, bảng màu bóng bẩy và được lựa chọn tốt, đồng thời các trang sẽ được mở để tham gia, đánh giá, nhận xét, v.v.

Nhưng cuộc sống thực không phải là lý tưởng, và bạn thường là người đàn ông duy nhất trong công việc và phải đội mũ và hoàn thành công việc. Vào những thời điểm đó, bạn muốn có một khuôn khổ

• Cho phép bạn viết mã bằng HTML/CSS
• nhẹ
• Có một bộ sưu tập phong phú các thành phần cơ bản
• Có ngôn ngữ phong cách đàng hoàng và nhất quán
• Nếu có thể, giống tông màu “xám” của thiết kế wireframe
• Dễ học
• Có một số bộ tiền xử lý CSS tích hợp sẵn

Zimit kiểm tra tất cả các hộp này. Nó chỉ có kích thước 84 KB và có nhiều loại thành phần để lựa chọn. Dưới đây là một số ví dụ mà tôi thấy thực sự hấp dẫn, vì tự viết mã chúng sẽ mất rất nhiều thời gian

xem cây

vụn bánh mì

tab

Còn nhiều món ngon nữa để khám phá. Kiểm tra chúng ở đây

Hãy xem mã trông như thế nào. Đây là cách bạn sử dụng hệ thống lưới trong Zimit

   

      

         
4 columns
         
4 columns
      

      

         
4 columns
         
4 columns
      

   

Chữ “c” ở đây là viết tắt của “cột”, vì vậy “c4” có nghĩa là một cột kéo dài bốn đơn vị (lưới có kích thước 12, giống như của Bootstrap). Theo ý kiến ​​​​của tôi, rất giống với Bootstrap và rất trực quan

Nói chung, Zimit là một khung hoàn chỉnh và dễ dàng để phát triển các nguyên mẫu giao diện người dùng phản hồi nhanh và trông đẹp mắt. Nó tốt hơn Bootstrap (khi nói đến việc tạo mẫu) bởi vì Bootstrap là một bản tải xuống lớn hơn nhiều và thiết kế kết quả là, tốt, khó hiểu

Khởi động HTML

Trong hầu hết các dự án bạn xây dựng, tốc độ là rất quan trọng. Rào cản lớn nhất đối với tốc độ phát triển web là phần giao diện người dùng và “người trì hoãn” lớn nhất trong phát triển giao diện người dùng là nhu cầu mã hóa các thành phần tương tác, trông thanh lịch. Vì có nhiều cách mà một thành phần có thể hoạt động và có nhiều kích thước màn hình để quản lý, mã hóa và quản lý các thành phần có thể trở thành cơn ác mộng đối với nhà phát triển

HTML KickStart cung cấp một giải pháp thay thế

Đơn giản thôi; . Dưới đây là một số thành phần tốt đẹp tôi tìm thấy

thả xuống

nút

Tab (chính giữa và có biểu tượng)

Cụ thể hoá

Nếu bạn thích Bootstrap vì nó có sẵn giải pháp cho tất cả các vấn đề thiết kế web phổ biến, nhưng bạn là người hâm mộ phong cách thiết kế Material, bạn nên thử Materialize

Materialize chủ yếu giống như Bootstrap — hệ thống lưới 12 điểm, độ lệch và các thành phần quen thuộc như biểu mẫu, thẻ, v.v. Tuy nhiên, nó có những ưu điểm nhất định có thể thu hút nhiều người.

kéo đẩy

Tính năng đẩy/kéo của Materialize CSS cho phép bạn sắp xếp lại thứ tự các cột. Điều này gợi nhớ đến tiêu chuẩn Lưới CSS mới, trong đó bố cục khác với thứ tự phần tử

      
This div is 7-columns wide on pushed to the right by 5-columns.
      
5-columns wide pulled to the left by 7-columns.

Điều này dẫn đến kết quả như sau

Bạn sẽ nhận thấy rằng các cột đã đổi vị trí, đây là điều có lẽ không thể thực hiện được trong CSS dựa trên Bootstrap truyền thống

Quà tặng JavaScript

Có khá nhiều tính năng và hiệu ứng JavaScript đi kèm với Materialize. Tooltips, Toasts (thông báo tạm thời giống như Android), Parallex, Pushpin, v.v. , là một số trong số họ. Một hiệu ứng thực sự tuyệt vời mà tôi thích là FeatureDiscovery, về cơ bản cho phép bạn đánh dấu một phần tử trên trang trong một số sự kiện (chẳng hạn như nhấn nút) để thu hút sự chú ý của người dùng đến phần tử đó. Thật khó để diễn tả nó bằng lời đầy đủ, vì vậy hãy truy cập https. // vật chất hóa. com/feature-khám phá. html để xem ý tôi là gì

Nói chung, Materialize là một giải pháp thay thế tuyệt vời cho Bootstrap hoặc cho những người muốn áp dụng khung CSS Material đầy đủ tính năng

Phần kết luận

Bootstrap đồng nghĩa với thiết kế đáp ứng. Chính Bootstrap đã phổ biến thuật ngữ “thiết kế ưu tiên thiết bị di động” và chỉ ra cách thực hiện nó. Nhưng trong khi Bootstrap hoàn thành công việc hầu hết thời gian, thì chỉ hoàn thành công việc không phải lúc nào cũng đủ. Nếu bạn cảm thấy như Bootstrap đang hạn chế bạn và nhu cầu của bạn là đặc biệt, thì một trong các tùy chọn được liệt kê ở đây sẽ giúp ích cho bạn. 🙂

Điều gì sẽ thay thế Bootstrap?

Bootstrap có còn phù hợp vào năm 2022 không?

Tailwind có tốt hơn Bootstrap không?

W3 CSS có tốt hơn Bootstrap không?