Java, UX, HTML, CSS, WEB-design

Gridpak: Генератор адаптивных сеток

Краткое описание по статье Gridpak: Генератор адаптивных сеток

Название: Gridpak: Генератор адаптивных сеток . Краткое описание: [ad_1] ⭐ Эрскин . Дата публикации: 18.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Эрскин Дизайн

  • 0 Комментарии

Gridpak: Генератор адаптивных сеток

  • 6 минут чтения

  • Кодирование, Инструменты, Фреймворки

Краткое резюме ↬

Эта статья является пятой в нашей новой серии, в которой представлены новейшие, полезные и свободно доступные инструменты и методы, разработанные и выпущенные активными членами сообщества веб-дизайнеров. Первая статья была посвящена PrefixFree; второй представил Foundation, адаптивный фреймворк; третий представил Sisyphus.js, библиотеку для Gmail-подобных клиентских черновиков, а четвертый поделился с нами бесплатным плагином под названием GuideGuide. Сегодня мы рады представить генератор адаптивной сетки от Erskine: Гридпак.

Эта статья является пятой в нашей новой серии, в которой представлены новейшие, полезные и свободно доступные инструменты и методы, разработанные и выпущенные активными членами сообщества веб-дизайнеров. Первая статья была посвящена PrefixFree; второй представил Foundation, адаптивный фреймворк; третий представил Sisyphus.js, библиотеку для Gmail-подобных клиентских черновиков, а четвертый поделился с нами бесплатным плагином под названием GuideGuide. Сегодня мы рады представить генератор адаптивной сетки от Erskine: Гридпак.

В течение ближайших 18 месяцев после Список отдельно опубликована статья Этана Маркотта «Отзывчивый веб-дизайн» многое изменилось в том, как мы подходим к процессу проектирования. Новый адаптивный подход, описанный в статье, включает в себя независимый от устройства дизайн, гибкость и неопределенный холст. В то время как книга Джона Оллсоппа «Дао веб-дизайна» заложила основу для изменений, статья Итана — наряду с развитием технологий и совпадающим массовым движением в сторону мобильного просмотра — действительно заложила основу для нового идеала дизайна.

Эта проблема

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

Вот как выглядел наш типичный цикл проектирования и разработки для создания адаптивного веб-сайта с гибкой системой сетки:

Еще после прыжка! Продолжить чтение ниже ↓
  1. Создайте 3 или 4 сетки разного размера вручную в Fireworks, чтобы использовать их в качестве эталона на этапе каркаса/дизайна.

    Создавайте несколько сеток для рабочего стола, планшета и телефона.
    Создавайте несколько сеток для рабочего стола, планшета и телефона.

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

    Воссоздание тех же сеток в браузере.
    Воссоздание тех же сеток в браузере.

  3. Напишите таблицы стилей LESS, которые сокращают математику, но все же требуют всех базовых значений и формул для расчета ширины сетки.

    Расчет ширины в процентах и ​​написание CSS, чтобы сделать наш веб-сайт и сетку адаптивными.
    Расчет ширины в процентах и ​​написание CSS, чтобы сделать наш веб-сайт и сетку адаптивными.

У этого подхода было 2 существенных недостатка.:

  1. Потребовалось много времени, чтобы измерить сетки, создать их в статическом графическом формате, а затем создать длинные строки LESS.
  2. Мы не могли представить, как реагируют сети (милая ирония), пока они не были построены.

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

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

Решение

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

  1. Предлагайте истинную гибкость:
    Интерфейс позволяет пользователю настраивать количество столбцов в каждой сетке, внутренние отступы и ширину желоба в пикселях или процентах, а также расположение точек останова сетки.
  2. Разрешить пользователю визуализировать адаптивную сетку:
    Пользователь может переключаться между сетками и редактировать их в режиме реального времени, используя систему вкладок. Они сразу видят, как реагируют их сетки.
  3. Оптимизация процесса проектирования и разработки:
    Gridpak выводит все форматы файлов, необходимые для быстрого запуска адаптивного проекта. Их легко расширять, ссылаться на них или просто выбрасывать, если они не требуются. Форматы файлов аккуратно упакованы в небольшой файл .zip, который включает в себя:
    • Оверлеи PNG для каждой сетки, которую пользователь создал для использования в выбранной им графической программе.
    • Демонстрационный HTML-файл.
    • Файл CSS с соответствующими медиа-запросами и предопределенными презентационными классами.
    • LESS, SCSS и SASS для тех же целей, но с дополнительными возможностями переменные а также примеси.
    • Фрагмент JavaScript, который позволяет пользователю накладывать свою адаптивную сетку на Любые браузере с помощью клавиши «G».
    • Файл readme.txt с более подробной документацией.

Простой интерфейс упрощает визуализацию, создание и редактирование адаптивной сетки.
Простой интерфейс упрощает визуализацию, создание и редактирование адаптивной сетки.

Таблицы стилей

Gridpak на самом деле не предназначен для использования в качестве фреймворка. Хотя его таблицы стилей будут работать «прямо из коробки», они предназначены для использования в ваших собственных таблицах стилей и методах работы. Вот почему они содержат только ту информацию, которая необходима для вашей сетки.

У нас была проблема с медиа-запросами в макетах на основе сетки, когда количество столбцов менялось между контрольные точки. Чтобы решить эту проблему, мы воздержались от использования «span_x» в именах наших классов в разметке, предпочитая использовать семантические имена, такие как «news_item». Затем мы добавили имена наших семантических классов в gridpak.cssрядом со своим аналогом:

.span_1, .span_2, .span_3,
.news_item {
    margin-left:2%;
    padding:0 1.5%;
    ...
}

.span_6,
.news_item {
    ...
}

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

Gridpak использует media queries, box-sizing а также background-clip properties (хотя есть способы использовать его без этих запросов). Эти свойства CSS3 поддерживаются во всех новых браузерах, а также в IE8, но мы рекомендуем использовать полифиллы или службы обнаружения, такие как Modernizr, для обработки деградации. ### Помогите нам помочь вам

Базовая функциональность и возможность редактировать положение точек останова после их создания.
Скоро: Базовая функциональность и возможность редактировать положение точек останова после их создания.

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

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

Обратная связь

Мы надеемся, что Gridpak со временем будет расти и развиваться, поэтому мы будем очень рады вашим отзывам и предложениям. Вы можете отправлять запросы функций на адрес gridpak@erskinedesign.com или @gridpak в Твиттере. У нас также есть доска Trello, где вы можете комментировать и голосовать за функции или даже просто следить за тем, над чем мы сейчас работаем. Мы в Erskine Design нашли Gridpak отличным ресурсом для нашей повседневной работы с клиентами, поэтому мы надеемся, что вам понравится использовать его так же, как и нам… и нам нравится.

Автор Сэм Куэйл.

(jvb) (иль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Gridpak: Генератор адаптивных сеток

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»