Susy является вспомогательным инструментом, с помощью которого можно создавать гибкие настраиваемые CSS-сетки буквально на лету.

На момент написания статьи состоялся релиз Susy 2. Если у вас есть опыт работы с предыдущей версией этого фреймворка - Susy 1, то вам наверняка еще больше понравиться работа в Susy 2, так как эта версия предоставляет веб-разработчику еще большую гибкость.

Данное руководство по Susy 2 состоит из двух частей; в этой первой части будет показан процесс создания шаблона в фреймворке Susy 2.

Почему именно Susy 2

Как я уже упоминал ранее, Susy является вспомогательным инструментом, благодаря которому можно создавать гибкие сетки практически любого вида, без необходимости производить многочисленные рутинные вычисления. Преимуществом Susy в отделении CSS от HTML.

Если у вас до прочтения этой статьи был опыт работы с такими традиционными фреймворками, как Foundation или Bootstrap, то вы должны знать, что в этих фреймворках ширина колонок и контрольные точки

1
breakpoints
имеют фиксированные значения. Для изменения разметки необходимо добавлять классы к элементам в HTML-код (прим. переводчика - забыл, как называется случай, когда HTML-структура засорена чрезмерным количеством классов).

Фреймворк Susy лишен такого недостатка - классы создаются непосредственно под необходимый случай и применяются к конкретной сетке.

Как мне кажется, этот момент довольно трудно понять сразу, так как является достаточно абстрактным понятием. Вместо того, чтобы пытаться бесконечно объяснять теорию, мне кажется гораздо лучшим для понимания воспользоваться практическим примером. Для этого создадим с помощью Susy 2 10-колоночный тестовый макет, нарисованный Arnaud Guera (AG) для официального сайта Susy 2:

Тестовый шаблон Arnaud Guera

Установка Susy 2

Если Susy вообще не установлен

Фреймворк Susy для своей работы нуждается в препроцессоре Sass. Поэтому, если у вас на локальном компьютере еще не установлены как Sass, так и Susy, то необходимо это сделать:

sudo gem install sass
sudo gem install susy

Если Susy уже установлен

Если фреймворк Susy уже установлен на вашем компьютере и также имеется Ruby RVM (Ruby Version Manager), то можно произвести обновление с помощью команды:

sudo gem update

Если у вас эта команда не сработала, то это означает, что нужно попробовать другой способ или же сначала установить Ruby RVM.

Второй способ установки фреймворка Susy версии 2 несколько более “ручной”. Он предполагает, что сначала нужно деинсталлировать предыдущие версии Sass\Susy, а затем установить их снова. Этот способ является наилучшим, если необходимо избежать ошибок при обновлении (как в первом случае).

sudo gem uninstall susy
sudo gem uninstall sass

sudo gem install sass
sudo gem install susy

После успешной установки фреймворка Susy 2 на локальной машине, приступим к его базовой настройке.

Базовая настройка Susy 2

Точно также, как и в первой версии, необходимо в конфигурационном файле

1
config.rb
указать, что фреймворк Susy должен быть включен в текущий проект:

# Require any additional compass plugins here.
require 'susy'

Затем нужно импортировать фреймворк Susy 2 в таблицы стилей:

// Importing Susy
@import "susy";

Версия 2 фреймворка Susy имеет список глобальных переменных, встроенных в него. Эти переменные можно изменить прямо в таблице стилей:

// Configuring Susy 2 Global Defaults
  $susy: (
    key : value
);

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

Однако, можно смело использовать Susy 2 с настройками по-умолчанию. В моем случае, так как я предпочитаю работать с моделью

1
border-box
и единицами измерения
1
rem
, то я изменю некоторые из переменных:

$susy: (
  global-box-sizing: border-box,
  use-custom: (rem: true)
);

Обратите внимание на то, что Susy 2 использует по умолчанию “резиновый” шаблон. Это означает, что ширина всех внешних блоков-контейнеров задана в 100%.

Если же вы предпочитаете работать в Susy с фиксированными ширинами элементов и контрольными точками

1
breakpoints
, то просто измените значение переменной
1
math
на
1
static
. Главное отличие между двумя этими методами проявляется только тогда, когда настает потребность в превращении дизайна в RWD. Однако, этот вопрос будет рассмотрен позже, во второй части данного руководства.

Также обратите внимание, что необходимо подключить к текущему проекту библиотеку Compass и файл нормализации стилей

1
normalize.css
(в первых двух строках):

@import "normalize";
@import "compass";
@import "susy";

// Настройка переменных Susy
$susy:(
  global-box-sizing: border-box;
  use-custom: (rem: true)
);

@include border-box-sizing;

Базовый HTML и CSS для шаблона AG

HTML-каркас для данного шаблона будет выглядеть следующим образом:

<div class="container">
  <h1>
    10-колоночный шаблон с вложенностью блоков
  </h1>
  <!-- Column 1 -->
  <div class="column_1">
    <h2>
      Колонка 1
    </h2>
  </div>
  <!-- Column 2 -->
  <div class="column_2">
    <h2>
      Колонка 2
    </h2>
    <div class="column_2_1_1">
      <h2>
        Колонка 2-1-1
      </h2>
    </div>
    <div class="column_2_1_2">
      <h2>
        Колонка 2-1-2
      </h2>
    </div>
    <div class="column_2_2_1">
      <h2>
        Колонка 2-2-1
      </h2>
    </div>
    <div class="column_2_2_2">
      <h2>
        Колонка 2-2-2
      </h2>
      <div class="column_2_3_1">
        <h2>
          Колонка 2-3-1
        </h2>
      </div>
      <div class="column_2_3_2">
        <h2>
          Колонка 2-3-2
        </h2>
      </div>
      <div class="column_2_4">
        <h2>
          Колонка 2-4
        </h2>
      </div>
    </div>
  </div>
  <!-- end Column 2 -->
  <!-- Column 3 -->
  <div class="column_3">
    <h2>
      Колонка 3
    </h2>
  </div>
</div>

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

Ниже представлен простой SCSS-код для сетки:

.container{
  background-color: #fbeecb;

  .column_1,.column_3{
    background-color: #71dad2;
  }

  .column_2{
    background-color: #fae7b3;

    .column_2_1_1,.column_2_1_2{
      background-color: #ee9e9c;
    }

    .column_2_2_1{
      background-color: #f09671;
    }

    .column_2_2_2{
      background-color: #f6d784;

      .column_2_3_1,.column_2_3_2{
        background-color: #ee9e9c;
      }

      .column_2_4{
        background-color: #ea9fc3;
      }
    }
  }

  h1,h2{
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    padding: 1.8rem 0;
  }
}

Все готово для погружения в плагин Susy. Но перед началом необходимо немного остановиться на деталях этого плагина.

Наиболее важные функции и миксины плагина Susy

Прежде чем приступать к созданию сеток с помощью Susy, стоит кратко рассказать о трех наиболее важных функциях и миксинах данного плагина. Если вам удастся сразу же разобрать с этими тремя вопросами, вы сможете создавать с помощью Susy сетки практически любого вида и сложности.

Миксин Container

Первое, что необходимо сделать в разметке - это включить миксин

1
.container
. Тем самым подключаются все возможности плагина Susy для расчета и построения CSS-сеток.

Синтаксис этого миксина прост:

@include container( [<lenght>] );

Необязательный параметр

1
lenght
позволяет указать для блока-обертки максимальную ширину
1
max-width
. Если параметр не указан, то плагин Susy будет принимать значение максимальной ширины по умолчанию -
1
max-widht: 100%
.

Рабочий пример миксина

1
container
:

@include container;

Миксин span

Миксин span является основой плагина Susy. Обычно используется стандартный способ для вызова данного миксина:

@include span( <width> [<wide / wider>] of <layout> [<last>] );

Если до этого момента вы использовали плагин Susy версии 1, то должны были обратить внимание, что синтаксис этого миксина очень похож на синтаксис миксина

1
span-column
, с очень незначительными отличиями.

Давайте подробно остановимся на всех тонкостях синтаксиса миксина

1
span
:

  • 1
    
    width
    - количество колонок с создаваемой разметке;
  • 1
    
    wide / wider
    - необязательный параметр, который позволяет разделить колонку с помощью одного или двух gutter;
  • 1
    
    of
    - указывает Susy, что дальше идут параметры, связанные с разметкой;
  • 1
    
    layout
    - показывает ширину блока-обертки;
  • 1
    
    last
    - необязательный параметр, который говорит о том, что это последний элемент в ряду.

Пример создания колонки с помощью миксина

1
span
:

@include span( 3 wide of 9 last);

Функция span

Функция

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

.column{
  width: span(3 of 9);
}

Прелесть использования функции

1
span
в том, что в этом случае нет необходимости в запоминании миксинов для работы в
1
margin
или
1
padding
в плагине Susy, как это было в предыдущей его версии. Теперь можно использовать функцию
1
span
для установки точного значения ширины отступа:

.paddingLeft{
  padding-left: span(1 of 9);
}

Функция gutter

Функция

1
gutter
принимает только один аргумент:

margin-right: gutter(9);

Это и все основные функции и миксины плагина Susy, которые необходимо знать для работы с ним.

Создание разметки с помощью плагина Susy

Первый шаг, который мы сделаем для превращения HTML-кода в нужную разметку, это подключим миксин

1
container
:

.container{
  background-color: #fbeecb;
  @include container;
  @include clearfix;
  ...

Помимо миксина

1
container
, мы подключили еще один миксин -
1
clearfix
, так как внутри блока-обертки будут располагаться плавающие блоки. Если взглянуть на результат компиляции в CSS, то все станет очевидным: миксин
1
container
генерирует строки:

max-width: 100%;
margin-left: auto;
margin-right: auto;

а миксин

1
clearfix
создает CSS-строки:

overflow: hidden;
*zoom: 1;

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

1
pie-clearfix
. Данный миксин построен на методе, о котором говориться в статье известного CSS-гуру Никаласа Галлахера - A new micro clearfix hack.

Теперь перейдем к более мелким деталям разметки. Предположительно, вся ширина блока-контейнера будет у нас состоять из 10 колонок. На рисунке-эскизе будущий макет сайта должен состоять из трех колонок - двух узких боковых и одной центральной широкой.

Такую HTML-разметку мы и создали ранее в этой статье. Поэтому предположим, что две боковые колонки будут у нас шириной в 2 стобца из 10, а центральная колонка - из 6 столбцов из 10 ( 10 - (2 + 2) ).

Следовательно, блок с классами

1
.column_1
и
1
.column_3
дописываем миксин:

.column_1,.column_3{
  ...
  @include span(2 of 10);
}

Помимо этого, блоку с классом

1
.column_3
дописываем еще один миксин
1
last
, так как этот блок является последним в данном ряду:

.column_3{
  @include last;
}

Если заглянем в скомпилированный CSS-код, то увидим простую картину. Всем блокам задается одинаковая ширина в процентах, правый

1
margin
также в процентах. А вот если применен миксин
1
last
, то плавание блока меняется на противоположное и убирается правый
1
margin
:

.container .column_1, .container .column_3 {
  ...
  width: 18.36735%;
  float: left;
  margin-right: 2.04082%;
}

.container .column_3 {
  float: right;
  margin-right: 0;
}

Центральная колонка должна иметь у нас ширину в шесть столбцов и плавающие блоки внутри себя, поэтому задаем для нее два миксина:

.column_2{
    ...
    @include span(6 of 10);
    @include clearfix;

… что дает в результате CSS-код:

.container .column_2 {
  ...
  width: 59.18367%;
  float: left;
  margin-right: 2.04082%;
  overflow: hidden;
  *zoom: 1;
}

Отлично! Рассмотрим далее наш пример. Внутри центральной колонки в одном ряду расположены два блока, которые в сумме занимают всю ширину блока-контейнера (в данном случае это центральная колонка). Поэтому для двух этих блоков зададим одинаковый миксин:

.column_2_1_1,.column_2_1_2{
  ...
  @include span(3 of 6);
}

… и не забудем добавить для блока с классом

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

.column_2_1_2{
  @include last;
}

Смотрим на готовый CSS-код и видим, что ничего необычного не произошло - все предсказуемо:

.container .column_2 .column_2_1_1, .container .column_2 .column_2_1_2 {
  background-color: #ee9e9c;
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
}
.container .column_2 .column_2_1_2 {
  float: right;
  margin-right: 0;
}

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

1
.column_2_2_1
будет занимать 2 колонки из 6, а блок с классом
1
column_2_2_2
- 4 колонки из 6.

Кроме того, в блоке с классом

1
column_2_2_2
, в свою очередь, размещены еще два плавающих блока
1
column_2_3_1
,
1
column_2_3_2
, поэтому к нему нужно применить опять миксин
1
clearfix
:

.column_2_2_1{
  ...
  @include span(2 of 6);
}
.column_2_2_2{
  ...
  @include span(4 of 6 last);
  @include clearfix;
  .column_2_3_1,.column_2_3_2{
    ...
    @include span(2 of 4);
  }
  .column_2_3_2{
    @include last;
  }

CSS-результат применения этих миксинов показан ниже:

.column_2_2_1 {
  ...
  width: 31.03448%;
  float: left;
  margin-right: 3.44828%;
}
.column_2_2_2 {
  ...
  width: 65.51724%;
  float: right;
  margin-right: 0;
  overflow: hidden;
  *zoom: 1;
}
.column_2_3_1, .column_2_3_2 {
  ...
  width: 47.36842%;
  float: left;
  margin-right: 5.26316%;
}
.column_2_3_2 {
  float: right;
  margin-right: 0;
}

Последним у нас идет блок, который занимает всю ширину своего блока-родителя. В нему мы применим миксин

1
span(full)
и одновременно очистку через CSS-свойство
1
clear: both;
.

.column_2_4{
  ...
  @include span(full);
  clear: both;
}

… чтобы получился CSS-результат:

.container .column_2 .column_2_2_2 .column_2_4 {
  ...
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  clear: both;
}

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

Готовый шаблон, созданный с помощью Susy

Полный вариант кода можно посмотреть здесь - Susy Part 1

Думаю, на cегодня можно закруглиться с изучением Susy. Но, вообще эта тема очень интересная и положительная. В том плане, что для практической работы применение плагина Susy мне видится - в самый раз.

Это вам не неуклюжие 960gs или Blueprint. Тут все гибко и настраиваемо прямо на лету. Хочешь такую разметку - пожалуйста. А хочешь другую - да пожалуйста, Susy тебе пересчитает все в мгновение ока!

Думается мне, это не последняя статья, посвященная плагину Susy под библиотеку Compass.

Данная статья является вольным переводом и осмыслением оригинала - A Complete Tutorial to Susy 2


Отличный момент познакомиться с еще одной безграничной возможностью библиотеки Compass - это поработать с типографикой.

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

Убрать подчеркивание у ссылок в Compass

Начнем с простого и попробуем настроить вид и поведение ссылок с помощью Compass. Для этого необходимо подключить модуль в текущий проект в виде строки:

@import "compass/typography/links";

Затем создадим в HTML-файле пару параграфов с ссылками:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, eos, dolorum, eum blanditiis laudantium placeat aspernatur esse dolorem <a href="#">optio molestiae provident</a> nobis sint architecto dolores repudiandae magnam iste assumenda minima.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, nobis, maiores, quasi molestias dignissimos repellendus quis nemo quibusdam <a href="#">accusamus culpa numquam</a> voluptas sunt dolor inventore pariatur cumque a unde ut.</p>

… и применим к ссылкам миксин

1
hover-link
:

p {
  margin-bottom: 20px;

  a {
    @include hover-link;
  }
}

Если теперь посмотрим на скомпилированный вывод в CSS-файле, то увидим две до удивления простые строчки:

p a {
  text-decoration: none;
}

p a:hover {
  text-decoration: underline;
}

То есть, суть миксина

1
hover-link
в убирании подчеркивания у ссылки в ее обычном состоянии; и добавлении подчеркивания при состоянии hover. Попробуйте ввести показанный выше код в своем HTML-редакторе и посмотреть результат.

Изменение цвета ссылок в Compass

В Compass имеется миксин

1
link-colors
для управления цветом ссылок. То есть, с помощью этого миксина можно изменять стандартные цвета ссылки при ее различных состояниях.

Синтаксис миксина достаточно устрашающий, с первого взгляда:

link-colors($normal, $hover, $active, $visited, $focus)

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

<ul>
  <li>$normal - цвет обычного состояния ссылки</li>
  <li>$hover - цвет ссылки при наведенном на нее курсоре мыши</li>
  <li>$active - цвет ссылки в момент нажатия на нее</li>
  <li>$visited - цвет посещенной ссылки</li>
  <li>$focus - цвет ссылки, получившей фокус с клавиатуры</li>
</ul>

При этом только один из параметров миксина

1
link-colors
является обязательным -
1
$normal
. Остальные можно опустить и тогда будут использоваться цвета по умолчанию.

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

@import "compass/typography/links/link-colors"

Откроем таблицу цветов, расположенную по адресу w3schools - HTML Colors и наугад возмем оттуда пять цветов в HEX-формате, которые передадим миксину в качестве аргументов:

a{
  @include link-colors(#CC0000, #CC3300, #CC6600, #CC9900, #CCCC00);
}

В скомпилированном CSS-файле появиться несколько строчек такого вида:

p a:visited {
  color: #cc9900;
}

p a:focus {
  color: #cccc00;
}

p a:hover {
  color: #cc3300;
}

p a:active {
  color: #cc6600;
}

Введите показанный здесь код у себя и посмотрите на результат.

Сброс всех стилей для ссылок в Compass

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

Например, имеется параграф с классом

1
.woo
, внутри которого расположена ссылка. Применим к ней миксин
1
unstyled-link
для сброса всех стилей, предварительно подключив модуль:

@import "compass/typography/links/unstyled-link";
p.woo a {
  @include unstyled-link;
}

Посмотрим на результат компиляции кода в CSS и увидим такую картину:

p.woo a {
  color: inherit;
  text-decoration: inherit;
  cursor: inherit;
}

p.woo a:active,
.wrap p.woo a:focus {
  outline: none;
}

Ссылка наследует от параграфа (то есть - текста, входящего в этот параграф) свойства цвета, подчеркивание и вид курсора; а также убирается рамка

1
outline
при получении ссылкой фокуса или щелчка мыши по ней.

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

На этом все.


Плавный переход от простого CSS-фреймворка 960gs к чуть более сложному фреймворку Blueprint.

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

Что такое Blueprint

Этот фреймворк предназначен для сокращения времени на разработку front-end проектов (ну конечно - ведь задача всех без исключения CSS-фреймворков заключается именно в этом; они для этого и были созданы).

В отличие от фреймворка 960gs, фреймворк Blueprint предлагает более богатый набор предустановленных возможностей. Помимо CSS-сетки (grid), имеются стили для типографики, для печати, для браузеров IE.

Фреймворк Blueprint

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

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

Понятие “фреймворк” в данном контексте (имеется ввиду Blueprint) может вводить в заблуждение, так как Blueprint не поможет вам в задаче организации или написания CSS-кода.

Обзор структуры фреймворка Blueprint

Снизу вверх, перечислим CSS-слои, из которых состоит Blueprint:

  • CSS-reset - сброс стилей;
  • Типографика - предоставляет небольшой набор типографики и цветов оформления;
  • Grid - предоставляет набор CSS-классов, с помощью которых выполняется построение CSS-сетки.

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

Имеется два js-скрипта:

  • Compressor - для сжатия и обработки исходных файлов;
  • Validator - для валидации основных файлов фреймворка Blueprint;

Для того, чтобы начать работу с фреймворком Blueprint, необходимы (как минимум) три файла, подключенные к стартовой HTML-странице:

  • 1
    
    screen.css
    - весь CSS-код для вывода на устройства
    1
    
    screen
    и
    1
    
    projection
    ;
  • 1
    
    print.css
    - CSS-код для печати (вывод на принтеры);
  • 1
    
    ie.css
    - немного CSS-кода для корректной работы в браузерах IE.

Пример подключения вышеперечисленных файлов к HTML-странице показан ниже:

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

Обратите внимание, что пути расположения файлов

1
screen.css
,
1
print.css
и
1
ie.css
у вас могут отличаться от приведенного в примере.

Использование CSS в фреймворке Blueprint

Как уже упоминалось выше, в фреймворке Blueprint имеются три основных CSS-слоя. Первые два CSS-слоя - это сброс стилей (

1
reset.css
) и типографика (
1
typography.css
); они применяют свое действие ко всем стандартным HTML-элементам страницы.

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

Классы типографики в Blueprint

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

  • 1
    
    .small
    - делает размер шрифта меньше стандартного;
  • 1
    
    .large
    - делает размер шрифта больше стандартного;
  • 1
    
    .hide
    - скрывает HTML-элемент;
  • 1
    
    .quiet
    - делает цвет текста менее ярким;
  • 1
    
    .loud
    - делает цвет текста черным;
  • 1
    
    .highlight
    - добавляет желтый фоновый цвет к тексту;
  • 1
    
    .added
    - добавляет зеленый фоновый цвет цвет к тексту;
  • 1
    
    .removed
    - добавляет красный фоновый цвет к тексту;
  • 1
    
    .first
    - удаляет
    1
    
    padding-left
    и
    1
    
    margin-left
    у элемента;
  • 1
    
    .last
    - удаляет
    1
    
    padding-right
    и
    1
    
    margin-right
    у элемента;
  • 1
    
    .top
    - удаляет
    1
    
    padding-top
    и
    1
    
    margin-top
    у элемента;
  • 1
    
    .bottom
    - удаляет
    1
    
    margin-bottom
    и
    1
    
    padding-bottom
    у элемента;

Примеры типографики в Blueprint

Стилизация форм в Blueprint

Для стилизации форм (

1
forms.css
) в фреймворке Blueprint существует два класса -
1
.text
и
1
.title
. Класс
1
.text
делает текст элемента
1
input
обычным, а класс
1
.title
делает текст поля ввода
1
input
большего размера.

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

  • 1
    
    div.error
    - создает сообщение об ошибке (красный блок);
  • 1
    
    div.notice
    - создает информационное сообщение (желтый блок);
  • 1
    
    div.success
    - создает сообщение об успехе (зеленый блок).

Создание сетки

Третьим слоем (

1
grid.css
) фреймворка Blueprint являются классы для создания CSS-сетки - инструмент, с помощью которого можно создать сетку практически любого вида. Имейте ввиду, что практически любой участок CSS-кода в сетке может быть изменен (как это делается, показано ниже). В этой части инструкции используются настройки по умолчанию.

По умолчанию, во фреймворке Blueprint создается сетка из 24-х колонок, каждая из которых имеет ширину в 30px; между колонками имеется расстояние в

1
10px
, созданное через
1
margin
. Общая ширина сетки составляет 950px, что является оптимальной шириной для дисплеев размером
1
1024x768px
. Если вас интересует более узкий размер сетки, вам нужно обратиться к разделу с объяснениями настройки Blueprint.

Отлично! Но каким образом можно установить сетку на HTML-странице с помощью Blueprint? С помощью классов, предоставляемых этим фреймворком. Для того, чтобы создать новую колонку, воспользуйтесь тегом

1
<div>
и примените к нему класс вида
1
.span-x
.

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

<div class="container">
  <div class="span-24">The header</div>
  <div class="span-4">The first column</div>
  <div class="span-16">The center column</div>
  <div class="span-4 last">The last column</div>
  <div class="span-24">The footer</div>
</div>

Помимо класса

1
.span-x
существует еще пара классов, о которых необходимо обязательно знать. Во-первых, любой сайт, созданный с помощью Blueprint-сетки, должен иметь блок-обертку с классом
1
.container
, который, как правило, помещается сразу после тега
1
<body>
.

Во-вторых, последняя колонка в ряду (который по умолчанию может состоять из максимального числа - 24 колонок) должна иметь дополнительный класс

1
.last
для того, чтобы убрать
1
padding-right
и
1
margin-right
у последней. Колонка, имеющая класс
1
.span-24
, не нуждается в дополнительном классе
1
.last
, так как уже сама по себе занимает всю ширину сетки.

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

Ниже показан список дополнительных классов, которые могут пригодиться при создании сетки на Blueprint:

  • 1
    
    .append-x
    - добавляет
    1
    
    х
    колонок после указанной колонки;
  • 1
    
    .prepend-x
    - добавляет
    1
    
    х
    колонок перед указанной колонкой;
  • 1
    
    .push-x
    - сдвигает вправо колонку на указанное кол-во столбцов; может использоваться для смещения колонок;
  • 1
    
    .pull-x
    - сдвигает влево колонку на указанное кол-во столбцов; может использоваться для смещения колонок;
  • 1
    
    .border
    - создает границу с правой стороны колонки;
  • 1
    
    .colborder
    - создает пустую колонку, внутри которой (по середине вертикали) располагается граница
    1
    
    border
    ;
  • 1
    
    .clear
    - “очистка” потока;
  • 1
    
    .showgrid
    - добавьте к блоку-контейнеру или колонке для того, чтобы увидеть сетку или базовую линию

В этом списке

1
х
является числом в диапазоне от 1 до 23 применительно к классам
1
append\prepend
; и числом в диапазоне от 1 до 24 для классов
1
push\pull
. Эти значения будут меняться, если вы установите новое значение в качестве количества колонок в конфигурационном файле фреймворка.

Ниже показан еще один пример, в котором имеется четыре колонки одинаковой ширины, с границей между первыми двумя и последними двумя колонками, а также пустым промежутком (класс

1
.append-4
) посередине сетки шириной в четыре колонки:

<div class="container">
  <div class="span-5 border">The first column</div>
  <div class="span-5 append-4">The second column</div>
  <div class="span-5 border">The third column</div>
  <div class="span-5 last">The fourth (last) column</div>
</div>

Четыре колонки и класс .append-4

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

<div class="container">
  <div class="span-12">
    <div class="span-6">Top left</div>
    <div class="span-6 last">Top right</div>
    <div class="span-6">Bottom left</div>
    <div class="span-6 last">Bottom right</div>
  </div>
  <div class="span-12 last">Second half of page</div>
</div>

Вложенность в Blueprint

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

1
/tests/parts/grid.html
.

Скрипты

Фреймворк Blueprint имеет в своем составе два скрипта: один для сжатия и кастомизации CSS-файлов; второй для валидации CSS-файлов, составляющих основу фреймворка - это особенно полезно, если вы вручную вносили в них изменения.

Валидатор

Задача файла-валидатора предельно проста - проверить валидность основных CSS-файлов фреймворка. Для выполнения этой задачи скрипт имеет в своем комплекте версию W3C CSS валидатора. Для того, чтобы запустить скрипт, необходим установленный язык Ruby на компьютере. Скрипт запускается из терминала командой:

$ruby validate.rb

Компрессор

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

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

Для того, чтобы сжать файл, необходимо просто запустить скрипт. Скрипт выполнит парсинг основных CSS-файлов и поместит новые сжатые файлы в папку проекта Blueprint. Также как и валидатор, компрессор должен быть установлен через Ruby. После установки скрипт его можно запустить из терминала с помощью команды:

$ruby compress.rb

Вызов файла скрипта без указания дополнительных параметров произведен извлечение файлов из папки

1
blueprint/src
и произведен их сжатие до трех файлов -
1
ie.css
,
1
print.css
,
1
screen.css
. Однако, с помощью аргументов можно изменить алгоритм работы скрипта.

Например, команда:

$ruby compress.rb -h

… покажет список аргументов, которые можно использовать совместно со скриптом.

Пользовательские настройки

Узнать больше о том, как применять пользовательские настройки, можно в документации к скрипту, расположенной по адресу

1
lib/compress.rb
.

На этом статья закончена.


Приступаем к интересной теме - вертикальному ритму “Vertical Rhythm” в веб-дизайне и способе его создания с помощью библиотеки Compass.

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

Ну, во-первых, в Интернете на момент написания статьи не так уж и много материалов по этой тематике; в немногочисленных материалах сущность вопроса преподносится как нечто очень сложное.

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

Vertical Rhythm - Школьная тетрадь в линейку

Так вот - сами не зная об этом, мы уже тогда использовали вертикальный ритм (Vertical Rhythm) на практике! Слово вертикальный ритм говорит само за себя - текст или контент на странице должен размещаться в определенном ритме, по определенному правилу; а не хаотично.

В данном случае все строки на такой странице должны размещаться по нарисованным линейкам - это и есть суть пресловутого Vertical Rhythm.

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

1
font-size
), высотой строки(
1
line-height
), отступами (
1
padding
и
1
margin
), границами (
1
border
).

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

В библиотеке Compass имеется модуль “Vertical Rhythm”, задача которого - максимально упростить создание и настройку вертикального ритма в проекте. Модуль Vertical Rhythm в Compass - это набор функций и миксинов, облегчающих вычисление высоты строк, вертикального

1
padding
и
1
margin
, толщины границ (
1
border
).

Вычисления основаны на базовой высоте строки

1
line-height
и базовом размере шрифта
1
font-size
с целью создания горизонтальной сетки. Давайте приступим к практике; то, что я не смог рассказать своими словами, думаю, будет наглядно показано на живых примерах.

Первое, что необходимо сделать - это установить (если еще не установлена) Compass версии

1
1.0.0 alpha 19
. Почему именно эту версию? В ней есть множество возможностей, которые отсутствуют в старой версии.

Установка Compass этой версии под Windows 7 на момент написания статьи является достаточно непростой задачей, поэтому рекомендую обратиться к статье “Медиа-запросы Breakpoint в Sass”.

Создаем и настраиваем проект в Compass

Создаем новый проект в командной строке с помощью Compass:

compass create vertical_rhythm_example --bare

Ключ

1
--bare
используется здесь, чтобы создать “голый” экземпляр проекта под Sass/Compass, без лишних файлов
1
print.scss
,
1
ie.scss
и так далее.

Производим неодходимые настройки в файле

1
config.rb
, а также создаем файлы
1
sass/style.scss
,
1
css/style.css
,
1
index.html
.

HTML-файл наполним структурой вида:

<div class="wrapper">
  <h1>header 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, architecto laborum quas iste nam maxime tempora temporibus inventore? Rerum, obcaecati porro officiis temporibus assumenda dicta odit ullam dolore vero laborum!</p>
  <h2>header 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, accusantium, amet, molestiae quas dolore deleniti non aut quis inventore repudiandae nostrum porro alias dolor pariatur rem sequi ea consequatur perferendis.</p>
  <h3>header 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, iusto, iure, quia ipsum dolore ea exercitationem porro et nostrum nam cumque hic possimus dolorem deleniti distinctio incidunt magnam earum quis.</p>
  <h4>header 4</h4>
  <img src="http://placehold.it/700x300" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, omnis, ut, quis, nesciunt voluptatum rem dolor dolores amet vel sit error laboriosam quasi accusamus magnam neque sunt exercitationem molestias! Aperiam!</p>
  <h5>header 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, libero illum numquam sed quas. Assumenda, porro, suscipit, veniam, cum deleniti illo magnam harum ab earum obcaecati odit ad quo laudantium?</p>
  <img src="http://placehold.it/500x200" />
  <h6>header 6</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, consectetur quod saepe unde corrupti tenetur minus nesciunt obcaecati tempore ut facere iusto pariatur corporis itaque eius? Doloribus, quaerat modi nihil.</p>
</div>

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

В файле

1
style.scss
подключаем сброс стилей Compass и модуль вертикального ритма:

@import "compass/reset";
@import "compass/typography/vertical_rhythm";

Сделаем небольшую стилизацию для блока

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

.wrapper{
  max-width: 960px;
  margin: 0 auto;
  background-color: hsla(240,100%,50%,.2);
}

h1,h2,h3,h4,h5,h6{
  font-weight: 700;
  text-transform: capitalize;
  background-color: hsla(120,100%,50%,.2);
}

p{
  background-color: hsla(0,100%,50%,.1);
}

img{
  max-width: 100%;
  margin: auto;
  display: block;
}

Основные переменные в Vertical Rhythm

В модуле “Vertical Rhythm” библиотеки Compass имеется множество переменных, но среди них есть только две основные, которые необходимы для расчетов внутри этого модуля:

$base-font-size: 22px;    // базовый размер шрифта
$base-line-height: 33px;  // базовое межстрочное расстояние

Значение переменной

1
$base-line-height
(как правило) равно выражению
1
$base-font-size * 1.5
, поэтому
1
22px * 1.5 = 33px
. Значение переменной
1
$base-font-size
в
1
22px
взято в качестве примера.

Помимо этого, есть еще две дополнительные переменные:

$rhythm-unit: "rem";         // базовая единица измерения (по умолчанию em)
$rem-with-px-fallback: true; // откат к единицам измерения px в браузерах, которые не понимают единицу rem

Включаем Vertical Rhythm

После ввода четырех вышеперечисленных переменных осталось только инициализировать модуль Vertical Rhythm” с помощью миксина:

@include establish-baseline;

Миксин

1
establish-baseline
делает простые вещи - он устанавливает
1
font-size
и
1
line-height
для корневого тега
1
<html>
. Но делает он это с помощью относительных единиц измерения.

Допустим, в своем проекте мы установили размер шрифта

1
22px
и высоту строки
1
33px
. Если взглянуть на результат компиляции из SCSS в CSS, то увидим следующее:

html {
  font-size: 137.5%;
  line-height: 1.5em;
}

Размер шрифта

1
16px
является установленным по умолчанию в большинстве браузеров, поэтому
1
16px = 100%
. Следовательно,
1
22px = 137.5%
.

Относительная величина

1
line-height
всегда относительна к размеру шрифта
1
font-size
текущего элемента, поэтому в данном случае она равна 1.5em (
1
22px * 1.5 = 33px
).

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

Чтобы еще более наглядно представить картину структурированного контента, воспользуемся миксином:

body{
  @include debug-vertical-alignment;
}

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

Margin и padding в Vertical Rhythm

Но строки, заголовки и изображения все равно тесно прижаты друг к другу. В модуле Vertical Rhythm имеются свои собственные инструменты для создания отступов у элементов контента, в основе которых лежит опять таки базовый размер шрифта (вот он - тот самый ритм!):

$base-font-size * 1

Для элемента страницы можно задать

1
margin-top
или
1
padding-top
,
1
margin-bottom
или
1
padding-bottom
. Реализуется это с помощью специальных миксинов (на выбор, один из четырех):

p{
  background-color: hsla(0,100%,50%,.1);

  @include margin-trailer;  // margin-bottom
  @include margin-leader;   // margin-top

  @include padding-trailer; // padding-bottom
  @include padding-leader;  // padding-top
}

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

p{
  background-color: hsla(0,100%,50%,.1);

  @include trailer($lines: 2, $property: margin); // margin-bottom на 2 строки
  @include trailer($lines: 2, $property: padding); // padding-bottom на 2 строки

  @include leader($lines: 2, $property: margin); // margin-top на 2 строки
  @include leader($lines:3, $property: padding); // padding-top на 3 строки
}

Одновременно задать

1
margin-top + margin-bottom
или
1
padding-top + padding-bottom
можно с помощью миксинов:

p{
  background-color: hsla(0,100%,50%,.1);

  @include rhythm-margins; // margin-top + margin-bottom
  @include rhythm-padding; // padding-top + padding-bottom
}

Миксин

1
@include rhythm
является глобальным сокращением вышеназванных миксинов для создания отступов
1
margin
или
1
padding
.

Создание границ в Vertical Rhythm

Отступы можно совмещать с границами

1
border
. То есть, можно (к примеру) создать верхний
1
padding
с верхней границей
1
border
.

Толщина границы и ее стиль управляются через переменные

1
$default-rhythm-border-width
и
1
$default-rhythm-border-style
. По умолчанию толщина границы равна
1
1px
, а ее стиль -
1
solid
.

p{
  background-color: hsla(0,100%,50%,.1);

  @include leading-border; // padding-top + border-top
  @include trailing-border; // padding-bottom + border-bottom
  @include horizontal-borders; // padding-top + border-top и padding-bottom + border-bottom
  @include h-borders; // alias для horizontal-borders
}

Одновременно задать

1
padding
и
1
border
для всех четырех сторон можно через миксин:

p{
  background-color: hsla(0,100%,50%,.1);
  @include rhythm-borders; // padding + border
}

Указать границу и отступ для какой-то одной стороны можно с помощью миксина:

p{
  background-color: hsla(0,100%,50%,.1);
  @include apply-side-rhythm-border($side: left);
}

Произвольный размер шрифта в Vertical Rhythm

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

1
adjust-fonts-size-to
.

Давайте изменим размер заголовков таким образом, чтобы они отличались от основного текста (и были действительно заголовками):

h1{
  @include adjust-font-size-to(2.074rem);
}

h2{
  @include adjust-font-size-to(1.728rem);
}

h3{
  @include adjust-font-size-to(1.44rem);
}

h4{
  @include adjust-font-size-to(1.2rem);
}

h5{
  @include adjust-font-size-to(1rem);
}

h6{
  @include adjust-font-size-to(0.833rem);
}

Или же, допустим, нужно установить для заголовка первого уровня

1
h1
размер шрифта в
1
42px
. Микcин будет выглядеть таким образом:

h1{
  @include adjust-font-size-to(42px);
}

Первым делом, этот миксин делает размер шрифта элемента

1
h1
относительным к размеру шрифта элемента-контейнера. В нашем случае таковым является элемент
1
html
, поэтому размер шрифта равен
1
22px
. Соответственно, размер шрифта для
1
h1
получается (
1
42 / 22 = 1.90909
):

font-size: 1.90909rem;

Вторым делом миксин заново вычисляет высоту строки для нашего заголовка

1
h1
. Делает он это таким образом:

1.90909rem * 1.5 = 3rem (округленно)
22 * 3rem = 66px

Конечный результат показан ниже:

h1 {
  font-size: 42px;
  font-size: 1.90909rem;
  line-height: 66px;
  line-height: 3rem;
}

Отлично, правда? Вся прелесть в том, что показанные выше расчеты можно с легкостью забыть - модуль “Vertical Rhythm” каждый раз будет вычислять размер шрифта и высоту строки сам, не “напрягая” нас.

Помимо указания размера шрифта в качестве аргумента, миксину

1
adjust-fonts-size-to
можно также передать количество линий, которое должен занимать заголовок. Например, так:

h3{
  @include adjust-font-size-to(1.44rem,1);
}

Если вы попробуете у себя, то сразу увидите результат.

Выравнивание изображений в Vertical Rhythm

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

Смещение в вертикальном ритме

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

Происходит это потому, что изображение мы сделали блочным элементом и присвоили ему фиксированные размеры в пикселях в HTML-коде:

<img src="http://placehold.it/700x350" />
...
<img src="http://placehold.it/500x250" />
...

Исправить ситуацию можно с помощью плагина “Keep The Rhythm” под jQuery - Keep The Rhythm. Вдаваться в подробности работы этого плагина я не буду, а сразу покажу, как он подключается и результат его работы.

Получаем с GitHub библиотеку jQuery и сам плагин к ней:

jquery-1.9.1.min.js
jquery.keeptherhythm.js

Подключаем к HTML-странице в ее конце. И затем создаем небольшой скрипт. Смотрим результат:

Плагин Keep_The_Rhythm в действии

Все получилось! Однако, стоит заметить, что приведенный выше пример является упрощенным. Достаточно изменить масштаб страницы в окне браузера, и вертикальный ритм поломается.

Поэтому плагин “Keep The Rhythm” необходимо применять в связке с медиа-запросами для правильной его работы. По крайней мере, если возникнет вопрос по работе этого плагина, то документация на официальной странице всегда под рукой.

Заключение

Основой для написания этой статьи послужили два материала (видео и статья):


В первую очередь, что за загадочное слово -

1
permalink
? Все просто - это сокращение от permanent link - постоянная ссылка.

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

http://localhost/word1/?p=123

Ужасающий в том смысле, что такая ссылка для человека совершенно не читаемая. Сможете ли вы сказать, что находится по адресу, указанному в этой ссылке? Конечно нет!

Это для системы CMS WordPress понятно, что в этой ссылке указан адрес на пост с

1
id=123
(порядковый номер записи 123). И если система покопается в своей базе данных, то она (может быть) найдет запись с таким идентификатором и выдаст ее “на гора”. А для человека такая запись ни о чем не говорит.

Поэтому в настройках WordPress имеется специальный раздел, в котором можно настроить вид постоянных ссылок на понятный человеку (ЧПУ - Человеко-Понятный Урл). Размещен этот раздел по адресу “Настройки” - “Постоянные ссылки”.

Система WordPress предлагает на выбор пять вариантов постоянных ссылок (permalink) - один по умолчанию и четыре готовых (на выбор):

  • День и название поста - http://localhost:7788/third/2014/04/20/sample-post/
  • Месяц и название поста - http://localhost:7788/third/2014/04/sample-post/
  • Цифры - http://localhost:7788/third/archives/123
  • Название записи - http://localhost:7788/third/sample-post/

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

Но, помимо этих четырех permalink, имеется еще один вариант:

  • Произвольно - http://localhost:7788/third

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

  • %year% - год публикации записи (2014)
  • %monthnum% - порядковый номер месяца публикации записи (05)
  • %day% - порядковый день месяца публикации записи (21)
  • %hour% - час публикации записи (09)
  • %minute% - минута публикации записи (12)
  • %second% - секунда публикации записи (13)
  • %post_id% - идентификатор записи (123)
  • %postname% - имя записи (about-the-permalink)
  • %category% - категория записи (wordpress)
  • %author% - автор записи (zencoder)
  • %tag% - метка записи (css)

Благодаря этим переменным можно создать permalink практически любого вида и под любые потребности.

К примеру, для блога с регулярными записями без тематики подойдет permalink следующей конструкции:

/%year%/%monthnum%/%day%/%postname%/

// Пример:
http://localhost:7788/third/%year%/%monthnum%/%day%/%postname%/

Для блога с нерегулярными записями и записи без тематики подойдет permalink вида:

/url/%postname%/

// Пример:
http://localhost:7788/third/url/%postname%/

Для блога с регулярными тематическими записями подойдет краткий permalink:

/%category%/%postname%/

// Пример:
http://localhost:7788/third/%category%/%postname%/

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

Еще одним важным моментом при самостоятельной настройке permalink является то, что любая из них должна заканчиваться переменной %postname% или %post_id%. В этом случае каждая из существующих в системе WordPress permalink будет указывать на конкретную запись. Если вы посмотрите на примеры выше, то заметите, что ссылки построены именно по такому принципу.

Данный материал является отрывком из книги Криса Койера “Digging Into WordPress”, пересказанным автором сайта своими словами.

На этом все.