Бутсрап и список

[Zverushka]

В самом конце страницы есть список из 6ти пунктов.

Ul я сделала как row, а пункты .col-sm-4 -  на большом экране смотрится нормальн, но при сужении все ломается (мало того, что элементы списка криво выравниваются, так еще и внутри них текст на новую строку перескакивает, хотя там стоит 30 и 60% и border-box - что не так и как нужно? 

http://zverushka.zz.mu/edu9/

Edited December 23, 2013 by Zverushka

[klierik]

Но это вручную прописывается? Меня как-то смущает эта точность.

 

нет, данные подсчеты, в данном случае, делает LESS

[npofopr]

 

На кой ляд там вообще бутстрап?

Тренируюсь. Часто лендинги хотят адаптивными.

 

 

Делайте этот нижний блок через display: table;

Ничего не поняла. Можно пример на jsfiddle? Вот заготовка для примера http://jsfiddle.net/Zverushka/f7rEY/

 

http://jsfiddle.net/npofopr/f7rEY/2/ так нет?

[cyklop77]

у тебя такое было? тебя заставляли использовать технологии которые нафиг не надо в данном конкретном проекте?

к сожалению было(

Edited December 24, 2013 by cyklop77

[Zverushka]

 

 

На кой ляд там вообще бутстрап?

Тренируюсь. Часто лендинги хотят адаптивными.

 

 

Делайте этот нижний блок через display: table;

Ничего не поняла. Можно пример на jsfiddle? Вот заготовка для примера http://jsfiddle.net/Zverushka/f7rEY/

 

http://jsfiddle.net/npofopr/f7rEY/2/ так нет?

 

Нет, синий блок не должен тянуться. Это вообще, типа картинка...

 

 

1) может все таки не надо пихать классы сетки в разметку, а использовать для этого less?

А можно поподробнее? К .col-sm классы вообще не примешивать, а задавать дополнительные обертки для стилизации?

Разве это хорошо - плодить в 2 раза больше слоев, чем требуется?

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

 

 

И да, я дошла до абсолютно позиционированного блока с достаточно фиксированной графикой - http://zverushka.zz.mu/edu12/

Поняла, что мне нужно разрезать всю графику, вырезать отдельно все стрелки. Добавлять свой медиазапрос, при котором убирать стрелки, убирать абсолютное позциоонирование и писать выравнивание в столбик. И зачем мне вся эта работа, к чему это усложнение 2х кратное усложнение? Меня это всегда и удивляет - дизайны с кучей абсолютных блоков, а хотят на бустрапе и получается, что их создание выливается в страдание о_О... На этом блоке я споткнулась - нет желание сидеть графику резать. Вот теперь ищу клуб хейтеров бустрапа.... Я, кстати, нашла один нелестный отзыв, что такой адаптив - это вообще неудобно даже для пользователя - вместо сайта в уменьшенном размере, где ты видишь сразу всю страничку и знаешь. куда тыкнуть - ты получаешь кишку, которую надо листать почти бесконечно и тщательно высматривать, ну когда же ты увидишь заветную кнопку. Особенно плохо это в магазинах. Что. собственно, в этом хорошего?

Edited December 24, 2013 by Zverushka

[npofopr]

Нет, синий блок не должен тянуться. Это вообще, типа картинка...

ну дак задайте фиксированную длину.  

А можно поподробнее? К .col-sm классы вообще не примешивать, а задавать дополнительные обертки для стилизации?

лучше бы да. Но тут кому как нравится. Я всегда делаю доп. класс. Чтобы потом можно было легко обновить тот же бутстрап, простой заменой файлов. Слоев? Зачем новые слои? Просто добавьте свой класс к .col-sm

В purecss.io с этим куда все проще, да и сам фреймворк простой. Без всей этой мешанины и кучи классов.

что я перелапатила сам фреймворк

На самом же сайте даже есть Гуи кнопочки для редактирования фреймворка под себя. Что плохого в модификации? Вы же просто смените те же цвета например. Нет ничего плохого в кастомизации. Вот если вы свои элементы вносите, тогда конечно в свой style.css пишите.

 

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

[Zverushka]

ну дак задайте фиксированную длину.  

Не получается - это table-cell - он тянется на всю длинну или подтягивает остальные блоки. В общем - 2 равные колонки все время. 

[klierik]

А можно поподробнее? К .col-sm классы вообще не примешивать, а задавать дополнительные обертки для стилизации?

 

Читай http://getbootstrap.com/css/#grid-less ->  Example usage 

 

less я использую для своего файла style.less - а что нужно править родные стили фреймворка - разве это правильно?

 

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

 

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

а при чем тут вообще реализация говно-магазина в тому что предлагает адаптив?

знаешь, CSS -- очень хороший язык, но его тоже можно испоганить в реализации.

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

[Zverushka]

Читай http://getbootstrap.com/css/#grid-less ->  Example usage 

Но я же не меняю саму сетку! Может только внешнее оформление задаю, ну или нижний отступ и то разово для одного типа элемента на сайте.

[klierik]

ты пренебрегаешь гобкостью использования.

вот тебе пример less файла, внутри которого описан весь лейаут проекта: layout.less

 

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

[Zverushka]

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

[klierik]

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

 

расскажу историю которая случилась с нами когда бутстрап перешел с версии 2 на версию 3 -- все навернулось и перестало работать.

если бы я все описал в LESS, то переход занял бы существенно меньше времени. А так у меня ушло 2 недели что бы переехать но версию 3.

в другой компании, на аналогичной CMS, переход занял 1,5 месяца, и они опять таки сделали тоже самое что и в первый раз -- внедрили классы в html.

 

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

 

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

в твоём случае надо будет копать шаблоны что бы внести правки.

[Светлана Г.]

нет, данные подсчеты, в данном случае, делает LESS

 

Вот! Я подозревала, что это как-то связано с LESS .

[Zverushka]

@klierik, звучит рационально, но какое-то зерно сомнения не уходит.

Порылась в интернете в поисках готовых тем и страниц на бустрапе, анпример, вот 

http://wrapbootstrap.com/preview/WB0R11207

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

[klierik]

Скажу по другому -- это мои рекомендации. Я наступил в свое время на грабли и делюсь шишками

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

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

Если бы он был сразу описан в less, то переход на новую версию был бы прост, а так, понимая сколько шаблонов надо будет перебрать (а их огромное множество), этот этап был отложен на неопределенный срок.

Если ты не допускаешь ошибок значит ты что-то делаешь не так )

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