Продвинутый Blueprint (tips and tricks): обмен колонок местами и прочее

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

Что может и чего не может Blueprint

Может:

• Быструю колоночно-блочную вёрстку без необходимости изучения чёрной магии;
• Сброс умолчаний стилей в разных браузерах (кое-что всё равно придётся доделывать);
• Нормальная стартовая типографика с соблюдением вертикального ритма;
• Кроссбраузерность для всего вышеупомянутого;
• Генерация модульных сеток различных размеров (с помощью прилагающихся сценариев на Ruby), как я описывал в недавнем посте>;
• Плагины (sic!), в основном бесполезные.

Не может:

• Красивый дизайн из коробки;
• Научить вас вёрстке, типографике и чёрной магии.

Теперь крутая техника и особенности фреймворка...

Обмен колонок местами с помощью классов .prepend-X и .pull-X

UPD: ВНИМАНИЕ! Допущена ошибка в сжатой версии исходников: для классов вида .push-X должно быть применено правило float:left; вместо float:right;. В несжатой версии этой ошибки на данный момент нет, так что исправляйте сжатую и используйте .push-X вместо .prepend-X — это соответствует задумке автора.

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

• Загрузка основного содержимого не должна задерживаться, если в боковых колонках имеется тяжеловесное наполнение. Пользователи приходят именно за содержимым, а не на менюшки с баннерами посмотреть, поэтому нужно всеми возможными способами выдвигать содержимое вперёд и наверх;
• Пользователи мобильных устройств также заинтересованы в том, чтобы не приходилось проматывать десяток экранов списков, чтобы увидеть текст;
• Где-то я читал о том, что поисковые системы тоже предпочитают контент вперёд навигации. В общем, актуальность гипотезы сомнительна (если знаете, то напишите об этом в комментариях), но и первых двух пунктов достаточно.

Так вот, пусть мы хотим обменять местами колонки A и B. Пусть ширина первой будет равна M модулей (всего их 24), а второй — N модулей. Вот так, например:

<div class="container">
    <div class="span-4">
        <p>Колонка A</p>
    </div>
    <div class="span-5">
        <p>Колонка B</p>
    </div>
</div>

Теперь я меняю их местами, следите за моими руками:

<div class="container">
    <div class="span-4 prepend-5">
        <p>Колонка A</p>
    </div>
    <div class="span-5 pull-9">
        <p>Колонка B</p>
    </div>
</div>

Что я сделал:

1. К первой колонке добавил класс .prepend-N, где N — ширина второй колонки;
2. Ко второй колонке добавил класс .pull-(M+N), где M+N — ширина обоих колонок вместе;

Суть в том, что .prepend-X добавляет поле (padding) слева, а .pull-X сдвигает блок влево (с помощью отрицательного margin). Следует помнить о том, что добавление поля к первому блоку повлияет на расположение фонового изображения в нём, поэтому я рекомендую не ставить ему никакого фона, а добавить внутрь ещё один блок для декоративных целей.

Кроме названных классов, есть обратные им .append-X (поле справа) и .push-X (выталкивание вправо). Особенностью .push-X является то, что он сначала прижимает блок к правой границе объемлющего его блока (устанавливает float:right;), а потом ещё и сдвигает вправо — т. е. он не просто смещает блок вправо от текущей позиции, а выталкивает его за границу его текущего контейнера. Поэтому если блок находится в самом внешнем контейнере (который обязательно с классом .container), то эффект будет неожиданным — в лучшем случае блок вылезет за границу сетки, в худшем — образуется чёрная дыра и вас засосёт.

Правильное применение .last

Всё, что делает класс .last — убирает отступ (margin) справа у блока. Этот класс нужно ставить на те блоки, которые примыкают к правой границе сетки, чтобы они её не растягивали. Но есть одно исключение: если на блоке стоит класс .span-24, то добавлять .last излишне. Поэтому не верьте заявлениям о том, что .last нужно добавлять к любому последнему блоку в ряду.

В вышеописанном случае обмена колонок местами, если на второй колонке стоял .last, то пусть он там же и остаётся, перестановка испортит выравнивание по сетке.

Классы .prepend-top и .append-bottom

Эти классы добавляют пустую строку (через margin) сверху и снизу соответственно. Напомню, что высота строки по умолчанию равна 18px при высоте шрифта 12px.

.border, .colborder, .box и прочие украшения

Классы .border и .colborder добавляют видимую границу справа, второй ещё и занимает одну колонку, оставляя отступ. Класс .box делает, собственно, бокс — декоративный прямоугольник с отступами и фоном.

Использование <hr>

Добавляет линию на всю ширину, удобен как вертикальный разделитель блоков. Если к нему добавить класс .space — станет невидимым.

Прочее...

Заглядывайте в папку /src и сами изучайте. Скажу только, что за основу сброса стилей взято решение решение Эрика Мейера, а также в комплекте идёт готовый clearfix.

Удачной вёрстки!

Читайте также: 960 Grid System vs. Blueprint, сравнение CSS фреймворков — 960 Grid System лучше по многим показателям.

Автор: Дмитрий Scriptin.

Интересное...

• ...как заработать на ставках на футбол
• ...закон с ограничением платежей
• ...взлом паролей

Другие посты по этой теме: