Веб-фреймворки, такие как Bootstrap или шаблон HTML5, предлагают что-то для дизайнера (не разработчика)?

Обратите внимание, что речь идет о дизайне гораздо больше, чем о разработке.

Я создаю сайты с нуля с полностью написанными от руки CSS и HTML.

Я уже давно знал о готовых шаблонах CSS, таких как Bootstrap или HTML5 Boilerplate . Я кратко смотрел на них в прошлом, но никогда не пытался использовать их для чего-либо. У меня нет проблем с перезапуском CSS, включением javascript при необходимости или настройкой видовых экранов.

Этим вечером я написал базовую страницу HTML5 / CSS. Ничего страшного в плане компоновки. Просто отправная точка. После этого я решил создать Bootstrap с таким же дизайном. Это довольно стандартный 960px, 3 колонки со страницей с изображением героя.

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

* ( под «чрезмерно шаблонным» я подразумеваю, что есть много CSS, который я, вероятно, не использовал бы для любого данного веб-сайта. Не то, чтобы в целом не было ненужного CSS ).

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

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

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

• Может ли кто-нибудь превозносить до меня великие достоинства таких шаблонных систем, как Bootstrap или HTML5 Boilerplate ?
• Что делает их ценными для вас?
• Вы просто знакомы с системой, которую используете, чтобы легко ориентироваться в ней, или вам все еще приходится охотиться за предметами?
• Могли бы вы создать сайт без них, если бы пришлось?

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

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

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

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

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

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

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

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

ДОПОЛНЕНИЕ:

Я должен добавить еще одну потенциальную выгоду:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Я получаю адаптивный макет с очень небольшой работой. На некоторых веб-сайтах, над которыми я работал, нужно всего лишь несколько небольших настроек, чтобы получить макет, оптимизированный для планшетов и мобильных устройств. Отзывчивый navbar - один из моих любимых компонентов начальной загрузки.
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 хорош в качестве отправной точки для адаптивного макета. Но что касается дизайна, я думаю, что его довольно не хватает. Он выглядит как «начальный загрузчик», потому что его шаблон очень часто используется.

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