Skip to content

Выбор модульной сетки

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

Перейдем к выбору

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

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

960-grid-system

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

Готовые фреймворки

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

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

golden-grid-system

Вот несколько самых популярных фреймворков модульных сеток:

Собственная сетка (DIY)

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

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

Инструменты создания своей модульной сетки

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

Gridset

Gridset — это невероятный инструмент, созданный с любовью дизайн-студией Марка Боултона из Южного Уэльса

gridset

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

Gridpak

Gridpak — один из первых интерактивных инструментов создания адаптивных сеток.

gridpak

Gridpak работает путем создания ряда колонок под ваши ключевые точки медиа-запросов. Как только вы создали вашу модульную сетку, вы можете скачать все необходимые файлы — PNG с наложенем вашей сетки, CSS стили для стандартных классов вашей сетки, а также их LESS и SASS версии, JavaScript-файл (для создания эффекта наложения вашей сетки в браузере) и документация.

CSS Wizardry Fluid Grids

Если вам нужен хороший быстрый калькулятор для расчета адаптивной сетки, то советую вам данный сервис от Генри Робертса.

harry-roberts-fluid-grids

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

Заключение

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Все о модульных сетках

Выравнивание улучшит ваш дизайн