Модульные сетки в веб-дизайне. Модульная сетка

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

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

Аспекты хорошего макета

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

Отзывчивость и гибкость

Разбитие контент на определенные колонки помогает веб-разработчикам понять, каковы будут их действия на различных размеров экранах. Также можно создать «гибкую решетку» в HTML и CSS, основой которой будут проценты, а не фиксированные значения. Можно простым образом уменьшить количество некоторых колонок, преобразовать контент.

Выравнивание и баланс

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

Единообразность

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

Наладка и применение системы сеток

Давайте рассмотрим образец сайта, на котором используется система сеток.

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

Основной принцип создания собственного макета с сеткой

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

К примеру, ширина страницы будет составлять 1140 пикселей, сетка будет состоять из 12 колонок, а пробелов будет 11. Первоначально необходимо понять, какой будет ширина пробелов: например, 12 пикселей.

Сделав все расчеты, в итоге получаем макет, в котором будет 12 колонок по 84 пикселя и 11 пробелов по 12 пикселей, а вся ширина будет составлять 1140 пикселей. Эту технику можно использовать для любых расчетов, главное знать ширину страницы и пробелов.

Настройка кривых в Photoshop

Это довольно скучная и затратная в плане времени задача. Для того, чтобы это процесс был быстрее и веселее, большинство дизайнеров рекомендуют использовать Photoshop CC 2014. В нем можно найти новую функцию, которая называется Guide Layout. Она даст возможность в короткое время создать нужную сетку с вертикальными и горизонтальными кривыми.

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

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

Примеры веб-проектов, которые основаны на сетке

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

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

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

Вы можете найти практические примеры использования CSS-верстки, основанной на сетке, по следующему адресу:

Гибкая блочная верстка

Обычно такую верстку называют "flexbox" ("резиновая" верстка). Этот способ раскладки используется для создания как простых, так и сложных структур страниц, адаптированных для различных экранов. Преимущество такой верстки в том, что относительное расположение содержимого остается неизменным, даже если размер экрана меняется. Используя данную структуру и равномерно распределив пустое пространство , можно сделать так, чтобы объект всегда находился в центре страницы или другого контейнера.

"Резиновая" CSS-верстка позволяет вам интуитивно понятно контролировать дочерние элементы, расположенные в контейнере Почему все это подходит для WinRT-приложений?

"Резиновая" верстка полезна, когда используется с элементом управления ViewBox. Два этих компонента комбинируются при создании Приложения с фиксированным макетом (Fixed Layout App) в Blend или Visual Studio. Приложение с фиксированным макетом делает возможным создание фиксированной области просмотра для содержимого, что подразумевает неизменность размеров – в противоположность приложению, использующему макет на основе сетки. Подобная раскладка может пригодиться вам при создании JavaScript-игр, где необходимо, чтобы игровое поле имело определенную ширину и высоту вне зависимости от размеров экрана.

Вы можете найти практические примеры использования "резиновой" CSS-верстки, по следующему адресу:

Области CSS

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

Почему все это подходит для WinRT-приложений?

CSS области не так важны, как другие формы раскладки. Тем не менее, они поддерживаются и позволят вам создать сложную структуру содержимого, например, как в журналах. Они позволяют произвольным образом распределить последовательный поток контента (текста, изображений, видеофрагментов). Эта схема раскладки может быть полезна на планшетах, где раскладка меняется в зависимости от ориентации экрана, или, например, при выводе на экран прикрепленного приложения в Windows 8.

Вы можете найти практические примеры использования CSS-областей по следующему адресу:

Два стандартных графических формата: Canvas и SVG

В WinRT-приложениях по умолчанию поддерживается два исходных графических формата: Canvas (холст) и SVG (Scalable Vector Graphics – масштабируемая векторная графика ). Так как это встроенные форматы, мы можем создавать графику, используя код – вместо традиционного подхода с применением заранее подготовленных графических файлов форматов.png или.jpg. И canvas , и SVG имеют сильные и слабые стороны, но, в общем случае, вы можете видеть их в качестве элементов пользовательского интерфейса – таких, как кнопки управления проигрывателем; они представляют собой иллюстрации, которые могут быть анимированы, они используются для целей визуализации данных – в виде графиков и диаграмм.

Canvas – это элемент управления, который представляет собой поверхность для рисования на странице. Внутри этой поверхности вы можете создавать фигуры, используя цвета, градиенты, заполнение по шаблонам. Вы можете манипулировать пикселями на экране, интерактивно, выводить текст и экспортировать полученный контент в виде статических файлов изображений – таких, как.png. Также вы можете добавлять JavaScript или CSS -анимацию, чтобы заставить созданные вами объекты перемещаться, исчезать, чтобы менять их размеры и так далее. Хотя тег < canvas > добавляется в HTML -документ, это лишь поверхность для рисования. Все, что к ней относится, создается с помощью JavaScript. Кроме того, после вывода содержимое холста представляет собой пиксельное изображение, в то время как SVG – это векторная графика .

SVG использует объектную модель элементов, атрибуты и стили, в этом смысле он больше похож на синтаксис HTML . Когда в HTML появляется элемент , он ведет себя как часть HTML .

Почему все это подходит для WinRT-приложений?

Хотя поддерживаются оба формата, SVG-элементы используются в WinRT-приложениях для непосредственного отображения изображений. Программы для редактирования изображения, такие, как Adobe Illustrator, позволяют вам экспортировать векторные изображения в формат.svg. Иллюстрации и значки могут быть созданы и очень легко использованы внутри приложения. Так как векторные изображения не зависят от разрешения, вы можете использовать эти элементы в проектах и они будут менять размеры без потери качества даже на больших экранах. Кроме того, поддерживаются SVG-фильтры, которые позволяют применять основные эффекты – такие, как размытие или тонирование в сепию.

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

Итоги

В модуле вы узнали о том, как используются основные принципы HTML5 и CSS3 в приложениях, и поэкспериментировали с практическими примерами их применения. Вы узнали о моделях компоновки, медиа-запросах, анимациях. В частности, вы узнали, как создается раскладка с помощью областей, сетки, как делается "резиновая" верстка, верстка в несколько колонок, как применяются медиа-запросы. Вы ознакомились с 2D- и 3D-трансформациями, переходами, анимациями, градиентами, тенями, техникой скругления углов, встроенными SVG -изображениями и с использованием элемента управления canvas .

На этом уроке мы подготовимся к верстке сайта по PSD макету, используя только сетку (Grid System) от фреймворка Bootstrap 4 . Научившись такому методу верстки, вы избавляете себя от возможных проблем с адаптивностью сайта, особенно это хорошо для новичков.

Адаптивность сайта при верстке по сетке Bootstrap-а обеспечивают flexbox-сы , поддерживаемые всеми основными браузерами и даже Internet Explorer-ом , начиная с IE9+ . Для более ранних версий, чем IE 9 , подключаем скрипты, помогающие правильно отображать нашу верстку.

И самое главное – PSD макет изначально должен быть нарисован с учетом дальнейшей Bootstrap верстки . А так, других нет причин, почему не верстать по бутстраповской сетке, как в своих проектах, так и на заказ. Постараюсь дать меньше теории, никакой воды и больше практики.

Подготовка к верстке

Откройте макет в Photoshop-е и убедитесь, что он имеет 12-ти колоночную разбивку по направляющим, а все элементы дизайна выровнены относительно этих направляющих. Расстояние между крайними направляющими как правило равняется 1170 пикселям.

Скачайте на сайте https://getbootstrap.com/ компилированный CSS и JS для легкой интеграции в ваш проект.

Скопируйте из раздела Introduction / Starter Template - стартовый шаблон страницы и вставьте в индексный HTML -файл вашего проекта. Мы создали заготовку для будущего HTML документа.

Скачивать bootstrap.min.css или использовать ссылку на него?

Есть мнение, что файл bootstrap.min.css будет быстрее подгружаться, поскольку он находится на нескольких серверах, а не на одном вашем сервере. А значит и сайт будет быстрее открываться. Если вы все-же решите этот файл скачать себе, то указывайте правильный путь к папке с Bootstrap файлами. Создавать пустой CSS файл, куда вы будете писать свои стили, необходимо в любом случае.

Важно! Ваш CSS файл в индексном файле, должен быть подключен ниже, чем bootstrap.min.css .

Подключаем шрифты. Какие шрифты и иконки дизайнер использует в макете, можно увидеть в программе Photoshop или в расширении для браузера Chrome – WhatFont .

Зачем нужны два CSS файла?

CSS файл bootstrap.min.css – это библиотека, в которую даже не надо заходить. Мы работаем только с одним файлом - main.css , только надо следить, чтобы названия новых классов для вашего CSS файла случайно не совпали с "библиотечным".

В файле bootstrap.min.css уже созданы стили для сетки на flexbox-ах и прописаны медиа-запросы, нам просто нужно прописать подходящие классы в нужные блоки на HTML странице. Названия классов можно найти на странице фреймворка в разделе Grid . Опытные верстальщики для Bootstrap верстки подключают плагины (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) к редактору кода Sublime Text .

Разбиваем PSD макет на блоки

Мы видим, что сайт состоит из 8-ми блоков: шапка (header) с меню навигацией (nav) , 6 секций (section) и подвал (footer) .

В секциях (section: #services, #portfolio) появляются колонки, которые мы и будем верстать на основе главного компонента Bootstrap-а – сетке .

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

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

Любому верстальщику, перед которым встала очередная задача по вёрстке адаптивного макета, нужны сетки. В большинстве случаев берётся старый добрый bootstrap, и в html-ке начинают появляться div-ы с классами вида col-xs-6 col-sm-4 col-md-3 . И вроде бы всё хорошо и быстро, но в данном подходе часто возникает множество подводных камней. В данной статье мы рассмотрим эти подводные камни, и закидаем тухлыми помидорами рассмотрим мою поделку для беспроблемных сеток.

Проблемы Нестандартные сетки

Итак, у нашего верстальщика очень мало времени, макет горит, всё надо сделать вчера. Поэтому, он берёт для основы популярный css-фреймворк bootstrap, и начинает свою работу. И тут, в середине работы, он вдруг натыкается на блок баннеров "5 в ряд". Все, кто работал с bootstrap знает, что его сетка по умолчанию 12-кратная, поэтому 5 колонок в ряд стандартной бутстраповской сеткой ну никак не сделаешь. Да, конечно, в бутстрапе можно собрать произвольную сетку, но это время терять, качать зависимости, собирать less-ки (а мы, допустим, пишем на sass).

Может подключить какую-нибудь библиотеку для настраиваемых сеток? В целом это хороший выход, единственный минус данного подхода, что практически все из них рассчитаны либо на долгое и нудное написание @media(min-width:){} , либо генерируют свой набор классов, с кучей, наверняка не нужных col15-xs-offset-3 , которые попадут в итоговую css-ку.

Поэтому, с большой вероятностью, верстальщик просто пропишет все стили вручную (там, в принципе, не так много писать).

Очень часто в стандартной бутстраповской сетке не хватает дополнительных брейкпоинтов, т. е. есть xs, sm, md, lg - все они до ширины 1200px. А как же большие мониторы? Какой-нибудь брейкпоинт xl на 1600px так и просится в стандартный набор. Но его опять же нет, и возникают те же варианты решения, что и в предыдущем пункте. А ведь контрольных точек может быть очень много - 320, 360, 640, 768, 992, 1200, 1600, 1900..

Избыточность и многословность

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

Не слишком ли много? Добавьте сюда возможные pull/push и visible/hidden и тогда можно смело начинать сходить с ума. А ведь все эти классы прописаны в css, представьте сколько нужно прописать классов в css для всех комбинаций 60-кратной сетки!

Отделение стилей от разметки

Любой верстальщик знает, что inline-стили - это плохо. Так зачем мы пишем в классы разметки то, что касается стилей? col-xs-6 , visible-sm и не дай бог text-right - это всё стили, и, если надо будет вносить правки в уже натянутую на вёрстку, обязательно возникнет проблема, что верстальщику придётся просить backend-щика поменять col-sm-6 на col-sm-4.

Перекрытие ненужных стилей

Часто css-фреймворк подключают весь только ради сеток и пары мелких функций, что вытекает впоследствии в избыточном сбросе стилей и двойном размере итогового css. Например, подключается весь bootstrap.min.css, а потом весело и задорно убираются тенюшки и закруглённые уголки у.btn, .form-control и тому подобного, включая:hover, :focus, :first-child . В итоге, вместо помощи, фреймворк начинает мешать. Не говоря уже о часто не нужных фичах, по типу.glyphicon . Конечно, опять же можно собрать bootstrap из того, что нужно, но это опять время.

Чужие стандарты и code-style

Допустим, верстальщик изучил БЭМ и начал его применять. Но необходимость использовать bootstrap диктует свои исключения - в нём все классы пишутся через дефис, не следуя принципам БЭМ. И тут возникает проблема выбора - либо смириться с мешаниной в названиях классов (btn-block disabled component__btn component__btn_disabled), либо всё-таки выкинуть bootstrap.

Устаревшие методы

Как известно, сетки в bootstrap 3 основаны на float-ах. Что часто вызывает проблемы, одна из наиболее частых - различная высота блоков, в результате которой красивая сетка "ломается". Хватит использовать float-ы не по назначению, уже практически вымерли все браузеры, которые не умеют flexbox!

Susy! - это выход?

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

Col { @media (min-width: 768px) { @include gallery(4 of 12); } @media (min-width: 1200px) { @include gallery(3 of 12); } }

То есть susy! предполагает, что брейкпоинтами вы будете заниматься самостоятельно. Кроме того, susy! сам не пишет за вас display: flex для, строк, вам нужно их не забывать прописывать самостоятельно. Отступы между колонками в нём задаются только относительные (сделать фиксированные в пикселях не получится). Также, он совсем недавно научился flex, а до этого он строил сетки на float и:nth-child() . В общем, susy! это хорошо, но хотелось бы скорости и лёгкости описания сеток для всех брейкпоинтов, как это было с bootstrap.

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

Велосипедостроение

Итак, решено было написать что-то своё, в результате родился fast-grid . Он также, как и susy, построен на sass. Какие же главные преимущества он предоставляет по сравнению с другими решениями, в частности, с susy!? В первую очередь скоростью за счёт меньшего количества кода, возьмем стандартный bootstrap пример:

1 2

С помощью fast-grid такую сетку очень легко описать:

@import "~fast-grid/fast-grid"; .row { @include grid-row(); } .col { @include grid-col(6 4 3 2); }

Давайте теперь пройдёмся по нашим недостаткам, и увидим как fast-grid решает все эти проблемы.

Нестандартные сетки

@import "~fast-grid/fast-grid"; .cols { $grid: (gap: 5px); @include grid-row($grid); &__item { @include grid-col(12 6 null (1 of 5), $grid); } }

Необходимость своего набора breakpoint-ов @import "~fast-grid/fast-grid"; .cols { $grid: (breakpoints: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), columns: 60); @include grid-row($grid); &__item { @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); } } Избыточность и многословность / Отделение стилей от разметки

fast-grid это сеточный фреймворк для использования в css, а не в html на основе сгенериронных наборов классов. Благодаря этому разметка становится отделена от стилей, что благотворно отражается на дальнейшей поддержке. Также благодаря этому нет необходимости генерировать кучу вспомогательных классов (.col-xs-push-4 и т. п.), которые по большей части не используются.

Перекрытие ненужных стилей

Так как fast-grid - это набор mixin-ов, сам он не генерирует ни одного правила в css. Поэтому тут вы не столкнётесь с тем, что фреймворк стилизует элементы так как вам не надо. Да и вообще, это только сетки, и ничего больше.

Чужие стандарты и code-style

fast-grid - это mixin-ы, которые вы должны использовать внутри ваших классов, с такими наименованиями, которые вы сами предпочитаете. Любите БЭМ? Не вопрос!

Устаревшие методы

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

В примере ниже, мы выводим сайдбар ниже основного содержимого для мобильной версии, и делаем его первым блоком на больших экранах:

Можно было бы конечно этого добиться с помощью pull/push для float, но это очень костыльно.

Заключение

В целом, поставленная для меня задача была выполнена - теперь сетки для меня больше не вызывают никаких проблем, и вёрстка идёт быстро и легко. Больше о возможностях fast-grid вы можете почитать в репозитарии и рассмотреть на примерах:

Вы всё ещё используете bootstrap? Тогда мы идём к вам!