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

27

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

Я создаю сайты с нуля с полностью написанными от руки 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 ?
  • Что делает их ценными для вас?
  • Вы просто знакомы с системой, которую используете, чтобы легко ориентироваться в ней, или вам все еще приходится охотиться за предметами?
  • Могли бы вы создать сайт без них, если бы пришлось?
Скотт
источник
2
+1 хороший вопрос, мне самому было любопытно об этом, но у меня нет такого большого количества опыта, как у вас. так что я подходил к этому как к кому-то, желающему узнать преимущества для новичка. когда вы ссылаетесь на Dreamweaver, вы говорите о кодировании или методе его использования WYSIWYG? Я использую Dreamweaver, но только редактор кода и ничего автоматизированного, если я могу помочь.
brnnnrsmssn
Я имел в виду в основном те, которые используют представление «Дизайн» DW. Код - это код, и не важно, используете ли вы это. Хотя, несмотря на маркетинг, DW все еще переписывает код в моем опыте.
Скотт
1
Функция ONE и ONLY killer, которая есть в Dreamweaver, - это возможность произвольного выбора произвольного числа локальных файлов, произвольной глубины дерева и загрузки их на удаленный сайт. Я долго и часто искал программу FTP с аналогичным древовидным интерфейсом с файлами и каталогами, которая делает это.
Горацио
1
@horatio Передача на Mac. Не могу сказать о Windows.
Скотт
@horatio Filezilla - это то, что я бы порекомендовал для FTP. Древовидные представления и простое перетаскивание файлов на сервер и с сервера.
Джон

Ответы:

6

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

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

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

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

Джон
источник
Спустя несколько месяцев - я на самом деле создал свой собственный «фреймворк» (на самом деле это просто файл css с общими атрибутами макета), я начал с Base (ссылка выше), но затем добавил много настроек. Хорошая вещь о Base состоит в том, что это было очень просто понять и назвать надежным началом.
Джон
11

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

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

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

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

ДОПОЛНЕНИЕ:

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

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

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

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

DA01
источник
11

Я знаком с 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 и быстро создавать макеты с готовыми красивыми виджетами и последовательной функциональностью.

ghoppe
источник
«Если вам не нравится, как что-то работает, вы можете изменить это». <- Под этим вы подразумеваете, что вы вынуждены либо форкать проект (и поддерживать свой уникальный форк), либо разбивать ваш окончательный CSS, отменяя все то, что вам не нужно. «Вы можете использовать исходный код для изучения техники CSS» <- Узнайте много плохих техник CSS.
Цимманон
@cimmanon Раздувать CSS, отключив? Нет, не будь смешным! Вы можете скомпилировать свой собственный загрузочный код, включающий только те компоненты, которые вам нужны. Мне было бы интересно узнать, какие методы CSS, которые использует команда начальной загрузки, «плохие». Есть какие-то особенности, или вы просто разглагольствуете и вообще предубеждены против CSS-фреймворков?
ghoppe
@ghoppe Ты только что пропустил все, что я сказал? Вы должны либо выбрать те вещи, которые вам не нужны (и я имею в виду не только целые модули, которые вам не нужны, но и конкретные стили для определенных элементов), либо переопределить их. Продвигать использование <i>элемента для «значков» довольно ужасно. Несемантические имена классов. Classitis. Использование пикселей для размеров шрифта. На самом деле, я мог бы продолжать и продолжать. Они буквально идут вразрез со всеми лучшими практиками, о которых все проповедовали в течение последнего десятилетия.
Цимманон
1
@cimmanon <i>Элемент был плохой идеей, поэтому они перестали делать это с версией 3. Да, сетка не семантическая, но вам не нужно ее использовать, или вы можете использовать LESS / SASS для предварительной обработки своей собственной семантические селекторы со стилями сетки. Существует много дискуссий о том, почему были выбраны px / em. Учитывая то, как современные браузеры масштабируют веб-страницы, проблема не так остро стоит, как раньше. Каждый CSS-фреймворк требует переопределения стилей, что является хорошей причиной для использования CSS-препроцессоров.
ghoppe
1
@cimmanon Конечно, есть место для критики, но для меня хорошее перевешивает плохое, и для многих сайтов это хорошая стартовая база для ответа.
ghoppe
7

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

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

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

Brendan
источник
1
Хорошая точка на прокат свой. Точно так же я знаю о less или sass, но предпочел бы обрабатывать переменные в CSS через php. Так что ... поэтому я не хочу прыгать к Руби ни за что. Не хочу слишком покушаться на сторону "развития", просто хочу сделать мою жизнь проще :)
Скотт,
@ Скотт - Попался. Я упомянул Ruby только потому, что впервые попробовал Bootstrap в среде Rails, и мне понравилось, что вы можете изменять основные переменные на лету, не собирая новую версию.
Брендан
2
@ Scott Может быть, «если все, что у вас есть, это молоток, все выглядит как гвоздь» - конечно, вы можете использовать php для обработки CSS-переменных, но тогда вы получаете ненужный удар по производительности. Вы можете предварительно скомпилировать переменные с помощью LESS или SASS. Я считаю, что МЕНЬШЕ легче читать, чем PHP. :)
ghoppe
@ghoppe Понятно :) Но список переменных в верхней части страницы PHP для цветов, а затем простое использование этих переменных в селекторах CSS делает жизнь проще, чем LESS или SASS в моем опыте. И да, я понимаю, что php представляет производительность для больших структур, но я могу выложить стандартный файл .css для использования при необходимости (вроде моей собственной архитектуры LESS). Я считаю, что МЕНЬШЕ сложнее читать, потому что это новая разметка. HTML / CSS / PHP очень знаком здесь.
Скотт
@ Скотт, я полностью изучу новую разметку. Вот почему мне нравится SASS. По сути, это просто расширение CSS, вам не нужно изучать новый синтаксис, просто новые функции, которые вам нужны (например, переменные или миксины). Очень просто.
ghoppe
6

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

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

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

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

Бенджамин Пол
источник
Смотри мой ответ. :)
DA01
.. и вот почему я спросил. Я не работаю в большой среде разработки. Я подозреваю, что мое мнение было бы другим, если бы я сделал.
Скотт
4

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

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

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

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

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

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

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

Yisela
источник
1
Это часть того, о чем я думал. И почему я решил взять удар с Bootstrap. Отзывчивость системы может быть полезной. Но это кажется почти перевешенным кривой обучения структуры. Бренден действительно представляет в своем ответе хорошую точку зрения относительно "раскручивания своей" структуры.
Скотт
4

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

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

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

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

JGallardo
источник
Спасибо. Я нахожу Skeleton очень хорошим и удобным по сравнению с несколькими другими. Достаточно, чтобы помочь отзывчивости, не придумав ничего для вас.
Скотт
3

В течение многих лет я все вручную кодировал, но сейчас я склонен использовать 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 для основных компонентов гораздо быстрее просто скопировать и вставить их примеры, чем печатать их.

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

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

Ли Райан
источник
Извините, но я вижу, что в этом ответе по существу говорится: «Дизайн Bootstrap для меня, а не для разработки веб-сайта». Как дизайнер, это точно , где я чувствую себя Bootstrap терпит неудачу. Если вы полагаетесь на Bootstrap для стилизации всего, вы полагаетесь на Bootstrap для разработки своего дизайна. По сути вы делаете макет страницы, а не дизайн.
Скотт
@ Скотт: Это правильно, я не графический дизайнер; Я забочусь о веб-сайте, который работает и способен быстро его создать, и меньше о том, чтобы он был окрашен в тот цвет, который я хотел.
Ли Райан
Справедливо. (но учитывая название этого сайта ....) Я не спрашиваю о разработке. Я спрашиваю о дизайне. Я понимаю , используя Bootstrap в качестве «дизайнера» Тем не менее, если вы находитесь дизайнером, Bootstrap просто предлагает структуру. Мне трудно увидеть ценность в предварительно упакованной структуре, которую я просто перепишу, чтобы улучшить внешний вид консервов. Это действительно легко создать свой собственный класс .btn и стилизовать его. В CSS внешний вид предметов как дизайнера невелик.
Скотт
Вы ведете себя так, как будто вы можете написать Bootstrap через час. :)
deizel
Нет, совсем нет. Но я бы предпочел больше времени уделять индивидуальному оформлению, чем использовать какую-то консервную упаковку, где каждый сайт выглядит одинаково. Я не ожидаю, что все разработчики "получат" это. А для записи, Bootstrap не что участие или сложным. Это просто обычай, который требует изучения соглашений об именах Twitters.
Скотт
2

они хороши только для:

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

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

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

DᴀʀᴛʜVᴀᴅᴇʀ
источник
3
WordPress полезен для тех, кто не знает PHP, хочет подключить архитектуру к PHP или хочет иметь систему пользователя / безопасности. Я вижу гораздо больше преимуществ в системах CMS в целом, чем в шаблонах CSS. Использование Wordpress - это не фронтенд, а бэкэнд.
Скотт
0

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

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

Сэм
источник