Khi hầu hết mọi người nghĩ về phát triển web, HTML hoặc JavaScript thường xuất hiện trong đầu. Họ thường quên mất công nghệ có tác động nhiều hơn đến khả năng thưởng thức một trang web. biểu định kiểu xếp tầng [CSS]. CSS là một trong những phần quan trọng nhất và thường bị lãng quên nhất của bất kỳ trang web nào, mặc dù đây là một trong ba công nghệ nền tảng của World Wide Web, theo Wikipedia
Bài viết này khám phá 9 framework mã nguồn mở, mạnh mẽ và phổ biến giúp việc phát triển CSS trở nên đơn giản để xây dựng giao diện trang web đẹp mắt
Tên Nó là gìGiấy phépBootstrapKhung CSS phổ biến nhất; . 3. 0MIT
Nếu bạn muốn theo dõi khi tôi khám phá trực tiếp điều này, bạn có thể xem video của tôi
Bootstrap
Bootstrap dễ dàng là khung CSS phổ biến nhất và nó là khung khởi đầu cho tất cả các thiết kế web giao diện người dùng. Được phát triển bởi Twitter, Bootstrap cung cấp khả năng sử dụng, chức năng và khả năng mở rộng
Bootstrap cũng cung cấp nhiều ví dụ để bạn bắt đầu
Với Bootstrap, bạn có thể ghép các thành phần và bố cục khác nhau lại với nhau để tạo ra một thiết kế trang thú vị. Nó cũng cung cấp nhiều tài liệu chi tiết
Kho lưu trữ GitHub của Bootstrap liệt kê hơn 19.000 cam kết và 1.100 người đóng góp. Nó dựa trên Giấy phép MIT, vì vậy [cũng như tất cả các khung trong danh sách này], bạn cũng có thể tham gia và đóng góp
MẫuBay
PatternFly là một khung CSS mã nguồn mở [theo Giấy phép MIT] của Red Hat. PatternFly có một cách tiếp cận khác với Bootstrap. Mặc dù Bootstrap dành cho bất kỳ ai quan tâm đến việc tạo một trang web đẹp, nhưng PatternFly chủ yếu tập trung vào các nhà phát triển ứng dụng doanh nghiệp và cung cấp các thành phần, chẳng hạn như thanh, biểu đồ và điều hướng, rất hấp dẫn để tạo trang tổng quan mạnh mẽ, dựa trên số liệu. Trên thực tế, Red Hat sử dụng khung CSS này để thiết kế các sản phẩm của mình, chẳng hạn như OpenShift
Ngoài HTML tĩnh, PatternFly còn hỗ trợ khung ReactJS, một khung JavaScript phổ biến được phát triển bởi Facebook
PatternFly có nhiều thành phần nâng cao, chẳng hạn như thanh, biểu đồ, phương thức và bố cục, phù hợp với các ứng dụng cấp doanh nghiệp
Trang GitHub của PatternFly liệt kê hơn 1.050 cam kết và 44 người đóng góp. PatternFly đang nhận được rất nhiều sự chú ý và rất hoan nghênh bạn đóng góp
Thành phần Vật liệu cho web
Với nền tảng Android rất thành công của mình, Google đã đặt ra các nguyên tắc thiết kế tiêu chuẩn của riêng mình với một khái niệm có tên là Thiết kế Vật liệu. Các tiêu chuẩn của Material Design nhằm mục đích phản ánh trên tất cả các sản phẩm của Google và chúng cũng có sẵn cho công chúng nói chung và nguồn mở theo Giấy phép MIT
Material Design có một số Thành phần, "các khối xây dựng tương tác để tạo giao diện người dùng. " Những nút, thẻ, phông nền này, v.v. có thể được sử dụng để tạo bất kỳ loại giao diện người dùng nào cho trang web hoặc ứng dụng di động
Những người bảo trì cung cấp tài liệu kỹ lưỡng cho các nền tảng khác nhau
Ngoài ra còn có hướng dẫn từng bước với các bài tập để hoàn thành các mục tiêu khác nhau
Trang GitHub của Thành phần Vật liệu lưu trữ các kho lưu trữ cho các nền tảng khác nhau, bao gồm Thành phần Vật liệu cho web [MDC Web] để phát triển trang web. MDC Web có hơn 5.700 cam kết và 349 người đóng góp
Nguyên chất
Bootstrap, Patternfly và MDC Web là các khung CSS rất mạnh, tuy nhiên chúng có thể khá nặng và phức tạp. Nếu bạn muốn một khung CSS nhẹ, gần giống với việc tự viết CSS hơn nhưng vẫn giúp bạn xây dựng một trang web đẹp, hãy thử Pure. css. Pure là một khung CSS nhẹ với dấu chân tối thiểu. Nó do Yahoo phát triển và là mã nguồn mở theo Giấy phép BSD
Mặc dù có kích thước nhỏ nhưng Pure cung cấp nhiều thành phần cần thiết để xây dựng một trang web đẹp mắt
Trang GitHub của Pure hiển thị hơn 565 cam kết và 59 cộng tác viên
Sự thành lập
Foundation tuyên bố là khuôn khổ frontend đáp ứng tiên tiến nhất trên thế giới. Nó cung cấp các tính năng nâng cao và hướng dẫn để xây dựng các trang web chuyên nghiệp
Khung này được nhiều công ty, tổ chức và thậm chí cả các chính trị gia sử dụng và nó có sẵn rất nhiều tài liệu
Trang GitHub của Foundation hiển thị gần 17.000 cam kết và 1.000 người đóng góp. Giống như hầu hết các khung khác trong danh sách này, nó có sẵn theo Giấy phép MIT
Bulma
Bulma là một khung nguồn mở dựa trên Flexbox và có sẵn theo Giấy phép MIT. Bulma là một framework khá nhẹ vì nó chỉ yêu cầu một tệp CSS
Bulma có các tài liệu rõ ràng và đơn giản giúp bạn dễ dàng chọn các chủ đề bạn muốn khám phá. Nó cũng có một số thành phần web mà bạn có thể chọn và sử dụng trong thiết kế của mình
Trang GitHub của Bulma liệt kê hơn 1.400 cam kết và 300 người đóng góp
bộ xương
Nếu ngay cả Pure cũng quá nặng đối với bạn, thì có một khung thậm chí còn nhẹ hơn có tên là Skeleton. Thư viện Skeleton chỉ dài khoảng 400 dòng và khung chỉ cung cấp các thành phần thiết yếu để bắt đầu hành trình khung CSS của bạn
Mặc dù đơn giản nhưng Skeleton cung cấp tài liệu chi tiết để giúp bạn bắt đầu ngay
GitHub của Skeleton liệt kê 167 lượt cam kết và 22 cộng tác viên. Tuy nhiên, nó không phải là dự án tích cực nhất; . Vì nó được phát hành theo Giấy phép MIT, nên bạn có thể tự làm điều đó
Cụ thể hoá
Materialize là một khung giao diện người dùng đáp ứng dựa trên Thiết kế Materialize của Google với các chủ đề và thành phần bổ sung được phát triển bởi những người đóng góp của Materialize
Trang tài liệu của Materialize rất toàn diện và khá dễ theo dõi. Trang thành phần của nó bao gồm các nút, thẻ, điều hướng, v.v.
Materialize là một dự án nguồn mở theo Giấy phép MIT và GitHub của nó liệt kê hơn 3.800 cam kết và 250 người đóng góp
bootflat
Bootflat là một khung CSS nguồn mở có nguồn gốc từ Bootstrap của Twitter. So với Bootstrap, Bootflat đơn giản hơn, với các thành phần khung nhẹ hơn
Tài liệu của Bootflat dường như được lấy cảm hứng từ IKEA—nó hiển thị hình ảnh của từng thành phần mà không có nhiều văn bản
Bootflat có sẵn theo Giấy phép MIT và trang GitHub của nó bao gồm 159 cam kết và tám người đóng góp, tính đến thời điểm viết bài này
Bạn nên chọn khung CSS nào?
Lập trình và phát triển
- Blog nhà phát triển mũ đỏ
- Lập trình cheat sheet
- Thử miễn phí. Đăng ký học Red Hat
- sách điện tử. Giới thiệu về lập trình với Bash
- Bash Shell Scripting Cheat Sheet
- sách điện tử. Hiện đại hóa doanh nghiệp Java
Bạn có nhiều tùy chọn cho các khung CSS nguồn mở, tùy thuộc vào mức độ giàu tính năng hay đơn giản mà bạn muốn công cụ này trở thành. Giống như tất cả các quyết định về công nghệ, không có câu trả lời đúng duy nhất cho mọi thứ hoặc mọi người;
Thử một vài trong số này và xem bạn muốn sử dụng cái nào trong dự án tiếp theo của mình. Ngoài ra, tôi có bỏ lỡ bất kỳ khung CSS mã nguồn mở thú vị nào không?
Đọc gì tiếp theo
6 khung nguồn mở hàng đầu của tôi để phát triển web
Bản tóm tắt chi tiết về các khung phụ trợ được các nhà phát triển web tùy chỉnh sử dụng nhiều nhất
Am Dừa
19 Tháng Ba, 2020Tạo cờ bằng CSS và các công cụ mã nguồn mở khác
Các giải pháp nguồn mở này giúp bạn sử dụng vexillology của mình
Jeff Macharyas
[Cựu sinh viên]4 Tháng Tư, 2018Điều hướng một biển các khuôn khổ giao diện người dùng
Bạn nên chọn khung giao diện người dùng nào cho ứng dụng web tiếp theo của mình? . Lập trình…
Radek Pazdera
5 Tháng Mười, 2015Thẻ
phát triển web
Bryant Sơn
Bryant Jimin Son là một Octocat, không có chức danh chính thức nhưng thích được gọi như vậy, tại GitHub, một công ty được biết đến rộng rãi với việc lưu trữ hầu hết các dự án nguồn mở trên thế giới. Tại nơi làm việc, anh ấy đang khám phá các công nghệ git khác nhau, Hành động GitHub, bảo mật GitHub, v.v. Trước đây, anh là Chuyên gia tư vấn cấp cao tại Red Hat, một công ty công nghệ nổi tiếng với máy chủ Linux và các đóng góp mã nguồn mở
Thêm về tôi
Những bình luận này đã bị đóng, tuy nhiên bạn có thể Đăng ký hoặc Đăng nhập để đăng bình luận về một bài viết khác16 Bình luận
Serge Pimenov. 13 Tháng Tư, 2020
Đăng ký hoặc Đăng nhập để thích
Tàu điện ngầm 4 từ https. //metroui. tổ chức. ua
Bryant Sơn. 28 Tháng Tư, 2020
Đăng ký hoặc Đăng nhập để thích
Cảm ơn vì đã chia sẻ
Trả lời bởi Sergey Pimenov [chưa được xác minh]
James Farrell. 13 Tháng Tư, 2020
Đăng ký hoặc Đăng nhập để thích
Bryant cảm ơn, đó là một nơi tốt để bắt đầu, tôi có thể cần phải đi sâu vào vấn đề đó sớm [Tôi chắc chắn không phải là người đi trước nên các khung đơn giản sẽ giúp. ]
Bạn đã xem xét tất cả 960 [https. //960. gs/] hoặc phi nghĩa [https. // phi nghĩa. com/]?
Cảm ơn
Bryant Sơn. 28 Tháng Tư, 2020
Đăng ký hoặc Đăng nhập để thích
Không, đây là lần đầu tiên tôi nghe nói về nó. Nhưng cảm ơn vì đã chia sẻ điều này
Trả lời bởi JamesF
Simeon Udoh. 13 Tháng Tư, 2020
Đăng ký hoặc Đăng nhập để thích
Tôi không thấy tailwind CSS trong danh sách. Nó không phải là mã nguồn mở sao?
Seth Kenlon. 14 Tháng Tư, 2020
Đăng ký hoặc Đăng nhập để thích
https. //github. com/tailwindcss/tailwindcss/blob/master/GIẤY PHÉP
giấy phép MIT
Có thể làm một bổ sung tốt đẹp cho một bài viết trong tương lai
Trả lời bởi Simeon Udoh [chưa được xác minh]
Scott Nesbitt. 14 Tháng Tư, 2020
Đăng ký hoặc Đăng nhập để thích
Đây không phải là một hướng dẫn toàn diện cho tất cả các khung CSS. Nhiều điều sẽ luôn bị loại khỏi một bài báo như thế này. Đó là trường hợp của Tailwind CSS
Nếu bạn muốn viết phần giới thiệu về Tailwind, vui lòng trình bày ý tưởng đó với nhóm biên tập