Какой фреймворк по flexbox взять?

Question

[Никита Нафранец]

Использую сейчас Gridlex я им доволен, но я часто читал информацию, что классы [class*=] лучше не использовать, ибо они нагружают браузер. А он полностью на таком классе построен. Решил погуглить и первый попавшийся фреймворк это Flexbox Grid, похожий на бутстрап разметку. Но он какой-то замороченный, при этом слишком простой (зачем box класс?).
Есть какие-нить еще хорошо зарекомендованные фреймворки по flex?
Я сначала сам без фреймворка пользовался flexbox, но у меня частенько происходили баги, которые потом я искал через IE11. Заранее спасибо.
Почему я решил поискать другие фреймворки, потому, что кажется, что браузер иногда лагает на сайтах построенные им. Может это эффект внушения?

Answer 1

[Сергей Горячев]

Самый лучший фреймворк для флексов - НЕ ИСПОЛЬЗОВАТЬ ФРЕЙМВОРКИ.

Comments

[Никита Нафранец]

Почему? Такое правило тогда вообще лучше использовать для всего, разве нет так? Я же написал, что не хочу писать вручную, потому, что потом надоедает фиксить какие-то неведомые баги

[Сергей Горячев]

Никита Нафранец: фреймворки для фронт энда это ещё большая трата времени на поиск и правку багов. Быть может найдёте конечно для себя что то. Но моя практика говорит, что лучше уж написать самому и знать слабые места. Чем потом удивляться, откуда такой баг.

[Сергей Горячев]

Никита Нафранец: кстати, на счёт * в классах. Это реальное убийство браузера. Не самовнушение.

[Никита Нафранец]

Sergey: ну, я честно говоря не могу похвастаться своим опытом (4 месяца от силы работаю над сайтами), но пока проблем от фреймворков у меня не было. Я их раньше просто не использовал из-за того, что мне сказали, их не использовать.

[Никита Нафранец]

Sergey: а gridlex полностью почти из него состоит, значит все же лучше отказаться от него, так?

[class*="grid-"][class*="-noGutter"] {
  margin: 0;
}
[class*="grid-"][class*="-noGutter"] > [class*="col"] {
  padding: 0;
}
[class*="grid-"][class*="-center"] {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[class*="grid-"][class*="-right"] {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  margin-left: auto;
}

[Сергей Горячев]

Никита Нафранец: правильно сказали. Фреймворки это отличное решение. Для админки например. Но для верстки сайтов не подходит в большинстве случаев. Плюс любой Фреймворк нагружает браузер ненужными стилями, классами. Они подгружают все. Даже то, что не нужно.

[Сергей Горячев]

Никита Нафранец: просто изучите лучше препроцессоры и постпроцессоры. Прописали Флекс, сохранили, автопрефиксы добавились. Косяков не будет и код чистый.

[Никита Нафранец]

Sergey: Я сейчас пишу все через Stylus. Про постпроцессоры не знаю, это наверно autoprefix? Если да, то я его тоже использую. В одном из ответов этого вопроса мне скинули это Flex Grid Framework. Я самому писать сейчас нет желания, но это отлично же подходит под ваш совет, так?

[Сергей Горячев]

Никита Нафранец: раз нет желания, то дальше я распинаться не буду. Юзайте фрейморвки.

[Никита Нафранец]

Sergey: ну тогда идею оттуда взять то можно? Задать определенные mixins, а потом их вызывать в коде. Косяки были в том, что например я писал flex 1 0 auto, а IE11 не правильно читал это. А не в том, что указал я префикс или нет.

[Никита Нафранец]

Sergey: Но, все равно ваши ответы были очень полезны. Мне просто сейчас нужно сделать сайт и встал выбор framework или вручную писать. Когда вручную писал, код css весил копейки, но много багов с флекс было, перешел на framework, багов нет, но код много весит. В этот раз попробую другой framework, а дальше попробую расписать готовые mixins или что-то такое. Спасибо за ответы.

Answer 2

[Максим Гатилин]

flexgridframework.com - The Flex Semantic Grid for Stylus and Sass.

Comments

[Никита Нафранец]

Очень интересная штука, я сам пользователь Stylus (хотя от силы использую, наверно немного его возможностей). Я так понимаю, эта штука позволяет вызывать готовую разметку в моем коде?

[Максим Гатилин]

эта штука позволяет добавить в ваши css классы миксины для генерации флекс-свойств. Самое главное что вам не нужны засоряющие разметку презентационные классы)

[Никита Нафранец]

Максим Гатилин: понравилась штука, меньше трачу времени на всю эту разметку и хватило минут 5-10, чтоб привыкнуть.

[Максим Гатилин]

Никита Нафранец: класс, рад за тебя)

Answer 3

[Никита Нафранец]

Попытался сделать сайт на framework и когда закончил страницу, понял, что не нужна мне эта огромная махина. Лучше писать свое с нуля или использовать, что-то очень простое, чем использовать такие махины. Всем спасибо за ответы.

Answer 4

[rinatoptimus]

Не в тему, но вдруг пригодится (сетка весом 97 bytes): ungrid

Comments

[Никита Нафранец]

Ну это табличная разметка, я обычно сам себе разметки пишу, но ищу flex из-за нежелания борьбы с багами на IE

Answer 5

[Владимир]

.box это вкладыш в котором вы размещаете данные колонки, (например вам нужно сделать margin на колонку, вы просто вешаете стиль на класс .box и все). P.S класс .box не обязателен в сетке вы можете добавить любой div с классом (не обязательно .box), Flexbox Grid отличный инструмент.

Comments

[Никита Нафранец]

Ясно, спасибо. Но хотелось бы узнать еще какие-нить инструменты) Если честно, то даже хотел бы попробовать что-то вроде bootstrap, например Ulkit показался интересной штукой.

[Никита Нафранец]

И еще, хотелось бы узнать, правда ли [class*=] нагружает так сильно браузер.

[littleguga]

Никита Нафранец: я посмотрел код в gridlex, там же используются обычные названия классов. Чем они нагружать то браузер будут? Почему?

[Никита Нафранец]

littleguga: Я думал [class*=] такого вида код нагружает браузер, я был не прав? Там вроде такого вида кода очень много

[class*="grid-"][class*="-noGutter"] {
  margin: 0;
}
[class*="grid-"][class*="-noGutter"] > [class*="col"] {
  padding: 0;
}
[class*="grid-"][class*="-center"] {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[class*="grid-"][class*="-right"] {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  margin-left: auto;
}
[class*="grid-"][class*="-top"] {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
[class*="grid-"][class*="-middle"] {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[class*="grid-"][class*="-bottom"] {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
[class*="grid-"][class*="-reverse"] {
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
[class*="grid-"][class*="-column"] {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
[class*="grid-"][class*="-column-reverse"] {
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
[class*="grid-"][class*="-spaceBetween"] {
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
[class*="grid-"][class*="-spaceAround"] {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
[class*="grid-"][class*="-equalHeight"] > [class*="col"] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[class*="col-"][class*="-top"] {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
[class*="col-"][class*="-middle"] {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
[class*="col-"][class*="-bottom"] {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}
[class*="col-"][class*="-first"] {
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
}
[class*="col-"][class*="-last"] {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
/************************
    GRID BY NUMBER
*************************/
[class*="grid-1"] > [class*='col'] {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}
[class*="grid-2"] > [class*='col'] {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
}
[class*="grid-3"] > [class*='col'] {
  -webkit-flex-basis: 33.33333333%;
      -ms-flex-preferred-size: 33.33333333%;
          flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}
[class*="grid-4"] > [class*='col'] {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
}
[class*="grid-5"] > [class*='col'] {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
  max-width: 20%;
}
[class*="grid-6"] > [class*='col'] {
  -webkit-flex-basis: 16.66666667%;
      -ms-flex-preferred-size: 16.66666667%;
          flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}
[class*="grid-7"] > [class*='col'] {
  -webkit-flex-basis: 14.28571429%;
      -ms-flex-preferred-size: 14.28571429%;
          flex-basis: 14.28571429%;
  max-width: 14.28571429%;
}
[class*="grid-8"] > [class*='col'] {
  -webkit-flex-basis: 12.5%;
      -ms-flex-preferred-size: 12.5%;
          flex-basis: 12.5%;
  max-width: 12.5%;
}
[class*="grid-9"] > [class*='col'] {
  -webkit-flex-basis: 11.11111111%;
      -ms-flex-preferred-size: 11.11111111%;
          flex-basis: 11.11111111%;
  max-width: 11.11111111%;
}
[class*="grid-10"] > [class*='col'] {
  -webkit-flex-basis: 10%;
      -ms-flex-preferred-size: 10%;
          flex-basis: 10%;
  max-width: 10%;
}
[class*="grid-11"] > [class*='col'] {
  -webkit-flex-basis: 9.09090909%;
      -ms-flex-preferred-size: 9.09090909%;
          flex-basis: 9.09090909%;
  max-width: 9.09090909%;
}
[class*="grid-12"] > [class*='col'] {
  -webkit-flex-basis: 8.33333333%;
      -ms-flex-preferred-size: 8.33333333%;
          flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

[littleguga]

Никита Нафранец: не туда смотрел. Ну вообще должны сильнее обычных грузить. Но надо либо отдельным вопросом задать, либо погуглить.

Answer 6

[Sanes]

getuikit.com/docs/flex.html

Comments

[Никита Нафранец]

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

[Sanes]

Никита Нафранец: Давно пора.

Answer 7

[Ольга Грабко]

gridlex хорош как основа для допиливания, на мой взгляд.
[class*=] можете переписать просто как классы, добавить своих итд.
Фреймворки - гибкие настраиваемые инструменты для работы, вы ими пользуетесь когда надо, сколько надо, как надо, а не они вам диктуют, что делать.

Answer 8

[Антон]

Если не нужна адаптивность, то может подойдет polymer layout
https://github.com/PolymerElements/iron-flex-layou...

Answer 9

[Александр Решетняк]

splintercode.github.io/core-flex-grid
splintercode.github.io/core-grid