Поделитесь опытом использования css сеток. Какие сетки актуальны в 2к17?
И что скажите на счет susy?
А также, что думаете на счет CSS Grid Layout? Уже совсем скоро будет поддержка chrome, firefox, safari и opera на декстопе. Остаётся дождаться поддержки андройд браузеров и мобильного сафари и можно уже будет юзать. caniuse.com/#search=CSS%20Grid
vserv: Дык а зачем я по вашем вопрос задал? Теперь вот знаю как минимум 3. Я использую bootstrap-grid щас и наткнулся на susy и стало интересно, какие есть ещё подобные..
Smart-grid.
Отличная поддержка и невероятно удобное использование.
Минус: нет документации, нужно самому разбираться, но оно того стоит. Автор проводит платные курсы, потому и нет документации.
Александр Шибков: конечно это интересно!) У меня просто глаза загорелись, когда я увидел это. Гениально и просто! Без подводных камней и прочего. Я был просто счастлив)
даже не рассматривал его функционал и возможности. То, что предоставляет smartgrid, мне кажется, уже не переплюнуть
Заставили улыбнуться =))) Ни одно существующее решение на текущих технологиях не сможет переплюнуть css гриды. Они специально для раскладки страницы разрабатывались. Сейчас, когда их поддержки еще нет, сравнивая pure css grid и существующие сетки, вторые могут показаться удобнее. Но с поддержкой гридов появятся и сетки на их основе и фреймворки, их использующие. И вот это уже будет революция в раскладке страниц.
Diffins: так это ж обычная 12-колоночная сетка, только на препроцессорах + плагин для объединения media-запросов. Я-то думал... А уж говорить, что такая сетка может быть лучше нативных CSS grids, поведение которых возможно имитировать только JS-ом, вообще смешно.
Прошел курс у автора данной сетки. Действительно,сложного там ничего нет.Может это как раз и является ее плюсом.Я правда еще новичек в верстке,но мне понравилось верстать на ней,пять-шесть строчек кода в css и блок адаптивный. Попробовал сверстать не сложный лендинг, используя smartgrid,в ie-11 без багов. reiben.ru/cuba
itsjustmypage: а смысл-то в чем, вы можете сгенирировать сетку на свой вкус, предварительно настроив все параметры и получить универсальный инструмент для конкретного проекта.
Про нативный CSS grid молчу, ибо нет поддержки, увы.
Diffins: firefox и chrome уже поддерживают. Safari и opera на подходе. Уже можно использовать в комбинации с supports к примеру или с modernizr, но смысла в подключении лишней js'ки не вижу, supports поддерживают все браузеры, которые поддерживают гриды.
Александр Шибков: можно ссылку на актуальное описание css grid? И чем сейчас пользуешься, пока ждешь эту поддержку? Я вот продолжаю smart-grid обкатывать)
Александр Шибков: С другой стороны это очень удобная и гибкая сетка, позволяющая не захломлять css. Я написал ее порт на sass. В нем много настроек, позволяющих сгенерировать только то, что нужно для конкретного проекта. Самая стандартная сетка умещается в 50 строк кода. Ну и дальше, в зависимости от настроек, вплоть до 300+ Советую https://gist.github.com/evanre/4ebe26b441cbb748c3d...
Только свои.
Т.к. фреймворковые на 80% избыточны и под уникальные проекты все-равно их допиливать нужно.
Ну, или на крайний случай выдергиваю миксины из bootstrap, они хотя бы код не засоряют. Получается 100% бэм css =)
Mikhail Osher: Мне кажется вы концепцию не понимаете, только при 1 уровне, когда у вас на странице 1 элемент тут rscss не подойдет. Приведите пример когда "всё рушится"...
Mikhail Osher: Опять же, вы не поняли сути блоков и слоев. В ">" и есть вся прелесть. Про bem могу тогда сказать тоже самое, он обязывает использовать "__" для дочерних блоков, плюс гигантские имена классов не дают такую гибкость использования слоев =) Хотя спорить тут не о чем, "на вкус и цвет все фломастеры разные".
Mikhail Osher: Нет смысла спорить... Весь бэм построен по такой схеме, есть четкие правила. Если вы решите обернуть дочерние элементы в еще 1 див, вы нарушите структуру, у вас появляется между блоком и элементом еще 1 блок. Только в чистом виде bem, в отличие от rscss, вам это простит, но вы всю методологию бэм сломаете, и это уже не бэм, а просто не удобное/длинное именование классов.
Решение простое в rscss (да и в bem), просто меняете структуру слоя и переносите классы на другой блок, меняете стили. Сделайте 2 варианта c rscss и bem, и добавьте див, если не отходить от правил, то вам придется одинаковое кол-во действий произвести.
Уже пол года работаю с rscss (более 20 проектов, 5 из них гигантские просто) и не разу не было таких проблем.
Андрей: А можете скинуть скрин структуры каталогов css? Я по методе smacss щас делаю. Всё по папкам base, layout, modules и т.п. А потом уже импортом в основной main. А вы как делаете?
Islam Ibakaev: Смысл в том, чтобы не прописывать дополнительные классы к тегам и не делать какие-то обёртки типа .container, .row и т.п. Посмотри susy к примеру, чтобы понятнее стало.
Весь html на лендинге будет выглядеть так:
Артур Гранд: Чтобы это делать быстрее. Ты из проекта в проект всё равно будешь вынужден использовать какой-то шаблон, так почему бы не взять уже готовое решение?
И дальше то что, edge не поддерживает, ie тоже? Это тебе надо курить гугл, а то услышал звон, а не знаешь где он, я бы тебе посоветовал для начала свои сетки попробовать написать, чтобы хоть немного разбираться в вопросе
Сергей Некрасов: Таких советчиков как ты я бы посоветовал для начала избегать)) Вот увидишь, через год все будут на гридах верстать, а ты сиди, придумывай костыли, которых уже и так в избытке. Лучше пойти спецификацию гридов покурить, чем придумывать очередной велосипед :/
Прежде чем изучать какую-то технологию, нужно на ней написать что-то и я тебе скажу что велосипеды это неплохо, плохо когда ты не понимаешь инструмент и берешь сделанные кем-то наработки и без малейшего представления как они работают, тупо их используешь и это касается не только css. Через год ты будешь таким же копи-паст девом, завязывай курить - это вредно для здоровья.
Сергей Некрасов: Ну так бери спеку, бери браузер и начинай. Кто тебе мешает что-то написать на гридах?) И как ты собираешься без изучения какой-то технологии что-то на ней написать?! Если хочешь посмотреть как оно работает, то в интернетах уже полно примеров и это конечно ппц как круто и сложнааа) Инструментарий зашкаливает..
Александр Шибков:
> Вот увидишь, через год все будут на гридах верстать
Не будут. Потому что поддержка будет только в 1-2 самых последних версиях браузеров, более старые версии магически не станут данную фичу поддерживать. А их доли будут слишком велики, чтобы можно было отказаться от их поддержки полностью. Многие проекты вынужденые еще ИЕ9 даже поддерживать.
Игорь Воротнёв: Уже в марте вроде должны выкатить обновы все основные браузеры. Через год там как раз проскочит несколько версий. На счёт ie и edge конечно не знаю, но мобильные браузеры должны быстро подтянуться.
В общем посмотрим. Я конечно погорячился в предыдущем посте, но думаю уже в этом году эту технологию начнут использовать, конечно если она окажется на столько удобной как про неё пишут.
для себя выделил flexbox сетку https://blueprintcss.io раньше называлась core-flex-grid кажется
из отличий, от подобных меньший размер и реализация не на классах) а..
Как-то так это будет выглядеть на smartgrid, которую там выше советовали. Я пока её выбрал, а там мб susy попробую, там 3 версия вроде собирается выходить, мб чё интересное будет.
Ну в общем вся фишка что у тебя html классами не переполнен и адаптация очень удобно делается :)