Как создавать гибкие макеты с помощью Susy и Breakpoint

Содержание

• Проблема
• Susy
• Контейнеры
• Пролеты
• Установка значений по умолчанию
• Заполнение столбцов
• Управление медиа-запросами
• Точка останова и Susy
• Мастеринг макетов с помощью миксинов

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

Проблема

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

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

h2> Услуги / h2> div> article> img src = "images / icon-Exoticpets.svg" alt = "Icon"> h3> Exotic Pets / h3> p> Мы предлагаем специализированный уход за рептилиями, грызунами, птицами и другими животными. экзотические домашние животные.

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

div>

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

Susy

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

Начните с импорта библиотеки в свой проект с помощью команды импорта: @import "susy" ;. Это дает вам доступ к сетке Susy, реализовать которую не может быть проще. В самом простом виде вам нужно выучить всего два миксина. Во-первых, это миксин контейнера.

Контейнеры

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

Допустим, я создаю другой веб-сайт. Если я хочу создать контейнер в элементе HTML, я могу добавить в свое объявление включение, например:

#welcome {article {@include container (70%); } //статья }

Это заставит элемент с классом section работать как контейнер начальной загрузки, без необходимости добавлять класс .container в наш HTML - это означает, что наш HTML может быть намного более семантическим.

div id = "welcome"> article> h1> Добро пожаловать в отель Landon / h1> p> Оригинальный Лэндон продолжает жить после 50 лет в самом сердце Западного Лондона. В районе Вест-Энд есть что-то для всех - от театра до ресторанов и исторических достопримечательностей. Кафе на крыше, которое нельзя пропустить, - отличное место для путешественников и местных жителей, чтобы пообщаться за напитками, едой и хорошими разговорами ./p> / article> / div>

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

Пролеты

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

#usefulinfo {section {@include span (1 из 3); }}

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

Это действительно меняет ваше представление о столбцах. Если бы я использовал Bootstrap, я бы написал приведенный выше код как .col-sm-4, поскольку одна треть из 12 столбцов равна четырем. С Susy мне не нужно думать о том, сколько единиц я хочу охватить; Я могу просто указать количество места, которое мне нужно. Когда вы больше не думаете о преобразовании в определенное количество столбцов, вы можете вместо этого сосредоточиться на том, как должен выглядеть макет.

Установка значений по умолчанию

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

$ susy: (столбцы: 12, контейнер: 60em, желоба: 1/4, положение желоба: внутри);

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

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

#usefulinfo {section {@include span (4); }}

Это означает, что каждый раздел занимает четыре из 12 столбцов. Однако я думаю, что имеет смысл сказать, что элемент занимает «один из трех» столбцов. Если вам нужно сместить столбцы в определенное положение, вы можете использовать эту запись:

@include span (8 в 4 из 12);

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

Заполнение столбцов

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

@include pad (7,1);

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

Управление медиа-запросами

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

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

@media (min-width: 34em) и (max-width: 62em) {.container {...}}

Это создает диапазон ширины, в котором объявления влияют на ваш макет. Точка останова инкапсулирует вызовы в примесь здравого смысла, которую намного проще написать:

.container {@include breakpoint (34em 62em) {...}}

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

Правила точки останова тоже легко выучить. Вам нужно знать всего три вещи:

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

Точка останова встроена в Susy, начиная с версии 2.2.1. Версия Susy работает так же, как миксины точки останова, но вместо вызова точки останова вы используете точку останова susy. Тот же вызов будет сделан так:

.container {@include susy-breakpoint (34em 62em) {максимальная ширина: 50%; маржа слева: авто; маржа-право: авто; }}

Точка останова и Susy

Когда вы объединяете точку останова с Susy, вы получаете гибкую сетку, которую можно легко адаптировать к различным объявлениям медиа-запросов. Давайте взглянем на HTML-код информационного раздела на сайте.

div id = "hotelinfo"> article id = "Полезная информация"> section id = "прибытияinfo"> / section> section id = "services"> / section> section id = "accessibility"> / section> / article> article id = "greenprogram"> / article> / div>! - hotelinfo ->

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

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

раздел {@include susy-breakpoint (650px) {@include span (1 из 3); } // точка останова @include susy-breakpoint (450px 650px) {& .checklist {@include span (1 из 2)} // контрольный список} // точка останова} // раздел

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

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

Информация о прибытии занимает 100% сетки между этими двумя точками останова. Обратите внимание, что мы не указали, что происходит ниже 450 пикселей. Об этом позаботятся по умолчанию - каждый раздел будет занимать 100 процентов области просмотра.

Мастеринг макетов с помощью миксинов

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

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

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

Слова: Рэй Вильялобос

Рэй Вильялобос - штатный автор Lynda.com, специализирующийся на дизайне и разработке полного стека, дизайне внешнего интерфейса, JS, AngularJS, Sass, Bootstrap. Эта статья изначально была опубликована в 274-м выпуске сетевого журнала.

Понравилось это? Прочтите это!

• 20 шагов к идеальному макету сайта
• Блестящий выбор учебников по Wordpress
• Бесплатные шрифты для татуировок для дизайнеров