Эмиль Валеев

Поверстай сам и потом стоит)
P.S - использую Zurb Foundation

Только мышьЪ

Ну я даже не знаю, примерчик у вас конечно...
Тут проще с нуля было написать.
Как вам такой вариант?

Как мало надо реализовать, а какой большой код.
Вы не могли бы сделать демо на этом сайте?
В таком формате читать неудобно, а я ужасно ленивый. Кажется, задача не сложная

Соглашусь с предыдущим комментатором, Sublime Text 2/3 и будет вам счастье, там можно окно разделить на 2 колонки, а автоматическая генерация css это правда глупость. И что он по вашему там вообще писать будет? Ну нарисовали вы свой <div class="some_class">...</div>и что? Откуда программа возьмет свойства, которые только у вас в голове лежат?
Плагин-Emmet в помощь, если вы ленивый (как я :)), а мыслите вы не в том направлении.
Лучше гуглите, что такое SASS/LESS

Всем спасибо!
Понял, без JS никуда, начну учить на этой неделе.
Жалко, что про З/П ни один фронт-енд девелопер не отписался)

Синтаксис SCSS вообще почти ничем не отличается от CSS!
В нем есть всё, что вы перечислили и даже больше, например, условные операторы или операторы циклов.
Годная вещь - фреймворк "Compass". Основан на SASS (точнее SCSS) и включает в себя много вкусностей, но для его установки вам понадобится Ruby gem и придется работать с командной строкой.
Не любите пляски с бубном - гуглите ScoutApp. Единственное пока бесплатное приложение под винду, но очень медленное.

Sublime Text3 + плагин для SASS/SCSS

Как вариант, использовать в макете не сами изображения, а блочные элементы с нужными изображениями в фоне.
Есть замечательное CSS3 - волшебство background-size: contain, которое "масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока".
Один нюанс - в блоке, естественно, должны быть заданы ширина и высота, причем, в процентах, что логично (нам же нужна резина, ведь так?).
Надеюсь, помог. :)