Что использовать в начале flexbox/фреймворки/сетки?

Question

[Андрей]

Объясните как продвигаться в изучении верстки. Мой опыт не большой, для практики я брал разные psd шаблоны и сверстал их на обычном css, блоки позиционировал с помощью display: inline-block, адаптивность сделал через медиа запросы. Так как у меня постоянно на слуху фреймворки(Bootstrap), flexbox и css сетки, то я хотел бы начать все это использовать в своих работах и начать развиваться в этом направлении, но ища нужную информацию об этих вещах я только запутался и не могу понять с чего начать. Где взять нужную информацию и как ее правильно применять.

Comments

[AlienWithStyle]

не рекламирую, но: https://www.youtube.com/watch?v=v3N3gEaa7uk&list=P...
на многое откроет глаза

[Сергей delphinpro]

адаптивность сделал через медиа запросы

адаптивность по другому и не делается ))

[Ярослав Иванов]

Сергей:

if (screen.width < 960) {
    /* load css */
}

))))

[Сергей delphinpro]

Ярослав Иванов:

if (matchMedia.match('max-width: 900px')) {
  /* load css */
}

=))

Answer 1

[Алекс Глебов]

https://v4-alpha.getbootstrap.com/layout/grid/

Answer 2

[Igor Koch]

Есть хороший flexbox playground, довольно быстро с его помощью понимаешь как работает flex.

Answer 3

[gpyshenko]

Ну например я тоже начал верстать, и у меня была та же самая проблема как у тебя. Не знал с чего начать. Возьми что-то одно и верстай, в одном разберешься в другом будет совсем не сложно.
Я верстаю на флексах все)) Мне их хватает за глаза, бутстрап чаще всего использует те у кого сроки поджимают, или например плохо разбираются в верстке. Плюс бутстрап нужен для тех проектов где нужна поддержка старых браузеров, где например флексы не работают.
Кстати для flex, есть интересный сайт с обучением в игровой форме воть!