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 mặt trước của trang web của mình vào những ngày này, có thể bạn sẽ tìm thấy Bootstrap bên dưới nó. 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 một dự án khác, chúng tôi vô thức tìm đến Bootstrap. Đ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 so với JS có thể gây ra một số lỗi nghiêm trọng.
Bài viết này có hai mục đích:
Tôi nghĩ phần giải thích thực sự quan trọng vì hầu hết mọi người thậm chí không nhận ra rằng họ có vấn đề hoặc họ đang tự làm mọi thứ khó khăn hơn khi chọn Bootstrap. Cuối cùng, hãy nhớ rằng đây hoàn toàn không phải là một bài viết chống Bootstrap. Tôi yêu Bootstrap 4 và tôi sử dụng nó bất cứ khi nào tôi có thể. Nhưng sau đó, tôi là một nhà phát triển cá nhân phải suy nghĩ về việc sử dụng giải pháp phổ biến nhất; Ngoài ra, bản thân tôi không phải là nhà phát triển giao diện người dùng, vì vậy tôi không lo lắng về quá nhiều thứ khi phát triển giao diện người dùng.
Và cùng với đó, hãy xem chúng ta có những lựa chọn thay thế nào.
lưới hộp linh hoạt
Hãy suy nghĩ một chút: lý do lớn nhất khiến bạn bắt đầu sử dụng Bootstrap và vẫn sử dụng nó là vì hệ thống lưới của nó. Chắc chắn, phải mất một thời gian để làm quen với các lớp hàng, col-md-6 v.v., nhưng bây giờ nghĩ về bố cục theo hàng, cột, độ lệch, v.v. là bản chất thứ hai.
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 về Bootstrap đều hơi khó. Có rất nhiều điều 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 vậy, bạn có thể làm tốt hơn nhiều với Grid Flexbox.
Flexbox Grid, như tên cho thấy, là một hệ thống lưới dựa trên bất động sản 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ỉ có thể 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ả mã và tên lớp bắt chước những gì bạn muốn trong Bootstrap 4, nghĩa là không cần ma sát tinh thần để chuyển đổi giữa hai công cụ. Ví dụ: đây là mã cho “không gian xung quanh” trông như thế nào trong lưới flexbox:
<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>Tệp CSS được rút gọn cho lưới này chỉ là 10,7 KB, giúp tiết kiệm vài trăm KB trong kích thước tải xuống cuối cùng. Ngày nay, Flexbox Grid 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 hoàn toàn nó. Tôi thích bắt đầu với các yếu tố vani và tự tạo kiểu cho chúng, sử dụng lưới flexbox bất cứ khi nào cần thiết.
Tìm hiểu Flexbox tại đây, trực tuyến.
CSS thuần túy
Sẽ không hay sao nếu Bootstrap được mô-đun hóa và bạn chỉ có thể nhập mô-đun mình cần?
Chà, Pure CSS đã đ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ể tải xuống một hoặc tất cả và kích thước tải xuống sẽ không vượt quá 3,7 KB!
Có, bạn đọc nó đúng.
Tất cả các mô-đun được đóng gói cùng nhau và gzipped là 3,7 KB, mặc dù cá nhân họ nhiều hơn. Mô-đun lưới chỉ có 0,8 KB trong khi mô-đun Cơ sở là 1,0 KB. Nhóm PureCSS cho biết nó được xây dựng hoàn toàn dành cho các thiết bị di động, vì vậy mọi dòng CSS đều được phân tích cẩn thận về hiệu suất trước khi đưa vào.
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,4 KB! Bạn không cần bao gồm CSS từ các mô-đun nút, bảng và menu nếu bạn không có ý định sử dụng chúng.
Mặc dù vậy, 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:
<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>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 riêng xác định độ rộng của cột. Thật thuần khiết-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. Độ rộng theo bội số cũng có sẵn 1/ /5.
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, có một đường cong học tập và mua vào khổng lồ liên quan khi bạn phải 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 mặc định riêng nên không quá khác biệt so với Bootstrap.
Zimit
Khung Zimit có một chút 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ó nhắm mục tiêu đến các loại giao diện người dùng cụ thể: mô hình.
Có những lúc bạn cần phát triển giao diện người dùng để hiển thị cách thức hoạt động của sản phẩm. Tất nhiên, cách lý tưởng để làm điều này là nhờ 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ụ khung dây nâng cao (ví dụ như Moqups, Blasmic, v.v.). Các trang sẽ có pixel hoàn hảo, màu sắc trang nhã và được lựa chọn tốt, đồng thời các trang sẽ mở để tham gia, đánh giá, nhận xét, v.v.
Nhưng cuộc sống thực không hoàn hảo và bạn thường là người đàn ông duy nhất trong công việc và phải đội mũ và làm công việc của mình. Sau đó, bạn cần một khuôn khổ:
- Cho phép mã hóa bằng HTML/CSS
- trời sáng
- Nó có một bộ sưu tập phong phú các thành phần cơ bản
- Nó có một ngôn ngữ phong cách phù hợp và nhất quán
- Nếu có thể, nó giống với tông màu “xám” của cấu trúc khung
- nó rất dễ học
- Nó có bộ tiền xử lý CSS tích hợp
Zimit đánh dấu vào tất cả các ô đó. Nó chỉ có 84 KB và cung cấp 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ực sự thích vì sẽ mất nhiều thời gian để tự viết mã.
xem cây
vụn bánh mì
thẻ
Có rất nhiều tiện ích để khám phá. Kiểm tra chúng ra ở đây.
Hãy xem mã trông như thế nào. Đây là cách bạn có thể sử dụng hệ thống lưới trong 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” ở đây là viết tắt của “cột”, vì vậy “c4” là viết tắt của một cột kéo dài bốn đơn vị (kích thước lưới là 12, tương tự như Bootstrap). Rất giống với Bootstrap và theo tôi là rất trực quan.
Nói chung, Zimit là một khuôn khổ hoàn chỉnh và dễ dàng để tạo các nguyên mẫu giao diện người dùng phản hồi nhanh và trông đẹp mắt một cách nhanh chóng. Nó tốt hơn Bootstrap (về mặt nguyên mẫu) 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, kém chất lượng.
Bắt đầu ra mắt HTML
Trong hầu hết các dự án bạn xây dựng, tốc độ là rất quan trọng. Trở ngại lớn nhất để tăng tốc độ phát triển web là phần front-end và “độ trễ” lớn nhất trong quá trình phát triển front-end là nhu cầu viết mã các thành phần tương tác, trông bóng bẩy. Vì một thành phần có thể hoạt động theo nhiều cách 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 lập trình viên.
Bắt đầu khởi chạy HTML cung cấp một giải pháp thay thế.
Chỉ cần đặt; là một tập hợp các thành phần thực sự thanh lịch mà bạn có thể đưa vào các dự án của mình và giảm đáng kể thời gian phát triển. Dưới đây là một số thành phần thú vị tôi tìm thấy:
làm rơi
nút
Tab (chính giữa và có biểu tượng)
Cụ thể hoá
Nếu bạn thích Bootstrap vì có sẵn giải pháp cho tất cả các vấn đề thiết kế web phổ biến của bạn, nhưng lại là người hâm mộ phong cách thiết kế Material, bạn nên thử Materialize.
Materialize hầu như tương tự như Bootstrap – một 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, tab, v.v. Tuy nhiên, nó có một số ưu điểm có thể thu hút nhiều người.
đẩy kéo
Tính năng đẩy/kéo trong Materialize CSS cho phép bạn sắp xếp lại thứ tự các cột. Điều này tương tự như tiêu chuẩn Lưới CSS mới, trong đó bố cục khác với thứ tự của các thành phần.
<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>Kết quả này trong:
Bạn sẽ nhận thấy rằng các cột đã hoán đổi vị trí, điều này có thể không đạt được với CSS dựa trên Bootstrap truyền thống.
Tiện ích JavaScript
Có nhiều tính năng và hiệu ứng JavaScript đi kèm với Materialize. Gợi ý, chúc mừng (thông báo tạm thời kiểu Android), thị sai, ghim, v.v. chỉ là một số trong số đó. Một trong những 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ự kiện nào đó (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ó đầy đủ bằng lời, vì vậy hãy truy cập https://materializecss.com/feature-detecty.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 ai muốn áp dụng khung CSS Material đầy đủ tính năng.
Đăng kí
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 rằng Bootstrap đang hạn chế bạn và nhu cầu của bạn là duy nhất, thì một trong các tùy chọn được liệt kê ở đây sẽ giúp ích cho bạn.
