Сергей Горячев

На выбор:
mixitup.kunkalabs.com
isotope.metafizzy.co
razorjack.net/quicksand
vestride.github.io/Shuffle

Кроме intro.js:
1. Product Tour3
2. SiteHelp.js
3. jQuery Guide
4. FAQtoid
5. Shepherd
6. Hopscotch
7. Bootstrap Tour
Еще десяток найти можно точно.

intro.js ?

Тут особо ничего не поделаешь. Поругаться на дизайнера можно. Обычно дизайнеры об этом знают и делают всё через "Normal".

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

А умные люди делают так)

var container = document.querySelector(".mainslider");

//or
console.log(container.childElementCount);

//or
console.log(container.children.length);

calc(100% / X);

Меньше calc'ов, ради бога. Если вы все равно через JS подставляете значение, то сразу и подставляйте высчитанное.

var countLi = $('.mainslider li').length;

$('.mainslider').children('li').length

Генерирую на этом сервисе realfavicongenerator.net
Там такие есть

<link href="/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
<link href="/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
<link href="/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
<link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
<link href="/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
<link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
<link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
<link type="image/png" href="/favicon-32x32.png" rel="icon" sizes="32x32">
<link type="image/png" href="/favicon-194x194.png" rel="icon" sizes="194x194">
<link type="image/png" href="/favicon-96x96.png" rel="icon" sizes="96x96">
<link type="image/png" href="/android-chrome-192x192.png" rel="icon" sizes="192x192">
<link type="image/png" href="/favicon-16x16.png" rel="icon" sizes="16x16">
<link href="/manifest.json" rel="manifest">
<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#71bf44">
<meta name="apple-mobile-web-app-title" content="Textile Federation">
<meta name="application-name" content="Textile Federation">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

перечислить все классы нуждающиеся в одинаковых значениях текстовых свойств

Pattern.scss

%_font-Arial{
  font-family:  Arial;
}

%_font-Weight{
   font-weight: 600;
}

Style.scss

@import "Pattern";

.class{
  @extend %_font-Weight, %_font-Arial;
}

Лично моё мнение - подход к CEO/SEO (content & search engine optimization) должен идти от требований ПС, которые постоянно меняются.

WordPress - изначально, создан для блогов.
Почему? Потому, что если я скажу что-то другое - меня закидают помидорами.
А я этого - не хочу!)

В любом случае, к выбранной Вами CMS Вы должны будете использовать какие-то дополнительные и актуальные CEO/SEO-модули.
ИМХО: Я предпочитаю использовать CMS Joomla (т.к. она гораздо гибче подходит для различных бизнес-процессов, нежели тот же WP)