На чем верстать, если не на Bootstrap?

Question

[Raul Abdullin]

Прошел огромное количество курсов + прочитал большую книгу Css Дэвида Макфарланда.
Понимаю как работают почти все свойства в css.
Но вот заступорился по поводу сетки. На чем верстать?
Сначала хотел использовать сетку из bootstrap.
Но почитал по форумам, многие не советуют ее использовать для серьезных проектов.
Типа лишний код и прочее.
В таком случае, если без нее, то как делать адаптивную верстку?
У меня уже психи начались. Столько всего перечитал и ступорюсь теперь, с чего начать.
В бутстрапе всё понятно, дивы разбиваешь на колонки и кладешь туда контент.

Comments

[alex-1917]

прочитай большую книгу еще раз))

Answer 1

[roswell]

Верстай на том, что работает и всех устраивает.
ЗЫ: интересно было бы взглянуть на те "серьёзные проекты".

Comments

[Raul Abdullin]

если бы я знал что работает и всех устраивает, я бы наверное не задавал тут вопрос

[roswell]

raulvodov, если бутстрап работает (а он работает), и конечный результат устраивает клиентуру, то к чему весь кипеж-град? =)

[Raul Abdullin]

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

[roswell]

raulvodov, в общем, вот пример -- вполне сурьёзные ребята не гнушаются бутстрапа. И на лэндинг это совсем не похоже.

[Raul Abdullin]

roswell, а какие-то серьезные сервисы соц сети, порталы и тд можно на нем делать? У вас хороший рейтинг на тостере и хотелось бы получить совет. Т.е. именно нацелен на серьезное развитие, и необязательно супер быстрое. Мне очень нравится сетка бутстрапа, но пугает ее простота :)

[roswell]

raulvodov, можно. А если хочется потрахаться всерьёз, и чем-то не нравятся уже придуманные велосипеды, верстай всё с нуля. Море незабываемых впечатлений гарантирую.

[Raul Abdullin]

roswell, т.е. при создании сетки море впечатлений? это настолько сложно? В том-то и дело мне нравится, но вот некоторые верстальщики пишут, что это не серьезно. Хотя меня сетка бутстрап устраивает во всем. Все свои дизайны я проектирую по сетке 1170 и всё отлично.

[roswell]

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

[Raul Abdullin]

roswell, согласен с вами. Спасибо большое. А не подскажите, можно ли как-то бутстрап сетку использовать, когда мне нужен, чтобы ширина контента оставалась 1170, но к примеру было 5 колонок и без отступов? Пока не совсем понимаю, как это делать в готовой сетке?

[roswell]

raulvodov, 12 бутстраповских колонок на пять из твоей фантазии нацело не делится, но всё уже украдено до нас.

[alvvi]

raulvodov,

т.е. при создании сетки море впечатлений? это настолько сложно?

Нет, с flexbox-ом это вообще проще простого. Просто возьмите код 4 бутстрапа и загляните в исходники сетки, это один из самых простых компонентов. У меня сетка чуть проще бутстраповской генерируется в ~80 строк Stylus кода.

[alex-1917]

raulvodov, у вас синдром преждевременной оптимизации

[Raul Abdullin]

roswell, большое спасибо, извиняюсь за долгий ответ, был загружен работой. Спасибо за ссылку по поводу 5 колонок. Извиняюсь за глупый вопрос, а данный код, который по ссылке нужно изменять (вставлять) в css с бутстрапом или уже в свой css можно?

[Raul Abdullin]

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

[Raul Abdullin]

alex-1917, да вы правы, от природы перфекционист, иногда это усложняет жизнь

[roswell]

raulvodov, по ссылке в ответах HTML-код, его, само собой, нужно использовать не в CSS, а в собственных шаблонах.

[Raul Abdullin]

roswell, понял спасибо изучу

Answer 2

[Алексей Афанасьев]

Если из bootstrap нужна только сетка, можно взять например Flexbox Grid

Comments

[Raul Abdullin]

вообще не понимаю, что вы написали, я начинающий верстальщик :)

Answer 3

[snap44]

то как делать адаптивную верстку?

flexbox + media-queries
Для тех макетов, которые вас ждут в ближайшем будущем, подойдет и бутстрап. Но сначала нужно научиться верстать без него.
Попробуйте еще gridly.css Ничего лишнего, только normalize + сетка.

Answer 4

[Frel]

Чем верстать, руками! Бутстрап чисто для прототипирования и админок!

Answer 5

[valtermild]

забудь бутстрап и флексы, используй гриды https://gridbyexample.com/

Comments

[pythoome]

Не рановато grid использовать?

Answer 6

[pingo]

Answer 7

[Лучник *range attack +10*]

960px grid, Skeleton, foundation, куча их. Многие уже мертвы. Потому что сетка — это раз плюнуть и делается под проект часто. Просто посмотрите как в одном из фреймворков сделано и сделайте удобнее, как вам нравится.
Что такое сетка вы знаете. Сделайте свою.
А теперь подумайте как вам ее лучше менять на мобильниках медиа-запросами и начинайте верстать, там увидите что вам нужно.
Бутстрап не рекомендуют использовать в серьезных проектах не из-за колонок в сетке (везде примерно такая сетка), а из-за того, что у бутстрапа код громоздкий.

Comments

[Raul Abdullin]

Т.е. даже код для сетки громоздкий? Сами стили бутстрапа мне не нужны. Всякие Скелетоны и прочие по сути это аналогия сетки бутстрапа. Вопрос заключается в том, стоит ли использовать сетку бутстрапа (скелетона и тд) или лучше свою делать. И если делать свою, то как? Это меня и стопорит(

[snap44]

И если делать свою, то как?

Посмотрите интенсивы HTML Academy. В базовом фиксированные сетки, в продвинутом адаптив.
Кажется вы вообще плохо понимаете что такое сетка. Там хорошо объясняют.

Answer 8

[Mark Maddison]

Можно написать свою сетку.

Answer 9

[BookerDeWitt]

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

Comments

[Raul Abdullin]

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

[BookerDeWitt]

ну ладно, просто выше увидел в ответе словосочетание

Flexbox Grid

а ты в ответ

вообще не понимаю, что вы написали, я начинающий верстальщик

А какие браузеры это флекс не поддерживают? ради интереса глянул тут, ну разве что опера мобайл версия 2012 года не поддерживает

[Владимир]

raulvodov, Какой процент пользователей не может смотреть сайты на CSS ? Стоят ли затраты на поддержку этих пользователей вложений ?
По факту, даже на ентерпрайз проектах сейчас просят IE11 максимум, который флексы умеет, а стартаперы тем более не будут оплачивать разработку для мамонтов.

[Сергей Горячев]

raulvodov,

флексы некоторые мобильные браузеры не поддерживают

Возможно ты про Nokia 3310 говоришь, она да не поддерживает. А что касается мобильных браузеров последних 5 лет, то 95% вполне себе хорошо дружат с флексами.

[snap44]

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

[Raul Abdullin]

BookerDeWitt, мне просто знакомая верстальщица сказала, возможно вы правы, спасибо, пересмотрю свои взгляды на флексы :)

[Raul Abdullin]

Сергей Горячев, видимо вы правы, возможно пересмотрю взгляды на флексы, спасибо

[Raul Abdullin]

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

[Raul Abdullin]

snap44, поделиться для какой цели? :)

[snap44]

raulvodov, в портфолио ничего приличного нет :(

Answer 10

[Егор Живагин]

На CSS :)

Верстать серьёзные проекты можно на чём угодно, в том числе на Бутстрапе. Если макет под его сетку.
Но, если вы начинаете, зачем вам фреймворк? Полезнее в разы будет сделать адаптив руками через @media и те же flexbox, например (нормально у них всё с поддержкой)

Не нравится бутстрап - берите foundation . Или что душе угодно. Выбор фреймворка не особенно важен

Answer 11

[semki096]

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