Какие css сетки используете вы и почему?

Question

[IIIu6ko]

Поделитесь опытом использования css сеток. Какие сетки актуальны в 2к17?
И что скажите на счет susy?

А также, что думаете на счет CSS Grid Layout? Уже совсем скоро будет поддержка chrome, firefox, safari и opera на декстопе. Остаётся дождаться поддержки андройд браузеров и мобильного сафари и можно уже будет юзать.
caniuse.com/#search=CSS%20Grid

Comments

[IIIu6ko]

vserv: Дык а зачем я по вашем вопрос задал? Теперь вот знаю как минимум 3. Я использую bootstrap-grid щас и наткнулся на susy и стало интересно, какие есть ещё подобные..

Answer 1

[Diffins]

Smart-grid.
Отличная поддержка и невероятно удобное использование.
Минус: нет документации, нужно самому разбираться, но оно того стоит. Автор проводит платные курсы, потому и нет документации.

Comments

[IIIu6ko]

Вот это уже гораздо интереснее.
Кому интересно вот отличный обзор от автора
https://www.youtube.com/watch?v=KFVoIzaGPYg&index=...

Мануал на гитхабе есть
https://github.com/dmitry-lavrik/smart-grid

[Diffins]

vserv: какие еще два года назад? Мы о разных вещах говорим, похоже.
Я об этом https://www.npmjs.com/package/smart-grid

[Diffins]

Александр Шибков: конечно это интересно!) У меня просто глаза загорелись, когда я увидел это. Гениально и просто! Без подводных камней и прочего. Я был просто счастлив)

[IIIu6ko]

Diffins: А что на счёт CSS Grid Layout думаешь?

[Diffins]

Александр Шибков: честно, даже не рассматривал его функционал и возможности. То, что предоставляет smartgrid, мне кажется, уже не переплюнуть

[IIIu6ko]

vserv: "Твой" smartgrid вообще css-smart-grid))

[Сергей delphinpro]

Diffins:

даже не рассматривал его функционал и возможности. То, что предоставляет smartgrid, мне кажется, уже не переплюнуть

Заставили улыбнуться =))) Ни одно существующее решение на текущих технологиях не сможет переплюнуть css гриды. Они специально для раскладки страницы разрабатывались. Сейчас, когда их поддержки еще нет, сравнивая pure css grid и существующие сетки, вторые могут показаться удобнее. Но с поддержкой гридов появятся и сетки на их основе и фреймворки, их использующие. И вот это уже будет революция в раскладке страниц.

[itsjustmypage]

Diffins: так это ж обычная 12-колоночная сетка, только на препроцессорах + плагин для объединения media-запросов. Я-то думал... А уж говорить, что такая сетка может быть лучше нативных CSS grids, поведение которых возможно имитировать только JS-ом, вообще смешно.

[IIIu6ko]

itsjustmypage: Ну пока гридов нету, сетка на миксинах лучшее что я видел.

[garik23]

Прошел курс у автора данной сетки. Действительно,сложного там ничего нет.Может это как раз и является ее плюсом.Я правда еще новичек в верстке,но мне понравилось верстать на ней,пять-шесть строчек кода в css и блок адаптивный. Попробовал сверстать не сложный лендинг, используя smartgrid,в ie-11 без багов. reiben.ru/cuba

[Diffins]

itsjustmypage: а смысл-то в чем, вы можете сгенирировать сетку на свой вкус, предварительно настроив все параметры и получить универсальный инструмент для конкретного проекта.
Про нативный CSS grid молчу, ибо нет поддержки, увы.

[IIIu6ko]

Diffins: firefox и chrome уже поддерживают. Safari и opera на подходе. Уже можно использовать в комбинации с supports к примеру или с modernizr, но смысла в подключении лишней js'ки не вижу, supports поддерживают все браузеры, которые поддерживают гриды.

[Diffins]

Александр Шибков: можно ссылку на актуальное описание css grid? И чем сейчас пользуешься, пока ждешь эту поддержку? Я вот продолжаю smart-grid обкатывать)

[IIIu6ko]

Diffins: тоже smartgrid пока. Ещё не пробовал гриды, но немного читал. Вот перевод неплохой статьи getinstance.info/articles/css/getting-started-css-grid

Answer 2

[WarriorKodeK]

Flexbox Grid.
У него и поддержка стала нормальная и юзать очень удобно.

Вот документация если интересует.
flexboxgrid.com

callmenick.com/_development/flexbox-examples/index.html

Comments

[IIIu6ko]

Это html сетка. Интересуют именно css. В html сетках меня устраивает bootstrap-grid.

[IIIu6ko]

vserv: Вот почитай prgssr.ru/development/perehod-ot-bootstrap-k-susy.html

[Evanre]

Александр Шибков: С другой стороны это очень удобная и гибкая сетка, позволяющая не захломлять css. Я написал ее порт на sass. В нем много настроек, позволяющих сгенерировать только то, что нужно для конкретного проекта. Самая стандартная сетка умещается в 50 строк кода. Ну и дальше, в зависимости от настроек, вплоть до 300+ Советую https://gist.github.com/evanre/4ebe26b441cbb748c3d...

[IIIu6ko]

Евгений Жученко: Каждому своё. Я узнал, но не пробовал, что и у того же бутстрапа есть сетка на миксинах.

Answer 3

[Андрей]

Только свои.
Т.к. фреймворковые на 80% избыточны и под уникальные проекты все-равно их допиливать нужно.
Ну, или на крайний случай выдергиваю миксины из bootstrap, они хотя бы код не засоряют. Получается 100% бэм css =)

Comments

[IIIu6ko]

Вот вы пишете про бэм, а что скажете про smacss?

[Андрей]

Бэм всего лишь понятие...
Я сам RSCSS использую, BEM мне не нравится, избыточность имен и меньшая гибкость.
rscss.io/other-resources.html#terminologies

[IIIu6ko]

Андрей: Надо почитать по этому поводу. Не знаете какие-нибудь русские статьи про RSCSS или SMACSS?

[Андрей]

Ну, там и английский знать не нужно. На примерах разберетесь. Правила наименования понять и как структуру строить, в это весь бэм.

[Mikhail Osher]

Андрей: ага, а в rscss меняешь вложенность и всё рушится. :)

[Андрей]

Mikhail Osher: Мне кажется вы концепцию не понимаете, только при 1 уровне, когда у вас на странице 1 элемент тут rscss не подойдет. Приведите пример когда "всё рушится"...

[Mikhail Osher]

Андрей: rscss обязывает использовать > для дочерних элементов. в этом плане bem дает куда бóльшую гибкость

[Андрей]

Mikhail Osher: Опять же, вы не поняли сути блоков и слоев. В ">" и есть вся прелесть. Про bem могу тогда сказать тоже самое, он обязывает использовать "__" для дочерних блоков, плюс гигантские имена классов не дают такую гибкость использования слоев =) Хотя спорить тут не о чем, "на вкус и цвет все фломастеры разные".

[Mikhail Osher]

Андрей: я захочу обернуть несколько узлов еще в один див и вся верстка рухнет в rscss. В текущем проекте его использую - пожалел)

[Андрей]

Mikhail Osher: Нет смысла спорить... Весь бэм построен по такой схеме, есть четкие правила. Если вы решите обернуть дочерние элементы в еще 1 див, вы нарушите структуру, у вас появляется между блоком и элементом еще 1 блок. Только в чистом виде bem, в отличие от rscss, вам это простит, но вы всю методологию бэм сломаете, и это уже не бэм, а просто не удобное/длинное именование классов.
Решение простое в rscss (да и в bem), просто меняете структуру слоя и переносите классы на другой блок, меняете стили. Сделайте 2 варианта c rscss и bem, и добавьте див, если не отходить от правил, то вам придется одинаковое кол-во действий произвести.
Уже пол года работаю с rscss (более 20 проектов, 5 из них гигантские просто) и не разу не было таких проблем.

[IIIu6ko]

Андрей: А можете скинуть скрин структуры каталогов css? Я по методе smacss щас делаю. Всё по папкам base, layout, modules и т.п. А потом уже импортом в основной main. А вы как делаете?

[Андрей]

Александр Шибков: Примерно так же, зависит от проекта.
Вот пример для средней сложности лэндоса.
dl3.joxi.net/drive/2017/02/14/0000/1176/38040/40/a...

Answer 4

[Islam Ibakaev]

вот это тоже ничего - https://github.com/jgthms/bulma

Comments

[Islam Ibakaev]

это фреймворк, предоставляющий сетку на flexbox, которую ты можешь использовать в проекте.

[IIIu6ko]

Islam Ibakaev: Смысл в том, чтобы не прописывать дополнительные классы к тегам и не делать какие-то обёртки типа .container, .row и т.п. Посмотри susy к примеру, чтобы понятнее стало.
Весь html на лендинге будет выглядеть так:

<section id="nameID">Контент</section>
  <section id="nameID2">Контент</section>

И не надо писать div.container в неё div.row а в нём уже div.col-12. Всё задаётся в css.

[Артур Гранд]

Александр Шибков: >Всё задаётся в css.
Тогда зачем фреймворк? я и без него могу в css прописывать ширину.

[IIIu6ko]

Артур Гранд: Чтобы это делать быстрее. Ты из проекта в проект всё равно будешь вынужден использовать какой-то шаблон, так почему бы не взять уже готовое решение?

Answer 5

[Сергей Некрасов]

В 2к17 актуальны flex-boxes.
Откуда вы знаете что скоро появится поддержка Grid Layouts ?

Comments

[IIIu6ko]

Ссылку кури, которую я прикладывал.

[Сергей Некрасов]

И дальше то что, edge не поддерживает, ie тоже? Это тебе надо курить гугл, а то услышал звон, а не знаешь где он, я бы тебе посоветовал для начала свои сетки попробовать написать, чтобы хоть немного разбираться в вопросе

[IIIu6ko]

Сергей Некрасов: Таких советчиков как ты я бы посоветовал для начала избегать)) Вот увидишь, через год все будут на гридах верстать, а ты сиди, придумывай костыли, которых уже и так в избытке. Лучше пойти спецификацию гридов покурить, чем придумывать очередной велосипед :/

[Сергей Некрасов]

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

[IIIu6ko]

Сергей Некрасов: Ну так бери спеку, бери браузер и начинай. Кто тебе мешает что-то написать на гридах?) И как ты собираешься без изучения какой-то технологии что-то на ней написать?! Если хочешь посмотреть как оно работает, то в интернетах уже полно примеров и это конечно ппц как круто и сложнааа) Инструментарий зашкаливает..

[Игорь Воротнёв]

Александр Шибков:
> Вот увидишь, через год все будут на гридах верстать
Не будут. Потому что поддержка будет только в 1-2 самых последних версиях браузеров, более старые версии магически не станут данную фичу поддерживать. А их доли будут слишком велики, чтобы можно было отказаться от их поддержки полностью. Многие проекты вынужденые еще ИЕ9 даже поддерживать.

[IIIu6ko]

Игорь Воротнёв: Уже в марте вроде должны выкатить обновы все основные браузеры. Через год там как раз проскочит несколько версий. На счёт ie и edge конечно не знаю, но мобильные браузеры должны быстро подтянуться.
В общем посмотрим. Я конечно погорячился в предыдущем посте, но думаю уже в этом году эту технологию начнут использовать, конечно если она окажется на столько удобной как про неё пишут.

[Николай]

Вот увидишь, через год все будут на гридах верстать

[IIIu6ko]

Николай, Уже вполне можно верстать. Поддержка 92%.

[Николай]

IIIu6ko, можно !== верстать.
Гриды забыты, все используют флекс.

[IIIu6ko]

Николай, Серьёзно?)) Ладно, я понял тебя.

Answer 6

[Алексей]

Susy susy.oddbird.net
Гибкая

Answer 7

[Константин Давыдов]

Toast Grid

Answer 8

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

для себя выделил flexbox сетку https://blueprintcss.io раньше называлась core-flex-grid кажется
из отличий, от подобных меньший размер и реализация не на классах) а..

<div bp-layout="row">
  <div bp-layout="col">
      <div class="demo">6 columns</div>
   </div>
   <div bp-layout="col">
      <div class="demo">6 columns</div>
   </div>
</div>

Comments

[IIIu6ko]

HTML

<div class="wrapper">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

SCSS

div.wrapper {
  @include wrapper();
  div.row {
    @include row-flex();
    div.col {
      @include col-6();
      @include col-xs-12();
    }
  }
}

Как-то так это будет выглядеть на smartgrid, которую там выше советовали. Я пока её выбрал, а там мб susy попробую, там 3 версия вроде собирается выходить, мб чё интересное будет.

Ну в общем вся фишка что у тебя html классами не переполнен и адаптация очень удобно делается :)

Answer 9

[Владимир Антощенко]

Bourbon NEAT Имхо