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

C приходом адаптивных сайтов полностью изменился и процесс разработки. Раньше все макеты дизайна сдавались как отдельный этап и направлялись далее по производственной цепочке. Сейчас же при разработке сайта с адаптивной модульной сеткой необходимо плотное взаимодействие между дизайнером и front-end разработчиком на большинстве этапов.

Инструменты и генераторы макетов

Tiny Fluid Grid Generator

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

Grid Pak

Генератор адаптивной модульной сетки. Разработан компанией Good Work .

Сетки и расширения Photoshop

Modular Grid Pattern

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

Плагин для Photoshop, помогающий в создании направляющий.

Responsive Photoshop Template

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

960px Grid Templates

960 pixel - подборка шаблонов модульных сеток для Adobe Photoshop и Fireworks в диапазоне от 3 до 16 колонок.

Responsive Grid PSD

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

Golden Grid - фреймворк на основе CSS. Использует правила «золотого сечения». Изменяет количество колонок от 4 до 18, в зависимости от размера экрана.

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

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

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

Skeleton - фреймворк на основе CSS и JavaScript. Адаптивная сетка основана на многим знакомой 960 пиксельной сетке, однако ее легко адаптировать под разные устройства.

PURE

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

YAML

Yaml - СSS Framework от немецких разработчиков для создание адаптивных кроссбраузерных сайтов. Как и любые другие CSS фреймворки, он создан для облегчения жизни front-end разработчика. В нем можно создать шаблон как для простого, так и для сложного сайта. Yaml хорошо документирован, имеется множество примеров, которые пригодиться при верстки.

960 grid - классика среди CSS фреймворков, очень полезный инструмент в основе которого лежит ширина каркаса в 960 пикселей. Grid 960 - СSS фреймворк, позволяющий разработчикам быстро разрабатывать прототипы дизайна. Являются прекрасным инструментом для создания макетов. Система создаст каркас шириной 960 пикселей и все блоки, созданные в этом каркасе будут соответствовать определённым пропорциям.

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

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

Готовые решения для создания адаптивных сайтов.

Статья о шаблонах компоновки.

Здесь вы найдете библиотеку шаблонов вместе с учебником о создании вайрфпеймов.

Инструменты для адаптивных изображений и текста

Adaptive Images – PHP-скрипт, работающий на любом веб-сайте. Adaptive Images определяет размер экрана и подгоняет под него размер изображения, что в итоге дает малый размер изображения на малых экранах.

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

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

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

Гибкие сетки и медиа-запросы

Бесплатный генератор адаптивной css-сетки

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

С помощью gridpak можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.

Используется для создания «разумного» шаблона. Она использует такие расширения как LESS, SCSS или Stylus, чтобы сделать ваш сайт более эффективным.

Эта система сеток поможет создавать адаптивные макеты.

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

Оптимизирована для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, которая использует Media Queries.

Очень простой процесс установки и настройки, изменяемая ширина колонок и отступов, любое количество колонок. Также есть возможность перехода на 1140px разметку.

Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.

Библиотека css3 mediaqueries.js добавит поддержку CSS3 медиа-запросов в старые броузеры (IE 5+, Firefox 1+, Safari 2).

Это очень маленький (<1 кб) javascript-файл, который может загружать определенные CSS-файлы в зависимости от ширины веб-страниц. Перед тем, как браузер полностью загрузит страницу, плагин проверяет ширину дисплея и автоматически определяет, какой CSS-файл нужно загрузить.

Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны, планшеты, мониторы или телевизоры (720p, 1080p).

Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.

Фреймворки для создания адаптивного тдизайна

Вы получите кроссбраузерность для смартфонов и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile.

Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.

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

12-ти колоночная разметка, 960px максимум, использует много медиа-запросов. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильные версии браузеров

Это интерфейсный набор инструментов для быстрой разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.

Less Framework 4 содержит 4 верстки и три набора типографики, все это основано на одной сетке. Также имеется генератор CSS.

Основан на SASS, объектно-ориентированный.

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

Адаптивные плагины

Создание надежного метода безопасного использования CSS overflow в адаптивных дизайнах, поддержка polyfill в неродных средах.

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

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

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

С помощью этого плагина вы можете делать видео адаптивным.

Wookmark - плагин для создания динамичного многоколоночного шаблона.

Тестеры и отладчики

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

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

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

The Responsinator покажет как выглядит компоновка вашего адаптивного сайта на популярных устройствах.

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

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

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

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

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

Адаптивные слайдеры

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

Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.

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

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

Базовая сетка

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

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

Базовая сетка должна сочетаться с колоночной. Дефолтные настройки Photoshop предлагают дизайнеру сетку с шагом в 10 px, что соответствует смещению объекта по горячей клавише shift, но не соответствует ни кеглю шрифта, ни логике построения колонок и отступов. 10 px - целое число, но не более того. В настройках сеток для мобильных платформ хорошим шагом можно считать 4 или 8 px. Здесь же шаг сетки должен ровно укладываться в высоту строки основного текста и не быть слишком мелким.

Колоночная сетка

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

В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода, breakpoints . За таковые можно принять 640, 768, 960, 1024, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок.

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

Соответственно, при выборе количества колонок нужно держать в уме, сколько прямоугольных модулей будет использоваться на странице. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 960 px на 12 колонок с шириной отступов в 10, 12, 16, 15 и 20 px даст ширину колонок в 60, 64, 65, 68, 70 px. Таким образом получится несколько вариантов сетки, например сетка в 12 колонок с шириной колонки в 64 px и отступом в 16 px.

Почему число в 12 колонок привычно? Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Разбиение рабочей области 960 px на 12 колонок подходит более всего, так как хорошо делится на колонки и отступы, кратные 2. Исходя из этого можно выбирать число колонок и для других разрешений - 10 колонок для 768 px, 16 колонок для 1280 px и 20 колонок для 1440 px и более. По сути колонки прибавляются либо убавляются для каждого разрешения.

Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.

Дизайнерская сетка

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

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

Использование сетки при передаче макетов в верстку

Сетку полезно передавать верстальщикам в виде отдельной спецификации. Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры - например шаг, отступ, ширину колонки, размеры шрифтов. Тогда соответствие вашего макета и верстки станет более точным, и контроль над разработкой и синхронизацией повысится с обеих сторон. Точно также как в мобильных интерфейсах существуют независимые пиксели (dp), так и в вебе это единицы rem. Вы можете создать разметку в пикселях или прописать ключевые элементы и расстояния в rem. Удобно когда шаг вашей сетки и rem кратен одному и тому же числу. Например, если шаг сетки 8 px, базовый шрифт - 16 px и rem равен 16 px, то размеры элементов и расстояния при кратности 4 будут становиться на сетку и иметь целое значение в rem. Это позволяет сразу видеть расстояния между элементами по шагам на сетке. Такие цельные значения без долгих расчетов можно получить наглядно, если воспользоваться Rem Калькулятором .

Полезные ссылки:

О паттерне распознования текста и вертикальном ритме на Smash Magazine
Еще о сетке на teehan+lax
Grilover и Typecast
Статьи и примеры сеток на The Grid System
Пример поиска композиции для дизайнерской сетки с помощью модулей -

Разработка веб-сайтов

Любому верстальщику, перед которым встала очередная задача по вёрстке адаптивного макета, нужны сетки. В большинстве случаев берётся старый добрый 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 пример:

С помощью 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? Тогда мы идём к вам!

Теги:

• css
• sass
• grid

Добавить метки