Comments 29
Примеры из статьи это рекламные плакаты, а не интерфейс чего то функционального
UFO just landed and posted this here
Не совсем понятно, зачем нужны дроби в grid-template. По идее же, если все числа пропорционально увеличить (в данном случае — умножить на 6), сетка не должна поменяться, с точностью до погрешностей округления?
Погрешности большими получаются. Если взять сетку шириной в 1920px, то длина минимальной ячейки будет 30px. Мы ее принимаем за 1 в grid-template. Соответственно если начать там все округлять плюс-минус на 1/3, то это будет плюс-минус 10px на экране, а это уже сравнимо с размером шрифта.
Нет, я о другом. Почему нельзя написать так:
.golden-grid {
grid-template-rows: 6fr 6fr 12fr 24fr 16fr 32fr 32fr 26fr 17fr 21fr 21fr 17fr 26fr 32fr 32fr 16fr 24fr 12fr 6fr 6fr;
grid-template-columns: 6fr 6fr 12fr 24fr 16fr 32fr 32fr 26fr 17fr 21fr 21fr 17fr 26fr 32fr 32fr 16fr 24fr 12fr 6fr 6fr;
}Или это мне проще думать про "n частей из 384", чем про "ячейка в n/m раз больше минимальной"?
Этому в институте учат, сеткам. Все дизайнеры получившие профильное образование это знают.
Фронтенд-разработчиков с высшим образованием в области дизайна — единицы (да что уж там, веб-дизайнер с таким образованием — редкость). Но, так или иначе, я вижу много людей, которые не знают, как подступиться к верстке таких сайтов, так что кому-то вся эта информация точно будет полезна.
Ну так то и гриды не так давно появились, чтобы каждый знал как подступится… Да и поддержка гридов заставляет задумываться в первую очередь об альтернативном решении. Но статься действительно полезная.
Гриды уже много лет как появились. Последний год точно есть поддержка во всех современных браузерах. Сейчас их поддержка по caniuse ≈93%.
На том же caniuse можно даже увидеть когда. Поддержка некоторыми браузерами началась с 2017 года, остальные позже. Пара лет это по вашему много? Поддержка флексов началась с 2013 и даже без префиксов сейчас поддержка флексов ≈97% с префиксами ≈98%. Не вооруженным глазом видно что это выше чем у гридов, а значит, если у вас нет специфической задачи в которой гриды будут лучшим решением и можно использовать флексы, то очевидно что нужно использовать флексы. Это вопрос здравого смысла.
Тот же сафари еще где-то в 2016 при некоторых условиях с флексами творил чудеса, хотя поддержка все дела… А в edge несмотря на все утверждения о поддержки всегда находятся проблемы, сколько вопросов на том же тостере что про flex, что про грид, так что я не вижу смысла спорить с цифрами 98 явно выше 93 и в целом 93 явно мало, чтобы твердо так брать и бездумно использовать.
Тот же сафари еще где-то в 2016 при некоторых условиях с флексами творил чудеса, хотя поддержка все дела… А в edge несмотря на все утверждения о поддержки всегда находятся проблемы, сколько вопросов на том же тостере что про flex, что про грид, так что я не вижу смысла спорить с цифрами 98 явно выше 93 и в целом 93 явно мало, чтобы твердо так брать и бездумно использовать.
Многие клиенты до сих пор сидят со старых домашний iPad на iOS 9, где нет поддержки grid. Также grid в IE11 отличается от grid в chrome, поэтому невозможно просто взять и использовать префиксы. Grid на данный момент не стабильный функционал, который требует альтернативной вёрстки для устаревших браузеров.
UFO just landed and posted this here
Снимаю шляпу...
Большое спасибо за статью. Когда хоть один раз увидел, то стало лучше, чем сто раз слышал про это ранее.
P.S. Уменьшите, пожалуйста, размеры абзацев, читать не возможно.
Полезная статья. Узнала новый способ позиционирования блоков на сайте с нестандартным дизайном.
Я настолько не верстальщик, что не понял прикола про трансформацию текста. Можно поподробнее?
Если вы про смещение из сетки — то смысл исключительно в сохранении логики из дизайна в коде. Это упрощает и понимание происходящего и адаптацию под меньшие размеры экранов.
Если вы о технической составляющей, то смещения и повороты делаются через CSS-свойства transform (rotate — чтобы крутить, translateX/Y — чтобы перемещать) и transform-origin (в нашем контексте — чтобы крутить не вокруг центра, а вокруг угла элемента с последующим смещением на 100% в ту или иную сторону при необходимости). Про это уже столько раз писали, что мне показалось не нужным на этом подробно останавливаться, но если этот вопрос еще у кого-то возникнет, то может быть напишу отдельную статью про практическое применение трансформаций.
Если вы о технической составляющей, то смещения и повороты делаются через CSS-свойства transform (rotate — чтобы крутить, translateX/Y — чтобы перемещать) и transform-origin (в нашем контексте — чтобы крутить не вокруг центра, а вокруг угла элемента с последующим смещением на 100% в ту или иную сторону при необходимости). Про это уже столько раз писали, что мне показалось не нужным на этом подробно останавливаться, но если этот вопрос еще у кого-то возникнет, то может быть напишу отдельную статью про практическое применение трансформаций.
Я не совсем про это. Я про то, как мне заставить этот transform размазывать текст ровно под размер сетки. Понятно что можно сделать rotate(.25turn), мне интересно именно как заставить текст касаться обоих концов грида.
CSS не позволяет изменять размер шрифта, чтобы текст идеально растягивался под размер элемента. Адаптивная типографика часто приходится очень к месту, но в общем случае такую задачу сейчас можно только на JS решить. И вопрос в таком виде на самом деле ставится редко и только для единичных элементов на странице, т.к. при таких растягиваниях очень легко получить зоопарк разных размеров шрифтов на одном экране, что с дизайном совершенно не будет согласовываться. Обычно все же текст занимает меньше места, чем элемент сетки, по которому он выравнивается (по этому я и говорил про выравнивание в разные стороны в статье). В некоторых случаях, особенно если речь идет про повороты и разные смещения, тексту задают абсолютное позиционирование относительно его ячейки (0 0 или 100% 100%) и используют две ее стороны для выравнивания, а другие две скорее как ограничитель для мозга и тестирования, но опять же не для «размазывания».
У меня появилась идея как реализовать растягивание текста под размер контейнера. Но это не спортивно)
Суть в том, чтобы текст запихнуть в SVG и там вместо самого шрифта использовать контуры. Таким образом у нас просто получится картинка, которую можно будет растягивать как захочется.
Pros
- кроссбраузерненько
- очевидно
Cons
- не спортивно и по сути без использования CSS
- придётся на каждое "буковку поменяй" заново генерировать SVG
а акцент делается на его представлении и оказании впечатления на посетителя. Глядя на такие сайты я не могу выбросить из головы те самые модные журналыПодозреваю, что на кого-то действительно это производит впечатление. Я же всегда недоумевал, как таких дизайнеров не увольняют? Тратить дорогую бумагу на что-то настолько бесполезное. Вместо того, чтобы получить контент, читатель получает выкрутасы дизайнера. Особенно это печально, когда целый журнал — каталог какой-нибудь продукции — оформляют в таком стиле. Зачем? Зачем они делают это?
А за статью спасибо. Grid — действительно шикарная вещь. Все эти таблицы и флоаты можно забыть как страшный сон.
UFO just landed and posted this here
А можно недалеким еще раз, откуда взялись эти значения 1, 1, 2, 4, 2.66, 5.33 и.т.д? Два первых значения мы берем за единичный отрезок, а как дальше получаются 2, 4, 2.66, не очень понял этот момент с точки зрения математики
Проще всего их получить из нарисованной в графическом редакторе сетки. Просто смотрим на направляющие и по их координатам узнаем длины ячеек, а потом делим их на длину первой. Или можно в лоб отметить на сетке все дроби (как на картинке, какую часть всего прямоугольника отделяют линии) и их повычитать между собой, ну и нормализовать в конце, чтобы числа были более простыми для понимания. Но этот подход сложнее, там легко запутаться.
А можете пожалуйста поделится этой сеткой для фотошопа?
Sign up to leave a comment.
Golden canon grid: страшилка для фронтендеров