Вы здесь

Как лучше замутить FlexBox разметку?

0

Кто есть на гите, то проще там: тут!)
Решил по совету Хулигана реализовать FlexBox разметку в фреймворке.

Версия Drupal: 
7.x
Категория: 
HTML/CSS
Вопрос задан 17.01.2015 - 13:00
Аватар пользователя SAM
SAM
212

Ответы

0

Мне кажется, уже везде есть наборы миксинов.
http://bourbon.io/docs/#flexbox
http://compass-style.org/reference/compass/css3/flexbox/

Далее уже зависит от конкретной задачи. У меня просто везде бурбон, легко размечаю что надо когда надо.

Ответ дан 17.01.2015 - 18:22

Я имел ввиду принцип построения. Про миксы то понятно. От них никуда не деться. Вот можно взять за принцип, как строятся обычные адаптивные шаблоны на блоках. Или выдумать что поудобнее.

Комментарий оставлен 17.01.2015 - 18:34

Ну вот в чем и вопрос. Не канает такая реализация? Неудобно?

Комментарий оставлен 17.01.2015 - 18:46

у flexbox есть проблемы с поддержкой браузерами и багами в т.ч. в новых IE, я пока не рискую использовать в комм.проектах.
А так - очень удобно, конечно. Не очень семантично и идейно неверно: для общей разметки должен использоваться css grid, http://www.w3.org/TR/css-grid-1/, но он пока не готов. Flexbox должен работать "на местах" с отображением элементов внутри css grids.

Комментарий оставлен 17.01.2015 - 19:31

Я знаю, что поддержка ещё не полная, но уже приличная если честно. Поддержка браузерами.
Ну дак куда посоветуешь копать? Всё равно это дев будет и в релиз не попадет, до нормального состояния.
Если есть идеи допустим по "скрешиванию" типов разметки и т.д., с удовольствием выслушаю.

Комментарий оставлен 17.01.2015 - 19:44

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

p.s. в caniuse самое интересное - во кладке issue. Не смотрите что там "все зеленое", к сожалению не так все прекрасно.
p.p.s. я думаю, у всех есть какие-то заготовки, которые вполне удобны для какого-то класса задач. У меня это https://github.com/adubovskoy/bourbon_bone - спартанская тема, не требующая сторонних библиотек для компиляции.

Комментарий оставлен 17.01.2015 - 20:23
0

Я советовал flex-box ввиду того, что пока его фреймворк зарелизится - обыкновенный грид морально устареет...
Лично у себя в экспериментах мне удобнее разбивать на логические строчки и в зависимости от содержания - (wrap|nowrap) в глубину... то же касается и выравнивания внутри блока. Всякие оффсеты фтопку - это архаизм, всё равно, что таблицу дивами рисовать)))) В итоге каркас получается в пару десятков строк. Ляпота и благодать... Максимум, что можно это задать абсолютную ширину основному контейнеру со всякими медиа

Ответ дан 18.01.2015 - 01:02

Можно подробнее о твоих экспериментах?

Комментарий оставлен 18.01.2015 - 10:37

Можно подробнее о твоих экспериментах?

А что подробнее? Лично у меня есть основной класс flex. Далее классы wrap, nowrap, которые определяют должны ли все дочерние элементы контейнера выстраиваться в линию или возможен перенос, как в случае, например, с расположением превьюшек сеткой(свойство flex-wrap). Следующая группа классов определяет выравнивание дочерних элементов по горизонтали(justinity-content), последняя группа определяет выравнивание по вертикали (align-items)
Все свойства, которые касаются именно дочерних элементов - чисто на усмотрение. Практика показала, что только в очень редких случаях это необходимо, поэтому в каркас я эти свойства даже не заносил...
Но поддержу Дубовского - цсс фрейм для друпала - хрень. ИМХО. Пока друпал будет возвращать готовые рендеры в шаблон - всё это не будет особо пользовться спросом.

Комментарий оставлен 18.01.2015 - 22:56

В препроцессоре можно же примешивать... А фреймворк - это уже готовые разметки для элементов.

Комментарий оставлен 19.01.2015 - 10:32

Чуть не забыл про основную фичу флексбокса - направление.... Так же стоит учесть... (слева-направо|сверху-вниз|в обратном порядке)

В препроцессоре можно же примешивать... А фреймворк - это уже готовые разметки для элементов.

Так какой же это фрейм если каждый раз примеси ковырять? И верно, что готовая разметка для элементов... но не для целых конструкций... Может кому и удобно будет... Но лично для меня всякие подобные штуки никакой скорости не прибавляют

Комментарий оставлен 20.01.2015 - 19:03