Dự án html, css mã nguồn mở
|
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 Show
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 BootstrapBootstrap 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ẫuBayPatternFly 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 webVớ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ấtBootstrap, 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ậpFoundation 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 BulmaBulma 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ươngNế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 bootflatBootflat 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
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 webBả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ácCá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ùngBạ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ác 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 Tôi có thể xây dựng dự án nào với HTML và CSS?7 Dự án CSS HTML tốt nhất cho người mới bắt đầu . Xây dựng một danh mục đầu tư hoặc trang web cá nhân đơn giản. . Làm cho sơ yếu lý lịch của bạn tương tác. . Tạo một Bản tin Email. . Tạo một trang web đáp ứng tĩnh. . Xây dựng một hình thức. . Tạo hoạt ảnh. . Đóng góp cho một dự án mã nguồn mở. . Tìm email xây dựng công việc Tôi có thể thực hành HTML và CSS miễn phí ở đâu?Cách học HTML miễn phí . Codecademy có nhiều chương trình miễn phí cung cấp cho bạn những kỹ năng kỹ thuật cần thiết. . Tìm hiểu-HTML. org là một nguồn đáng tin cậy cho mọi thứ bạn cần biết về HTML. . General Assembly Dash là một trang web phổ biến để bắt đầu tìm hiểu những kiến thức cơ bản về HTML Tôi có thể kiếm tiền chỉ bằng HTML và CSS không?Tóm lại, bạn chắc chắn có thể tìm được công việc chỉ bằng HTML và CSS. Và nếu những kỹ năng nền tảng đó không đủ để giúp bạn có được công việc mơ ước, bạn vẫn có thể sử dụng chúng để bắt đầu kiếm tiền trong khi đang xây dựng các kỹ năng khác .
Tôi có thể thực hành HTML CSS ở đâu?10 trang web để bạn thực hành kỹ năng phát triển giao diện người dùng 😲 . Cố vấn giao diện người dùng. Cải thiện kỹ năng mã hóa mặt trước của bạn bằng cách giải quyết các thách thức HTML, CSS và JavaScript trong thế giới thực trong khi làm việc với các thiết kế chuyên nghiệp Thử thách Codepen. . Codewell. . Trận chiến CSS. . FreeCodeTrại. . mật mã. . thử thách nhà phát triển. io. . Ace FrontEnd |
