Ускоренный курс: YUI Grids CSS

Библиотека пользовательского интерфейса Yahoo — это довольно обширный набор инструментов JavaScript для разработчиков. Часто остаются незамеченными некоторые другие полезные компоненты библиотеки, которые ускорят ваше кодирование: некоторые библиотеки CSS. Сегодня я хотел бы познакомить вас с CSS-библиотекой YUI Grids.

Почему?

Почему вы даже должны рассмотреть возможность использования CSS-библиотеки YUI Grids (далее именуемой «YUI-сетки»)? Что выделяет его? Я не смотрел подробно на другие библиотеки Grid, но я нахожу эти вещи неотразимыми:

• Хорошие соглашения об именах

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

• Бесплатный файловый хостинг

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

• Совместимость с обычными размерами рекламы

  Yahoo испекла в ширине боковой панели, которая соответствует руководящим принципам рекламного бюро Интерактивной рекламы.

• Множество вариантов компоновки

  Yahoo заявляет, что с несколькими шаблонами и возможностью вложения областей страниц предлагает более 1000 комбинаций макетов. , , всего менее 5 КБ.

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

Ресурсы

Когда мы начнем, вот несколько ресурсов, которые будут полезны.

• Домашняя страница CSS YUI Grids : место, куда можно обратиться после прочтения этой статьи
• The Grids Builder : инструмент, который позволяет вам создавать свою страницу с помощью нескольких щелчков мыши — отличная помощь для быстрого освоения сетки YUI!
• Шпаргалка : одностраничный PDF со всеми соглашениями по сеткам YUI

Строительные блоки

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

1. Документ
2. шаблон
3. Блоки
4. Сетки
5. Единицы измерения

Документ

Очевидно, весь ваш HTML-файл является документом, но в нашем случае это также div непосредственно внутри тела — div, который содержит все это. Здесь вы определяете ширину вашего сайта. Сетка YUI предоставляет вам 4 варианта ширины: 750px, 950px, 100% или 974px. Эти ширины на самом деле не являются жестко закодированными пикселями; они ems, поэтому страница будет плавно изменяться, когда ваш пользователь регулирует размер шрифта. Если они этого не сделают, Yahoo сделает определение пользовательской ширины легким. Вот код для создания документа шириной 800 пикселей:

Чтобы установить ширину, просто используйте id из doc, doc2, doc3 или doc4, в соответствии с приведенными выше значениями.

шаблон

Есть семь шаблонов на выбор. Первые шесть определяют расположение в два столбца; каждый из них имеет разную ширину или ориентацию для боковой панели, а столбец основного содержимого занимает остальную часть ширины документа. Шаблоны: 1) 160px слева, 2) 180px слева, 3) 300px слева, 4) 180px справа, 5) 240px справа и 6) 300px справа. Чтобы получить шаблон вашего желания, просто добавьте класс yui-t # к тому же div, на котором вы определили свой документ (замените # числами выше). Как я упоминал выше, эти боковые панели являются стандартной шириной веб-рекламы, поэтому любая реклама должна в них вписываться.

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

Блоки

Блоки являются фактическим проявлением столбцов, определенных вами в шаблоне. Они просто два div-а внутри div-документа, оба классифицируются как yui-b. К счастью, они не должны быть непосредственными детьми основного div; Yahoo приводит этот пример:

Из примера видно, что вам не нужно помещать блоки непосредственно в корневой div. Это позволяет вам иметь верхний и нижний колонтитулы на всю ширину, что, как правило, хорошая идея. Вы заметите, что основной блок контента находится внутри div с идентификатором yui-main; Сетка YUI делает это для того, чтобы вы сначала могли располагать боковую панель или основной столбец в коде, что может быть преимуществом, если вы рассматриваете SEO или доступность.

Сетки и Единицы

Я сгруппировал сетки и единицы вместе, потому что они действительно очень похожи; оба дивы. Сетка (определенная классом yui-g) в основном говорит 2 дочерним элементам (обычно единицам) равномерно разделить ее ширину. Блок (класс yui-u) всегда должен быть дочерним элементом сетки и родительским элементом вашего контента.

Итак, в чем разница между блоком и сеткой?

• Блоки
  • Используются только для определения общих столбцов страницы
  • Используются только если вы используете шаблоны 1 — 6
  • Используются только один раз (поэтому на одной странице не должно быть более 2-х divs.yui-b)
• Сетки
  • Используются для разделения областей (таких как основной блок или другая сетка) на столбцы
  • Используются на любом шаблоне
  • Являются вложенными

Кроме того, всякий раз, когда у вас есть несколько сеток или единиц в сетке, необходимо дать первому класс первым. Это потому, что не каждый браузер предлагает псевдокласс: first-child.

Но что, если вы хотите разделить сетку неравномерно? Жизнь не всегда справедлива, не так ли? К счастью, YUI предлагает ряд альтернативных вариантов для класса yui-g. Вот список других:

• yui-gb : занимает 3 единицы и делится поровну
• yui-gc : занимает 2 единицы и делится на 2/3 и 1/3
• yui-gd : занимает 2 единицы и делится на 1/3 и 2/3
• yui-ge : занимает 2 единицы и делится на 3/4 и 1/4
• yui-gf : занимает 2 единицы и делится на 1/4 и 3/4

Это все из них; просто шлепните 2 или 3 юнита в каждой из вышеперечисленных сеток, и у вас будут неравные столбцы.

Основной пример

Хорошо, теперь, когда вы знаете веревки, давайте рассмотрим простой пример. Допустим, нам нужен стандартный макет сайта — вы знаете, столбец основного контента с боковой панелью справа — с небольшим изгибом: мы разделим основной столбец на два меньших и разделим один из них на два.

Как я уже упоминал, Yahoo предлагает хостинг для этой платформы, и обычно это хорошая идея, чтобы воспользоваться этим. Кроме того, Yahoo рекомендует строгий Doctype в формате HTML 4.01, так что это то, что я вставил. Вот с чего мы начнем:

Шаг 1: Документы и блоки

Первым шагом является настройка нашего документа div и блоков. Мы можем придерживаться первой ширины документа (750 пикселей) и перейти к шаблону 6, который дает нам правую боковую панель размером 300 пикселей.

Для двух блокировок контента b нам нужно добавить два divs.yui-b. Мы сделаем верхний столбец большего размера, обернув его с помощью div # yui-main.

Супер! Итак, вот что у нас так далеко: я позволил себе немного стилизовать его, чтобы вы могли видеть, что происходит.

Шаг 2: Сетки и Единицы

Это не слишком впечатляет, но мы доберемся Теперь давайте разделим большую колонку на две части. Мы можем достичь этого, поместив в него файл div.yui-g (который содержит две единицы):

Это дает нам две колонки слева; неплохо; давайте разделим второй из этих столбцов на два. Чтобы сделать это, мы должны изменить его на сетку и поместить в него две единицы.

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

Гоча

Это подводит меня к дополнительному принципу (который принесет большую пользу сеткам YUI). Во-первых, посмотрите на код, который мы написали до сих пор, с текстом-заполнителем:

Ваш хороший вкус должен заметить отсутствие заполнения по краям наших колонн. Но это можно легко исправить с помощью некоторого отступа, скажем, 0.5em, на .yui-u, верно?

Хлоп! Сетки YUI установили ширину для этих элементов div, и поскольку отступы увеличивают ширину элемента div, у нас возникла проблема переполнения. Простым решением этого является добавление отступа для непосредственных потомков .yui-u.

Чтобы держать наши столбцы в строке и легко читаемыми, мы добавим отступы к абзацам внутри .yui-u. Но мне не нужно показывать вам изображение этого, чтобы вы поняли, что наши узкие колонны только стали уже. Именно здесь мы можем воспользоваться преимуществом сетей YUI. Давайте изменим идентификатор нашего корневого div с doc на doc2. Вот до и после:

Добавив один символ в наш HTML, мы можем легко поэкспериментировать с более широким макетом; в этом красота сеток YUI. # doc2 на 200px шире, чем #doc, поэтому теперь наши узкие абзацы удобной ширины.

Сложный пример

Это довольно простой пример; давайте посмотрим на более сложный. , , это действительно не сложнее создать. Мы начнем с седьмого шаблона — одного столбца — с документом шириной 750 пикселей (#doc) и по-разному разделим его на несколько строк. Вот с чего мы начнем:

Поскольку мы не используем шаблоны 1 — 6 (которые имеют боковые панели), нам не нужен файл divs.yui-b. Мы можем начать сразу с нескольких divs.yui-g; мы добавим 4:

1 ряд

Давайте разделим верхнюю сетку на три части; Для этого нам нужно изменить класс на .yui-gb. Затем мы просто помещаем три divs.yui-u внутрь и даем первому первый класс.

Быстрый предварительный просмотр того, что мы получили до сих пор (опять же, я применил минимальный стиль для ясности и добавил немного текста наполнителя):

Ряд 2

Для второй строки мы можем попробовать .yui-gc, который дает нам два столбца; один займет 2/3, а другой 1/3.

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

Ряд 3

Для сетки 3 мы сделаем что-то более продвинутое: четыре столбца. Это требует вложения двух сеток в сетку, например:

Обратите внимание, что мы все еще следуем правилу «от первого к первому», как на сетке второго уровня, так и на блоках третьего уровня. Это действительно единственное правило, которое вы должны помнить; даже эта «продвинутая» работа довольно проста. Вот что у нас так далеко.

Для окончательной сетки мы сделаем простое разбиение: два столбца.

Вот и все! Для последнего выстрела я добавлю немного поля между рядами.

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

Использовали сетки YUI в проекте и есть мнение по этому поводу? Предпочитаете другую библиотеку сеток? Дайте мне знать в комментарии!

Эта статья была первоначально размещена в блоге ThemeForest . В настоящее время мы портируем некоторые из наиболее популярных статей на Nettuts +.