Верстка Шаблона LS. Что такое Twitter Bootstrap и простая верстка. Разрешите спор.

Всем привет :)

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

Задача.
1. Сделать шаблон на LS
2. Сделать адаптацию на основе Twitter Bootstrap.
Вывод: Сделать шаблон по дизайну макетов с адаптацией Twitter Bootstrap

Это основные задачи. + работа над шаблонами плагинов.

Какой план действий:
1. Верстаем стандартный шаблона LS
2. Адаптируем его с помощью Twitter Bootstrap.

Что такое Twitter Bootstrap:
(Мое мнение) Twitter Bootstrap — это фреймворк классов и js-скриптов, который дает возможность гибко использовать.
(Мнение заказчика) Twitter Bootstrap — разметка и классы, на основе 12 колоночной верстки, так утрировано сказал заказчик, не стану перевирать его слова. Если все таки не корректно передал его слова пусть поправит.


ВАЖНО! Шаблоны для LS я верстаю на основе стандартных шаблонов, я не от кого не скрываю, все кто заказывал и будут заказывать шаблона. Делаю я шаблона основе стандартного шаблона по умолчанию 0.5.1 или 1.0.1, зачем я это делаю, чтобы верстка проходила быстрей, а так же чтобы адаптация плагинов и их отображения работала как надо. И не чтобы не потерять стандартные возможности LS. Это правда дорогие друзья, я этого не скрываю, а смысл то?!

Дальше история.

1. Приступили к работе.
2. Сроки сорвал, не скрываю, сказал что с радостью, как и всегда сделаю скидку или приму штрафные санкции, я это делаю всегда, когда по моей вине срываю сроки.
3. Показал стандартный шаблон на LS, дизайн полностью повторял макеты Заказчика, я не говорил, что в него входит адаптация на Twitter Bootstrap. Не хватало только нескольких страниц, например страниц профиля Пользователя.
4. Заказ выполнен не весь так как основная часть сайта это дополнительные плагины и Twitter Bootstrap.
5. Осведомил на счет след плана работа, а именно:
+ не достающие страницы
+ адптация на основе Twitter Bootstrap
+ плагины, когда дадут мне лизацию и возможность с ними работать.
+ опять же настройка плагинов под Twitter Bootstrap.

6… собственно вот тут и началось наше не понимание друг друга.

Во первых заказчик, начал переживать что я не использую разметку Twitter Bootstrap, на что я ему сказал что разметки Twitter Bootstrap не существует. Есть примеры Twitter Bootstrap где показывается его основные возможности на основе 1 колонки или 2 или 3 колонок.
Заказчик же настаивал что Twitter Bootstrap и его ОСНОВА это 12 колонок. Я ему говорю что верстка от Twitter Bootstrap и например стандартная не сильно отличаются друг от друга, только своим набором классов.
После чего Заказчик начал сомневаться в том что я вообще профессионал, то есть мало что мыслю в верстке и вообще знаю что такое firebug. Я попросил не разговаривать так со мной, потому что я не считаю себя супер инженером верстки в Твиттере я ведь не работаю ) но за 6-7 лет версткой я овладел на уровень выше чем многие другие, и опыт все таки есть.

Во вторых я пытался внемлить Заказчика, что Twitter Bootstrap, применим почти к любой верстки, если она не содержит в себе какие то уникальные специфики, почти все верстки это шапка-подвал-контент и его колонки, 1 или 2 или 3 колонки.
Кстати на самом сайте показаны три очень простых примера верстки Twitter Bootstrap, с разной архитектурой.
twitter.github.com/bootstrap/examples/hero.html
twitter.github.com/bootstrap/examples/fluid.html
twitter.github.com/bootstrap/examples/starter-template.html
Что любая стандартная верстка Twitter Bootstrap может иметь настройку и адаптацию Twitter Bootstrap, нужно просто его подключить и использовать классы, которые предлагает фреймворк и использовать правильно.
Да возможно придется изменить частично архитектуру некоторых элементов, но не более. И убрать конфликты классов Twitter Bootstrap, и стандартных классов шаблона.
Мои аргументы к сожалению уже не имели смысла.

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

Кстати вот пример частичной архитектура урезанного простого шаблона LS:

<div id="container">
    <header id="header" role="banner">...</header>

	<div id="wrapper">
            <aside id="sidebar">...</aside>
            <div id="content">...</div>
        </div>

    <footer id="footer">...</footer>
</div>


А вот он же только адаптирован, под Twitter Bootstrap:

<div id="container" class="container-fluid">
    <header id="header" role="banner" class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">...</div>
    </header>

	<div id="wrapper" class="row-fluid">
            <aside id="sidebar" class="span3">...</aside>
            <div id="content" class="span9">...</div>
        </div>

    <footer id="footer">...</footer>
</div>


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

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

PS орфография страдает, это да, за это просьба не ругать.

UPD1
Кстати, в поддержку моих слов, что Twitter Bootstrap, не имеет своей разметки, какой то стандартной или 12-колоночной и применяется к ЛЮБОЙ верстке, просто скачиваем архиве брутстрапа:
twitter.github.com/bootstrap/index.html

и что мы видим три папки:
css
img
js

то есть набор css используй как хочешь, если умеешь. Тут нет сетки (разметки) HTML.

UPD2
Собственно может читающие не поняли вопрос, поэтому обозначу.
1. Что такое Twitter Bootstrap в вашем понимание
2. Можно ли использовать его для простой верстки, или для верстки synio.
3. Twitter Bootstrap — это просто набор классов и js-скриптов? или что то больше.
4. Есть ли какая то уникальная HTML разметка Twitter Bootstrap, по которой надо работать и нельзя отходить от ее норм.

29 комментариев

avatar
twitter.github.com/bootstrap/scaffolding.html#gridSystem
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
avatar
Что условно переводит, как:
Брутс использует систему 12 колоночной сетки, это важно! То есть сетка, это не разметка = HTML раметка, сетка.

Опять же из моего примера видно, можно использовать брутстрап и на основе 2 колонок используя 12 колоночную сетку.
Так же это можно проследить на основе примера от самого Твитера
twitter.github.com/bootstrap/examples/fluid.html
2 колонки, используется сетка на 12 колонок, 2 колонки в сайдбаре и 9 контенте. Отсюда и название классов в колонках span3 и span9.

Я правильно вас понял? Или что то не так ответил?
avatar
Заказчик это я.
Немного о своем взгляде на ситуацию.
Итак 28 августа, то есть почти три недели назад договорились о верстке. Мое условие — верстка бутстрапом, дизайн заказной. Срок мне озвучили неделю. Оплата повышеная из-за сложности верстки бутстрапом.
Только сегодня получаю шаблон synio с 1 (одной) страничкой.

Разметка полностью synio. Пример 3х недельной верстки — toptray.wstandart.ru/
Тому кто обнаружит бутстрап по этой ссылке — почет и уважение.
Теперь о приведенных примерах. Извиняюсь за приведение переписки, но без этого не понять сути. Вот что было мне сказано:
брутстрпа этого всего лишь классы
нет ни какой разметки
можно к любой
вот у нас дивы
стандартные
Теперь, что я понимаю под разметкой. Это как раз то, что во втором примере приведено — класс container, row и span. 12 колоночная сетка (можно и больше при компиляции less ом) + классы адаптированные под эту сетку (кнопки, таблицы и пр.) Это конечно упрощенно.
Второй пример противоречит тому, что было в переписке Скайпа. То есть разметка стандартная synio, добавим только классы. Какие классы? Кнопок? Таблиц? Зачем мне это если нет span разметки…
Я так понимаю, что автор решил все таки второй пример привести нормальный, так как без разметки это было совсем… скажем рассчитано на недалеких в web технологиях заказчиков.
avatar
1. Если бы меня слушали, а также прочитали данный топик, то не писали бы:
Тому кто обнаружит бутстрап по этой ссылке — почет и уважение.
так как я и в переписке, которую так же с удовольствием покажу, если попросят, а так же из материалов данного топика, я написал, что адаптации брутстрапа я еще не делал. А именно я указал это вот тут:
3. Показал стандартный шаблон на LS, дизайн полностью повторял макеты Заказчика, я не говорил, что в него входит адаптация на Twitter Bootstrap. Не хватало только нескольких страниц, например страниц профиля Пользователя.
Почитайте внимательней. То есть адаптация брутстрап это следующий этап, нужно всего лишь подставить классы и настроить обертки.

2. Из вашей переписки которые вы привели как пример, опять же я не отрицаю, да брутстрап это всего лишь классы и js-скрипты, нет ни какой HTML разметки — это важно, есть сетка-визуальная сетка разметка. Да можно применить почти к любой если верстка не специфичная. К любым стандартными дивам, все верно.

Вывод, вы как будето не хотите меня слушать. Я вам и в переписке сказал, и в топике и тут еще раз напишу третий раз, то что я вам показал нету брутстрап, это стандартный шаблонк HTML-разметка, к которой мы применим брутстрап.
avatar
Опять таки добавлю.
Только сегодня, мне было озвучено, что будет использоваться шаблон synio. Почему бы это не сказать 3 недели назад? Может бы я попросил взять за основу девелопер шаблон (он насколько я знаю с применением бутстрапа сделан).
Вообще тот пример который я привел toptray.wstandart.ru/ вероятно вчера или позавчера начал делаться в спешке, так как я начал просить показать мне все таки результат.
avatar
1. Извините что я вам не сказал об этом, может это единственная моя ошибка. Но я не вижу в этом минусов. А вы какие минусы видите? А если нет минусов, почему бы не использовать, если вы не ставили ограничения, а конечному результату это не помешает.
Вы тоже не сказали что хотите девелоп, но я бы посоветовал не использовать его, потом что он имеет ряд специфик не для стандартного шаблона.

2. По срокам я вам так же писал, да моя вина, что я сорвал сроки, но я с вами это обсуждал, вы отнеслись с пониманием. Разве нет?

3. Нет я его начал делать не вчера-позавчера.
avatar
(он насколько я знаю с применением бутстрапа сделан).
это шутка?
avatar
нет — мне так сказали, а я не смотрел в код. Но не суть важно.
avatar
Бутсрап предоставляет разметку в виде 12 колоночной верстки. О каком примере можно говорить с пустой html страничкой в архиве?? Ставь свои контейнеры, строки, спаны и размечай html код. Верстальщику предоставлен инструмент — пользуйся им. А если хочется сделать что то вроде:

<div id="container">
    <header id="header" role="banner">...</header>
      
        <div id="wrapper">
            <aside id="sidebar">...</aside>
            <div id="content">...</div>
                <input type="submit" <strong>class="btn btn-success"</strong> value="go" />
        </div>

    <footer id="footer">...</footer>
</div>

то есть вставил класс кнопки и все здорово. Верстка бутстрапом готова…
avatar
Ну а я собственно что показал? в примере к топику?

<div id="container" class="container-fluid">
    <header id="header" role="banner" class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">...</div>
    </header>

        <div id="wrapper" class="row-fluid">
            <aside id="sidebar" class="span3">...</aside>
            <div id="content" class="span9">...</div>
        </div>

    <footer id="footer">...</footer>
</div>


Вы понимаете что вот у нас есть шаблона, осталось только применить к нему классы от брутстрапа, и сделать пару оберток по необходимости… и все!

Я вас не понимаю. Вы сами говорите ставите свои теги, и используй классы брутса. Ну а в вам про что?
Мы сейчас сделали, верстку простого шаблона, а после этого добавим классы брутстрапа и все будет работать по адаптивной технологии брутстрапа.

Что не понятноГО?
avatar
Вот в этом примере все, как раз таки понятно. Но вы этот пример в переписке не приводили. Вы (насколько я понял) хотели обойтись без разметки container,row, span.
avatar
вы ошибаетесь… я вам в переписке в скайпе два раза настаивал показать пример двух версток, только одна с брутсом, а другая без него, но вы отказались меня слушать и ушли спать.

А сейчас опять тут я смущен честно говоря.

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

Вы (насколько я понял) хотели обойтись без разметки container,row, span.
Ну что вам сказать вы ошибались, потому что я не намекал и не говорил что НЕ собираюсь их использовать, не разу я такого вам не говорил, почему вы так решили я честно говоря не знаю.
avatar
Но вы мне бросили 1 рисунок для примера. И в каком он формате был? В формате jpeg. Ну и как я могу увидеть в jpeg пример разметки??
avatar
я вам скинул пример разметки из примера брутстрапа, со словами, что архитектура это разметки очень похоже на архитектуру LS, то есть те же две колонки и общий контейнер с оберткой брутса.

Вот что я хотел показать в этой, картинке.
clip2net.com/s/2jro9
avatar
честно слово, либо я не понимаю что хотите донести, либо вы не понимаете технологии брутстрапа
avatar
bootstrap — это css/js фреймворк, который может быть применим к любой разметке, что показано во втором примере топикстартера. Использовать ли его на существующую разметку или же делать новую разметку — это уже зависит от технолога, но ничего криминального нет в том, что топикстартер решил адаптировать вёрстку под бутстрап в последнюю очередь. Единственный минус данного подхода — это увеличение сроков выполнения заказа, так как при подключении классов бутстрапа по-любому выплывут некоторые проблемы.
avatar
Да прекрасно я понимаю, что его можно к любой верстке применить. Тут нет вопросов — сам к сайту на Prestashop применял.
Но второй пример — это как раз то, что я хотел видеть. И как я понял именно это автор топика делать не собирался, ограничившись какими то другими классами (например кнопки, таблицы и прочего).
avatar
еще раз говорю вы ошибались, и продолжаете ошибаться.

Я как раз собирался, подключить брутстрап и начать его внедрять.

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

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

Да возможно я выбрал не самый быстрый подход, но я его выбрал из своих соображений. Так как это мой первый LS шаблон на брутстрапе.

Да возможно вылезут конфликты, о которых я и говорил в самом топике, но думаю они будут мало критичны и будут убираться за 5-10 минут.
avatar
Да возможно вылезут конфликты, о которых я и говорил в самом топике, но думаю они будут мало критичны и будут убираться за 5-10 минут.
Ну тут всё зависит от макета и того, как он будет себя вести при изменении размеров экрана. Бывает, что адаптивность работает идеально и без дополнительного вмешательства, а иной раз приходится писать дюжину кода, чтобы под разными разрешениями общий вид страницы оставался привлекательными.

Основная проблема вашей ситуации — это недопонимание между заказчиком и разработчиком. В любом случае, делать выводы о том будет или нет использована та или иная технология нужно в момент приёмки/сдачи проекта. Единственный минус, который видится со стороны — это срыв сроков. Хотя давайте мыслить реалистически — сделать уникальный шаблона для ЛС начиная с версии 0.5.2 за неделю — это не реально (если конечно исполнитель не робот и откажется от сна и какого-либо мало-мальского отдыха или же под его руководством не будут трудиться 2-4 верстальщика).
avatar
Бывает, что адаптивность работает идеально и без дополнительного вмешательства, а иной раз приходится писать дюжину кода, чтобы под разными разрешениями общий вид страницы оставался привлекательными.
Да все достаточно условно, и зависит от многих требований. Тут что есть то есть.

Та проблема именно в не понимание. Что собственно и пытаем решить.

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

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

Ну вы что то перегнули палочку :) за неделю сверстать шаблон для LS без особых уникальностей это реально и не нужно 2-4 верстальщика :)
avatar
другой момент если учитывать только рабочее время потраченное на верстку + согласование + отладка + согласование, да тут в неделю не управишься так обычно и есть.

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

Продолжаем дальше работать? Или давайте еще чуть чуть поспорим и все таки придем к какой то истине.

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

Думаю продолжать работать можно, если уж не будите сомневаться в моей профессиональности.

Сегодня уже много сил потрачено на перепалку, давайте завтра продолжим диалог в скайпе.

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

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

Но вы «бутстрап» называете «брутсрапом», в отличие от вашего Заказчика, который называет вещи своими именами. Это говорит о вашем незнании элементарного английского. На месте вашего достаточно грамотного Заказчика я бы тоже усомнился в вашей компетентности.

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

Как говорил Остап Бендер — «Я хочу добиться от вас того, чего добился друг моего детства от красавицы Инги Зайонц. Он добился любви» :)
avatar
Непофигизм сверстан на бутстрапе. Вообще любой CSS-фреймворк натягивается на LiveStreet за один-два вечера.
avatar
Ах, да. Бутстрап — это css и js фреймворк, в котором по умолчанию очень много всего, на все то, что не слишком нужно в данном конкретном проекте, из него легко выпиливается штатными средствами.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.