Các khung web như Bootstrap hoặc HTML5 soạn sẵn có cung cấp bất cứ điều gì cho một nhà thiết kế (không phải nhà phát triển) không?

Lưu ý, đây là về thiết kế nhiều hơn phát triển.

Tôi xây dựng các trang web từ đầu với CSS và HTML hoàn toàn viết tay.

Tôi đã biết về các mẫu css dựng sẵn như Bootstrap hoặc HTML5 Boilerplate trong một thời gian. Tôi đã nhìn họ một thời gian ngắn trong quá khứ nhưng chưa bao giờ nhảy vào sử dụng chúng cho bất cứ điều gì. Tôi không có bất kỳ vấn đề nào khi đặt lại CSS, hoặc bao gồm javascript khi cần hoặc định cấu hình cho chế độ xem.

Tối nay, tôi đã mã hóa một trang HTML5 / CSS cơ bản. Không có gì thực sự rung chuyển về mặt bố trí. Đơn giản chỉ là một điểm nhảy ra. Sau đó tôi quyết định cho Bootstrap một vòng xoáy với cùng bố cục. Đó là một cột khá chuẩn 960px, 3 cột với trang hình ảnh anh hùng.

Khi tôi thay đổi Bootstrap, tôi nhận thấy rằng 80% hoặc hơn thời gian của tôi đã được dành để học lớp hoặc id nào được áp dụng cho một cái gì đó, sau đó tìm thấy điều đó trong CSS để điều chỉnh. Rõ ràng là Bootstrap sẽ không cứu tôi bất cứ lúc nào. Trên thực tế, Bootstrap sẽ tăng đáng kể thời gian sản xuất do CSS * templated quá mức.

* ( bởi "quá nhiều khuôn mẫu" Ý tôi là có rất nhiều CSS tôi có thể sẽ không sử dụng cho bất kỳ trang web cụ thể nào. Không phải là có toàn bộ CSS không cần thiết. )

Tôi hiểu rằng nếu tôi quen thuộc với Bootstrap, tôi sẽ quen với tên lớp / id và vị trí chung trong biểu định kiểu. Vì vậy, tôi sẵn sàng uốn éo một chút về thời gian nó đang chiếm lấy tôi, nhận ra rằng một số điều đó là do sự không quen thuộc của tôi.

Tuy nhiên, tôi không thể không tự hỏi nếu Bootstrap et. al. chỉ là những cái nạng được các nhà thiết kế làm tê liệt bằng cách cho chúng ăn nhãn hiệu mã của riêng họ. Do đó, khóa trong một cơ sở người tiêu dùng sẽ hoàn toàn dựa vào giải pháp của bên thứ ba và đó là chức năng cho mọi thứ, hoặc ít nhất là phần lớn. Nó làm tôi nhớ đến những người chỉ có thể thiết kế một trang web nếu họ có thể sử dụng Dreamweaver. Và trời cấm nếu họ không có quyền truy cập vào Dreamweaver và cần phải thay đổi.

Khi tôi xây dựng một trang web, tôi sử dụng tập hợp các tên ID và lớp tiêu chuẩn của riêng mình. Tôi cấu trúc CSS như thế nào trực quan cho tôi. Tôi có bộ mẫu dựng sẵn của riêng mình để thiết lập nhanh. Do đó, bất kỳ trang web nào tôi xây dựng tôi đều có thể chỉnh sửa khá nhanh. Sử dụng bất kỳ gói đầu cuối được cấu hình sẵn nào chỉ đơn giản là tôi cần tìm hiểu các quy ước đặt tên và cấu trúc của chúng thay vì dựa vào chính tôi.

• Bất cứ ai cũng có thể thể hiện cho tôi những đức tính tuyệt vời của các hệ thống tạo khuôn mẫu như Bootstrap hoặc HTML5 Boilerplate ?
• Điều gì làm cho chúng có giá trị với bạn?
• Bạn chỉ quen thuộc với hệ thống bạn sử dụng để bạn có thể điều hướng dễ dàng hoặc bạn vẫn phải săn lùng các mặt hàng?
• Bạn có thể xây dựng một trang web mà không có họ nếu bạn phải?

Tôi đã nghiên cứu các khuôn khổ rất nhiều vào tháng trước. Tôi chưa thực sự đi sâu vào bất kỳ giải pháp nào, nhưng một vài giải pháp thay thế khung có trong danh sách rút gọn của tôi là Foundation , Intuit và YAML và Base .

Điểm hay của những điều này là chúng không có giao diện 'Bootstrap' và dường như khuyến khích các nhà thiết kế thực hiện công việc (thiết kế) của họ, trong khi họ quan tâm đến khả năng đáp ứng.

Dưới đây là một danh sách lớn các khung và thông tin thêm trong bài viết này .

Như đã đề cập, tôi đã thực hiện các công việc nghiên cứu, nhưng chưa bắt đầu thử nghiệm chúng, vì vậy mọi ý kiến ​​ủng hộ bất kỳ khuôn khổ nào đều hữu ích.

Những lợi thế có xu hướng chủ yếu là:

• Tạo mẫu nhanh (tức là tốc độ)
• Tích hợp trình duyệt Cross tích hợp

Nếu bạn cần tạo lưới và lưới bạn cần tạo phù hợp với khung CSS dựng sẵn, thì logic là bạn đang ở giữa chừng bằng cách sử dụng khung.

Tất cả những gì đã nói, tôi có xu hướng đồng ý với bạn. Các khung CSS, IMHO, giống như các mẫu thiết kế trực quan ở chỗ nếu chúng đáp ứng 90% mục tiêu của bạn, thì chúng rất tuyệt, nhưng nếu không, thì bạn sẽ dành nhiều thời gian và công sức hơn để sửa đổi mặc định so với chỉ xây dựng của riêng bạn từ đầu.

ĐỊA CHỈ:

Tôi nên thêm một lợi ích tiềm năng:

• nó là một hệ thống tài liệu

Trong môi trường doanh nghiệp, nơi bạn có thể có một số nhà phát triển giao diện người dùng và dự án có thể kéo dài vài năm với một số nhóm nhà phát triển giao diện người dùng khác nhau, có một khung lớp trình bày cơ bản được ghi lại có thể giúp ích.

Điều đó không có nghĩa là khung làm việc tại nhà của bạn không thể được ghi lại, chỉ là tài liệu đó thường không phải là ưu tiên.

Tôi quen thuộc với HTML5 Boilerplate, nhưng tôi quen thuộc hơn với Bootstrap, vì vậy tôi sẽ nói về điều đó. Hãy nhớ rằng cả hai đều hướng đến hai nhiệm vụ khác nhau, (H5BP là một mẫu được chuẩn hóa đáp ứng, Bootstrap là một tập hợp các widget HTML / CSS / JS và một lưới phản hồi.) Thực tế chúng có thể được sử dụng cùng nhau .

Tuy nhiên, tôi không thể không tự hỏi nếu Bootstrap et. al. chỉ là những cái nạng được các nhà thiết kế làm tê liệt bằng cách cho chúng ăn nhãn hiệu mã của riêng họ. Do đó, khóa trong một cơ sở người tiêu dùng sẽ hoàn toàn dựa vào giải pháp của bên thứ ba và đó là chức năng cho mọi thứ, hoặc ít nhất là phần lớn. Nó làm tôi nhớ đến những người chỉ có thể thiết kế một trang web nếu họ có thể sử dụng Dreamweaver. Và trời cấm nếu họ không có quyền truy cập vào Dreamweaver và cần phải thay đổi.

Tương tự thất bại ở đây vì bạn có quyền truy cập đầy đủ vào nguồn Bootstrap. Nếu bạn không thích cách thức hoạt động của một cái gì đó, bạn có thể thay đổi nó. Đối với tôi nó trái ngược với một cái nạng - bạn có thể sử dụng mã nguồn để tìm hiểu các kỹ thuật css.

Tôi không đồng ý rằng "thiết kế trang web" cần phải gần với kim loại hơn tôi tin rằng các lập trình viên C cần phải có kiến ​​thức sâu sắc về ngôn ngữ lắp ráp. Mặc dù sự tương tự đó không thay đổi vì việc điều chỉnh HTML / CSS chỉ đơn giản là vấn đề mở rộng các bộ chọn và thêm những gì bạn cần.

Bất cứ ai cũng có thể thể hiện cho tôi những đức tính tuyệt vời của các hệ thống tạo khuôn mẫu như Bootstrap hoặc HTML5 Boilerplate?

Đối với tôi, tính năng sát thủ của Bootstrap là tính linh hoạt và các thành phần Javascript phù hợp và dễ áp ​​dụng. Bạn muốn một liên kết để trông giống như một nút? Thêm một lớp '.btn'. Bạn muốn một cái bàn? Thêm một lớp '.table'. Bạn muốn một yếu tố điều hướng? Thiết lập một danh sách không có thứ tự và thêm các lớp điều hướng.

Dropdowns, popovers, alert, v.v ... dễ dàng được thêm vào các phần tử có thuộc tính dữ liệu. Bootstrap bao gồm một bộ biểu tượng trông rất đẹp có thể dễ dàng tích hợp vào các widget.

Điều gì làm cho chúng có giá trị với bạn?

• Có thể nhanh chóng các trang web nguyên mẫu
• Tất cả các gỡ lỗi của trình duyệt chéo và css đa nền tảng đã được thực hiện cho tôi.
• CSS dễ dàng tùy chỉnh với nhiều lựa chọn biến để tôi có thể thử nghiệm và bố trí nguyên mẫu một cách nhanh chóng.
• Vật dụng điều hướng tiêu chuẩn
• Mã nguồn mở và miễn phí, tôi có thể bị bẩn tay và tùy chỉnh LESS nếu tôi cần một mixin mới hoặc thay đổi hành vi theo cách tôi cần.

Bạn chỉ quen thuộc với hệ thống bạn sử dụng để bạn có thể điều hướng dễ dàng hoặc bạn vẫn phải săn lùng các mặt hàng?

Một trong những tính năng lớn nhất của Bootstrap là tài liệu tuyệt vời của nó . Tôi có thể điều hướng nó dễ dàng và bộ chọn css trực quan và dễ nhớ.

Bạn có thể xây dựng một trang web mà không có họ nếu bạn phải?

Vâng, nhưng rõ ràng là nhiều công việc hơn. Tôi có thể tập trung vào UX và bố trí nguyên mẫu nhanh chóng với các vật dụng đẹp mắt và chức năng phù hợp.

Điều thú vị về hệ thống khuôn mẫu và khung là chúng có thể giúp bạn tiết kiệm rất nhiều thời gian nếu bạn làm việc theo cách họ muốn bạn. Vì vậy, với Bootstrap, một khi bạn học được ngữ nghĩa của chúng để thực hiện một băng chuyền JS, việc thực hiện gần như đơn giản về mặt hình sự. Ngoài ra, Bootstrap dường như đơn giản hơn rất nhiều nếu bạn tự cuộn mình trước khi bắt đầu hoặc sử dụng một cái gì đó như bootstrap-sass trong Rails để thay đổi các biến đó một cách nhanh chóng; nó sẽ cứu bạn khỏi thay đổi mọi thứ xung quanh sau này.

DA01 nói về tính nhất quán của trình duyệt ... đó là một yếu tố lớn đối với tôi. Đó là lý do tại sao tôi sử dụng jQuery mặc dù bất kỳ số lượng người nào ở SO sẽ nhắc nhở bạn rằng thêm một thư viện lớn chỉ để làm một vài việc là lãng phí tài nguyên. Tôi biết rằng khi tôi sử dụng jQuery, nó sẽ hoạt động trên một bộ trình duyệt nhất định và do đó, mặc dù tôi có thể tự mình đạt được một giải pháp nhẹ hơn, tôi đã thấy có ích hơn khi tìm hiểu cách jQuery muốn tôi viết JavaScript và sau đó làm theo cách của họ.

Cuối cùng, tôi có xu hướng tìm các khung HTML / CSS hạn chế; Tôi đủ khả năng kiểm soát mà tôi vẫn muốn viết mã bằng tay khi có thể. Nhưng, tôi tôn trọng thực tế rằng mọi người thông minh hơn và tiên tiến hơn tôi đã dành rất nhiều thời gian để thiết lập các mẫu / khung này.

Không quan tâm, có ai trong số bạn làm việc trong một nhóm lớn cho một công ty lớn không?

Các khung như bootstrap là tuyệt vời để tạo ra một tiêu chuẩn mã nhất quán trong toàn dự án, điều đó cũng có nghĩa là khi tuyển dụng cho các nhà phát triển mới, những người có kinh nghiệm về một khung công tác phổ biến sẽ quen với cú pháp và có thể trở nên hiệu quả nhanh hơn ... tin tức tuyệt vời cho các công ty lớn.

Ngoài ra .. với các khung như bootstrap, họ liên tục cập nhật nó bằng cách hỗ trợ nhiều kích thước màn hình hơn, nhiều thiết bị hơn và các tính năng tốt hơn cho một công ty như chúng tôi (nơi chúng tôi sử dụng bootstrap) về cơ bản tiết kiệm tiền.

Đọc một số câu trả lời cho đến nay, họ dường như rất hẹp hòi, tôi cho rằng hầu hết các câu trả lời là từ những người đã từng làm việc một mình hoặc trong các nhóm rất nhỏ và trong các dự án nhỏ hơn mà loại điều này thường không phải là vấn đề .

Thêm vào những gì đã được nói trong các câu trả lời tuyệt vời trước đó, một lợi thế khác cho các mẫu này sẽ là tính nhất quán giữa các thiết bị . Các lưới tích hợp giúp thiết kế rất dễ dàng cho mọi hệ điều hành.

Tôi vẫn thích viết mã của riêng mình, vì những lý do sau:

• Làm quen với những gì tôi đã viết. Nếu tôi cần thay đổi bất cứ điều gì, tôi biết chính xác nó ở đâu;

• Cấu trúc dự án tập trung. Mỗi trang web / ứng dụng mới sẽ có các nhu cầu khác nhau so với trước đây, do đó các tệp và tài nguyên có thể cần phải được tổ chức riêng.

• Chế độ xem tùy chỉnh cho các thiết bị khác nhau.

Trừ khi bạn đang tạo một trang rất hạn chế, cuối cùng bạn sẽ thêm nhiều kiểu hơn vào các thành phần mới và ghi đè lên các trang hiện có.

Bởi vì tôi thích làm việc với các thiết kế đáp ứng, lý do chính khiến tôi không sử dụng chúng là vì tôi thích thiết kế từng bước đáp ứng "riêng biệt" và nói chung. Và các mẫu này thường hoạt động với một lưới cứng hơn hoặc ít hơn mà bạn không thể điều chỉnh đầy đủ.

Ưu điểm lớn nhất là bạn có thể thử nghiệm thay đổi kích thước bản thân thay vì chỉ suy đoán mọi thứ sẽ như thế nào.

Tôi có một cách tiếp cận phát triển "nội dung đầu tiên" trong đó tôi thực sự viết mã điều hướng và thêm nội dung văn bản. Nó có xu hướng đưa bạn đến những điều mà bạn không lường trước được khi bạn đang trong giai đoạn thiết kế.

Bằng cách sử dụng một khung như Twitter Bootstrap, bạn thực sự có thể kiểm tra các trang trong khi vẫn thiết kế và thậm chí có thể phát hiện ra các vấn đề về khả năng sử dụng và các thách thức Trải nghiệm người dùng khác. Các khung công tác có nhiều lớp có thể tái sử dụng mà bạn sẽ làm quen và sẽ giúp bạn tiết kiệm thời gian.

Bạn đã đề cập rằng bạn mã rất nhiều từ đầu. Khi tôi có một cái gì đó cần phải rất tùy chỉnh hoặc trọng lượng rất nhẹ, tôi đi với Skeleton

Trong nhiều năm, tôi thường mã hóa mọi thứ, nhưng ngày nay tôi có xu hướng sử dụng Bootstrap. Tại sao tôi làm điều đó?

1. Tôi nhận được một bố trí đáp ứng với rất ít công việc. Tại một số trang web tôi đang làm việc, nó chỉ cần một vài điều chỉnh nhỏ để có được bố cục được tối ưu hóa cho máy tính bảng và di động. Thanh điều hướng đáp ứng là một trong những thành phần bootstrap yêu thích của tôi.
2. Các điều khiển mặc định không nhất quán giữa các trình duyệt và HĐH, chưa kể chúng đều xấu về bất cứ hệ điều hành hay trình duyệt nào bạn đang sử dụng. Với bootstrap, bạn có được một cái nhìn đàng hoàng, nhất quán và cảm thấy ít công việc. Dù sao bạn cũng muốn sắp xếp lại tất cả các điều khiển, nhưng đúng vậy, Bootstrap sẽ không giúp bạn tiết kiệm nhiều thời gian, nhưng theo kinh nghiệm của tôi, hầu hết thời gian bạn sẽ không có đủ thời gian để gác lại mọi điều khiển nhưng vẫn cảm thấy khó chịu vì mặc định xấu xí điều khiển.
3. Nó đặt giới hạn cho những gì bạn muốn làm, đó là một điều tốt, bởi vì khi làm việc trong CSS thuần túy, bạn có xu hướng muốn điều chỉnh mọi thứ nhỏ nhặt (màu sắc, độ dày đường viền, độ dốc, bóng, bán kính đường viền, chuyển tiếp, và danh sách tiếp tục), trong khi cá nhân họ mất ít thời gian, trên toàn bộ nó là một thời gian lớn. Khi làm việc với các dự án có thời hạn, bạn muốn giới hạn những gì bạn có thể và không thể làm; sử dụng các khung công tác cho phép bạn suy nghĩ trong các thành phần chi tiết thô thay vì các thuộc tính CSS cần điều chỉnh.
4. Một số khung phía máy chủ có tích hợp với bootstrap. Chẳng hạn, khi sử dụng django-bootstrap, bạn chỉ có thể thực hiện {{ form|as_bootstrap }}để có được các biểu mẫu theo kiểu bootstrap, bao gồm tô sáng màu đỏ trên các thông báo lỗi, v.v.

Khi tôi thay đổi Bootstrap, tôi nhận thấy rằng 80% hoặc hơn thời gian của tôi đã được dành để học lớp hoặc id nào được áp dụng cho một cái gì đó, sau đó tìm thấy điều đó trong CSS để điều chỉnh.

Đó là nơi bạn hiểu sai. Nếu bạn muốn hưởng lợi từ Bootstrap, bạn không nên tùy chỉnh quá nhiều; bạn từ bỏ tính linh hoạt của việc phải và có thể điều chỉnh mọi thứ khi sử dụng các thành phần dựng sẵn. Bạn không nên dành thời gian cưa hoặc chạm khắc gỗ khi trang trí phòng từ các thành phần của IKEA.

Bootstrap là tốt khi bạn cần nhanh chóng vá một trang web hoạt động từ các thành phần dựng sẵn; các thành phần của chúng không giống như ngón tay cái nếu bạn đặt chúng vào các trang web có thiết kế lạ mắt, vì vậy tôi thường thả Bootstrap cho các loại dự án đó.

Sử dụng bất kỳ gói đầu cuối được cấu hình sẵn nào chỉ đơn giản là tôi cần tìm hiểu các quy ước đặt tên và cấu trúc của chúng thay vì dựa vào chính tôi.

Đó thực sự là một lợi thế của việc sử dụng một gói phổ biến. Việc giao dự án cho nhà phát triển khác sẽ dễ dàng hơn khi cả hai bạn đều biết "btn-group", "btn btn-Large" làm gì, với các khung cá nhân họ sẽ phải tìm hiểu đặc thù của bạn (hoặc phổ biến hơn, họ chỉ cần xếp tầng css của bạn với những thay đổi của họ và không bận tâm đến việc giải mã hoặc sửa đổi mã của bạn).

Bạn chỉ quen thuộc với hệ thống bạn sử dụng để bạn có thể điều hướng dễ dàng hoặc bạn vẫn phải săn lùng các mặt hàng?

Những cái phổ biến như btn, bảng, hàng *, span *, v.v ... sẽ là tự nhiên. Nhưng đối với html cho các thành phần chính, việc sao chép-dán từ các ví dụ của chúng sẽ nhanh hơn nhiều so với việc gõ chúng ra.

Bạn có thể xây dựng một trang web mà không có họ nếu bạn phải?

Đã ở đó, làm điều đó, nhiều lần.

chúng chỉ tốt cho:

1. các nhà thiết kế không quen thuộc với mã hóa nhưng muốn có một giải pháp để đưa các thiết kế của họ đến một trang web.
2. một cách để truyền phát sản xuất dòng cho ai đó không muốn xây dựng khung riêng của họ.

Cá nhân tôi có phương pháp riêng của mình và không muốn đi theo con đường này vì tôi đã học cách mã hóa CSS, HTML và jQuery. Tôi thấy một lợi ích trong những điều này cho những người không có đầu mối và đang cố gắng học cách viết mã. Thật tuyệt khi thấy một cái gì đó như thế này khoảng năm năm trước. Ngoài ra, như bạn đã nói, bạn sẽ mất nhiều thời gian hơn để thực hiện điều này trong các phương thức sản xuất hiện tại của bạn.

EDIT: không cố gắng đánh dấu chủ đề của bạn nhưng tôi cũng đang tự hỏi điều tương tự nhưng liên quan đến WordPress. Tôi đã sử dụng WordPress một cách nhẹ nhàng nhưng tôi không biết liệu một khung có lợi hay không. Tôi đã lên kế hoạch để đi theo con đường cũ cho đến khi tôi có thể tìm thấy một lợi ích lớn.

Bootstrap là điểm khởi đầu cho bố cục đáp ứng. Nhưng theo như thiết kế thì tôi nghĩ nó khá thiếu. Nó có giao diện 'bootstrappy', bởi vì mẫu của nó được sử dụng quá mức ..

Nhưng bạn phải nhớ rằng bootstrap được tạo ra để làm gì, đó là mang lại sự nhất quán cho các ứng dụng nội bộ được xây dựng bởi twitter và nếu bạn sử dụng nó cho điều đó, hoặc ngay cả khi nhà phát triển của bạn muốn nhanh chóng tạo ra web ứng dụng mà không cần suy nghĩ nhiều, có lẽ là một mvp hoặc nguyên mẫu, nó là một công cụ thực sự tuyệt vời.