@kamwork

Стабильный и легкий каркас для сайта: flexbox или float?

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

Поддержка IE не требуется, т.к. ни кто из тех кто будет с ней работать, не будет им пользоваться. Ориентация на Chrome/FF/Safari и мобильные хром для Android и Safari для iOS на современных моделях.

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

Есть мысль использовать сетки, но не понятно стоит ли их использовать внутри основных блоков или же на основе неё делать и основные блоки?

Брать готовый фреймворк bootstrap или fundation? Целиком мне их не хочется использовать из-за веса, т.к. изначально озвучил, хочу свести его к минимуму. Да и не нужны мне все элементы.

Теперь с картинками, чтобы нагляднее:

Базовый вариант:

скриншот
5e9b73f904157025547700.jpeg


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

Кликнули по кнопке меню, при клике меню уезжает влево.

скриншот
5e9b7402d22e1797688939.jpeg


Под мобильные, меняются местами элементы в верхнем блоке и меню спрятано:

скриншот
5e9b740e67f21056998418.jpeg


При клике на меню, оно наплывает на основной контент, он на картинке стрелкой указан:

скриншот
5e9b741b6ce2b082451992.jpeg


При этом основной блок блокируется, чтобы не прокручивался.

Собственно это примерно то как работает m.vk.com

Как это всё реализовать?
  • Вопрос задан
  • 992 просмотра
Решения вопроса 4
standy
@standy
Хватило бы одного четвертого абзаца.
flexbox
Ответ написан
Комментировать
andykov
@andykov
Shit happens
Используйте flexbox и не парьтесь
Ответ написан
Комментировать
SowingSadness
@SowingSadness
web-разработчик
Flexbox и поддержка в IE у него есть.
А float придуман совсем для другого. Не для верстки каркаса сайта.
Ответ написан
@geekfull-nV
Извиняюсь за поздний ответ. (;
Из самих фреймворков можно выдернуть сетку и выкинуть всё лишнее. На сайте bootstrap'a и foundation'a есть удобный билдер для кастомизации. Просто тыкайте на нужные Вам чекбоксы. (;

По поводу использования сетки: если не нужна поддержка IE и пользоваться админкой будут из перечисленных выше браузеров, то можно использовать flexbox. Хотя лично я бы предпочёл сетку в виду моего нездорового перфекционизма. ;\

Извиняюсь, что без примеров. Надеюсь, совет хоть как-то помог. Оу... и удачного дня! (;
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@kamwork Автор вопроса
Так ни кто и не подсказал по сеткам..
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы