От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс.
Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны следить за новинками.
После прочтения этого руководства вы сможете логически подходить к построению сайтов и писать чистый код, пригодный для будущего, вместо использования хаков. Это руководство не охватывает навыки HTML / CSS в целом, но сосредоточено на том, как структурировать сборку и стили сетки, используемые для ее разработки. Я не рассмотрел стили отката для браузеров, которые не поддерживают сетку, чтобы не отвлекать внимание.
Вы можете следовать руководству, используя этот Codepen.
Проблема
Жизнь фронтенд-разработчика никогда не бывает скучной. В зависимости от процессов на работе, вы можете быть вовлечены в разработку дизайна — или, возможно, вам будут предоставлены мобильные и настольные приложения для сборки. Возможно, вам дадут настольный макет сайта, а остальное вам придется сделать самостоятельно.
На то, как вы создаете сайты, также может повлиять то, как вы умеете писать html / css. Если вам повезло, и вы начали создавать веб-сайты после того, как использовались floats и clears, есть большая вероятность, что вы начали применять такую платформу, как Bootstrap.
В агентстве, в котором я работаю, есть соглашение об использовании сетки bootstrap в качестве основы. Она пользуется поддержкой большинства разработчиков, и это означает, что существует стандарт разработки, с которым нужно работать (хотя лично я не фанат Bootstrap) и это хорошо.
Несмотря на это, недавно мы столкнулись с проектом, дизайн которого было сложно построить с использованием этого фреймворка, и разработчики были разочарованы, поскольку чувствовали, что им приходится писать все больше и больше хаков. Процесс проектирования привел к другому потоку контента на мобильных устройствах, что снова создало проблемы.
Закон инструмента
Фреймворки определяют структуру вашего HTML. Оболочки div и вложенные колонки позволяют легко создавать строгие макеты сетки. Однако существует тенденция формирования зависимости от конкретного инструмента, и в этот момент когнитивный уклон, называемый «Законом молотка», может заставить вас попробовать использовать инструмент, который вы знаете, для любой ситуации.
Если у вас есть макет от дизайнера, который нарушает эту форму, и не вписывается в направление вашего фреймворка, вы застрянете посередине, пытаясь протолкнуть круглый колышек в квадратное отверстие. Это не делает счастливыми разработчиков, может показаться, что вы не можете угодить никому, даже себе, когда добавляете правила, чтобы привести макет к форме. Это приводит к техническим сложностям, написанию множества дополнительных стилей и компромиссам с командой разработчиков.
Я перестроил раздел страницы, используя чистый минимальный html и css-grid, чтобы показать, как этот болезненный процесс может превратиться во что-то, от чего они могут получать удовольствие, и в конечном итоге все останутся удовлетворенными.
Новые и готовящиеся функции JavaScript ES2019
Итак, давайте рассмотрим дизайн и решим, что с ним делать.
Настольное представление
2 перекрывающихся колонки с изображением, иконкой дерева на фоне и текстом поверх нее. На первый взгляд не безумно сложно, но первый взгляд может быть обманчив.
Если в первую очередь вам на ум пришел Bootstrap, вы могли бы подумать, что строка и два столбца идеально для этого бы подошли. Итак, давайте посмотрим, как это будет переноситься на мобильные устройства?
Мобильное представление
Сложенные блоки с контентом довольно просто скомпонованы. Одна вещь, которую мы можем видеть, это то, что порядок размещения отличается — это означает, что подход с двумя столбцами не сработает, если мы не сможем вытащить заголовки и расположить их где-нибудь еще… Что делать разработчику!?
Возвращаясь к основам
Первое, что я делаю при работе с макетом, это разбиваю элементы, которые составляют страницу. Обязательно обратите внимание на порядок размещения на мобильных устройствах, так как это логичный способ скомпоновать страницу, что будет означать меньше перемещений элементов. Это также означает, что если по какой-то причине ваша страница теряет стили, отображаемый HTML-код, будет иметь смысл для пользователя!
Самое замечательное в CSS Grid заключается в том, что вам не нужно загружать div-оболочки для создания макетов. Фактически, до тех пор, пока подсветка не будет реализована в основных браузерах, большое количество контейнерных элементов будет проблемой, поскольку сетка будет влиять только на ее прямых потомков.
На этой странице у нас есть 2 заголовка, фотография, текст, ссылка и фон с изображением декоративного дерева. С bootstrap вы можете получить что-то вроде этого:
04
Crafted in Scotland…
Our bikes were born in Scotland, and varied terrains push the mind and the body into sharp focus. It is there, on the road or off the beaten track, that we discover more about the world and ourselves.
It is there that we feel at one with all that surround us and experience intensely what it is to feel alive.
Our story
Chosen
by riders
everywhere
| 1234567891011121314151617181920212223242526 |
04
Crafted in Scotland…
Our bikes were born in Scotland, and varied terrains push the mind and the body into sharp focus. It is there, on the road or off the beaten track, that we discover more about the world and ourselves.
It is there that we feel at one with all that surround us and experience intensely what it is to feel alive. Our story Chosen
|
Но поскольку мы фокусируемся на элементах и используем другой подход, мы можем уменьшить количество необходимого базового HTML:
04
Crafted in Scotland…
Chosen by riders everywhere
Our bikes were born in Scotland, and varied terrains push the mind and the body into sharp focus. It is there, on the road or off the beaten track, that we discover more about the world and ourselves.
It is there that we feel at one with all that surround us and experience intensely what it is to feel alive.
Our story
| 123456789101112 |
04
Crafted in Scotland… Chosen by riders everywhere
Our bikes were born in Scotland, and varied terrains push the mind and the body into sharp focus. It is there, on the road or off the beaten track, that we discover more about the world and ourselves.
It is there that we feel at one with all that surround us and experience intensely what it is to feel alive. Our story |
Чистый простой код, который сам по себе уже дает нам вывод, имеющий смысл. Добавим только самые простые стили кнопок и шрифтов, и вдруг все выглядит аккуратно.
Пока все хорошо… но это не похоже на дизайн, который мне дали, дизайнер убьет меня! Мы подойдем к этому позже, но что приятно отметить, это то, что вы создали хорошую базу. Все те люди со странными старыми браузерами будут рады, что вы приложили усилия.
Если у вас это есть, то используйте!
CSS Grid в настоящее время поддерживается в 92% браузеров, на самом деле только Opera Mini и старые IE не поддерживают ее. Во втором руководстве я расскажу, что мы можем сделать для этих бедных людей, но их очень немного.
Мы используем правило @supports. Это также означает, что мы могли бы реализовать некоторые стандартные стили, кроме стилей сетки, и @supports позволит нам сделать это.
Нравится вам это или нет, они очень полезны, поэтому я собираюсь начать с медиа-запроса для 320px и выше. Это примерно размер iPhone 5 и это минимум, с которого я собираюсь начать.
Я начинаю определять сетку столбцов и строк для размещения контента. Используя пользовательское свойство для заголовка, мы можем установить строку, совпадающую с выбранным шрифтом, это пригодится, когда мы перейдем к размеру настольного представления.
CSS .grid-section{ display:grid; grid-template-columns: 1rem 1fr 1rem; grid-template-rows: 30px var(—italic-header) 60px min-content min-content 100px;
}
5 полезных функций в Chrome DevTools
| 12345 | .grid-section{ display:grid; grid-template-columns: 1rem 1fr 1rem; grid-template-rows: 30px var(—italic-header) 60px min-content min-content 100px; } |
Затем мы можем присвоить значения строк элементам HTML для создания мобильного макета, отметив, что фон с декоративным деревом, текст и кнопка расположены в одной строке и накладываются друг на друга. Это необходимо для того, чтобы мы могли создать настольный макет.
CSS .chapter { grid-row:1; grid-column:2; align-self:center; }
etc…
| 123456 | .chapter { grid-row:1; grid-column:2; align-self:center; } etc… |
Открытые равнины…
Когда мы доберемся до 768 пикселей, пришло время начать реализацию концепции дизайнеров для настольных компьютеров. На этом этапе мы начинаем использовать сетку из 4 столбцов, а затем размещаем изображение и синий блок div с иконкой дерева, чтобы они перекрывали друг друга. Чтобы разместить синий div позади изображения применяется Z-индекс. Для создания перекрытия у меня есть два фиксированных колонки (1 и 3), а затем две других имеют ширину в fr. Синий блок будет охватывать колонки с 1 по 4, а изображение с 3 и до конца. Мы используем -1, чтобы задать это, хотя в данном случае вы можете установить значение 5.
Расположите вторичный заголовок в тех же колонке и рядах сетки, что и изображение, а затем используйте правила выравнивания.
CSS .h-color-white { grid-column:3/-1; grid-row:1/4; position: relative; align-self:center; justify-self:center; text-align:right; font-size: 2.5rem; width:75%;
}
img { grid-column:3/-1; grid-row:1/4; width:100%; height:100%; object-fit:cover;
}