Предлагают ли веб-фреймворки, такие как Bootstrap или HTML5, что-нибудь дизайнеру (не разработчику)?

Преимущества, как правило, заключаются в следующем:

• Быстрое прототипирование (т. е. скорость)
• Встроенная совместимость с разными браузерами

Если вам нужно создать сетку, и сетка, которую вам нужно создать, соответствует предварительно созданной структуре CSS, то логика такова, что вы уже на полпути, используя структуру.

Во всем сказанном я склонен с вами согласиться. Фреймворки CSS, ИМХО, похожи на шаблоны визуального дизайна в том смысле, что если они соответствуют 90% вашей цели, они великолепны, но если они этого не делают, то вы тратите гораздо больше времени и усилий на изменение стандартного по сравнению с просто созданием свой собственный с нуля.

ДОПОЛНЕНИЕ:

Я должен добавить еще одно потенциальное преимущество:

• это документированная система

В корпоративной среде, где у вас может быть несколько разработчиков внешнего интерфейса, а проект может длиться несколько лет с несколькими разными группами разработчиков внешнего интерфейса, может помочь документированная базовая структура уровня представления.

Это не значит, что ваш собственный самодельный фреймворк нельзя задокументировать, просто документация часто не является приоритетом.

Я знаком с HTML5 Boilerplate, но больше знаком с Bootstrap, поэтому расскажу об этом. Помните, что оба предназначены для решения двух разных задач (H5BP — адаптивный нормализованный шаблон, Bootstrap — набор виджетов HTML/CSS/JS и адаптивная сетка). На самом деле их можно использовать вместе .

Тем не менее, я не могу не задаться вопросом, может ли Bootstrap et. др. это всего лишь костыли, которые калечат дизайнеров, ложкой кормя их собственным кодом. Таким образом, блокируется потребительская база, которая будет полностью полагаться на стороннее решение и его функциональность для всего или, по крайней мере, для большинства. Это напоминает мне о тех, кто может создать веб-сайт только в том случае, если они могут использовать Dreamweaver. И боже упаси, если у них нет доступа к Dreamweaver и потребуется изменение.

Аналогия здесь не работает, потому что у вас есть полный доступ к исходному коду Bootstrap. Если вам не нравится, как что-то работает, вы можете это изменить. Для меня это противоположность костыля — вы можете использовать исходный код для изучения методов CSS.

Я не согласен с тем, что «разработка веб-сайта» должна быть настолько близкой к металлу, не больше, чем я считаю, что программистам на C необходимо хорошо знать язык ассемблера. Хотя даже эта аналогия не работает, потому что настройка HTML/CSS — это просто вопрос расширения селекторов и добавления того, что вам нужно.

Кто-нибудь может похвалить меня за великие достоинства таких систем шаблонов, как Bootstrap или HTML5 Boilerplate?

Для меня ключевой особенностью Bootstrap является последовательный и простой в применении стиль виджетов и компоненты Javascript. Хотите, чтобы ссылка выглядела как кнопка? Добавьте класс '.btn'. Хотите столик? Добавьте класс .table. Хотите элемент навигации? Настройте неупорядоченный список и добавьте классы навигации.

Выпадающие списки, всплывающие окна, оповещения и т. д. легко добавляются к элементам с атрибутами данных. Bootstrap включает в себя очень красивый набор иконок, которые можно легко интегрировать в виджеты.

Что делает их ценными для вас?

• Может быстро создавать прототипы сайтов
• Вся отладка кроссбраузерного и кроссплатформенного css была сделана за меня.
• Легко настраиваемый CSS с широким выбором переменных , поэтому я могу быстро экспериментировать и создавать прототипы макетов.
• Стандартные навигационные виджеты
• Исходный код открыт и свободен, я могу запачкать руки и настроить LESS, если мне нужен новый миксин или изменить поведение так, как мне нужно.

Вы просто знакомы с системой, которую используете, чтобы легко ориентироваться в ней, или вам все еще нужно искать предметы?

Одной из главных особенностей Bootstrap является отличная документация . Я могу легко перемещаться по нему, а селекторы css интуитивно понятны и легко запоминаются.

Смогли бы вы создать сайт без них, если бы вам пришлось?

Да, но это явно больше работы. Я могу сосредоточиться на UX и быстро прототипировать макеты с готовыми хорошо выглядящими виджетами и последовательной функциональностью.

Хорошая вещь в системах шаблонов и фреймворках заключается в том, что они могут сэкономить вам много времени , если вы работаете так, как они хотят. Итак, с Bootstrap, как только вы изучите их семантику для создания карусели JS, реализовать ее будет почти преступно просто. Кроме того, кажется, что Bootstrap становится намного проще, если вы либо создадите свой собственный перед тем, как начать, либо используете что-то вроде bootstrap-sass в Rails, чтобы изменять эти переменные на лету; это убережет вас от необходимости все менять позже.

DA01 говорит о согласованности браузера... для меня это важный фактор. Вот почему я использую jQuery, даже несмотря на то, что многие люди в SO напомнят вам, что добавление большой библиотеки только для того, чтобы делать несколько вещей, — это пустая трата ресурсов. Я знаю, что когда я использую jQuery, он будет работать в определенном наборе браузеров, и поэтому, хотя я, вероятно, могу найти более легкое решение самостоятельно, я нашел более полезным узнать, как jQuery хочет, чтобы я писал JavaScript, а затем сделайте это по-своему.

В конце концов, я склонен находить фреймворки HTML/CSS ограничивающими; Я достаточно помешан на контроле, поэтому мне все еще нравится программировать вручную, когда я могу. Но я уважаю тот факт, что люди умнее и продвинутее меня потратили много времени на настройку этих шаблонов/фреймворков.

Я много изучал фреймворки в прошлом месяце или около того. На самом деле я не углублялся ни в одно из решений, но в моем списке есть несколько альтернативных фреймворков: Foundation , Intuit , YAML и Base .

Хорошая вещь в них заключается в том, что они не выглядят как «Bootstrap» и, кажется, побуждают дизайнеров к своей работе (дизайну), в то время как они заботятся об отзывчивости.

Вот большой список фреймворков и дополнительная информация в этой статье .

Как уже упоминалось, я проделал исследовательскую работу, но еще не начал их тестировать, поэтому любые комментарии в защиту какой-либо из платформ будут полезны.

Ради интереса, кто-нибудь из вас работает в большой команде на крупную компанию?

Такие фреймворки, как bootstrap, отлично подходят для создания единого стандарта кода в рамках всего проекта. Это также означает, что при наборе новых разработчиков те, у кого есть опыт работы с популярными фреймворками, уже знакомы с синтаксисом и смогут работать намного быстрее... отличные новости для крупных компаний.

Кроме того... с такими фреймворками, как bootstrap, они постоянно обновляют его, поддерживая больше размеров экрана, больше устройств и лучшие функции, для такой компании, как наша (где мы используем bootstrap), это сводится к экономии денег.

Читая некоторые ответы до сих пор, они кажутся очень узкими, я предполагаю, что большинство ответов исходят от людей, привыкших работать в одиночку или в очень небольших командах и над небольшими проектами, где такие вещи обычно не проблема. .

В дополнение к тому, что было сказано в замечательных предыдущих ответах, еще одним преимуществом этих шаблонов будет согласованность между устройствами . Встроенные сетки упрощают проектирование для любой ОС.

Я по-прежнему предпочитаю писать свой собственный код по следующим причинам:

• Знакомство с тем, что я уже написал. Если мне нужно что-то изменить, я точно знаю, где это;

• Проектно-ориентированная структура. Каждый новый сайт/приложение будет иметь другие потребности, чем предыдущий, поэтому файлы и ресурсы, возможно, потребуется организовать отдельно.

• Индивидуальные представления для разных устройств.

Если вы не создаете очень ограниченную страницу, вы в конечном итоге будете добавлять все больше и больше стилей к новым элементам и перезаписывать существующие.

Поскольку мне нравится работать с адаптивным дизайном, основная причина, по которой я бы не стал их использовать, заключается в том, что я предпочитаю разрабатывать каждый адаптивный шаг «отдельно» и в целом. И эти шаблоны обычно работают с более или менее жесткой сеткой, которую вы не можете полностью настроить.

Самым большим преимуществом является то, что вы можете сами экспериментировать с изменением размера, а не просто размышлять о том, как все будет выглядеть.

У меня очень подход к разработке «сначала контент», когда я фактически кодирую навигацию и добавляю текстовое содержимое. Он имеет тенденцию подвергать вас вещам, которые вы не ожидали, когда были на этапе проектирования.

Используя такой фреймворк, как Twitter Bootstrap, вы можете тестировать страницы еще в процессе разработки и даже выявлять проблемы с удобством использования и другие проблемы взаимодействия с пользователем. Фреймворки имеют множество повторно используемых классов, с которыми вы познакомитесь и которые сэкономят ваше время.

Вы упомянули, что много пишете с нуля. Когда у меня есть что-то, что должно быть очень нестандартным или очень легким, я выбираю Skeleton.

В течение многих лет я писал все вручную, но в настоящее время я склонен использовать Bootstrap. Почему я это делаю?

1. Я получаю отзывчивый макет с очень небольшой работой. На некоторых веб-сайтах, над которыми я работал, требовалось всего несколько незначительных изменений, чтобы получить макет, оптимизированный для планшетов и мобильных устройств. Отзывчивая панель навигации — один из моих любимых компонентов начальной загрузки.
2. Элементы управления по умолчанию несовместимы между браузерами и ОС, не говоря уже о том, что все они неизменно уродливы, какую бы ОС или браузер вы ни использовали. С бутстрапом вы получаете достойный, согласованный вид и чувствуете себя мало работающим. Если вы все равно хотите изменить стиль всех элементов управления, то да, Bootstrap не сэкономит вам много времени, но, по моему опыту, большую часть времени у вас не будет достаточно времени, чтобы изменить стиль всех элементов управления, но вы все еще чувствуете раздражение из-за уродливого значения по умолчанию. контролирует.
3. Это накладывает ограничения на то, что вы хотите сделать, и это хорошо, потому что при работе в чистом CSS вы, как правило, хотите настроить каждую мелочь (цвет, толщину границы, градиент, тень, радиус границы, переходы, и этот список можно продолжить), хотя по отдельности они занимают мало времени, в целом это большая трата времени. Работая над проектами с дедлайном, вы хотите ограничить то, что вы можете и что не можете сделать; использование фреймворков позволяет вам думать о более мелких компонентах, а не о том, какие свойства CSS нужно настраивать.
4. Некоторые серверные фреймворки имеют интеграцию с бутстрапом. Например, при использовании django-bootstrap вы можете просто {{ form|as_bootstrap }}получить формы в стиле начальной загрузки, включая выделение красным цветом сообщений об ошибках и т. д.

Когда я изменяю Bootstrap, мне пришло в голову, что 80% или более моего времени уходит на изучение того, какой класс или идентификатор был применен к чему-либо, а затем на поиск этого в CSS для настройки.

Вот где вы ошибаетесь. Если вы хотите извлечь выгоду из Bootstrap, вам не следует слишком много настраивать; вы отказываетесь от гибкости и возможности настраивать все при использовании готовых компонентов. Вы не должны тратить время на распиливание или вырезание деревянных досок при отделке комнаты из комплектующих ИКЕА.

Bootstrap хорош, когда нужно быстро подлатать работающий сайт из готовых компонентов; их компоненты торчат, как больной палец, если вы размещаете их на сайтах с причудливым дизайном, поэтому я обычно отказываюсь от Bootstrap для таких проектов.

Использование любого из предварительно настроенных интерфейсных пакетов просто означает, что мне нужно изучить их соглашения об именах и их структуру, а не полагаться на свои собственные.

На самом деле это преимущество использования популярного пакета. Легче передать проект другому разработчику, когда вы оба знаете, что делает "btn-group", "btn btn-large", с личными фреймворками им пришлось бы изучать ваши особенности (или, что чаще, они бы просто каскадировали ваш css с их изменениями, и не утруждая себя попытками расшифровать или изменить ваш код).

Вы просто знакомы с системой, которую используете, чтобы легко ориентироваться в ней, или вам все еще нужно искать предметы?

Обычные, такие как btn, table, row*, span* и т. д., были бы естественными. Но для html для основных компонентов гораздо быстрее просто скопировать и вставить из их примеров, а не печатать их.

Смогли бы вы создать сайт без них, если бы вам пришлось?

Был там, делал это много раз.

они годятся только для:

1. дизайнеры, которые не знакомы с программированием, но хотят найти решение для переноса своих проектов на сайт.
2. способ упростить линейное производство для тех, кто не хочет создавать свою собственную структуру.

лично у меня есть свои собственные методы, и я не хочу идти по этому пути, потому что я уже научился кодировать CSS, HTML и jQuery. Я вижу в этом преимущество для людей, которые ничего не знают и пытаются научиться программировать. Было бы неплохо увидеть что-то подобное лет пять назад. Кроме того, как вы заявили, вам потребуется больше времени, чтобы реализовать это в ваших текущих методах производства.

РЕДАКТИРОВАТЬ: не пытаюсь захватить вашу тему, но мне тоже интересно то же самое, но в отношении WordPress. Я слегка использовал WordPress, но я не знаю, полезен ли фреймворк. Я планировал идти по старинке, пока не найду большую выгоду.

Bootstrap хорош в качестве отправной точки для адаптивного макета. Но что касается дизайна, я думаю, что его довольно не хватает. Он выглядит как «загрузочный», который, поскольку его шаблон используется слишком часто.

Но вы должны иметь в виду, для чего был создан бутстрап, он должен был обеспечить согласованность во внутренних приложениях, созданных твиттером, и если вы должны были использовать его для этого, или даже если вы разработчик, который хочет быстро привести в порядок свой веб-сайт app без особых размышлений, возможно, в качестве mvp или прототипа это действительно отличный инструмент.