Сергей Наломенко

Например, при помощи «слайдера-карусели» Slick

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

transition: 0.3s ease all 0s, margin-top 1ms;

Как вариант, можете задать для ul свойство display: table, а для li — как ячейки таблицы (table-cell) для схожего поведения. Рассмотренный пример на StackOverflow находится тут.

Для Вашего случая должно получиться примерно вот так

У Вас в настройках стоит соответствующая опция:
"open_files_in_new_window": true

Замените на false, и всё будет хорошо :)

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

Всё правильно у Вас написано, и должно работать для абсолютно всех элементов, обёрнутых блоком с классом .class-name

Другой вопрос — какова задача? Применить ко всем элементам, или же только к потомкам первого уровня. В таком случае следует писать .class-name > * { ... }

Я себе, честно говоря, довольно смутно представляю полноценную анимацию SVG средствами CSS3. Да и чем не угодил JS? Тем, что нужно подгружать дополнительные библиотеки? Так у нас вроде как век скоростного интернета настал. Dial-Up давно позади, да и ADSL уже остался у единичных пользователей. Да и те, возможно, не являются целевой аудиторией проекта, который требует каких-то особых изысков в данной области.

Используйте, например, Snap.svg, ну или любую другую библиотеку для полноценной работы с SVG-анимациями и маниуляциями. И будет Вам счастье :)

Вообще, конечно, существует масса реализаций.
Вот, например, несколько вариантов появления меню слева, справа, сверху, снизу, off-canvas реализация и т. п.

Исходники тут.

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

@media screen and (max-width: 800px) {
    .my-class { font-size: 40px; }
}

@media screen and (max-width: 400px) {
    .my-class { font-size: 20px; }
}

В противном случае, если такие условия нужно задавать для конкретного блока/контейнера (div или другого), то тут из вариантов только JavaScript с коллбэком на ресайз элемента.

Пример с использованием jQuery:

$('.my-class').resize(function() {
    var width = $(this).width();
    if(width <= 400)
        $(this).css('font-size', '20px');
    else
        $(this).css('font-size', '40px');
});

Тут пример на CSS с анимацией.

1. Селектор :first-child
.bb p:first-child { ... }

2. Селектор :first-child и span
.bb p:first-child span { ... }

2. Селектор :nth-child
.bb p:nth-child(2) { ... }

Например:
.headerWrapper{ min-width:1024px; }

z-index отрабатывает только на объектах с position:relative, absolute и fixed

Если Вы про явную реализацию метода .clickoutside(), то его, по крайней мере в jQuery, нет.
Здесь разобран один из вариантов решения (эмуляции отслеживания клика вне элемента).

С другими dropdown то же самое — при клике на них смотрите, открыто ли Ваше nav-меню, и скрываете при необходимости.