​Flexbox Defense

Расставляй башни и уничтожай противника в увлекательнейшей игре, изучая заодно свойства Flexbox-модели

http://www.flexboxdefense.com/

#css #games #layout

​Разбираемся с CSS Grid: создание grid-контейнера

Полезный лонгрид по гридам от Рейчел Эндрю

https://prglb.ru/2pq5y

#css #grid #layout

CSS Grid: полный контроль над макетом

CSS Grid — это самая продвинутая на данный момент система управления разметкой страницы в CSS. Она позволяет контролировать сразу два измерения и создавать очень сложные макеты.

🤷‍♂️ Но для новичка может быть непросто разобраться в этом многообразии новых концепций и свойств. Поэтому вот вам еще одно большое руководство по гридам: https://prglb.ru/3ramo

Что тут есть?

👉 Подробный разбор элементов грид-сетки (контейнеров, линий, ячеек, областей)
👉 Введение в новые функции (minmax, repeat) и юниты размерности (fraction)
👉 Объяснение свойств позиционирования элемента в сетке
👉 Примеры готовых макетов
👉 Советы по отладке

#css #layout #grid

Диагональные лейауты в 2020

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

Существует как минимум три подхода к заострению углов:

👉 SVG
👉 CSS Clip Path
👉 CSS Transforms

Статья подробно расскажет именно о последнем.

Читать: https://www.cat-in-web.ru/diagonal-layouts/
А здесь краткий конспект: https://prglb.ru/2th1d

#css #layout

​Гибкие лейауты на Flexbox

Подробное введение в свойства flexbox-модели с примерами.

Читать: https://prglb.ru/bft7

#css #beginners #layout

Познай тайны Flexbox

Видео-курс, посвященный Flexbox-модели в CSS. Наглядный детальный разбор всех свойств и примеры их использования.

Смотреть: https://www.youtube.com/playlist?list=PL_uwZ1gR-hzJob04JV6m7eksx_MPnvDws

#video #css #layout

Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

Используем CSS Grid для создания крутой сетки изображений, которая изменяет количество столбцов в зависимости от ширины экрана или окна браузера. И все это всего лишь одной строчкой CSS-кода! 😲

Читать: https://prglb.ru/5mbd1

#css #grid #layout

Шпаргалка по GRID

Подробная шпаргалка по всем свойствам Grid Layout: https://prglb.ru/cic7

#css #layout #grid

CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

Большой обзор Grid-модели: https://prglb.ru/2r33v

#css #layout #grid

Sticky + Grid

Можно ли заставить sticky-элементы работать как нужно в grid-раскладке? Да!

https://proglib.io/w/386d3704

#css #layout

​Изучаем CSS Grid на примерах

Система Grid (сетка) является одной из наиболее полезных функций, добавленных в CSS. Она позволяет выравнивать элементы страницы по столбцам и строкам. CSS Grid упрощает разработку сложных и адаптивных веб-страниц и не требует данных с плавающей запятой, таблиц или позиционирования. У Grid есть множество и более мощных способностей.

https://proglib.io/w/1b8140ed

#css #layout

Дизайн без сеток

Выходим за пределы сеток в вебе: https://gridless.design/

#layout

Поприветствуйте CSS-запросы от контейнера

Запросы от контейнера уже здесь, и они сделают вашу жизнь намного проще: https://proglib.io/w/c72821af

#css #layout

6+5 способов сделать две колонки ✌️

От таблиц и флоатов до гридов и полной дичи 😱

https://proglib.io/w/221e9587

#video #css #layout

Адаптивный layout — как переверстать весь проект, не перевёрстывая его

Вёрстка — это первое, чему обычно учатся начинающие фронтендеры. Но когда вёрстки в вашем проекте становится очень много, поменять что-то — особенно везде и сразу — становится непросто. Переверстать большой проект, как правило, почти нереально. И если начинает казаться, что в какой-то задаче это нужно, вероятно, пришло время для более нестандартных методов.

https://proglib.io/w/c21cf924

#layout #css

Flexbox Defence

Занимательная игра для изучения свойств CSS Flex Model: https://proglib.io/w/a126ac04

#css #layout

min-content, max-content и fit-content в CSS

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

https://proglib.io/w/09e97ce9

#css #layout

​Организация отступов в верстке (margin/padding)

Статья довольно старая, но содержит много полезных идей, над которыми стоит задуматься: https://proglib.io/w/1b91356e

#layout #css

Верстка в 2022. Теория и практика

Некратный отступ в макете - это не всегда ошибка, или учимся видеть логику в дизайне:

👉 Часть 1
👉 Часть 2

#layout #css

​CSS Grid

Несколько гайдов по гридам для тех, кто еще не:

👉 Полный гайд
👉 Руководство по CSS Grid Layout (рус.)
👉 Изучаем CSS Grid
👉 Как я запомнил свойства CSS Grid
👉 Видео-курс (11 видео, рус.)

#css #layout #grid