Какой вариант выбрать для верстки сайта с заданными элементами?

Question

[Li]

Всем привет.

Есть сайт, который был начат n-ое количество месяцев назад. Пока он дополнялся разными интересными элементами, каждый раз всплывали проблемы в верстке. И в первую очередь это из-за незнания позиционирования и неумения находить оптимальное решение. Т.к. опыта в создании сайтов мало, очень хочется услышать мнение и советы специалистов. Возможно есть крутые фреймворки, решения для размещения желаемых элементов на сайте.

Изначально и по предыдущему опыту хотелось сделать все на flex-box, т.к. достаточно просто верстать и можно не делать версии для разных устройств. И скорее всего из-за этого все следующие проблемы возникали, потому что приходилось от флекса уходить. В итоге что-то на страницах сайта на flex-box, где-то position: relative , что-то position: fixed . Я так понимаю, что это совсем не правильно и нужно придерживаться одного подхода. Так какой лучше подобрать в моем случае?

Мой винегрет :

• видеофон на главной. фиксированное положение, которое создавало свои проблемы
  
• меню на js с красивой анимированной кнопкой на css. здесь position: relative
  
• шапка страниц. flex-box
  
• банер (картинка+кнопка)
  
• слайдер js
  
  
• + к этому всему хочется адаптивную верстку, красивой анимации css к элементам
  

Comments

[Ankhena]

В итоге что-то на страницах сайта на flex-box, где-то position: relative , что-то position: fixed

Это нормально.

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

Это не нормально :)

Если вам нужно сделать фиксированное меню, то за это отвечает именно fixed (sticky), а не flex. Flex тоже пригодится для выравнивания элементов меню.
Если вы использовали fixed, чтобы прибить меню, это не значит, что теперь все элементы на сайте должны быть фиксированными. Это же бред.

Разумно использовать тот инструмент или те свойства, которые подходят в конкретной ситуации.
В макете табличные данные - используйте table. Нужен тултип или выпадашка - абсолюты. Модалка - fixed.
И т.д.

[Арсений Матыцин]

Ankhena, вообще можно сделать так. И это будет работать. Без всяких фиксаций шапка может быть прибита так, будто реализована с помощью fixed или sticky.

Конечно, тут есть и вытекающие последствия. Но сделать layout на flex-ах вполне можно. И может быть опыт автора был из данного разряда.

[Ankhena]

Арсений Матыцин, мысль не об этом была.

Answer 1

[Арсений Матыцин]

Если нет желания идти и специализированно получать знания у кого-то, то ты можешь почерпнуть достаточно разумные подходы у фреймворков, да. Например у этого https://getbootstrap.com/.

У них из коробки есть и шапка и карусель и баннеры и большинство основных элементов для сайта.

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

Comments

[Li]

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