HTML5/CSS3 khung không phân lớp

Question

Có ai biết về khung công tác HTML5/CSS3 đơn giản áp dụng tối thiểu định dạng mà không cần tên lớp tùy chỉnh không? Lý tưởng nhất là nó sẽ chỉ đưa HTML5 ra đúng cách, và sẽ định vị các phần tử với độ linh hoạt tối thiểu, sử dụng các quy tắc chung cho, nói độ rộng của thanh bên và tương tự.

Với HTML5 có ít nhu cầu hơn cho tên lớp tùy chỉnh, với các thành phần như header, nav hoặc aside, nhưng tôi chưa thấy một khung hình nào tận dụng tối đa điều đó. Ý tưởng nào?

Làm rõ: Tôi đã trải qua tất cả các nghi phạm thông thường (Bootstrap, HTML% Boilerplate, Shim và các loại tương tự), và không ai trong số họ gãi ngứa của tôi. Và đó là một kết hợp đơn giản của cấu trúc HTML5 đơn giản mà không có gì về thiết kế nhưng định nghĩa tất cả mọi thứ ngữ nghĩa, với một bản định kiểu CSS3 đơn giản xác định bố cục thực tế. Tôi có thể hình dung nó bằng cách sử dụng một số bảng định kiểu, với một cơ sở xác định cách bố trí của các phần tử và một (các) phần riêng biệt cho thiết kế thực tế. Nó sẽ được sử dụng như một điểm khởi đầu đơn giản cho các dự án khác nhau, mà sau này có thể được tùy chỉnh riêng lẻ.

Rõ ràng, tôi có thể cần phải đi theo con đường của Wesley đề xuất và viết một bản thân mình ...

Answer 1

Nghe có vẻ như những gì bạn muốn không phải là một khuôn khổ CSS, nhưng chỉ là một kiểu tùy chỉnh đơn giản.

Không khuyến khích nỗ lực của bạn trong việc tìm kiếm thứ gì đó đã tồn tại, nhưng bạn nên tự viết nó đi. Có lẽ bắt đầu với một trong nhiều hiện tại reset.css. Các kiểu mặc định không có khả năng móc vào (hoặc ra) thông qua các tên lớp không phải là rất linh hoạt.

Bạn thực sự không nên tránh các lớp học, bạn nên tận dụng lợi thế của chúng. Không có khuôn khổ nào sẽ biết vị trí và cách thức các phần tử HTML của bạn được lồng nhau hoặc những gì chúng được cho là trông giống như chỉ dựa trên tên thẻ, đó là một lý do tại sao chúng tôi thường sử dụng các lớp.

Nếu bạn chú ý đến ngữ nghĩa của các phần tử HTML5 mới, bạn sẽ thấy rằng header không phải lúc nào cũng có nghĩa là "đầu trang của bạn có biểu tượng của bạn", footer không chỉ là phần tử cho phần dưới cùng của toàn bộ trang của bạn và aside không phải lúc nào cũng tương đương với "thanh bên".

Answer 2

Bạn có thể bắt đầu ứng dụng HTML5 của bạn với HTML5 Boilerplate.

Dan Wahlin đăng tải một bài viết trên blog tốt về nhận nó thiết lập:

http://weblogs.asp.net/dwahlin/archive/2011/06/05/getting-started-using-html5-boilerplate.aspx

Answer 3

Tôi không có nhiều kinh nghiệm với nó, nhưng bạn có thể tìm thấy Twitter Bootstrap hữu ích. Nó sử dụng một hệ thống lưới điện cho phép bạn dễ dàng định vị các yếu tố trên trang. Điều này có thể đặc biệt hữu ích cho việc tạo các khu vực cho sidebars và các tính năng phổ biến khác trên các trang.

Tuy nhiên, nó có phần trái ngược với những gì bạn đang đề xuất vì nó sử dụng các lớp khá nhiều. Từ những gì tôi đã thấy mặc dù, các lớp học được xử lý một cách rất có cấu trúc để có thể gần với những gì bạn đang tìm kiếm.

Answer 4

https://github.com/herrshuster/style.css

Đây là dự án hiện tại của tôi. Nó chưa hoàn toàn sẵn sàng cho việc triển khai, nhưng đó chính xác là những gì bạn đang tìm kiếm. Tôi rất thích bất kỳ đề xuất nào bạn có hoặc nếu bạn muốn nói về nó. This is a test page where you can see the semantic layout

Answer 5

Đối với bất kỳ ai quan tâm đến chủ đề này, tôi khuyên bạn nên đọc articles by Heydon Pickering, người đã xây dựng chủ đề his blog mà không sử dụng bất kỳ lớp nào.

---

tôi cũng khuyên bạn nên kiểm tra ra my project nhằm tạo ra một fundamental classless HTML template cho các blog và các trang web blog-tương tự (mỗi trang web với một tiêu đề và một tác giả, với các trang, bài viết và phần) và thêm các chủ đề CSS tinh khiết trên đầu trang của nó. Mẫu này sử dụng quá nhiều phần, tiêu đề và chân trang HTML5 và các giả định nhỏ trong phần mà bạn nên đặt từng nội dung trang web. themes là các cổng của các chủ đề khung công cụ khác trên internet.

Có một số playground nơi bạn có thể thử nghiệm các chủ đề trên các trang HTML khác nhau dựa trên mẫu cơ bản (chỉ cần viết tên chủ đề trên hộp hoặc dán url CSS). Ngoài ra còn có một số bad old article Tôi đã viết trong khi cố gắng suy nghĩ về chủ đề này.

Answer 6

Tôi tìm thấy một nhu cầu rất giống nhau và kết thúc làm cho dự án của riêng tôi: https://github.com/oxalorg/sakura

Bạn chỉ cần thả trong sakura.css và bạn tốt để đi, không có thay đổi cần thiết sang HTML.

Dưới đây là một bản demo : https://oxal.org/projects/sakura/demo/