Алексей Бульба

Draft можно расширять, присутствуют готовые плагины, но довольно специфичный.
Многие переходят на Slate или Quora

Всё зависит от ваших потребностей к функционалу и дизайну.

Bootstrap это не плохо, есть инструменты и нужно ими уметь пользоваться.
Его критикуют из-за сильной вложенности элементов в сетки, противопоставляют Foundation.

Я своих падаванов заставляю читать про сетку Bootstrap'a, для осознании оной.
Flexbox не поддерживаются в IE8, там адаптив в основном строится на float'х.
На русском про сетки flexbox масса материала, как и о самой спецификации. Выше автор скинул ссылку на flexboxgrid.com можете посмотреть исходники на github и разобраться.

Wordpress лучше сразу на нём начинать делать дочернию тему, чем натягивать после. Дольше времени займёт
+ есть n-ое количестов плагинов сетки для CMS этой.

Практически любые готовые решения можно адаптировать, за исключением элементов вырезанные из фреймфорков. (зачастую вижу на codepen элементы из pure css, там уже большую часть придётся переписывать )

P.S. Удачи в освоении :)

Вот туториал на создание таймера на jQuery https://tutorialzine.com/2011/12/countdown-jquery
Могу скинуть с русскими комментариями по коду при необходимости.
Функция для склонения.

function declOfNum(number, titles) {
      cases = [2, 0, 1, 1, 1, 2];
      return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];
    }

Использование плагина со склонением

const note = $('#note');
$('#countdown').countdown({
      timestamp: new Date(2017, 8, 15, 15, 20),
      callback: function(days, hours, minutes, seconds){

        let message = "";
        let daysText, hoursText, minutesText, secondsText = "";

        daysText = declOfNum(days, ['день', 'дня', 'дней']);
        hoursText = declOfNum(hours, ['час', 'часа', 'часов']);
        minutesText = declOfNum(minutes, ['минута', 'минуты', 'минут']);
        secondsText = declOfNum(seconds, ['секунда', 'секунды', 'секунд']);

        message += '<span class="timer__pointer">' + daysText +"</span>";
        message += '<span class="timer__pointer">' + hoursText + "</span>";
        message += '<span class="timer__pointer">' + minutesText + "</span>";
        message += '<span class="timer__pointer timer__pointer--orange">' + secondsText + "</span>";

        note.html(message);
      }
    });