Thiết kế đáp ứng: Tôi nên sử dụng khung nào? CSS3 & HTML5

Tôi đã tìm kiếm một tập hợp các tệp nền tảng HTML5 / CSS3 phù hợp để bắt đầu các dự án mới. Tôi đã bắt đầu chắp nối các tệp của riêng mình, nhưng tôi tin rằng tôi có thể được phục vụ tốt hơn trong việc tìm kiếm một khung CSS3 / HTML5 vững chắc và tương thích (với tôi) và sau đó điều chỉnh một số thứ có thể không phù hợp nhất với quy trình của riêng tôi.

Tôi muốn tìm một cái gì đó phản ứng nhanh và bao gồm các khía cạnh tập trung vào bố cục, loại (đường cơ sở hor và đỉnh), thành phần giao diện và giao diện, các vấn đề trên trình duyệt chéo và tốt nhất là được xây dựng trên một thứ khác ngoài thiết lập lại css đơn giản, nhưng điều đó bao gồm việc xây dựng lại các yếu tố một cách nhất quán trên các trình duyệt cho một bảng công việc sạch sẽ. Các tính năng bổ sung như polyfill hoặc các lĩnh vực khác là tuyệt vời, như là tài liệu và ví dụ tốt.

Cho đến nay, ngoài đỉnh đầu tôi biết,

• Bộ xương
• Lưới 1140
• 320 & Up (cộng với HA)
• HTML5 Boilerplate 2.0 và Mobile
• Inuit.css
• Khung ít hơn
• Fluir
• Perkins.
• Một vài chủ đề WP

Có ai tuyệt vời mà tôi không biết về? Tôi làm việc rất nhiều trong WP, và một cái gì đó dễ dàng kết hợp (nhưng cũng độc lập) là lý tưởng. Các plugin và tính năng thiết lập rộng trong khi duy trì khả năng cắt giảm khi cần thiết (tính linh hoạt) cũng là một điểm cộng lớn và ngang bằng với việc học nhanh hơn, vì tôi muốn bắt đầu sử dụng bất cứ thứ gì tôi tìm thấy ngay lập tức.

Một số tùy chọn tốt hơn mà các bạn có thể đề xuất là gì? Hệ thống hoặc tập lệnh, plugin và các công cụ liên quan khác cũng được chào đón, Cảm ơn!

Joni Korpi, người tạo ra khung 'Ít', vừa phát hành 'Hệ thống lưới vàng' của mình , một khung thích ứng đáng chú ý với máng xối đàn hồi và lưới đường cơ sở có thể phóng to.

Mặc dù vậy, bạn đã đề cập đến những cái phổ biến; nếu họ không đáp ứng nhu cầu của bạn, bạn nên khôn ngoan cân nhắc xây dựng khuôn khổ của riêng mình. Hai cuốn sách tôi khuyên bạn sẽ giúp:

• Thiết kế web đáp ứng của Ethan Marcotte
• Thiết kế web thích ứng của Aaron Gustafson

Khi xây dựng khung của riêng bạn (hoặc mẫu bắt đầu), bạn sẽ học được rất nhiều thứ và kết thúc với thứ gì đó phù hợp với sở thích và yêu cầu cụ thể của bạn. Các khung có thể rất tuyệt, nhưng cuối cùng bạn thường thực hiện nhiều thay đổi cho chúng để phù hợp với nhu cầu của bạn; Tại sao không chỉ đơn giản là bắt đầu từ đầu?

Twitter Bootstrap là một khuôn khổ tuyệt vời để xây dựng http://twitter.github.com/bootstrap/ một điều cần ghi nhớ là những gì bạn dự định xây dựng. Nếu wordpress có thể xử lý phần lớn các chức năng mà bạn đang tìm kiếm trong một ứng dụng thì bạn sẽ cần phải xem các mẫu WP.

Nếu bạn đang xây dựng một ứng dụng từ đầu một thứ gì đó phụ trợ thì twitter bootstrap và một số ứng dụng khác mà bạn đã liệt kê là tốt. Tôi sử dụng wordpress làm giao diện người dùng để quản lý nội dung trang web của chúng tôi nhưng phần phụ trợ là khung zend với jquery ui (chuyển sang bootstrap tiếp theo cam kết).

Tôi đã dành tuần qua làm việc với những người bạn đề cập. Tôi cũng đã thử Bootstrap của Twitter, HTML5 Boilerplate Mobile và Foundation của ZURB. Tất cả đều có vẻ bồng bềnh và nhiều hơn những gì tôi thực sự muốn.

Tôi bắt đầu tìm kiếm các dự án rẽ nhánh của tất cả những người quan tâm đến tôi trên Github. Sau đó, tôi lấy những phần tốt hơn từ tất cả các "khung" trên để xây dựng một cái gì đó cho riêng mình. Tôi đã kết thúc với Normalize.css thay vì Meyers Reset. Bootstrap Preboot.less với nhiều mixin .LESS. Một số thành phần từ Twitter Bootstrap. Và đặt tất cả chúng vào khung công tác .LESS 960 lấy cảm hứng từ Semantic.gs.

Tôi không thể hạnh phúc hơn!

Phần tốt nhất là tôi biết từng dòng mã trong tất cả các tệp của mình và nó thực sự rất nhỏ so với phần còn lại.

Bạn có thể tốt hơn nên làm điều gì đó như thế. Tôi cũng phản đối ý tưởng 'phát minh lại bánh xe'. Nhưng tôi thực sự muốn một cái gì đó để gọi riêng của tôi.

Tôi đã sử dụng 960g trong một thời gian và bây giờ tôi đã quen với nó. Tôi thích kích thước và cách dễ dàng để bạn có thể tạo bố cục tốt nhanh chóng.

Bây giờ với tất cả các thiết bị mới, 960ss đã hơi lỗi thời đối với tôi, vì nó sẽ không phù hợp với mọi thiết bị. Và tôi cũng không phải là một fan hâm mộ của việc sử dụng javascript để đánh hơi trình duyệt và sau đó tải css cho nó.

Wesbites đáp ứng là một giải pháp tuyệt vời và thanh lịch để khắc phục vấn đề của các thiết bị khác nhau. Vì tôi đã quen với việc sử dụng 960g, tôi đã tìm kiếm một thứ gì đó tương tự, và khung Skeleton hóa ra là người chiến thắng cho tôi. Nó chỉ quảng cáo một lớp đáp ứng cho hệ thống 960.

Một điều mà tôi cũng thích là nó có 4 điểm cố định đã nêu. Với một số khung, bố cục thay đổi trên mỗi kích thước lại trình duyệt. Khung xương chỉ gãy đến 4 trạng thái.

Một nhược điểm của thị trưởng mà tôi đã tìm thấy là pinch-zoom không hoạt động với các khung. Nó thay đổi kích thước màn hình, nhưng layour vẫn giữ nguyên.