10 lựa chọn thay thế nhẹ cho Bootstrap & Foundation

Chọn đúng khung phù hợp hoàn hảo cho các dự án của bạn có thể hơi quá sức - có rất nhiều để lựa chọn. Có lẽ, bạn muốn đi với các lựa chọn phổ biến như Bootstrap hoặc Foundation, nhưng nếu trang web của bạn sẽ là một lựa chọn khá đơn giản, bạn sẽ không cần hầu hết các khối xây dựng và vật liệu bao gồm trong gói mặc định.

Tin tốt là có một số ít lựa chọn thay thế gọn gàng hơn nhiều so với Bootstrap hoặc Foundation. Hầu hết các khung này vận chuyển với đúng số lượng kiểu dáng và thành phần để giúp bạn bắt đầu, đồng thời cho phép bạn có thể mở rộng chúng theo hướng bạn muốn cho dự án của mình.

Đây là 10 lựa chọn thay thế nhẹ cho Bootstrap và Foundation mà bạn nên sử dụng cho xây dựng trang web quy mô nhỏ hơn.

Thêm thông tin trên Hongkiat.com:

• Bắt đầu với Twitter Bootstrap
• Sử dụng Bootstrap 3 với Sass
• Công cụ Bootstrap: Xây dựng bố cục Bootstrap HTML
• Làm việc với Plugin Bootstrap: Modal Window
• Công cụ Bootstrap: Xây dựng Megamothy với YAMM3

1. Bộ xương

Skeleton cuối cùng đã nhận được một sự đổi mới. Đó là một cuộc cải tạo hoàn toàn từ mặt đất lên, nhưng nó vẫn nhẹ như trước đây. Hệ thống lưới Skeleton mới hiện áp dụng triết lý đầu tiên trên thiết bị di động, đảm bảo bố cục chiếm vị trí trung tâm bất kể màn hình thiết bị nhỏ đến mức nào.

Tất cả các thành phần được bao gồm trong phiên bản trước - nút, biểu mẫu và thành phần đầu vào - vẫn còn nhưng kiểu chữ cơ bản hiện được đặt trong còn lại đơn vị.

2. Hồng y

CardinalCSS là một khung CSS được xây dựng tập trung vào hiệu suất, khả năng đọc và quan trọng nhất là khả năng bảo trì. CardinalCSS áp dụng một số phương pháp hiện đại như di động trước tiên để định hình lưới điện; và Mô hình Hộp CSS cho phép bạn dễ dàng xác định chiều rộng và chiều cao của phần tử.

CardinalCSS cũng đi kèm với một số lớp trợ giúp cho phép bạn nhanh chóng áp dụng các kiểu trên một phần tử, ví dụ: mũ lưỡi trai áp dụng hiệu ứng thả xuống cho ký tự đầu tiên trong đoạn.

3. súc tích

ConciseCSS là một khung CSS - không có sự phình to. Nó là một khung gầy được xây dựng dựa trên Sass, LESS và Stylus, mở đường cho khả năng duy trì CSS của nó. Nhưng, nếu bạn thích CSS vanilla đơn giản, bạn cũng có thể có nó.

Tương tự, ConciseCSS cũng đi kèm với các kiểu cơ sở cho các yếu tố cần thiết như tiêu đề, đoạn văn, bảng, biểu mẫu và một nhóm các lớp trợ giúp để tạo giao diện người dùng nút.

4. PowertoCSS

PowertoCSS rất nhẹ và khung giao diện vững chắc. Tên lớp được sử dụng để xây dựng lưới và áp dụng các kiểu rất đơn giản và dễ nhớ, ví dụ:. .nút. Bạn cũng có thể thêm chủ đề của riêng bạn. Đi qua StarterKit của họ để bắt đầu.

5. tức giận

Furtive là một khung CSS đầu tiên trên thiết bị di động được xây dựng xung quanh các tiêu chuẩn web tiên tiến như sử dụng Flexbox cho lưới và còn lại đơn vị cho kích thước các yếu tố (bao gồm kích thước phông chữ). Furtive giữ lại một dấu chân CSS nhỏ bằng cách không hỗ trợ các trình duyệt cũ hơn (* ho * Internet Explorer) vì chúng yêu cầu một số hack CSS. Do đó Furtive là một khung hoàn hảo nếu bạn đang thiết kế một trang web cho tương lai.

6. BassCSS

BassCSS cung cấp một tập hợp nhẹ các kiểu phần tử cơ sở, tiện ích, bố cục và kiểu màu, ở dạng mô-đun để xây dựng một ứng dụng web đáp ứng. Các tệp SCSS được bao gồm để tùy chỉnh kiểu dễ dàng. Bạn có thể chơi với kiểu chữ, khoảng trắng, điểm dừng và các thành phần UI.

7. Mueller

Mueller là một hệ thống lưới đáp ứng mô-đun được xây dựng trên đỉnh Sass và La bàn. Với Mueller, bạn có thể xây dựng lưới bằng cách thêm các lớp thẳng vào các phần tử HTML hoặc nếu bạn thích các phần tử HTML của mình gọn gàng và sạch sẽ, bằng cách sử dụng lưới () chức năng. Lưới Mueller có thể được sử dụng song song với thư viện Masonry Javascript để tạo bố cục giống như Pinterest.

8. Tuktuk

Tuktuk là một cái tên rất độc đáo cho một khung. So với Bootstrap hoặc Foundation, Tuktuk nhẹ hơn rất nhiều vì nó chỉ đi kèm với số lượng thành phần thích hợp để xây dựng một trang web có thể trình bày bao gồm hệ thống lưới, kiểu dáng cơ bản cho kiểu chữ, bảng và một vài UI như thanh điều hướng và phương thức.

9. Cơ sở

Base được xây dựng dựa trên LESS và Sass và nó chỉ bao gồm các thành phần thiết yếu nhất để xây dựng trang web: lưới và kiểu dáng cơ bản của các yếu tố HTML. Base không đi kèm với các thành phần Javascript, nhưng nó cung cấp khả năng tương thích trình duyệt tuyệt vời đến mức nó hoạt động ngay cả với IE7.

10. Bánh mì nướng

Cuối cùng trong danh sách của chúng tôi là Toast. Thông qua biểu định kiểu SCSS được bao gồm trong gói, Toast cho phép bạn dễ dàng định cấu hình tên lớp lưới, máng xối và thậm chí là cơ sở cột. Ví dụ: nếu bạn muốn lưới là cột 9 cơ sở thay vì 12, bạn có thể làm điều đó. Toast là một khung CSS tối thiểu với các cấu hình rất linh hoạt phục vụ cho các yêu cầu của bạn.