Николай

Я тут вижу два варианта:
1. делаем так, чтоб блок подстраивается под сетку. Т.е. если блок с шириной 2 попадает в ситуацию как на картинке - он становится одинарный.
2. Добавляем объекты в сетку рядами. Т.е. берем пустой массив, представляющий собой ряд.
Пока элементы влезают - добавляем их. Как только элементы перестают влезать, проверяем, есть ли место в ряду. Если места нет - добавляем ряд в коллекцию объектов. Если место есть - ищем подходящий по размеру объект, сохраняя все остальные в каком-то временном массиве. Продолжаем операцию до тех пор, пока не останется недобавленных объектов.
Минусы:
1ый метод: не всегда есть возможность сделать гибкость у блоков.
2ой метод: объекты перемешиваются( т.е. в случае новостной ленты, где важна последовательность, это неприемлемо ), возможны случаи, когда описанная ситуация всё же произойдет.

я так понимаю - создаёте маршрут вы при помощи метода route?
Тогда route.getPaths() вернёт вам коллекцию частей маршрута. У элементов этой коллекции есть свойство geometry.
Этого должно хватить.

route.getPaths().each(function(v,i) {
 console.log(v.getSegments());
});

Изменение свойства prototype после создания объекта ничего не изменит в самом объекте.
Для справки прочитайте первый ответ в этом посте: stackoverflow.com/questions/7015693/how-to-set-the...

Что касается решения задачи:
Вариант 1:
prototype

var a = {k:7};
function B(h) {
    this.h = h;
}
B.prototype = a;
var b = new B(5);
console.log(b.k); // 5

Вариант 2:
Object.create

var a = {k:5};
var b = Object.create(a, {h: { writable: true, configurable: true, value: 7 },});
console.log(b.k); // 5

Вариант 3:
ES2015

class A {
 constructor () {
   this.k  = 5;
 }
}
class B extends A {
 constructor(h) {
   super();
    this.h = h;
}
}
var b = new B(7);
console.log(b.k); // 5

У вас в href в ссылке не совпадает с параметром data-section:
<a href="#gi" class="nav__item-link">item 5</a>
<section class="section" data-section="go">

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

.classname1 .bxslider{
}
.classname2 .bxslider{
}

в html:

<div class='classname1'>
    <ul class="bxslider"></ul>
</div>
...
<div class='classname2'>
    <ul class="bxslider"></ul>
</div>

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

bower install bxslider-4
Чтобы при этом обновился файл конфигурации bower.json - нужно добавить флаг --save
Получится вот так:
bower install bxslider-4 --save
Флаг --save-dev добавит зависимость в devDependendencies, то есть зависимости, необходимые для разработки ( в основном mockup'ы)
Вообще дока по bower очень хорошо и понятно написана.

Я думаю один из самых крупных проектов на typescript - это Angular 2.
https://github.com/angular/angular/tree/master/mod... так же разработчики пишут всякие вещи о процессе разработки в блоге.

Вообще, если стихов(фраз) не очень много - можно обойтись и без PHP и базы данных. Просто положить данные в json файле. А в javascript его загрузить и выводить то, что надо.
Структура файла может быть например такой:

{
  [
    {
        author: "Пушкин",
        texts: [ 'text1', 'text2', .....],
    },
    {
        author: "Лермонтов",
        texts: [ 'text3', 'text4', .....],
    }
  ]
}

Чтобы выставить случайный текст - можно просто генерировать случайное число из отрезка [0, texts.length-1].
Вообще - можно разделить стихи по авторам - то есть 1 автор - 1 файл. Всё зависит от вашей конечной цели.

Скорее всего проблема в display:none: неправильно считаются ширина/высота блоков при инициализации слайдера. А если потянуть браузер за край - происходит событие resize, которое как правило обрабатывается в слайдере и происходит пересчет размера блоков. Решений проблемы несколько:
1. прятать блок не с помощью display:none, а например через position: absolute; top: -10000px; left:-10000px;
2. при активизации вызывать функцию из api слайдера, заставляющую перестчитать высоту/ширину.
Для bxSlider я думаю подойдет функция

slider = $('.bxslider').bxSlider();
slider.reloadSlider();