Модульная сетка макета с нуля: анализ, расчет и построение
Любому верстальщику, перед которым встала очередная задача по вёрстке адаптивного макета, нужны сетки. В большинстве случаев берётся старый добрый 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-stylefast-grid - это mixin-ы, которые вы должны использовать внутри ваших классов, с такими наименованиями, которые вы сами предпочитаете. Любите БЭМ? Не вопрос!
Устаревшие методыПо умолчанию используется flexbox, что открывает множество возможностей и решает проблемы классических float. Например, можно легко менять порядок колонок.
В примере ниже, мы выводим сайдбар ниже основного содержимого для мобильной версии, и делаем его первым блоком на больших экранах .
Можно было бы конечно этого добиться с помощью pull/push для float, но это очень костыльно.
ЗаключениеВ целом, поставленная для меня задача была выполнена - теперь сетки для меня больше не вызывают никаких проблем, и вёрстка идёт быстро и легко. Больше о возможностях fast-grid вы можете почитать в репозитарии и рассмотреть на примерах:
Вы всё ещё используете bootstrap? Тогда мы идём к вам!
Теги:
- css
- sass
- grid
Модульная сетка - это особый шаблон, по которому и строится дизайн сайта. По сути, это система представления визуальной информации посетителю на основе отдельных блоков, называемых модулями. Сайт, разработанный с использованием такого шаблона, гораздо удобнее для восприятия и навигации.
Как применяется сеткаМодульная сетка используется при разработке дизайнов книг, визиток, товарных знаков, логотипов и т. д. Обязательно ее применение и при создании сайтов. Правильно сделанная сетка гармонично компонует среду для всех элементов ресурса - графических и текстовых. С ее использованием гораздо проще разместить их все на странице и создать между ними четкие границы. Расположив определенным образом элементы, можно сделать каждый из них заметным и при этом связать воедино всю информацию о самом сайте.
Виды модульных сетокСамая распространенная модульная сетка в дизайне страниц - это три базовые колонки ячейки. При этом верхний и нижний колонтитулы имеют ширину, равную их размерам. Этот стандартный вариант обычно используют любители при создании сайтов. Иногда при этом ширина одной ячейки увеличивается за счет ширины другой.
Создание второго варианта модульных сеток - нестандартных - под силу только людям, занимающимся веб-дизайном профессионально. В этом случае точно определены лишь ширина колонок и расстояние между отдельными элементами. Модульная сетка в дизайне разного рода новостных ресурсов и интернет-журналов разрабатывается обычно следующим образом:
Модульная сетка для интернет-магазинов разной специализации создается несколько по-другому. В этом случае очень важно обеспечить удобство навигации посетителям. Группируются при этом элементы стандартно и единообразно. Для каждого из объектов в сетке выделяется важная информация, характеризующая его.
Линейка в редакторе «Фотошоп»Сайты создаются с использованием растровых или векторных Сетку в них создавать очень удобно. Рассмотрим, как это делается в популярном редакторе Photoshop. Создается модульная сетка в «Фотошопе» очень просто.
Для того чтобы по периметру рабочего окна изображения появились линейки, следует пройти в пункт главного меню «Просмотр» (View) и нажать на строку «Линейки» (Rulers). В этом редакторе можно использовать самые разные элементы - с делениями в сантиметрах, миллиметрах, дюймах или пикселях. Для того чтобы выполнить необходимую настройку, следует пройти в пункт главного меню «Редактирование» (Edit). Далее выбрать строку «Установки» (Preferences) - «Единицы измерения&Линейки» (Units&Rulers). После этого высветится окошко, в котором и можно изменить вид линейки. В верхнем выпадающем меню выбирают сантиметры, миллиметры, пиксели и т. д.
Однако обычно при работе в редакторе «Фотошоп» используют немного другой, более простой способ. Для изменения единиц измерения следует просто нажать на саму линейку в окне изображения правой кнопкой мыши. После этого в появившемся меню можно будет произвести нужное действие. Обычно при создании сайта используется сетка в пикселях.
Сама модульная сетка программы «Фотошоп» станет видимой после того, как вы перейдете по пункту главного меню «Просмотр» - «Показать» (Show) - «Сетка» (Grid). Шаг между линиями сетки можно настраивать. Для этого следует выполнить команду «Редактирование» - «Установки» - «Направляющие, сетки и фрагменты» (Guides, Grid, Slices). Здесь можно изменить не только шаг между линиями, но и их цвет. Используя эту сетку, быстро и точно размещать по рабочему полю все объекты будущего сайта будет совершенно несложно.
Модульная сетка сайта создается таким образом очень просто. Курсор при работе прилипает к линиям. Это может быть удобным в том случае, если необходимо сделать блоки точных, определенных размеров. Если же эта функция по каким-либо причинам окажется ненужной, ее можно отключить. По умолчанию начало координат сетки в «Фотошопе» располагается в верхнем левом углу окна. При желании его можно переместить в любое другое место холста. Для этого наводят курсор на квадратик начала координат и просто перетаскивают его, удерживая кнопку мыши. Для возврата точки отсчета на место следует дважды кликнуть на том же квадратике в углу.
Помимо всего прочего, имеются разного рода плагины для редактора «Фотошоп», позволяющие сделать создание сайта с использованием модульной сетки еще более удобным. Скачивают их в сети. С использованием этих плагинов можно создавать сетки с заданными параметрами.
Сетка в CorelDrawТеперь посмотрим, как сделать модульную сетку в векторном редакторе CorelDraw. Здесь она создается примерно так же, как и в «Фотошопе». Иконка ее расположена на верхней панели (глаз в сетке). После нажатия на нее можно будет выполнить все необходимые настройки. Допускается выбор расстояния между линиями, изменение единицы измерения и т. д. Разграничивают рабочее поле в окне изображения в CorelDraw и с помощью направляющих. Их при необходимости можно сделать видимыми или невидимыми.
Модульная сетка в дизайне сайта - основополагающий элемент, к разработке которого стоит подходить с максимальной ответственностью. Ведь от того, насколько правильно будет структурирован ресурс, зависит удобство его посетителей, а значит и время, проведенное ими на его страницах.
Все, что окружает нас, имеет свои пропорции. Еще в детстве мультик “38 попугаев” научил нас тому, что все можно поделить на части, равные друг другу (длина удава состояла из 38 попугаев). Также все мы знаем о том, что рост человека равняется семи его головам, сантиметр состоит из десяти миллиметров, метр из ста сантиметров и так далее. Таким образом, попугай из мультика, голова человека, миллиметр и сантиметр – это модули.
Из всего этого мы можем понять, что модуль – это условная единица, шаг в ритме сетки. А сама сетка являет собой систему пропорций.
Чем же нам поможет эта модульная сетка? Во-первых, она ускорит работу, потому что нам не придется тратить массу времени на попытки гармонично расставить все элементы. Во-вторых, с помощью сетки мы сможем понять, какой кегль нам нужно применить и каких размеров должен быть каждый блок. В целом, модульная сетка является каркасом, который значительно облегчает построение сайта.
Давайте же рассмотрим, какими бывают сетки.
1. Самый простой тип – блочная сетка. То есть, она делает грубую разметку, разделяя площадь на блоки.
Блочная сетка 
3. Модульная же сетка имеет не только вертикальное членение, но и горизонтальное. Таким образом, то, что получается на пересечениях прямых, и есть модуль.
4. Также есть иерархическая сетка, блоки в которой размещаются интуитивно и не поддаются никаким закономерностям.
Итак, как же создать модульную сетку.
1. Для начала нам нужно понять, какую функцию должен будет выполнять наш сайт, выявляем его структуру и состав страниц. Затем определяем, какие страницы будут самыми важными, с них и начнется работа. Для них мы сформируем список функциональности и рассортируем его по приоритетам.
Мы должны описать каждый блок функциональности и детализировать его до мелочей. В итоге должен получиться список, в котором по уровням расписываются блоки и их элементы. Таким образом, у нас теперь есть пазлы, высыпанные из коробки, и нам осталось только собрать их в целостную картину.
3. Построение сетки начинаем с определения размеров рабочей области. Затем нам нужно сделать шрифтовую сетку. Для этого выбираем высоту строки, которая должна быть единой для всего макета. В элементах, которые имеют кегль отличный от кегля основного текста, междустрочный пробел должен быть кратным нашей высоте строки.
Таким образом, мы получаем основание нашей будущей сетки. На это основание будет опираться весь текст.
4. Теперь нам нужно решить, какой ширины будет наш модуль. Здесь мы можем оттолкнуться от ширины какого-либо постоянного элемента. Если же у вас есть задача разместить по ширине страницы какие-то одинаковые элементы, то все становится еще проще, ведь вы уже знаете ее размеры.
Для удобства нам нужно определить, каким будет расстояние между модулями. Оно должно быть равно минимум одной высоте строки из прошлого пункта.
Есть один нюанс – нужно правильно выбрать размеры модуля, ведь если они будут слишком большими, то пропадет гибкость сетки, а если же они будут мелкими, то сетка просто потеряется.
5. Горизонтальное членение сделать достаточно просто. Его высота должна быть кратна высоте нашей строки. А уж сколько строк вы вставите в одно членение – это уже зависит от вашего эскиза.
На этом уроке мы подготовимся к верстке сайта по 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 файлами. Создавать пустой 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 .
CSS -макет, основанный на сетке, позволяет разделить пространство экрана на столбцы и строки, используя предварительно рассчитанный размер. Вы можете полностью настроить данную раскладку, располагая элементы с привязкой к линиям сетки – разделяющим столбцы и строки, и с привязкой к ячейкам – прямоугольным областям, которые являются пересечениями строк и столбцов.
Верстка по сетке играет очень важную роль, она позволяет вам создать пропорциональный дизайн, который можно легко адаптировать к различным разрешениям. Помимо прочих преимуществ, вы получаете возможность задавать позиции элементов, не зависящие от порядка отображения содержимого. В качестве примера можно взять список элементов (который обычно отображается в виде одной вертикальной колонки) и отобразить его с ориентацией на строки и столбцы сетки.
Вы можете найти практические примеры использования CSS-верстки, основанной на сетке, по следующему адресу:
Гибкая блочная версткаОбычно такую верстку называют "flexbox" ("резиновая" верстка). Этот способ раскладки используется для создания как простых, так и сложных структур страниц, адаптированных для различных экранов. Преимущество такой верстки в том, что относительное расположение содержимого остается неизменным, даже если размер экрана меняется. Используя данную структуру и равномерно распределив пустое пространство , можно сделать так, чтобы объект всегда находился в центре страницы или другого контейнера.
"Резиновая" CSS-верстка позволяет вам интуитивно понятно контролировать дочерние элементы, расположенные в контейнере Почему все это подходит для WinRT-приложений?
"Резиновая" верстка полезна, когда используется с элементом управления ViewBox. Два этих компонента комбинируются при создании Приложения с фиксированным макетом (Fixed Layout App) в Blend или Visual Studio. Приложение с фиксированным макетом делает возможным создание фиксированной области просмотра для содержимого, что подразумевает неизменность размеров – в противоположность приложению, использующему макет на основе сетки. Подобная раскладка может пригодиться вам при создании JavaScript-игр, где необходимо, чтобы игровое поле имело определенную ширину и высоту вне зависимости от размеров экрана.
Вы можете найти практические примеры использования "резиновой" CSS-верстки, по следующему адресу:
Области CSSОбласти CSS позволяют вам взять некую последовательность HTML -контента – текста, изображений, - и распределить ее по нескольким пустым контейнерам, определенным в стандартном шаблоне HTML . Шаблоны HTML структурированы с помощью пустых контейнеров, которые имеют размер и определенное местоположение, чтобы присвоить будущему содержимому специфическую позицию и ограничить его рамками контейнера.
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 .
