Знакомимся ближе с Blueprint CSS Framework

1. Что такое Blueprint CSS?

Если вы похожи на меня – больше разработчик, чем дизайнер, то вам скорее всего знакома ситуация, когда вы начинаете новый проект и совершенно не имеете понятия, с чего начать часть, относящуюся к CSS. Вы также знаете, что дизайн будет изменяться ещё много раз, однако необходимо, чтобы он был аккуратен и ярок с самого начала. После этого вы потратите n-ое количество времени на CSS, который будет одинаково отображаться в Firefox, Safari и конечно же в IE. Потом вы наклепаете какой-то HTML, который по вашему мнению, будете использовать. Здорово! Закончили! И вот… через 3 дня требования изменились, и вам вновь нужно начинать всё сначала. Наверное, все сталкивались с подобными проблемами…

Если вы являетесь крутым верстальщиком, который знает все CSS финты или человеком, работающим с PSD шаблоном, это не значит, что вам нечему учиться…. Blueprint - это очень удобная вещь, предоставляющая очень полезные инструменты… так что вы с огромной пользой проведёте время.

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

2. Исходники Blueprint

• 1.reset.css - этот файл сбивает стандартные значения стилей всех браузеров. Я думаю, что все вы знакомы с процессом создания нового проекта, когда вы создаёте новый CSS файл и задаёте некоторые настройки, такие как ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ или что-то вроде этого. Теперь вам не придётся это делать, так как у вас есть данный файл. Он сбрасывает стили для отступов, таблиц, фонов и т.д. для того чтобы вы могли начать с нового листа.
• 2.typography.css - этот файл содержит стили для ваших текстов. Я не буду объяснять каждый из них, однако хотелось бы отметь, что это моя любимая сторона Blueprint, т.к. для меня нет ничего страшнее, чем стандартные шрифты типа Times New Roman и их топорное отображение. Ух… Благодаря данному Blueprint файлу, мне больше не придётся ещё раз переживать данные ощущения. typography.css так же содержит приятные для глаза стили, касающиеся размера шрифтов, расстояния между строк, и конечно же для таблиц.
• 3.grid.css - этот файл отвечает за отображение сетки фрэймворка blueprint. Через некоторое время мы рассмотрим класс, который активирует отображение сетки. Стоит отметить, что ширина страницы составляет 950px, и состоит из 24 колонок, каждая из которой имеет ширину в 30px и отступ в 10px. Размеры конечно же ограничены, однако если вам они не подходят, вы всегда можете воспользоваться Blueprint Grid CSS Генератором для того, чтобы подогнать blueprint под свои размеры. Если вы не понимаете, о чём идёт речь, то не расстраивайтесь, мы ещё к этому вернёмся, но чуть позже. Если вы не знакомы с CSS системами, основанными на сетке, то вы скоро всё поймёте.
• 4.ie.css - Blueprint содержит специальные стили для IE, потому что это браузер является особенным и требует для себя особого внимания. Теперь вам не придётся беспокоиться о том, что ваш дизайн будет криво смотреться в IE - Blueprint блестяще справляется с этой задачей (даже для IE 5).
• 5.print.css - этот файл предназначен для стилей специально для печати, так что при распечатке страницы, у пользователей выйдет light версия того, что они видят на экране. В файле print.css существует также опция, при активации которой все ссылки, которые есть на странице, будут сопровождаться адресом в квадратных скобках. Для подробного разбора смотрите самый конец файла print.css.
• 6.forms.css - данный файл содержит стили как для форм, так и классы для таких блоков, как «ошибка» и других. Поскольку данный файл мы не будем разбирать более детально, то я решил просто показать вам результат применения стилей, которые предоставляются в этом файле:

И что? Мне надо подключать все 6 таблиц стилей?

Нет. Blueprint содержит сжатый вариант таблиц стилей для ваших HTML страниц - screen.css, который включает в себя все перечисленные файлы, включая print.css и ie.css. Причина, по которой я расписал каждый из файлов данного фрэймворка, заключается в том, что он состоит из модулей, а это означает, что каждый из его компонентов (файлов) может работать независимо друг от друга. Это очень здорово, поскольку если вы решили, что какой-то файл Blueprint вам не подходит, к примеру, файл для сетки, а файлы reset.css, typography.css наоборот, может сослужить вам хорошую службу, то вы без труда и потери функционала можете их подсоединить, оставив за бортом ненужные вам файлы стилей.

3. Давайте же что-то сварганим на Blueprint

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

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

4. Разбор полётов

Заголовок документа

    <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <title>Book Haven</title>

      <!-- Framework CSS -->
        <link rel="stylesheet" href="/blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="/blueprint/print.css" type="text/css" media="print" />
        <!--[if IE]><link rel="stylesheet" href="/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

        <!-- Import fancy-type plugin. -->
        <link rel="stylesheet" href="/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
    </head>

Вот как должен выглядеть раздел head, если мы используем Blueprint фрэймворк. Вам необходимо подключить файлы CSS, к примеру, screen.css, print.css и ie.css.

Ещё одна фича Blueprint: это код CSS, поэтому если нас что-то не устраивает, мы с лёгкостью можем заменить существующие селекторы. Именно по этому принципу работают Blueprint плагины. В этом примере я использую плагин, предназначенный для моих текстов. Подключать плагины необходимо после вызовов основных файлов фрэймворка, для того чтобы значения селекторов переписались и вступили в силу. Вот плагин, который я использовал.

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

Заголовок страницы

<body>
      <div class="container">

        <div id="header" class="span-24 last">

          <h1 id="book_haven"><img src="/images/header.gif" alt="Book header image" id="header-image" /></h1>
        </div>

        <hr />
        <div id="subheader" class="span-24 last">
          <h3 class="alt">Get opinions on your latest novel, and read what other people are writing about.</h3>
        </div>

        <hr />

В данном контексте очень важно отметить, что: если вы хотите активировать функциональность Blueprint, то основное содержание вам необходимо поместить в блок div с классом ‘container’, иначе у вас ничего не получится. Тег hr часто используется в Blueprint как горизонтальный разделитель между секциями. Класс ‘alt’ берёт своё начало в плагине, который мы обсудили выше (может быть применён к любому текстовому элементу).

Основной контент

    <div class="span-17 colborder" id="content">
          <h3 class="loud">Featured Book: "The World Without Us"</h3>
          <p>
            <img class="right" src="/images/world-book.gif" alt="featured book" />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          </p>

          <p>
            Cras sagittis. Fusce porttitor felis sed massa. In hac habitasse platea dictumst.
          </p>

          <hr />
          <div class="span-8 colborder">
            <h4 class="prepend-5">Upload a Book</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis.
            </p>
          </div>

          <div class="span-8 last">
            <h4 class="prepend-5">Write a Review</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis. Mauris ipsum.
            </p>
          </div>
        </div>

        <div class="span-6 last" id="sidebar">

          <div id="recent-books">
            <h3 class="caps">Recent Books</h3>

            <div class="box">
              <a href="#" class="quiet">Hygiene</a>
              <div class="quiet">Nov. 29, 2008</div>
              <div class="quiet">by Craven</div>
            </div>

          </div>

          <div class="prepend-top" id="recent-reviews">
            <h3 class="caps">Recent Reviews</h3>
            <div class="box">
              <span class="quiet">Thor reviewed Hygiene</span>
              <div class="quiet">Rating: 4/5</div>
              <a href="#" class="quiet">Read this review</a>
            </div>

          </div>
        </div>

        <hr />

В этом небольшом фрагменте кода применяться очень много вещей, о которых мы сейчас поговорим. Начнём мы с самого верха и рассмотрим <div class=”span-17 colborder”>. Этот блок создаёт самый крупный сегмент на нашей странице, который включает в себя секцию Featured Book и две небольших блока. Класс ‘span-17′ отвечает за ширину блока и говорит о том, что он будет шириной в 17 блоков из 24 возможных. Другой класс, который используется в этом примере - ‘colborder’, отвечает за рамки и говорит Blueprint отобразить её с правой стороны данного блока, чтобы отделить от боковой панели.

Важно: когда вы используете класс ‘colborder’ для отображения рамки, хотите того или нет, но одна колонка потребуется для этих целей. Поскольку ширина нашего блока составляет 17 колонок (span-17), вы скорее всего предположите, что у вас осталось 7 свободных (так как 17 + 7 = 24), но так как ‘colborder’ занимает одну колонку для своих нужд, то в вашем распоряжении осталось только 6 колонок для боковой панели (17 + 1 + 6 = 24).

Перед тем как перейти к боковой панели, нам необходимо обсудить 2 небольших блока с заголовками ‘Upload a Book’ и ‘Write a Review’. Поскольку родительский блок данных элементов состоит из 17 колонок, то это расстояние будет максимальным.

Итак, первому блоку, приписаны классы ‘span-8′ и ‘colborder’, что означает, что ширина данного элемента будет занимать на самом деле 8 колонок и с правой стороны будет отделена тонкой рамкой. Второму блоку мы приписали классы ‘span-8′ и ‘last’. Это очень важный момент в фрэймворке Blueprint. Колонке, которую вы хотите отображать последней необходимо указать класс ‘last’. Этот класс сообщает BP, что данный элемент является последним и ему не нужно создавать никаких отступов. Отметьте для себя, как мы распределили имеющиеся у нас 17 колонок, разделив их между блоками по восемь 8 и 1 для рамки ‘colborder’ (8 + 8 + 1 = 17).

OK, теперь с чистой совестью можем приступить к боковой панели. Данному элементу мы приписали классы ‘span-6′ и ‘last’. Я думаю, что вы уже поняли, как работают данные классы. Боковая панель полностью заполоняет всё оставшееся пространство. Математика тут не сложная 17 + 1 + 6 = 24.

Приведу ещё один сторонний пример HTML кода, для того чтобы вы поняли, как это всё работает.

    <div class="container">
          <div class="span-24">
              Header
          </div>
          <div class="span-4">
              Left sidebar
          </div>
          <div class="span-16">
              Main content
          </div>
          <div class="span-4 last">
              Right sidebar
          </div>
      </div>

Давайте рассмотрим ещё некоторые классы CSS, которые вы можете использовать:

• ‘caps’: данный класс используется для заголовков в боковой панели. Его селекторы хранятся в CSS файле плагина, о котором мы неоднократно говорили.
• ‘box’: этот класс прекрасно подходит для оформления элементов списка. Он без особого труда отделяет их от всего содержимого страницы и создаёт пропорциональные отступы между внутренними и внешними элементами.
• ‘quiet’: данный класс CSS отвечает за цвет текста (серый), который вы можете увидеть в боковой панели.
• ‘prepend-top’: данный класс используется в секции ‘Recent Reviews’ нашей боковой панели. Он просто добавляет внешний отступ в 1.5em сверху. Так же существует класс с подобной функциональностью: ‘append-bottom’, который добавляет внешний отступ снизу.
• ‘prepend-5′: этот класс я использую, для того чтобы переместить заголовки 2х небольших блоков в правый угол. В Blueprint существует несколько классов для подобных операций: prepend, append, pull, и push. Классы Prepend и append добавляют внутренние отступы справа и слева. Классы Pull и push добавляют внешние отступы. Ещё раз отмечу, что вам необходимо тщательно просчитывать применения каждого класса, чтобы вписаться в общие размеры контейнера (который по умолчанию составляет 24 колонки).

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

5. Выводы

Главной задачей данного урока было показать основные техники работы с фрэймворком Blueprint CSS. Прочитав данную статью, вы без особого труда можете применить её в вашем следующем проекте полностью или частично. Также если вы используете Blueprint при написании Rails приложений, то советую посетить данный репозиторий на Github. Там вы найдёте инструменты, которые предназначены для упрощения конфигурации Blueprint.

Самое классное в Blueprint, что это просто CSS. Так что если данная статья вас заинтересовала, то качайте исходники и начинайте разбор кода сами. Чуть не забыл упомянуть, что Blueprint занимает меньше места по сравнению со своими аналогами, при этом не уступая в функциональности. Ну а если вы ещё более любопытны, чем я, то можете рассмотреть сами исходники данного CSS фрэймворка.

Напоследок оставлю вам несколько источников:

• Официальный сайт Blueprint blueprintcss.org. Лучше всего отсюда качать данный фрэймворк.
• По умолчанию Blueprint работает с фиксированной шириной. Если вы предпочитаете создавать резиновые сайты, то этот плагин как раз для вас.
• Множество плагинов для Blueprint

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/46Z2Cgj6dQ0/lessons.php

Статьи по теме

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

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

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08

Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI

Скорость обработки сложных научных статей составляет менее трех секунд. Новое поколение моделей ИИ от компании Antropic под названием Cl...

2024-04-08

Как пользоваться GPT 4 и Claude бесплатно и без VPN

Как бесплатно пользоваться GPT 4, его плагинами, а также новой нейросетью Claude 3? Это можно делать в рамках одного сайта, который называет�...

2024-04-08

Как использовать анимацию с помощью JavaScript-библиотеки GSAP

Узнайте, как использовать мощную JavaScript-библиотеку GSAP для создания захватывающих анимаций на веб-страницах, освоив основы и примеры. GSAP...

2024-03-13

Использование GSAP 3 для веб-анимации

Использование GSAP 3 для веб-анимации От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации....

2024-03-13

Мерч и IT: на что обратить внимание в 2024 году

Оглавление Смена поколений Живой контакт Трансляция ценностей Офлайн-мероприятия Пользоввательский контент Биг б�...

2024-02-17

Копируем с RSync: основные примеры синхронизации файлов

RSync это быстрый и чрезвычайно универсальный инструмент для синхронизации (копирования) файлов. Его самое основное преимущество это пер...

2024-02-16

Лучшие noCode AI платформы для создания диалоговых ботов

Про GPT знают уже все, да? Но даже про его возможности не все осведомлены. Например, знаете ли вы, что GPT можно обучать непосредственно н�...

2024-02-15

Факторы ранжирования Google 2024 — исследование Semrush

Рассказываем самое важное об исследовании более 60 предполагаемых факторов ранжирования. Компания Semrush провела исследование...

2024-02-14

Перенос сайта на другой хостинг

Как перенести сайт на хостинг самостоятельно, что подготовить до и проверить после смены хостинг-провайдера. Содержание Бэ...

2024-02-12

В России сформирован реестр хостинг-провайдеров

Роскомнадзор сформировал реестр провайдеров хостинга. С 1 февраля компаниям, не включенным в этот реестр, запрещено оказывать услуги х�...

2024-02-05