Краткое знакомство с системой контрольных точек Rupture под препроцессор Stylus.

Ниже приведено краткое и сбивчивое описание (знакомство) с системой

1
breakpoints
под препроцессор Stylus. Оно основано на двух материалах, оба являющихся официальными:

А больше в Сети материалов по Rupture и нет, даже на английском языке. Есть, правда, очень краткий - на французском, которым я совсем не владею.

Rupture был создан на примере плагина Breakpoint Slicer под препроцессор Sass.

Шкала Rupture

Основа Rupture - шкала значений

1
breakpoints
, которая так и называется -
1
scale
. Фактически
1
scale
- это объект со своими свойствами и методами. Перечень контрольных точек (
1
breakpoints
) - это массив значений, передаваемых объекту
1
scale
.

Ниже представлена

1
scale
по умолчанию (но которую можно легко изменить при необходимости):

scale = 0 400px 600px 800px 1050px 1800px

Количество этих значений -

1
0, 400px, 600px 800px, 1050px
- может быть необязательно равно 5 (пяти). Их может быть неограниченное количество - столько, сколько нужно.

Перечень значений

1
breakpoints
, показанных выше, можно представить в виде диапазонов; каждому диапазону можно присвоить порядковый номер
1
slice number
и “обозвать” как
1
slice
:

Rupture Scale

Подключать библиотеку Rupture в проект нет необходимости. Достаточно установить библиотеку командой:

$ sudo npm install rupture --global

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

$ stylus -u rupture -c example.styl

Здесь

1
-c
- это сокращение от
1
--compress
, то есть - минифицировать CSS-код на выходе. Почему не рекомендуется использовать командную строку? Просто для этих целей лучше (и целесообразнее) использовать Gulp.

Миксины Rupture

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

1
breakpoints
).

Все миксины Rupture делятся на два вида:

  • простые миксины для практического использования каждый день
  • сложный набор миксинов, которые фактически представляют из себя
    1
    
    grid sistem

В этом кратком обзоре я буду рассматривать только “практические” миксины. Более сложные - нет, ибо “не зачем”.

Набор практических миксинов Rupture

Первые три миксина - наиболее применимые и удобные на практике.

+above(measure)

  • если размер окна браузера больше указанного значения (
    1
    
    > measure
    ), то применить стили
  • 1
    
    +from-width(measure)
    - это алиас миксина +above(measure)

+below(measure)

  • если размер окна браузера меньше указанного значения (
    1
    
    < measure
    ), то применить стили
  • 1
    
    +to-width(measure)
    - это алиас миксина +below(measure)

+between(measure1, measure2)

  • если размер окна браузера находится в указанных пределах (
    1
    
    measure1 <= between <= measure2
    ), то применить стили

Дальше пошли миксины - “по обстоятельствам”.

+at(measure)

  • если размер окна браузера
    1
    
    >=
    указанного значения, то применить стили

+mobile()

  • если размер окна браузера
    1
    
    <= 400px
    , то применить стили
  • 1
    
    rupture.mobile-cutoff
    - переменная, в которой хранится значение для миксина
    1
    
    mobile()

+tablet()

  • если размер окна браузера находится в пределах
    1
    
    >= 1050px
    и
    1
    
    < 400px
    , то применить стили

+desktop()

  • если размер окна браузера
    1
    
    > 1050px
    , то применить стили
  • 1
    
    rupture.desktop-cutoff
    - переменная, в которой хранится значение для миксина
    1
    
    desktop()

+hd()

  • если размер окна браузера
    1
    
    >=
    1800px, то применить стили
  • 1
    
    rupture.hd-cutoff
    - переменная, в которой хранится значение для миксина
    1
    
    hd()

+retina()

  • если плотность размещения пикселей больше 1.5
    1
    
    (retina display)
    , то применить стили

+landscape()

  • если у окна браузера высота меньше, чем ширина, то применить стили

+portrait()

  • если у окна браузера высота больше, чем ширина, то применить стили

Настройка Rupture

Как любая система, Rupture имеет свои собственные настройки. Которые можно задавать в файле проекта в виде переменных с их значениями.

К примеру, Rupture имеет возможность автоматического конвертирования значений

1
breakpoints
из пикселей (px) в
1
em
. Как говорится в официальном руководстве, в веб-разработке существует мнение, что задавать контрольные точки в
1
em
- это хорошая практика.

Поэтому, такой пример иллюстрирует включение автоматической конвертации из

1
px
в
1
em
; и задание базового размера шрифта в 18px (базовый размер шрифта равен 16px):

rupture.enable-em-breakpoints = true
base-font-size = 18px

rupture.scale - одна из важнейших переменных Rupture. В этой переменной можно в виде массива переопределить значения breakpoints.

Например, таким образом:

rupture.scale = 0 380px 768px 1200px

Пример работы Rupture

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

div.wrapper
  div.left
  div.right
@import 'nib'
@import 'jeet'

// Partials
@import 'partials/*.styl'

rupture.enable-em-breakpoints = true

.wrapper
  center()

.left
  col(1/3)
  height 20vh
  background-color lighten($color,10%)
  +below(800px)
    col(1/4)
    background-color lighten($color,20%)
  +below(400px)
    stack()
    margin-bottom 10px

.right
  col(2/3)
  height 20vh
  background-color lighten($color,20%)
  +below(800px)
    col(3/4)
    background-color lighten($color,30%)
  +below(400px)
    stack()

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

Кроме одного вопроса, который чуть не забыл упомянуть! В этом коде (и всех примерах выше) применялось точное значение для миксинов -

1
+below(400px)
, к примеру.

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

@import 'nib'
@import 'jeet'

// Partials
@import 'partials/*.styl'

// Breakpoint Variables
$bp1 = 800px
$bp2 = 400px

rupture.enable-em-breakpoints = true

.wrapper
  center()

.left
  col(1/3)
  height 20vh
  background-color lighten($color,10%)
  +below($bp1)
    col(1/4)
    background-color lighten($color,20%)
  +below($bp2)
    stack()
    margin-bottom 10px

.right
  col(2/3)
  height 20vh
  background-color lighten($color,20%)
  +below($bp1)
    col(3/4)
    background-color lighten($color,30%)
  +below($bp2)
    stack()

Заключение о Rupture

Вот я и познакомился с Rupture. Что можно сказать - система мне (в очередной раз - все из мира Stylus) понравилась, она очень проста и наглядна. Достаточно полчаса, чтобы ознакомиться с ее возможностями и начать применять на практике.


Вступление

Сегодня приступим к знакомству с системой построения сеток 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[&#8216;gutter'] = 3
    - размер ширины gutter в процентах, от общей ширины страницы
  • 1
    
    jeet[&#8216;parent-first'] = false
    - если сказать коротко, каким образом будет производиться вычисление ширины блока; относительно конкретного блока-родителя; или же относительно корневого блока-родителя
  • 1
    
    jeet[&#8216;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>

На этом все.