Вступление

Сегодня приступим к знакомству с системой построения сеток jeet.gs.

Читатели могут спросить - отлично, но чем плоха Susy? Ответ прост - Susy работает на Ruby, она просто несовместима со Stylus.

Так как с недавнего времени я перешел с Sass(SCSS) на Stylus и совсем не жалею об этом, то сразу принялся искать замену Susy. Надо сказать, я быстро ее нашел и этой заменой оказалась jeet.gs. “Grid system для людей” - как ее “обозвали” в прекрасном task runner CodeKit. Кстати, сам факт присутствия jeet.gs в CodeKit говорит за себя.

Система jeet.gs изначально адаптивная, она проста в использовании и изучении. Если честно, Susy я так до конца и не освоил (только необходимые основы), так как она достаточно сложна в изучении, несмотря на прекрасную документацию. Еще можно сказать, что jeet.gs очень молода - ей всего 9 месяцев и поэтому я с вами, уважаемый читатель, иду в ногу со временем, я на cutting edge!

Существование и использование jeet.gs имеет мало смысла без системы контрольных точек (breakpoint). В Susy в этом качестве служит хороший инструмент Breakpoint. Под jeet.gs конечно же существует аналог под названием Rupture. Эта система также проста и наглядна, как и jeet.gs.

Стоит также оговориться, что под Stylus имеются не менее прекрасные проекты Typographic и Axis, с которыми я планирую познакомиться в свое время.

Jeet.gs - grid system под Stylus

Итак, фанфары прозвучали в честь обоих героев сегодняшнего дня. Пора приступать к более детальному знакоству с ними. И начнем с главного героя - системы сеток (grid system) jeet.gs.

Установка Jeet.gs под Stylus

Любое знакомство начинается с установки пакета. На официальной странице jeet.gs прекрасно оформлено описание инсталляции - она проста. Кстати, стоит оговориться, что jeet.gs можно установить и под Sass(SCSS). Но я этого делать не буду - мне это не интересно и не нужно.

Предполагается, что у читателя рабочей операционной системой является MacOSX или Linux OS (все команды в этой статье будут показаны применительно к этим двум родственным системам). Также предполагается, что в любой из этих систем уже установлены Node.js и Stylus (иначе вы немного забежали вперед, уважаемый читатель).

Установка jeet.gs выполняется одной строкой:

sudo npm install jeet --global

Далее библиотека jeet.gs импортируется в файл проекта

1
*.styl
с помощью директивы
1
@import
:

@import 'jeet'

После этого можно запустить мониторинг и компиляцию командой:

sudo stylus -u jeet -w style.styl

где

1
-u
- это сокращение от
1
--using
,
1
-w
- от
1
--watch
. То есть, мониторить (watch) все изменения файла
1
style.styl
и при этом учитывать (
1
using
) возможности подключенной библиотеки jeet.gs.

Пакет jeet.gs можно заставить работать несколько иначе - крутиться под Gulp. Для этого достаточно правильно оформить файл

1
gulpfile.js
:

var gulp = require('gulp'),
...
nib = require('nib'),
jeet = require('jeet'),
rupture = require('rupture');


// STYLUS WITH NIB AND JEET AND RUPTURE
gulp.task('stylus', function(){
  gulp.src('app/styles/style.styl')
    .pipe(plumber())
    .pipe(stylus({use:[nib(),jeet(),rupture()]}))
    .pipe(gulp.dest('dist/'));
});

Возможности Jeet.gs

С документацией по jeet.gs можно ознакомиться на оф. сайте в разделе Jeet’s API или же на страничке GitHub - jeet/stylus.

Функция column()

Синтаксис:

column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter)

Основой любой современной grid system являются колонки\столбцы -

1
column
. Так как jeet.gs изначально является адаптивной системой, то задать ширину column можно как дробную часть от ширины блока-контейнера -
1
1/3
,
1
1/6
,
1
1/10
,
1
1/100
и так далее. Не обязательно можно задавать в виде дроби, можно в десятичном виде -
1
.3
,
1
.25
,
1
.15
.

Пример задания ширины для двух блоков

1
.sidebar
и
1
.main
. В обоих случаях используется функция
1
column()
, у которой есть более используемое сокращение -
1
col()
:

.sidebar
  col(1/4)
.main
  col(3/4)

Функция

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

Смещение колонок\столбцов выполняется с помощью аргумента

1
offset
, который может принимать как положительное, так и отрицательное значение. Положительное значение
1
offset
задает у столбца
1
margin-left
- и столбец смещается влево. Отрицательное значение задает
1
margin-right
- и блок смещается вправо.

.block
  column(1/3, offset: 1/4)

Аргумент

1
cycle
позволяет создавать галлереи. Допустим, необходимо создать галлерею из картинок, в которой должно быть 4 (четыре) картинки в ряду. Тогда для функции
1
column()
задаем параметр
1
cycle: 4
:

.block
  column(1/3, cycle: 4)

Аргумент

1
uncycle
позволяет создавать мобильные версии галерей. Допустим, desktop-версия галлереи -
1
column(1/3, cycle: 4)
. Чтобы создать мобильную версию этой галлереи, в которой картинки будут располагаться по две в ряд, достаточно прописать так:

.block
  column(1/3, uncycle: 4, cycle: 2)

Аргумент

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

.block
  column(1/3, uncycle: 4, cycle: 2, gutter: .5)

Функция span()

Синтаксис:

span(ratio = 1, offset = 0)

Эта функция является своего рода облегченным вариантом функции

1
column()
. Функция
1
span()
не “понимает” такого свойства, как отступы
1
gutter
у блоков. По одной простой причине - функция
1
span()
создает разметку из блоков, плотно прилегающих друг к другу, без
1
margin
.

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

.nav
  cf()
  a
    span(1/8)

Функция shift()

Синтаксис:

shift(ratios = 0, col_or_span = column, gutter = jeet.gutter)

Эта функция служит для изменения порядка расположения элементов в нормальном потоке, с помощью свойства

1
position: relative
. Величина смещения задается аргументом
1
ratios
и применяется подобное смещение в виде свойства
1
left
к блоку. При этом функции
1
shift()
с помощью задания или не задания аргумента
1
gutter
можно указать, является ли данный блок столбцом (через функцию
1
column()
) или блоком span (через функцию
1
span()
).

Функция

1
shift()
точно также, как и аргумент
1
offset
, может принимать отрицательные значения для изменения направления смещения блока. Также, функция
1
shift()
может принимать не только целые, но и дробные значения для точного позиционирования.

Функция unshift()

Синтаксис - отсутствует

Эта функция не принимает каких-либо аргументов. Ее задача - отменить действие функции

1
shift()
.

Функция edit()

Синтаксис - отсутствует

Данная функция не создает разметку напрямую. Ее задача - помочь в создании разметки. С ее помощью каждый элемент на странице окрашивается в определенный оттенок серого цвета. Это помогает визульно контролировать правильность процесса создания разметки.

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

edit()

Вид разметки будет примерно таким:

Функция edit() в jeet.gs

Функция center()

Синтаксис:

center(max-width = 1410px, pad = 0)

Задача функции

1
center()
- быстро и грамотно выполнять центрирование блока в разметке. Как видно из синтаксиса, функция принимает два аргумента:

  • максимальную ширину
    1
    max-width
    
    , равную по умолчанию
    1
    1410px
    
    ;
  • 1
    padding-left
    
    и
    1
    padding-right
    
    для блока, задаваемые в виде шортката
    1
    pad
    
    и равного нулю по умолчанию; то есть, нельзя управлять
    1
    padding-left
    
    и
    1
    padding-right
    
    по отдельности - только одно значение сразу для двух свойств.

Функция cf()

Синтаксис - отсутствует

Данная функция - это всего лишь

1
clearfix
от Nicholas Gallagher. Думаю, дальнейшее объяснение излишне. Принимать - маленькими дозами для любых блоков с
1
column()
или
1
span()
.

Функция align()

Функция для выравнивания блока внутри блока-контейнера с помощью

1
position: absolute
. Вертикальное выравнивание в браузерах IE9+ теперь простая вещь.

Функция stack()

Синтаксис:

stack(pad = 0, align = false)

Данная функция предназначена для расположения блоков стопкой (stack), друг над другом. Такой вид расположения блоков применим для модильной версии страницы. Функция

1
stack()
принимает два вида аргументов:

  • 1
    pad
    
    - отступы
    1
    padding-left
    
    и
    1
    padding-right
    
    для блока;
  • 1
    align
    
    - выпавнивание текста внутри блока.

Функция unstack()

Синтаксис - отсутствует

Данная функция отменяет действие функции

1
stack()
. Однако, действие этой функции не возвращает разметку к прежнему виду, с применением функции
1
column()
. Чтобы вернуть разметку к такому результату, необходимо снова использовать функцию
1
column()
.

Настройки Jeet.gs

Настройки системы jeet.gs очень просты. Первоначально необходимо создать файл

1
_settings.styl
, который нужно подключить в файл стилей директивой
1
@import '_settings'
. При этом необходимо, чтобы строка
1
@import '_settings'
размещалась сразу после строки
1
@import 'jeet'
.

Содержимое файла настроек

1
_settings.styl
- это несколько переменных:

  • 1
    jeet[‘gutter'] = 3
    
    - размер ширины gutter в процентах, от общей ширины страницы
  • 1
    jeet[‘parent-first'] = false
    
    - если сказать коротко, каким образом будет производиться вычисление ширины блока; относительно конкретного блока-родителя; или же относительно корневого блока-родителя
  • 1
    jeet[‘layout-direction'] = LTR
    
    - направление текста внутри разметки

Заключение по Jeet.gs

Итак, познакомились с системой создания разметки jeet.gs. На удивление, она оказалась проста и достаточно полчаса, чтобы разобраться в ней. Не сравнить с Susy, конечно.

Но этого мало, естественно. Хотелось бы посмотреть на живые примеры сайтов, созданных с помощью jeet.gs. В этом вопросе может помочь сам официальный сайт Jeet.gs - милости просим.

Создано по материалам:

P.S.

В данной статье возможны (и 100% - что есть) неточности и мелкие ошибки. Это и понятно - это мое первое знакомство с Jeet.gs. Поэтому, если будут замечания - милости просим.

На этом все.


Наверное, это очередная бестолковая вещь, которую мои руки так и чешутся сделать.

И раз у меня есть на это время и нет сил на что-либо еще, то тогда уж точно - напишу! “О чем?” - может спросить уважаемый читатель. О тегах WordPress!

“О Боже!” - это в полном праве может сказать читатель - но ведь есть же Кодекс WordPress! Зачем еще?!”

Ну что же - очень и очень резонно! В качестве оправдания могу лишь привести две вещи.

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

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

Вторая причина - я так быстрее запомню все эти теги WordPress.

Итак - ниже представлен список “практичных” тегов WordPress с их кратким описанием. Все теги условно мною разбиты на области их применения в теме WordPress.

Теги шаблона WordPress

Выводит название сайта:

<?php bloginfo('name'); ?>

Выводит описание сайта:

<?php bloginfo('description'); ?>

Возвращает ссылку на главную страницу сайта:

<?php bloginfo('url'); ?>

Возвращает кодировку сайта (под WordPress это всегда utf–8):

<?php bloginfo('charset'); ?>

Также возвращает ссылку на главную страницу сайта:

<?php echo get_home_url(); ?>

Возвращает путь к файлу стилей style.css темы WordPress (устарело и не рекомендуется использовать):

<?php bloginfo('stylesheet_url'); ?>

Возвращает путь к текущей теме WordPress:

<?php bloginfo('template_url'); ?>

Также возвращает путь к текущей теме WordPress:

<?php echo get_directory_template_uri(); ?>

Возвращает язык сайта (страницы):

<?php language_attributes(); ?>

Возвращает e-mail администратора сайта:

<?php bloginfo('admin_email'); ?>

Возвращает заголовок просматриваемой статьи или записи:

<?php wp_title(); ?>

Подключить файл шаблона header.php:

<?php get_header(); ?>

Подключить файл шаблона sidebar.php:

<?php get_sidebar(); ?>

Подключить файл шаблона footer.php:

<?php get_footer(); ?>

Запуск action в шапке и подвале страницы, обе функции необходимы для правильной работы некоторых плагинов и всей темы WordPress в целом:

<?php wp_head(); ?>
  • помещается перед тегом
<?php wp_footer(); ?>
  • помещается перед тегом

Подключить файл шаблона комментариев:

<?php comments_template(); ?>

Вывод текущего года в шаблоне WordPress:

<?php echo date('Y'); ?>

Теги записи WordPress

Выводит заголовок текущей страницы или записи:

<?php the_title(); ?>

Возвращает ссылку на текущую страницу или запись:

<?php the_permalink(); ?>

Выводит отрывок (цитату) записи с помещением в конец этой цитаты символов […] (может существовать только внутри цикла loop):

<?php the_excerpt(); ?>

Выводит полное содержимое (весь текст) текущей записи (может существовать только внутри цикла loop):

<?php the_content(); ?>

Выводит имя автора записи:

<?php the_author(); ?>

Выводит время (дату) публикации текущей записи:

<?php the_time(); ?>

Стандартный цикл loop для вывода записей в шаблоне WordPress:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <?php endwhile; ?>
<?php endif; ?>

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

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php the_content(); ?>
  <?php endwhile; ?>
<?php endif; ?>

Возвращает ссылку на предыдущую запись:

<?php previous_post_link(); ?>

Возвращает ссылку на следующую запись:

<?php next_post_link(); ?>

Вывести теги записи (может существовать только внутри цикла loop):

<?php the_tags(); ?>

Вывести ссылку на комментарии к записи (может существовать только внутри цикла loop):

<?php comments_popup_link(); ?>

Вывести миниатюру записи внутри самой записи:

<?php the_post_thumbnail(); ?>

Вывод миниатюры по умолчанию, если не задана другая миниатюра:

<?php if(has_post_thumbnail()): ?>
  <?php the_post_thumbnail(); ?>
  <?php else: ?>
    <img src="<?php bloginfo('template_url'); ?>/images/image.jpg" alt="Image">
<?php endif; ?>

Вывести (создать) постраничную навигацию (пагинация):

<?php posts_nav_link(); ?>

Подключить виджет в шаблоне WordPress:

<?php if(!dynamic_sidebar('идентификатор виджета')) : ?>
<?php endif; ?>

Функции файла functions.php

Поставить на загрузку файл js-скриптов:

wp_enqueue_script();

Поставить на загрузку файл CSS-стилей:

wp_enqueue_style();

Пример функции для загрузки скриптов и стилей:

function load_scripts_and_styles(){
	wp_enqueue_script('jquery_custom',get_directory_template_uri().'/js/my-jquery.js');
	wp_enqueue_script('js_custom',get_directory_template_uri().'/js/my-js.js');
	wp_enqueue_style('style',get_directory_template_uri().'/style.css');
}
add_action('wp_enqueue_scripts','load_scripts_and_styles');

Зарегистрировать новую панель под виджеты в шаблоне WordPress:

register_sidebar()
  'name' => 'имя новой панели',
  'id' => 'идентификатор новой панели',
  'description' => 'описание новой панели',
  'before_widget' => '',
  'after_widget' => '',
  'before_title' => '',
  'after_title' => ''

Включить возможность применения миниатюр в шаблоне WordPress:

add_theme_support('post-thumbnails');

Установить размер миниатюр в шаблоне по умолчанию:

set_post_thumbnail_size($width,$height);

Шаблон с метаданными темы WordPress:

/*
  Theme Name: Имя темы
  Theme URI: Домашняя страница темы
  Description: Краткое описание темы
  Author: Имя автора темы
  Author URI: Домашняя страница автора темы
  Version: Номер версии темы
*/

Будет дополняться (возможно).


Легкое знакомство с библиотекой Nib под препроцессор Stylus. Эта библиотека является тем же самым, что Compass или Bourbon под препроцессор Sass.

Библиотека миксинов Nib написана под препроцессор Stylus и является аналогом более известных библиотек Compass или Bourbon под препроцессор Sass. С самим препроцессором Stylus я с вами познакомился немного раньше - скажем так, это было краткое и легкое знакомство.

Библиотека Nib проживает по адресу - Nib GitHub. Она маленькая и легкая, но должна быть полезной. Поэтому мне необходимо с ней познакомиться поближе.

Установка библиотеки Nib

В Сети мною было найдено два способа установки данной библиотеки:

  • с использованием GitHub
  • с использованием менеджера пакетов npm

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

Если вдруг в системе еще не установлен препроцессор Stylus, то первоначально необходимо установить его командой:

$ sudo npm install stylus --global

Не забудьте добавить ключ

1
--global
, чтобы препроцессор установился глобально в системе.

Установка библиотеки Nib почти ничем не отличается от установки препроцессора и выполняется командой:

$ sudo npm install nib --global

Отлично! Все, что теперь осталось сделать - это подключить библиотеку в текущий проект (текущий рабочий Stylus-файл).

Это выполняется директивой

1
@import
:

@import 'nib'

Проверим, что библиотека подключена без ошибок и отрабатывает в проекте\файле. Для этого запишем в файле

1
style.styl
несколько миксинов этой библиотеки и “натравим” на файл
1
style.styl
утилиту
1
stylus
с несколькими ключами:

$ stylus -u nib -w style.styl

здесь:

  • 1
    -u nib
    
    - говорит о том, что при компиляции в CSS должно учитываться наличие библиотеки Nib
  • 1
    -w style.styl
    
    - мониторить изменения в файле
    1
    style.styl
    
    и своевременно выполнять его компиляцию в CSS

Посмотрим на результат компиляции Stylus в CSS - очень уж любопытно, получилось ли?

Библиотека Nib в действии

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

Ну это решается просто - достаточно на этот CSS-файл натравить Gulp-плагины gulp-csscomb и gulp-autoprefixer.

Главное - библиотека подключена и работает!

Nib - как подружить с Gulp

До этого момента мною использовалась нативная утилита

1
stylus
для компиляции из формата Stylus в формат CSS. И в том числе - с поддержкой библиотеки Nib.

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

1
stylus
- я сомневаюсь, что кому-либо пригодиться.

Гораздо практичнее использование Gulp, у которого есть соответствующий плагин gulp-stylus для компиляции из формата Stylus в CSS.

Этот плагин имеет поддержку библиотеки Nib, достаточно только настроить таковую в своем проекте.

Ниже я рассмотрю процесс подключения и настройки Nib (а заодно - и Stylus) в моем любимом Gulp.

Установка плагинов gulp-stylus и nib

В своем рабочем проекте необходимо установить два плагина (с помощью консоли):

$ sudo npm install gulp-stylus nib --save-dev

В результате оба пакета установятся в проект и добавятся в файл package.json в качестве зависимостей:

...
"gulp-stylus": "^1.3.4",
"nib": "^1.0.4"
...

Настройка файла gulpfile.js

В файле

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

var gulp = require('gulp'),
  stylus = require('gulp-stylus'),
  nib = require('nib'),
...

Затем создаем задачу task для компиляции из Stylus в CSS. В качестве параметра у метода

1
stylus
будет дополнительная строка
1
use:[nib()]
, говорящая о том, что необходимо использовать библиотеку Nib:

gulp.task('stylus', function () {
  gulp.src('app/styles/common.styl')
    .pipe(plumber())
    .pipe(stylus({use:[nib()]}))
    .pipe(prefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('dist/assets/styles/'));
});

Вот это и все (необходимый минимум), чтобы подружить библиотеку Nib c Gulp.

Не забываем подключить в stylus-файл проекта библиотеку:

@import 'nib'

Миксины библиотеки Nib

С подключением библиотеки Nib разобрались. Остался вопрос - а что там внутри, под капотом у Nib?

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

На официальной странице Nib есть ссылка на документацию по миксинам - Документация миксинов Nib.

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

В принципе, больше и сказать мне нечего (по крайней мере - мне) по поводу миксинов в Nib. Дальше только - брать их и использовать на практике.

На этом все.


Три способа подключения всплывающего (модального) окна на WordPress, созданного с помощью плагинов Easy FancyBox и Contact Form 7.

Данная статья посвящена вопросу создания всплывающего (модального) окна на WordPress. Такие окна еще называются модальными и их также можно создавать на CSS.

Easy Fancybox

Этой статьи очень легко могло бы не быть, если бы не две причины.

Первая причина - Сеть буквально завалена статьями и статейками на эту тему, но все они одна в одну повторяют друг друга. И только в одной я нашел грамотное, точное и краткое описание, как выполнять подключение модального окна в WordPress.

Вторая причина - у меня первоначально созданное модальное окно не заработало. И только на одном из форумов я нашел ответ на свой вопрос.

Ниже привожу описания решения обоих вопросов.

Три способа подключения модального окна Easy FancyBox

Итак, как я уже говорил выше, статей по вопросу создания модального окна с помощью плагинов Easy FancyBox и Contact Form 7 существует огромное количество. Поэтому здесь я его описывать не буду. А коснусь вопроса - как подключить уже созданную форму в WordPress.

Код формы Easy FancyBox в шаблон

Если готовая форма встраивается непосредственно в шаблон, то код должен быть таким:

<a class="fancybox" href="#contact_form_pop">Контактная форма</a>
<div class="fancybox-hidden" style="display:none">
<div id="contact_form_pop">
  <?php echo do_shortcode('[contact-form-7 id="" title=""]'); ?>
</div>
</div>

Обратите внимание на конструкцию

1
<?php echo do_shortcode(''); ?>
, в которую вставлен
1
shortcode
, созданный в плагине Contact Form 7.

Код формы Easy FancyBox на страницу

Если готовая форма встраивается в запись или на страницу, то код должен быть таким:

<a class="fancybox" href="#contact_form_pop">Контактная форма</a>
<div class="fancybox-hidden" style="display:none">
<div id="contact_form_pop">
  [contact-form-7 id="" title=""]
</div>
</div>

Здесь

1
shortcode
вставляется “как есть” - как его создал плагин Contact Form 7.

Код формы Easy FancyBox в виджет

Готовую форму можно встраивать в виджет, но для этого сначала нужно включить поддержку shortcode в WordPress. Для этого в файле

1
functions.php
нужно добавить строку:

add_filter('widget_text', 'do_shortcode');

Теперь виджет “Текст” имеет поддержку shortcode и вставить готовую форму в виджет “Текст” нужно таким образом:

<a class="fancybox" href="#contact_form_pop">Контактная форма</a>
<div class="fancybox-hidden" style="display:none">
<div id="contact_form_pop">
  [contact-form-7 id="" title=""]
</div>
</div>

Здесь

1
shortcode
вставляется точно также - без изменений, как есть из плагина Contact Form 7.

Все три способа были “подсмотрены” мною здесь - “Контактная форма (Contact Form 7) во всплывающем окне”.

Модальное окно Easy FancyBox не работает

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

Проблема заключалась в том, что я “забыл” добавить в созданную тему две функции, которые обязательно должны присутствовать в любой WordPress-теме -

1
wp_head();
и
1
wp_footer();
.

В файле шапки сайта

1
header.php
перед закрывающим тегом
1
</head>
необходимо вставить запись, которая будет выглядеть таким образом:

...
<?php wp_head(); ?>
</head>

В файле подвала сайта

1
footer.php
перед закрывающим тегом
1
</body>
необходимо вставить запись, которая будет выглядеть таким образом:

...
<?php wp_footer(); ?>
</body>

На этом все.


Настало время познакомиться с препроцессором Stylus. Ниже привожу перевод статьи от David Walsh, посвященную малоизвестному, но крайне полезному препроцессору Stylus. Оригинал статьи размещен здесь - Getting Started with Stylus

Stylus

В среде web-разработчиков можно часто и постоянно слышать только о двух препроцессорах: Sass и LESS. Однако, существует еще один препроцессор, о котором слышно совсем не так часто - это Stylus. При редизайне Mozilla Developer Network мною был выбран Stylus по нескольким причинам:

  • так как Stylus основан на Node.js, то отпадает необходимость в использовании сторонней технологии (Sass требует для своей работы Ruby)
  • Stylus предоставляет набор JavaScript API, что делает возможным дальнейшую настройку этого инструмента
  • синтаксис Stylus не нуждается в скобках (brackets), запятых (comma), двоеточиях (colons), точках с запятыми (semicolon) - он целиком и полностью основан на использовании табуляции и пробелов; но если необходимо использовать любой из видов пунктуаций, то его можно легко применить в Stylus - компиляция произойдет корректно
  • под препроцессор Stylus имеется готовая библиотека миксинов (mixin) под названием Nib

Установка Stylus

Препроцессор Stylus является Open Source проектом, расположенным на GitHub, поэтому его можно легко установить как из исходных файлов, так и с помощью менеджера пакетов

1
npm
:

  $ sudo npm install stylus -g

CSS-файлы, созданные при помощи синтаксиса Stylus, должны иметь расширение

1
.styl
и могут располагаться в любом месте проекта. Препроцессор Stylus не имеет какого-либо конфигурационного файла, для начала компиляции достаточно запустить утилиту командной строки
1
stylus
с минимальным набором ключей:

$ stylus app/main.styl --out /dist --compress

Представленная выше команда выполняет компиляцию исходного stylus-файла

1
main.styl
в директорию
1
/dist
с тем же самым именем
1
main.styl
. Другими словами, файл
1
main.styl
компилируется в файл
1
main.css
и помещается в директорию
1
/dist
.

Утилита

1
stylus
может запускаться не только для однократной компиляции, но и отслеживать изменения файлов, выполняя компиляцию на лету; для этого имеется ключ
1
--watch
:

$ stylus --watch app/main.styl

Как можно догадаться, у программы

1
stylus
имеется гораздо больше опций, с полным списком которых можно ознакомиться здесь - Executable. В частности, с помощью нужных ключей можно выполнять обратную конвертацию из CSS в Stylus, сравнивать ввод\вывод и многое дугое.

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

Основы синтаксиса Stylus

Синтаксис Stylus очень похож на синтаксис остальных препроцессоров (Sass или LESS). Но давайте более детально рассмотрим, что он из себя представляет на деле:

/*  Простая переменная  */
  base-font-size = 12px

/* Инициализация переменной с помощью вызова миксина */
body-background = invert(#ccc)

/* Селектор и набор правил для него */
body
  color #333
  background #fff

/* Вложенность правил */
nav
  margin 10px
    ul
      list-style-type none
        > li
          display inline-block
          &.current
            background-color lightblue

/* Использование вычисляемых значений */
div.column
  margin-right (grid-spacing / 2)
  margin-top (grid-spacing * 2)

/* Использование ранее установленного значения */
div.center-column
  width 200px
  margin-left -(@width / 2)

/* Задание значений, полученных как результат вычислений миксинов */
.promo
  apply-promo-style()
  apply-width-center(400px)

/* Итерация в цикле */
table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height 10px * row

/* Другой вариант итерации в цикле */
for row in (1..5)
  tr:nth-child({row})
    height 10px * row

/* Импортирование в Stylus-файл другой таблицы стилей в формате Stylus */
@import "links.styl"

/* extend существующего класса */
.warning
  @extend .block

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

Создание и использование миксинов

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

Создание миксинов в Stylus является простой задачей, а синтаксис миксинов именно такой, какой и ожидалось увидеть:

/* Простой миксин для добавления вендорных префиксов.

  Использование:
  vendorize(box-sizing, border-box)

*/

vendorize(property, value)
  -webkit-{property} value
  -moz-{property} value
  -ms-{property} value
  {property} value

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

/* Миксин создания треугольника на CSS */

generate-arrow(arrow-width = 10px)
  &:before, &:after
    content ''
    height 0
    width 0
    position absolute
    border arrow-width solid transparent

Миксин может возвращать вычисляемое значение с помощью ключевого слова

1
return
или же возвращать стили, определенные внутри самого миксина. Такие стили можно применить к элементу, который вызывает этот миксин:

/* Миксин для задания стилей к текущему элементу и дочерним элементам текущего элемента */

special-homestyles(background = '#ccc')
  background-color background
    a
      color lightblue
    &.visited
      color navy

И конечно же, внутри миксинов можно использовать условия (впрочем, как и в любом другом месте кода на Stylus):

/* Миксин создания grid на основе минимального\максимального значений и инкремента */

generate-grid(increment,start,end,return-dimension=false)
  total = start
for n, x in 0..((end - start) / increment)
  if return-dimension
    if x+1 is return-dimension
      return total
        else
	  .column-{x+1}
	     width total
	total = total + increment

Представленный выше миксин генерирует grid на основе минимального значения (минимальной ширины столбца), максимального значения (максимальной ширины столбца) и количества столбцов (которое изменяется с помощью инкремента). Последний аргумент return-dimension служит для указания того, будет ли миксин просто возвращать полученное значение, не создавая CSS-классов.

Полезные миксины Stylus

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

Обнуление last child

Данный миксин был создан для обнуления пустого пространства у последнего элемента блока-родителя. Как правило, такими пространствами в CSS являются

1
padding-bottom
и
1
margin-bottom
.

/* Удаление пустого пространства у элемента, если он является последним у своего родителя */

prevent-last-child-spacing(element="*", property="padding-bottom")
  if element is "*"
    element = unquote(element)
      & > {element}:last-child
        {property} 0

С помощью этого миксина устанавливается

1
margin
или
1
padding
для блока-родителя. А затем просто убирается пустое пространство у последнего элемента этого блока.

Стилизация placeholder

Стилизация placeholder является достаточно хитрой задачей из-за необходимости использования вендорных префиксов, поэтому использование миксина значительно упрощает эту задачу:

  set-placeholder-style(prop, value)
   &::-webkit-input-placeholder
     {prop} value
   &::-moz-input-placeholder
     {prop} value

Заключение

На этом перевод закончен.

От себя могу добавить.

Под Sublime Text 3 имеется плагин Stylus для подсветки синтаксиса и автоматической табуляции. Если планируется дальнейшая работа в Stylus, то данный плагин обязателен к установке - без него просто тяжело и долго кодить.

Stylus Sublime Text

Плагин Emmet имеет поддержку синтаксиса Stylus (меня Emmet не перестает радовать). Все горячие клавиши Emmet остались неизменными и под Stylus, как если бы я кодил в старом добром CSS.

На моем любимом YouTube-канале Level Up Tuts недавно вышла небольшая серия видео-обзоров по Stylus - Stylus Tutorials

На этом все.