Anton Yatsenyuk

Скоро будет вот такой. Я работал над этим сервисом. Там как-раз то что Вам нужно. Создается вопросник. Будет несколько типов вопросников с интерактивом.

uWebDesign - материал по всем направлениям разработки + дизайну

работал с - konva.js

Простой плагин для создания того что вам нужно
https://github.com/gf3/moment-range

www.codecovers.eu/materialadmin/dashboards/dashboard

использовал в двух проектах уже его, но он платный.

Созданные элементы нельзя так отредактировать. Только по новой создать тем сниппетом который вы указали.

Djinni
На любой вкус и цвет. В прошлом году мой текущий работодатель сам меня там нашел и нанял после недолгих переговоров.

для начала уберите у всех label классы сетки, их можно разместить с помощью css, для формы добавьте класс col-sm-9 (или сколько нужно)
Потом для каждого input в форме добавьте класс и для него css

.class {
float: left;
}

.class:first-child {
margin-left: 15px;
}

<div class="container">
	<div class="row">
		<div class="blue col-sm-4 col-md-4">
			
		</div>
		<div class="yellow col-sm-12 col-md-8">
			
		</div>
		<div class="red col-sm-8 col-md-8">
			
		</div>
	</div>
</div>

Для .blue в css через @media (min-width: 970px) нужно задать height.

Могут быть неточности, но они решатся через @media, а сетка такая должна быть

.block-class:before {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
}

Windows 7 + Chrome 33.0.1750.154 m
ничего не вылетает.

А если используете Compass, то у него есть отличный инструмент - Vertical Rythm

Изучать начните основы-основ - Pascal

Для начала подойдет и Prepros. Отлично всё компилирует, есть лог ошибок. Есть поддержка Compass framework (Для любителей GUI).
Отличный пример использования Sass и его "плюшек"

Если это текст на сайте с которого вы сделали скриншот, а не на картинке, то попробуйте это.

Можно и с градиентами.

Еще на кривой нужно поднять точку черного. На фото видно же что детали в тенях все вытянутые.
Точка черного на гистограмме это левая крайняя нижняя точка, немного нужно ее перетащить вверх

Попробуйте поиграть со свойством display. Может подойти это:
display: table-cell;

Chrome, Opera и Safari на одном движке - webkit, в них отображается все одинаково.