Как сделать адаптивность без bootstrap?

Question

[DrunkMaster]

Задался целью для тренировки с целью обучения сделать адаптивный сайт самому.
1) Если не использовать бутстраповскую сетку надо для большинства элементов просто шириной блоков играть в @media-запросах? Или есть другие методы?
2) Писал ли кто-то свой аналог сетки, если да, то чем вас бутстраповский не устроил?
3) Вы сами как оцениваете такую идею? Бредовая и нерациональная или всё же в каких-то случаях имеет смысл?

Answer 1

[iBird Rose]

1) да
2) лушче взять за основу сетку и адаптацию бутсрапа (или другого фреймворка) и допилить ее под свои нужды.
3) в случаях когда тебя не устраивает или не хватает функционала фреймворка.

Comments

[Сергей delphinpro]

2) давно уже пора самому писать

Нафига?

[Сергей delphinpro]

3) Если не устраивают 4 брейкпойнта, то просто добавляешь нужное количество.

[DrunkMaster]

Сергей: что такое брейкпоинты?

[Сергей delphinpro]

DrunkMaster: @media (min-width: 768px) { ... }
В этом коде стили будут применятся при ширине окна от 768px. Вот это значение и является брейкпойнтом. Точка, в которой меняются стили.

[iBird Rose]

Сергей: ладно. я тут не правильно выразился. правильным будет "взять за основу сетку и адаптацию бутсрапа (или другого фреймворка) и допилить ее под свои нужды."

[iBird Rose]

Сергей: я тока щас прочитал, что автор хочет именно с нуля писать адаптацию. а в ответе я имел ввиду доработку. взяв за основу бутстрап.

[DrunkMaster]

iBird Rose: ааа, т.е. в бутстрапе вас 4 экрана грубо говоря не устраивают

[Сергей delphinpro]

iBird Rose: я опять поспорю, что это не всегда будет правильным =) готовые сетки (не только бутстрап) хорошо сделаны. в большинстве случаев их возможностей хватает с головой. а значит переделывать ничего не надо. Ну может быть дополнить. Я например часто использую сетку от третьего с брикпоинтами от четвертого, они мне кажутся оптимальнее, но сетку четвертого не всегда можно использовать ибо флексы. Или беру сетку четвертого, меняю флекс на флоат и использую ее. Там миксины удобнее. Но кардинально сетка не меняется. Это даже доработками сложно назвать.

[iBird Rose]

DrunkMaster: ну я это для примера привел, но да. я свой бутсрап доработал под 5 и 6 экранов.

[iBird Rose]

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

Answer 2

[Ivan Bogachev]

Если не использовать бутстраповскую сетку надо для большинства элементов просто шириной блоков играть в @media-запросах? Или есть другие методы?

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

Писал ли кто-то свой аналог сетки, если да, то чем вас бутстраповский не устроил?

Да, писал. Бутстраповский вариант (замените слово бутстрап на любое другое известное вам название) не устроил тем, что глаза устали и нужна была более простая система классов (например у колонки - "column -s12 -m6 -l4"), хотелось из коробки поиметь некоторые дополнительные фишки, вроде прибитого к низу футера, хотелось брейкпоинты в rem, хотелось еще что-то...

Вы сами как оцениваете такую идею?

Хорошая идея.

Comments

[DrunkMaster]

Что такое "брейкпоинт" применительно к вёрстке? Никак понять не могу...

Answer 3

[Василий П]

1) Сам задаюсь тем же вопросом, однако да, насколько слышал.
2) Говорят, что не всегда бутстрап хороший вариант, особенно когда нужно построить нестандартную сетку. Товарищ рассказывал про возможность построения "нестандартной" сетки через sass susy, сам пока не имел возможности юзать такой способ.
3) Хорошая идея:)