Goodx-xml

Pure - быстрый старт

Сайтостроение и компьютеры

Фреймворк Pure подключается просто — нужно лишь добавить в блок head ссылку к его файлам. Но есть три варианта, как это сделать.

  • Первый — указать ссылку к полному комплекту файлов.
  • Второй — указать ссылку на минимально необходимый комплект
  • Третий — указать три отдельных ссылки, отвечающих только за определённые функции фреймворка.

Так как цель статьи немного разобраться в Pure, то будем подключаться третьим вариантом.

Подключение Pure

Для подключения фреймворка Pure и включения режима адаптивности нам потребуется указать четыре ссылки в head страницы.

Масштабируемость

Для того, что бы размер шрифта изменялся в зависимости от ширины и разрешения экрана гаджета, необходимо указать в head страницы строку:

Файл масштабируемости под разные гаджеты

В большинстве случаев такая строка прописывается во всех ЦМС по умолчанию. Поэтому, если она уже есть, то повторно её размещать не нужно.

Нормализация

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

Файл нормализации

Какие очевидные плюшки мы получаем, используя это подключение:
Например, если очень часто требуется использовать скрытия объектов, то нормализация предлагает использовать тег hidden:

Подготовленные теги в Pure. hidden

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

Подготовленные теги в Pure.  Растяжка изображения

Проектирование сетки

Следующим шагом нужно определиться с масштабируемостью и гибкостью сетки. В стандартной поставке Pure есть 2 сетки: на 5 и 24 ячейки. В большинстве случаев их достаточно. Если же принципиально нужны другие сетки, то можно заморочиться и сделать свои. Обе сетки прописаны в одном файле и, соответственно, используются одновременно. В общем случае они позволяют разделять страницу на следующие доли:

  • 1
  • 1/2
  • 1/3, 2/3
  • 1/4, 3/4
  • 1/5, 2/5, 3/5, 4/5
  • 1/6, 5/6
  • 1/8, 3/8, 5/8, 7/8
  • 1/12, 5/12, 7/12, 11/12
  • 1/24, 5/24, 7/24, 11/24, 13/24, 17/24, 19/24, 23/24.

Чтобы подключить сетку к сайту, необходимо в head добавить ссылку, отвечающую за её формирование:

Подготовленные теги в Pure.  Растяжка изображения

А чтобы использовать её в проекте необходимо в тегах прописать класс, соответствующий требуемым долям (piure-u) и обернуть их в класс сетки (pure-g). На примере ниже код для сетки, разбитой на три равных доли:

Подготовленные теги в Pure.  Обычная масштабируемая сетка

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

Контрольные точки адаптивности

Остался последний шаг — добавить адаптивность. У фреймворка за это отвечает отдельный модуль. Подключаем его всё по той же схеме — добавляем ссылку в блок head.

Адаптивный модуль Pure

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

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

Опорные точки в медиа-файле CSS Pure

Рассмотрим таблицу подробнее, ибо не всё может быть понятно.

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

Второй столбец — показывает отрабатываемый медиазапрос. Еm — условная единица, пиксельный размер которой зависит от базового шрифта браузера.

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

Четвёртый столбец — шаблон кода, который нужно использовать для того, чтобы данное правило было задействовано.

Обратите внимание, что у первой строки нет ни ключа ни медиазапроса. Это потому, что фреймворк Pure за основу берёт мобильную версию экрана, т.е с минимально возможной шириной — грубо говоря — с нуля. Соответственно, если, например, в вёрстке укажем только pure-u, то фреймворк растянет нам этот блок на полную, независимо от ширины экрана — будь оно хоть 360 пикселей, хоть 2400.

Пример адаптивного блока

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

Пример вёрстки  — адаптивный блок на Pure

Как читается этот код:
начиная с самого маленького экрана и до опорной точки md (т.е. до 768 пикселей) будет действовать правило по умолчанию u-1, которое гласит, что блок будет занимать всю ширину экрана (цифра 1 после u).
Далее и до максимально возможной ширины экрана (так как больше нет правил) будет действовать правило u-md-1-3, которое гласит, что соответствующий блок див будет занимать 1/3 ширины экрана (запись 1-3 после u-md).

Примечание: при моделировании сетки для адаптивности необходимо помнить, что во фреймворке Pure разбивка сетки идёт чистой — т.е. без отступов у границ. Добавить отступы можно несколькими способами. Ниже показаны два способа: с помощью дополнительного обёртывающего блока div и без оного. Какой вариант лучше — зависит от ваших предпочтений.

Пример вёрстки  — обёртка для отступов
Первый вариант — отступы в добавочном блоке div

 

Пример вёрстки  — обёртка для отступов-2
Второй вариант — отступы без дополнительного блока div

 

Переопределение шрифтов

По умолчанию условные единицы считаются из соотношения 1em=16px, поведение сетки во многом зависит от установленного шрифта. По умолчанию Pure использует самые распространённые шрифты без засечек. Но если Вам вдруг потребуется использовать уникальный шрифт, то внести изменения можно следующим образом:

Пример вёрстки  — отступы в гриде

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

0
0
Назад
Нет комментариев. Почему бы Вам не оставить свой?
Ваше сообщение будет опубликовано только после проверки и разрешения администратора.
Ваше имя:
Комментарий:
ББ Редактор 6.2 Pro
Смайл - 01 Смайл - 02 Смайл - 03 Смайл - 04 Смайл - 05 Смайл - 06 Смайл - 07 Смайл - 08 Смайл - 09 Смайл - 10 Смайл - 11 Смайл - 12 Смайл - 13 Смайл - 14 Смайл - 15 Смайл - 16 Смайл - 17 Смайл - 18
АБВГДЕЁЖЗИЙ КЛМНОПРСТУФ ХЦЧШЩЬЫЪЭЮЯ
ABVGDEJOZHZIJ KLMNOPRSTUF XCCHSHW'Y#JEJUJA
Информация о загрузке файлов
Допустимые форматы файлов: gif, jpg, jpeg, png, zip, rar
Максимальный размер загруженных файлов модуля: 100 MB
Максимально допустимый размер файла для загрузки: 1 MB
Максимально допустимая ширина изображения: 1500 px
Максимально допустимая высота изображения: 1500 px
Количество одновременно загружаемых файлов: 10
Секретный код:Для обновления секретного кода нажмите на картинку
Повторить: