Добро пожаловать в "Дизайн-кладовку"!

Меня зовут Андрей Гаврилов, и я рад приветствовать вас в моем новом шоу необычного формата.

Почему такое странное название? Кладовка - это место, где собирается все, что накопил человек, что для него дорого и определяет его как личность.

Давайте вместе каждую неделю складывать в нашу общую дизайн-кладовку один полезный навык, секрет или умение.

Модульные сетки

Эта статья написана в формате конспекта по материалам данного видео:

Сегодня мы разберемся с одним важнейшим вопросом в работе современного веб-дизайнера. Это модульные сетки. Меня ежедневно заваливают вопросами о том, какую сетку использовать? В каких случаях использовать 12 колонок, 14 колонок, 1170рх или 960рх, а может быть, 940рх?

Сегодня мы разберем все эти вопросы в одном простом уроке.

Поехали...

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

Breakpoint

Первое, что нужно знать - это о таком понятии как breakpoint. Возможно, вы даже о нем и не слышали. Это, так называемая, точка слома. Она характеризует переход сайта от одного состояния к другому, потому как сайт выглядит по-разному на мобильном, планшете или десктопе. Для этого, как раз и существует та самая точка слома «breakpoint», в которой дизайн сайта переходит от мобильного устройства к планшету, от планшета к маленьким десктопам, от маленьких к большим.

Чтобы увидеть на примере, что такое breakpoint, и как работает адаптивность, можно открыть любой сайт, который является отзывчивым (адаптивным). Перед вами мой личный сайт andrewgavrilov.me, можете зайти на него и точно также протестировать. На моем десктопе с разрешением 1600рх, сайт выглядит именно так.

Давайте откроем dev tools в Chrome на мониторе. Если вы не знаете, как его запустить, то обязательно погуглите, так как мне бы не хотелось сейчас отвлекаться на такие базовые моменты. Итак, открываем dev tools и смотрим, как выглядит наш сайт на различных устройствах. Этот инструмент позволяет нам тестировать, как будет выглядеть сайт на мобильных устройствах с разрешением 320рх, 375рх в длину и т.д. На маленьких десктопах мой сайт выглядит вот так.

На планшетах 768рх, dev tools нам показывает, что сайт выглядит так.

На больших мобильных устройствах, с разрешением 420рх пикселей в длину, сайт перестраивается, и именно здесь, между двумя данными разрешениями и происходит breakpoint.

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

Bootstrap

Как правило, у сайта существуют всего лишь 2 или 3 breakpoint. Давайте заглянем на сайт самого популярного framework для разработчиков.

Это стало сегодня настолько популярным, что является, по сути, стандартом. Все разработчики и верстальщики работают именно под данный framework. Я не буду вдаваться в детали и рассказывать, что это такое, скажу только, что именно этот framework ускоряет верстку, и у него есть свои технические характеристики. Поэтому считается нормой, даже стандартом, если вы разрабатываете свой дизайн под модульные сетки, которые соответствуют Bootstrap.

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

Перейдем на вкладку CSS и зайдем в раздел Grid System (колоночная система).

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

Bootstrap считает, что очень маленькие устройства - это телефоны с разрешением менее 768рх, поэтому в диапазоне от 0 до 768 мы готовим первый макет. Далее маленькие устройства - планшеты, у них разрешение больше, чем 768рх, но меньше, чем 992рх, далее от 992рх начинаются средние устройства (десктопы). А устройства, у которых разрешение больше, чем 1200рх считаются большими устройствами (большими десктопами).

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

Открою вторую тайну, которая вас успокоит - нет никаких норм. Если мы покрываем диапазон, к примеру, от 320рх до рх - вы сможете подготовить макет под 320рх, под 768рх, под 322рх, под 327рх.

Понимаете, в чем суть? Разницы нет никакой.

Именно поэтому я специально для вас подготовил файлы, модульные сетки, с которыми вы будете работать. Такие модульные сетки я использую в своей работе. Вы так же можете скачать подобные.

Для вас главное, чтобы ваш макет, длина холста которого примерно 480рх, попадал в диапазон, который покрывает данная конкретная сетка. В этой сетке уже можете работать как вам угодно. Кстати, для того, чтобы включить или выключить направляющие надо использовать комбинацию клавиш ctrl+H.

Направляющие формируют сетку, и вы сами можете их выдвигать, но поскольку это очень долго и неудобно, то проще всего скачивать такие шаблоны, которые я вам и предоставляю.

Вот шаблон для маленьких девайсов, которые больше, чем 768рх.

Средние устройства больше 992рх.

И большие, больше 1170рх.

Эту величину в макете я использую, что на 1170рх, что на 1200рх - неважно, потому что это ширина устройства, а не сетки. Т.е. сетка может быть любой под эту ширину устройства. Не заморачивайтесь и просто используйте эти сетки в своей работе.

Я использую, как правило, сетки extra small, small devices и large devices. Это три диапазона, которые я покрываю, и это две точки слома - переход от мобильных к планшетам, от планшетов к десктопам.

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

Работа с модульными сетками

Теперь второй момент - как работать с модульными сетками. Существует мнение, которого придерживаются многие, и которое держит в страхе начинающих дизайнеров - каждый элемент должен занимать четко определенное количество колонок, начинаться у одного края колонок, заканчиваться у другого - и только так. Если бы мы все делали наши дизайны такими, то они были бы скучными, однообразными и неинтересными. Именно поэтому сетка - это направляющий, подсказывающий, но ни в коем случае не диктующий вам условия элемент, и это важно понимать.

Основные принципы такие: здесь есть такой слой, который я иногда скрываю, иногда показываю, но чаще он скрыт.

Синие полосы - это колонки, мы работаем в них. Между ними есть промежутки, в которые мы не имеем права залазить. Но мы туда входим, и я покажу в какие моменты. Главное, чтобы наш элемент никогда не начинался между двумя колонками,

Его край не может начинаться внутри промежутка, только внутри колонки. Идеальное состояние, когда элемент начинается у края какой-нибудь колонки.

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

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

Чтобы не быть голословным, я покажу небольшой пример, который снимет у вас большинство сомнений. Я подготовил стандартную картину, которую можно наблюдать в "шапке" любого сайта - логотип, строка с меню, телефон и любая кнопка.

Это расположение относительно модульной сетки абсолютно правильное. Здесь не совсем все идеально - меню оканчивается не у правого края колонки, телефон не начинается и не кончается у краев колонок, кнопка не доходит до края колонки. Представляете, если бы все использовали одинаковую сетку, и у всех была бы одинаковая длина элементов? Поэтому абсолютно нормально, когда у вас такая ситуация.

Проблема будет, если вы сделаете вот так:

Это уже не очень хорошо. Меню начинается в промежутке, телефон начинается в промежутке. Не проблема, что он заканчивается в промежутке, но вот что начинается там - это действительно проблема. Конечно, все это можно обыграть в верстке. Но это все равно неграмотно и непрофессионально. Следите, чтобы в вашей работе таких моментов не было.

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

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

В заключение

Увидимся с вами через неделю, в новом видео, в новом выпуске "Дизайн-кладовки". А для того, чтобы я понимал, что вам нравится этот формат, насколько полезно это видео - ставьте пальчики вверх, подписывайтесь на канал и оставляйте свои комментарии. Тогда я буду знать, что вам интересно и буду отвечать на ваши вопросы.

Резиновая верстка позволяет представить весь контент в удобном для чтения на любых устройствах или размерах экранов виде.

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

В этой статье мы рассмотрим плавающие сетки и их значение в адаптивном дизайне.

Что такое макеты с плавающей сеткой?

Сначала нужно понять, что такое плавающие сетки. Лучшее определение жидкости дано в Википедии:

Жидкость представляет собой вещество, которое постоянно изменяется (смещается) при приложении к нему усилия.

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

Важность плавающих сеток

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

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

Как работают плавающие сетки

Для резиновой верстки CSS с фиксированной сеткой раньше использовали 960-пиксельную систему сеток. Адаптивность макета достигалась за счет использования различных размеров в пикселях для различных размеров экрана. Теперь настало время для создания макетов на основе процентных соотношений, которые известны как плавающие макеты.

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

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

Dusty Cartridge

Palantir.net


Dress Responsively


Системы и генераторы плавающих сеток

Создать плавающую сетку не так просто, для этого потребуется время и усилия. Поэтому разумно было бы выбрать в качестве основы для дизайна макета CSS-фреймворк сеток или генератор сеток.

Ниже приведен список бесплатных CSS систем и генераторов сеток для резиновой верстки на div :

  • Variable Grid System ;
  • Fluid Grids Calculator ;
  • Fluid Grid by Bootstrap .

Большинство CSS-фреймворков сеток содержат встроенные интеллектуальные функции и были проверены во многих браузерах. Целью данного руководства является дать вам полное понимание создания адаптивной верстки и резиновой с помощью плавающих сеток.

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

Я использую Variable Grid System , чтобы сгенерировать плавающую сетку в соответствии с установленными требованиями. Перейдите к демо-версии и измените значения переменных. Я буду использовать следующие значения:

  • Ширина столбца – 60;
  • Количество столбцов – 12;
  • Ширина отступа – 20.

После этого скачайте плавающую версию файла CSS . Теперь откройте его в текстовом редакторе по своему усмотрению и найдите строку Grid >> 12 Columns . Приведенный ниже код представляет собой содержимое раздела Grid >> 12 Columns :

Container_12 .grid_1 { width:6.333%; } .container_12 .grid_2 { width:14.667%; } .container_12 .grid_3 { width:23.0%; } .container_12 .grid_4 { width:31.333%; } .container_12 .grid_5 { width:39.667%; } .container_12 .grid_6 { width:48.0%; } .container_12 .grid_7 { width:56.333%; } .container_12 .grid_8 { width:64.667%; } .container_12 .grid_9 { width:73.0%; } .container_12 .grid_10 { width:81.333%; } .container_12 .grid_11 { width:89.667%; } .container_12 .grid_12 { width:98.0%; }

container_12 — это главный контейнер. Каждый элемент нашего дизайна должен находиться внутри контейнера с классом container_12 . На основе процентных соотношений устанавливаются классы .grid_1 , .grid_2 … .grid_n . Плавающие сетки строятся с использованием столбцов, которые рассматриваются, как плавающие столбцы. Когда изменяется размер экрана, ширина этих столбцов будет регулироваться пропорционально размерам родительского контейнера.

В нашей сетке есть 12 плавающих столбцов. Рассмотрим, как столбцы располагаются в макете резиновой верстки (пример ):


Код для данного раздела приводится ниже. Для получения дополнительной информации вы можете посмотреть загруженные файлы:

Fluid Grid with Fluid Columns 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2

Каждый набор компонентов содержится внутри элемента с классом container_12 . Внутри контейнера мы можем использовать для создания плавающего столбца с определенной шириной класс grid_n . С помощью класса grid_1 мы можем получить столбец в 1/12 ширины исходной сетки, с помощью grid_2 — в 2/12 .

Вы можете загрузить демо-версию и изменить размер окна браузера, чтобы увидеть сетки с плавающими столбцами в действии.

Вложенные плавающие столбцы

Если вы используете в html верстку резиновую с помощью CSS-фреймворков , то создавать сетки с плавающими столбцами несложно. Но не все проекты будут настолько простыми, как приведенный выше макет. Возможно, вам потребуется создать столбцы и строки внутри других элементов. Столбцы, содержащиеся в родительском столбце, называются вложенными столбцами. Давайте посмотрим, как создать вложенные плавающие столбцы с помощью файла CSS , который мы сгенерировали ранее.

Посмотреть демо-версию


Приведенный выше макет содержит две строки. Первая строка разделена на две секции из шести столбцов, и каждая из двух секций снова разделена на четыре секции из трех столбцов.

Аналогично вторая строка разделена на три секции из четырех столбцов, и каждая из трех секций также разделена на три секции из четырех столбцов. Таким образом, в сетках создаются вложенные столбцы. Давайте рассмотрим код приведенного выше макета:

Nested Fluid Columns 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4

Сначала мы создаем основные контейнеры и столбцы, как мы это делали в предыдущем разделе. Внутри столбца нам нужно создать еще один контейнер с классом container_12 для вложенных столбцов. Теперь мы получаем еще 12 столбцов внутри основных шести. Затем двенадцать подстолбцов можно разделять по необходимости.

Конструкция в основе плавающей сетки

Большинство начинающих дизайнеров думает, что использование CSS-фреймворка сделает макет адаптивным. К сожалению, создать резиновую верстку не так просто. Плавающие сетки будут адаптироваться к изменению окна браузера или устройства. Если вы тщательно не спланируете дизайн, у пользователей будут проблемы при просмотре контента на небольших устройствах.

Рассмотрим приведенный ниже экран:

Таким образом, плавающая сетка, рассмотренная в предыдущих разделах, будет отображаться на маленьких экранах. Это только столбцы сетки без соответствующих данных. Даже в этом случае число 1 не отображается надлежащим образом. Когда дело дойдет до вывода контента, это будет полный беспорядок. В этом случае нам нужно настроить ширину столбцов.

Вы можете использовать медиа-запросы CSS , чтобы настроить ширину столбцов для разных размеров экрана в резиновой верстке сайта. В приведенном выше сценарии можно удвоить ширину столбца и получить 6 столбцов вместо 12, чтобы обеспечить лучшую читаемость контента. Поэтому в адаптивных конструкциях не все зависит от плавающей сетки.

Тестирование плавающих сеток

Теперь, когда мы рассмотрели основы построения плавающих сеток, перейдем к созданию простой демо-версии с использованием JQuery , чтобы протестировать плавающую сетку на различных размерах экрана. Сначала создадим макет страницы и панель навигации:

Fluid Grid Tester Монитор Планшет альбомная ориентация Планшет портретная ориентация Смартфон альбомная ориентация Смартфон портретная ориентация

Тестовая страница имеет базовый HTML-макет с JQuery . Элемент с ID device_panel будет содержать панель навигации для стандартных устройств: стационарные компьютеры, смартфоны и планшеты. После нажатия на ссылку будет вызываться функция changeGrid с типом устройства в качестве параметра.

В нижней части мы имеем iframe , который будет использоваться для загрузки плавающей сетки резиновой верстки CSS . Она находится в файле media_query.html . Теперь давайте посмотрим на функцию changeGrid .

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

Есть мнение, что подобные инструменты для создания сеток применимы только при создании сайта. Однако если отталкиваться от личного опыта, можно поспорить с этим. На данный момент я использую сетки при создании 99% проектов, включая неадаптивные сайты. Более того. На основе сеток я делаю множество других задач, например, баннеры или подобные малевалки.

Как это работает? Очень просто. Дизайнер указывает параметры для генерации заранее утвержденной всей командой разработчиков сетки. Далее скачивает изображение с отрисованными столбцами в формате PNG или PSD , и по полученным линиям выстраивает дизайн сайта. Верстальщик же, имея заранее готовый фреймворк, уже начинает верстать. Все это значительно ускоряет работу над сайтом как для дизайнера, так и для верстальщика.

Если говорить о верстке по модульной сетке, то для этого уже создано множество css . Наиболее распространенный - это Bootstrap . Если же проект не на , то некоторые из предложенных инструментов способны генерировать вместе с изображением сетки еще и целый свой фреймворк с зашитыми в него кастомизированными параметрами, которые были указаны на первом этапе.

Итак. К вашему вниманию набор инструментов для создания модульных сеток PSD и CSS , которые значительно облегчат создание сайта.

Responsify.itПростой и удобный инструмент для создания адаптивной сетки . Генерирует как PNG файл для разработки дизайна, так и css стили для верстальщика. Большим плюсом данного сервиса является то, что можно сразу посмотреть готовый результат. Внизу есть переключатель разрешений экрана. С его помощью можно увидеть, как перестраиваются колонки сайта на разных устройствах.Grid CalculatorМой любимый инструмент для создания модульных сеток , которым я регулярно пользуюсь. Это некий калькулятор , который мгновенно проинформирует, какой будет ширина колонки при определенных параметрах модульной сетки.Это очень удобно и полезно. Grid Calculator позволяет генерировать модульные сетки в формате PNG , векторные изображения и паттерны для Photoshop JSX

Modular Grid PatternХороший генератор изображений с модульными сетками в формате PSD и PNG . Основным его отличием от большинства конкурентов является то, что он умеет выстраивать не только колонки, но еще и горизонтальные линии . Для определенных задач будет полезным инструментом. Например, облегчит работу в нудной отрисовке таблиц с данными при разработке дизайна сайта.

Адаптивный дизайн – это процесс распределения шаблона таким образом, чтобы вся информация первой важности оказалась в первую очередь видна пользователям, которые используют устройства с маленькими экранами. Большинство дизайнеров выбирают сеточные шаблоны, так как этим видом шаблонов довольно просто управлять на многих устройствах.

Вы сами выбираете между фиксированным или гибким шаблоном. В нашем сегодняшнем руководстве мы хотим заострить внимание на гибких сетках и их важности в адаптивном дизайне.

Что такое гибкие сетки?

Важно узнать о предназначении гибких сеток до того, как начать думать о дизайнах. Вряд ли можно найти лучшее объяснение слову fluid (гибкий), чем написано на Wikipedia.

«Флюид (от лат. fluidis - «текучий») - вещество, поведение которого при деформации может быть описано законами механики жидкостей»

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

Важность гибких сеток

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

Мобильные устройства становятся все меньше и меньше в размере, и люди предпочитают использовать их в повседневной работы. С другой стороны, настольные мониторы становятся больше, и разрешения отображения повышаются. Так что, разрабатывая адаптивный дизайн, мы не можем планировать его только для маленьких устройств. Преимущество гибких сеток заключается в том, что мы можем выставить параметр max-width, и тогда шаблон будет отлично отображаться даже на большом экране, так как здесь все указывается в процентном соотношении.

Как работают гибкие сетки

Мы привыкли разрабатывать дизайн при помощи фиксированных сеток и 960-пиксельной сеточной системы. Затем шаблоны стали адаптивными, в которых мы используем разное количество пикселей при разных размерах экрана. Все было основано на пиксельных шаблонах дизайна. Теперь пришло время создавать дизайны на базе процентных соотношений, и такие дизайны называются гибкими.

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

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



Генераторы и системы гибких сеток

Не так-то просто создать гибкую сетку с нуля, так это на это требуется довольно много времени и усилий. Следовательно, гораздо лучше будет воспользоваться CSS Grid Framework или Grid Generator в качестве основы нашего шаблона. Предлагаем вашему внимаю несколько бесплатных CSS сеточных систем и генераторов.

Большинство CSS сеточных платформ предоставляются с расширенными свойствами, и многие из них были протестированы во всех современных браузерах. Цель данного руководства заключается в том, чтобы вы полностью поняли, что такое гибкие сетки. Итак, вам следовало бы сгенерировать гибкую сетку, которая позволит вам изучить основы гибких сеток.

Затем скачайте гибкую версию CSS-файла. Теперь откройте его в вашем любимом текстовом редакторе или осуществите поиск Grid >> 12 Columns. Нижеприведенный код отображает контент раздела Grid >> 12 Columns.

Container_12 .grid_1 {
width:6.333%;
}

Container_12 .grid_2 {
width:14.667%;
}

Container_12 .grid_3 {
width:23.0%;
}

Container_12 .grid_4 {
width:31.333%;
}

Container_12 .grid_5 {
width:39.667%;
}

Container_12 .grid_6 {
width:48.0%;
}

Container_12 .grid_7 {
width:56.333%;
}

Container_12 .grid_8 {
width:64.667%;
}

Container_12 .grid_9 {
width:73.0%;
}

Container_12 .grid_10 {
width:81.333%;
}

Container_12 .grid_11 {
width:89.667%;
}

Container_12 .grid_12 {
width:98.0%;
}
Как видно, container_12 – это основной контейнер. Каждый ваш элемент в дизайне должен быть внутри контейнера с классом container_12. Затем ширина в процентном соотношении задается классам.grid_1 , .grid_2 … .grid_n. Гибкие сетки создаются при помощи колонок, которые расцениваются как гибкие колонки. Когда размер экрана изменяется, ширина этих колонок также пропорционально изменяется в соответствии с родительским контейнером.

В нашей сетке есть 12 гибких колонок. Итак, давайте взглянем на то, как колонки расположены в нашем шаблоне.


Код для верхнего раздела приведен ниже. Вы можете проверить скачанные файлы, если вам нужно больше информации.






Fluid Grid with Fluid Columns




1
1
1
1
1
1
1
1
1
1
1
1


2
2
2
2
2
2




Каждый набор компонентов содержится внутри элемента с классом container_12. Внутри контейнера мы можем использовать класс grid_n для создания гибких колонок с указанной шириной. Используя grid_1 мы можем задать 1/12 от исходной ширины сетки, а grid_2 даст нам 2/12 от исходной ширины.

Вы можете запустить демо и попробовать изменить в размере окно браузера, чтобы посмотреть гибкую сетку в действии.

Вложенные гибкие колонки

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


Шаблон, представленный выше, содержит 2 ряда. Первый ряд разделен на 2 раздела, состоящих из 6 колонок, и каждый раздел будет снова разделен на 4 раздела из 3 колонок.

Подобно этому, вторая строка будет разделена на 3 раздела из 4 колонок, и каждый раздел снова будет разделен на 3 отдела из 4 колонок. Таким образом мы создаем вложенные колонки в сетках. Давайте посмотрим, как разработать код для вышеприведенного шаблона.






Nested Fluid Columns





3
3
3
3




3
3
3
3





4
4
4




4
4
4




4
4
4





Сначала мы создаем основные контейнеры, как мы делали это в предыдущем разделе. Внутри колонки нам нужно создать еще один контейнер с классом container_12 для вложенных колонок. Теперь нам нужно еще 12 колонок внутри 6 основных колонок. Затем 12 под-колонок можно разделить так, как потребуется. Теперь вы должны понимать, как создавать гибкие сетки и как работать с вложенными колонками. Давайте перейдем к дальнейшему изучению гибких сеток.

Дизайн поверх гибких сеток

Многие дизайнеры, которые только начинают, думают, что применение адаптивной CSS-платформы сделает их дизайн адаптивным. К сожалению, адаптивный дизайн – это не так просто. Гибкие сетки адаптируются к изменениям в размере окна браузера или устройства. Пока вы тщательно не продумаете дизайн, у пользователей будут проблемы при просмотре вашего контента на меньших по размеру устройствах, если вы будете использовать гибкие сетки.

Посмотрите на изображение, приведенное ниже.


Так шаблон на гибкой сетке, о чем говорилось в предыдущих частях руководства, будет отображаться на маленьких экранах. Здесь у нас просто сеточные колонки без нужных данных. Даже в этом случае номер 1 не отображается так, как нужно. Когда дело дойдет до реального контента, у нас получится сплошное месиво. В данном сценарии нам нужно выставить ширину колонок для того, чтобы предоставить лучший опыт взаимодействия с пользователями.

Вы можете использовать CSS media queries для настройки ширины колонок для разных экранов. В вышеприведенном сценарии вы можете удвоить ширину колонки и оставить 6 колонок вместо 12, чтобы пользователям было легче читать контент. Так что постарайтесь не зависеть всецело от гибкой сетки в адаптивном дизайне.

Тестирование гибких сеток

Теперь, когда мы рассказали вам об основах гибких сеток, мы можем перейти к разработке простого демо с jQuery для того, чтобы протестировать нашу гибкую сетку на разных размерах экрана. Сначала нам нужно создать шаблон страницы и навигацию, как показано ниже.






Fluid Grid Tester





Desktop
Tablet Landscape
Tablet Portrait
Mobile Landscape
Mobile Portrait








Наша тестовая страница будет иметь базовый HTML-шаблон с jQuery. Элемент с id device_panel будет содержать навигацию для стандартных устройств вроде настольных ПК, мобильных и планшетов. Как только по ссылке будет произведен клик, запустится функция changeGrid, с типом устройства в качестве параметра.

В нижнем разделе у нас будет iframe, который будет использоваться для загрузки нашей гибкой сетки. Гибкая сетка будет содержаться в файле media_query.html. Теперь давайте взглянем на функцию changeGrid.

Function changeGrid(device){
if(device == "desktop"){
$(".wrapper").css("width","960px");
}
if(device == "tab_lan"){
$(".wrapper").css("width","768px");
}
if(device == "tab_pot"){
$(".wrapper").css("width","600px");
}
if(device == "mob_lan"){
$(".wrapper").css("width","480px");
}
if(device == "mob_pot"){
$(".wrapper").css("width","320px");
}
}
Как только функция будет запущена, она проверит устройство при помощи введенного параметра. Затем она изменит ширину.wrapper (IFRAME) на стандартную ширину устройства. Далее у нас будет возможность увидеть работу гибких сеток на маленьких экранах.

Гибкая сетка, использованная внутри файла media_query.html, будет похожа на примеры, которые мы обсуждали ранее. Вы можете использовать файлы из демо для оформления кодов. У вас должно получиться нечто похожее на то, что на изображении.


*

Внимание! У вас нет прав для просмотра скрытого текста.

Подытожим

Гибкие сетки позволяют вам создавать адаптивные дизайны, которые подходят при работе с разными размерами экранов. Сложность разработки гибкой сетки может быть снижена за счет существующих CSS-платформ. Вы не можете всецело зависеть от гибких сеток, если хотите предоставить пользователям идеальный адаптивный дизайн. Выстраивайте гибкую сетку только по требованиям к вашему дизайну, и старайтесь предоставить лучший опыт взаимодействия своим пользователям. Надеемся, что из этого руководства вы вынесли для себя что-нибудь полезное!

В наши дни для всего есть фреймворки, и кажется, что только вы разберетесь с одним, как на смену ему придет другой. Это особенно касается CSS фреймворков для адаптивной сетки, и каждый называет себя “самым лучшим”. Такой переизбыток информации вводит в замешательство.

Давайте вернемся на шаг назад, сделаем глубокий вздох, и спросим себя: действительно ли мы собираемся использовать все 24 варианта, и миллион их комбинаций, которые нам предоставляет “Этот Наикрутейший Фреймворк”? Зачастую нам нужно простое, гибкое решение, с ограниченным количеством вариаций, с кодовой базой, которую мы можем в любой момент расширить. Я хочу рассказать о четырех техниках реализации CSS сеток, каждая из которых легко расширяется. Вот эти четыре способа:

  • Адаптивная сеточная разметка №1 (с использованием отрицательных отступов)
  • Адаптивная сеточная разметка №2 (с использованием box-sizing: border-box)
  • Адаптивная сеточная разметка на основе табличного отображения
  • Адаптивная сеточная разметка на основе flexbox

    • Я упрощу описание этих способов, и буду использовать минимальное количество простого и понятного CSS. Для каждого способа будет представлена демонстрация на CodePen.

    Общий CSS

    Перед тем, как углубиться в описание каждого метода, давайте взглянем на общие стили, которыми мы будем использовать во всех примерах. Я буду использовать объявление box-sizing: border-box для всех элементов документа, а также добавлю класс.clearfix для очистки плавающих блоков. Вот наш базовый CSS:

    /* сбрасываем свойства */ *, *:before, *:after { box-sizing: border-box; } .clearfix:after { content: ""; display: table; clear: both; }

    Способ 1: используем отрицательные отступы

    Данный способ основан на использовании отрицательных отступов для создания блоков сетки с фиксированным отступом между блоками. Размер отрицательного отступа варьируется от позиции блока в сетке, а расстояние между блоками остается постоянным. Давайте посмотрим на разметку:

    /* сетка */ { margin-bottom: 20px; } :last-child { margin-bottom: 0; } { } @media all and (min-width: 768px) { /* all cols margin */ { margin-right: 20px; } :last-child { margin-right: 0; } /* делаем колонки адаптивными */ .col-1-2 { float: left; width: 50%; } .col-1-4 { float: left; width: 25%; } .col-1-8 { float: left; width: 25%; } /* 2 span rows */ .row-2 { padding-left: 20px; } .row-2 :first-child { margin-left: -20px; } /* 4 span rows */ .row-4 { padding-left: 60px; } .row-4 :first-child { margin-left: -60px; } /* 8 span rows */ .row-8 { padding-left: 60px; } .row-8 :nth-child(4n+1) { margin-left: -60px; } .row-8 :nth-child(5n-1) { margin-right: 0; } .row-8 :nth-child(6n-1) { clear: both; } } @media all and (min-width: 1200px) { /* adjust width */ .col-1-8 { float: left; width: 12.5%; } /* 8 span rows */ .row-8 { padding-left: 140px; } /* reset these... */ .row-8 :nth-child(4n+1) { margin-left: 0; } .row-8 :nth-child(5n-1) { margin-right: 20px; } .row-8 :nth-child(6n-1) { clear: none; } /* and add this */ .row-8 :nth-child(1) { margin-left: -140px; } }

    Как видно, в рамках условий медиазапросов фиксированное значение отступа (назовем его x) умножается на количество колонок в строке минус 1 (n-1), и такой отступ применяется к строке слева. У каждой колонки, кроме последней, задан фиксированный отступ справа (x). А первой колонки в строке задан отрицательный отступ (n-1)*x

    Недостатки и ошибки

    Необходимость в некоторых расчетах, к тому же способ становится непрактичен при увеличении количества колонок. К тому же при увеличении количества шагов (количество градаций медиазапросов, например на 1 колонку на строку, 4, 8…), нам необходимо сбрасывать CSS, и приходится использовать множество математических вычислений.

    Еще одна интересная ошибка всплывает, когда у нас много плавающих элементов. Общая сумма отступов в какой-то момент может скомбинироваться, и элементы перенесутся на новую строку. Это можно видеть в случае с 8 колонками. Если поменять условие последнего медиа-запроса на минимальную ширину, меньше 1200px, то можно наблюдать данный баг в действии. Помните об этом. Но у этого способа есть и свои преимущества.

    Преимущества и использование на практике

    Настоящая прелесть этого способа заключается в создании комбинаций сетки фиксированного/переменного размера. В качестве примера давайте представим область основного содержимого переменной ширины, и дополнительную боковую область фиксированной ширины. Наш HTML-код может выглядеть примерно так:

    Primary Lorem ipsum dolor... Secondary Lorem ipsum dolor...

    А CSS - так:

    /* разметка */ .primary { margin-bottom: 20px; } @media all and (min-width: 600px) { .container { padding-right: 300px; } .primary { float: left; padding-right: 60px; width: 100%; } .secondary { float: right; margin-right: -300px; width: 300px; } }

    А вот и демонстрация кода в действии на CodePen :

    Способ 2: используем box-sizing: border-box

    Этот способ использует всю силу box-sizing: border-box . Так как это свойство позволяет добавлять элементу поля без того, чтобы их значение влияло на общую ширину элемента, мы все еще можем добиться гибкой сетки с фиксированными “отступами”. Но здесь вместо использования свойства margin , мы будем использовать внутренние поля, которые будут играть роль отступов между элементами сетки.

    Разметка:

    Здесь мы обойдемся без головокружительной математики, так что наш CSS будет действительно простым. А вот и он, с возможностью разметки до 8 колонок:

    /* сетка */ .row { margin: 0 -10px; margin-bottom: 20px; } .row:last-child { margin-bottom: 0; } { padding: 10px; } @media all and (min-width: 600px) { .col-2-3 { float: left; width: 66.66%; } .col-1-2 { float: left; width: 50%; } .col-1-3 { float: left; width: 33.33%; } .col-1-4 { float: left; width: 25%; } .col-1-8 { float: left; width: 12.5%; } }

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

    Расширяем этот способ:

    Скажем, вы бы хотели, чтобы элементы.col-8 сначала разбивались по 4 в строку, а затем по 8. Это довольно просто реализовать, если немного подумать. Для вышеприведенной разметки наш CSS будет выглядеть следующим образом:

    @media all and (min-width: 600px) { .col-1-8 { float: left; width: 25%; } .col-1-8:nth-child(4n+1) { clear: both; } } @media all and (min-width: 960px) { .col-1-8 { width: 12.5%; } .col-1-8:nth-child(4n+1) { clear: none; } }

    Способ 3: используем табличное отображение

    Этот способ реализует старое-доброе табличное поведение, но не ломая семантику или структуру. В этом методе видимые элементы отображаются по-умолчанию как блоки. Но при определенных размерах строки сетки становятся таблицами, а столбцы становятся ячейками таблицы. Давайте взглянем на разметку - она похожа на аналогичную из второго способа, но тут нам не нужен.clearfix:

    И, соответственно, CSS:

    /* сетка */ .row { margin: 0 -10px; margin-bottom: 10px; } .row:last-child { margin-bottom: 0; } { padding: 10px; } @media all and (min-width: 600px) { .row { display: table; table-layout: fixed; width: 100%; } { display: table-cell; } /* set col widths */ .col-2-3 { width: 66.66%; } .col-1-2 { width: 50%; } .col-1-3 { width: 33.33%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; } }

    Этот метод может показаться запутанным, но в нем есть преимущества. Для начала, мы не нарушаем семантику использованием традиционных таблиц, и нам не нужно подчищать плавающие блоки. Колонки одинаковой высоты - легко. Комбинация фиксированных колонок и колонок переменной ширины? Нет проблем. Табличный вариант отображения привносит свои проблемы, и из всех четырех способов он мой самый нелюбимый. Несмотря на то, что в некоторых случаях он является неплохим вариантом.

    Способ 4: Flexbox

    Последний способ, который я опишу, использует модуль flexbox. Согласно MDN :

    CSS3 Flexible Box, или flexbox - режим макета, предоставляющий возможность размещать элементы на странице так, что они ведут себя предсказуемо на различных размерах экрана и различных устройствах.

    Flexbox предлагает множество различных возможностей, дающих нам мощный арсенал различных вариантов компоновки элементов. Сделать модуль flexbox адаптивным проще простого. Как и ранее, наша разметка выглядит так:

    А теперь посмотрим на наш новый CSS:

    /* grid */ .row { display: flex; flex-flow: row wrap; margin: 0 -10px; margin-bottom: 10px; } .row:last-child { margin-bottom: 0; } { padding: 10px; width: 100%; } @media all and (min-width: 600px) { /* set col widths */ .col-2-3 { width: 66.66%; } .col-1-2 { width: 50%; } .col-1-3 { width: 33.33%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; } }

    В данном случае для строк необходимо выставить свойство display в значение flex , а также указать свойство flex-flow. Полное определение и описание этих свойств доступно в документации MDN к flexbox . Для медиа-запроса мы просто меняем ширину колонок, а flexbox делает за нас остальное.

    Заключение

    Мы рассмотрели 4 способа создания адаптивных сеток на CSS, каждая со своими достоинствами и недостатками. Не существует абсолютного способа реализации того или иного действия, и я часто ловлю себя на том, что возникают ситуации, когда один способ подходит лучше другого, или мне нужно комбинировать несколько вариантов. Способы 1 и 2 - мои любимые, и я частенько использую их в своих проектах (основная разметка по методу 1, а адаптивные сетки по методу 2).

    Как упоминалось ранее, третий способ имеет свои преимущества, но я предпочитаю использовать табличные макеты только тогда, когда это строго необходимо. Способ 4 прекрасен, и я жду не дождусь дня, когда я смогу перенести его на все свои проекты. Flexbox набирает обороты, но он поддерживается только в IE10 и выше. Для него есть полифиллы, но я предпочитаю обходиться без них. Хотя и сегодня есть сценарии, в которых flexbox будет превосходным решением (например, в мобильных браузерах, где нет IE).

    Каждый из этих способов легко масштабируем и расширяем. Применяя представленные идеи вы легко можете настроить свой собственный адаптивный макет с нужным размещением для элементов сетки с минимальным количеством CSS. Модуль CSS сеток на подходе, но пройдет еще некоторое время, покуда мы сможем его использовать. Надеюсь, вам понравилась статья, и вам теперь не так страшно использовать CSS сетки.