Павел

<div class="container">
<div class="col-md-4 col-xs-12 sidebar">
			Sidebar
</div>

<div class="col-md-8 col-xs-12 main">
Content
</div>
</div>

И кстати по ссылке можно смотреть исходный код фрейма и вытащить оттуда что угодно или наверху жмем Change View - и внизу Direct code Links - ссылки на исходники html, css И другие

Все довольно таки легко верстается, изучайте документацию.
Для блоков все довольно легко задается, например
col-md-6 - 50% на десктопах
col-xs-12 - 100% на смартфонах
col-sm-8 - 66.6% на планшетах и т.д.
Соответственно блок для разных устройств будет выглядеть так:

<div class="col-md-12 col-sm-8  col-xs-12">Данные блока</div>

text-overflow: ellipsis; или text-overflow: clip;

Modx, OctoberCms
По стоимости хз, смотря кого найдете, думаю от 3 т.р. до 10 т.р.

Ну просто замечательно)) Сами задаем вопросы, сами гуглим и отвечаем)

https://codepen.io/senff/pen/ayGvD
stackoverflow.com/questions/13274592/leave-menu-ba...
Остальное найдете по запросу в гугле Fixed Scroll menu

Z-index у класса повысьте до 60

.category .wrapper .in-wrap {
    width: 920px;
    height: 480px;
    max-height: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 60;
    text-align: center;
    overflow: hidden;
}

Есть даже генераторы такого добра в онлайне, гуглятся по запросу Css 3 gradients

https://github.com/wulftone/sublime-text-quick-fil...
Ну и https://github.com/titoBouzout/SideBarEnhancements