Django + Susy или Django + Bootstrap? Или другой вариант?

#django #bootstrap #angularjs #sass #django_rest_framework

Добрый день! Использую Django + Angular + Django REST.
Необходимо динамически размещать изображения разного размера плиткой, с возможностью
перемещения их посредством drag-n-drop. Для размещения использую сейчас bootstrap.js,
а для перетаскивания
Sortable.js + ng-sortable.js git:://github.com/rubaxa/Sortable.git
Но возникает проблема с картинками разного размера, возникает ситуация подобная этой



А нужно, чтобы было несколько колонок, и каждая картинка могла занимать одну или
несколько колонок, в зависимости от размера картинки. 
Что-то вроде этого (представим, что каждый блок - это картинка):



Пример для Susy с их сайта вроде ближе к тому, что должно быть:


Но до конца не уверен, подойдет ли мне этот фреймоворк для решения данной задачи?
Установил sudo gem install sass, sudo gem install susy, pip install libsass. Что
еще нужно установить и как использовать susy для django сайта?
Для Zend фреймворка нашел мануал: http://zencoder.ru/susy/brief-tutorial-susy-2/
Как мне сделать аналогичное для Django? При помощи susy или предложите, пожалуйста,
лучший вариант. По поводу susy не уверен.

Обновление:
Установил еще sudo apt-get install ruby-dev, sudo gem install compass.

Где подключать вот это, и в каком виде для Django?

@import "normalize";
@import "compass";
@import "susy";


Обновление 2:
Установил sudo pip install django-compass2, в settings.py добавил:

COMPASS_INPUT = BASE_DIR + 'media/sass'
COMPASS_OUTPUT = BASE_DIR + 'media/css'
COMPASS_STYLE = 'compact'
COMPASS_REQUIRES = (
    'ninesixty',  # 960.gs Grid System
)


и 'djcompass' в  INSTALLED_APPS.
Создал папки media/sass, media/css

При выполнении python manage.py compass
не находит модуль 'djcompass'.

Обновление 3:
пока закомментировал djcompass в INSTALLED_APPS.
Добавил в settings.py:

COMPRESS_PRECOMPILERS = (
    ('text/scss', 'sass --scss {infile} {outfile}'),
)


В шаблоне:

{% load compress %}
{% load staticfiles %}

{% compress css %}
    
{% endcompress %}


Ругается: 'compress' is not a valid tag library
Гугл говорит, что нужно сделать что-то вроде 

compass create [folder] -r rest-foundation --using foundation


Но compass мне не удалось настроить.
И не совсем понятно, для susy/compass/sass необходимо создавать отдельный проект
внутри проекта django? Пока не понимаю, как их всех вместе скрестить, чтобы работало:
Django + Django REST + Angular + SASS + Compass (и непонятно, можно ли обойтись без
него?) + Susy.

Обновление 4:
sass -v выдает Sass 3.4.18 (Selective Steve)

Установил pip install django-compressor
на основе этого http://django-compressor.readthedocs.org/en/latest/quickstart/
В settings добавил 

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # other finders..
    'compressor.finders.CompressorFinder',
)


Добавил в INSTALLED_APPS "compressor" - после этого 500 ошибка.

При добавлении в TEMPLATES OPTIONS
django.templatetags.compress и django.contrib.staticfiles.templatetags.compress пишет,
что у таких модулей нет "compress" attribute/class

Обновление 5: нашел angular-gridster.js, который размещает вроде как нужно, + поддерживает
drag-n-drop http://manifestwebdesign.github.io/angular-gridster/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation
На этапе до sass/susy/compass:

bower install angular-gridster

 
    
    

Обновление 6


Подключил по мануалу на сайте разработчика, все работает. Единственная проблема -
как настроить angular-gripster, чтобы убрать z-слои и наложение изображений друг на друга?
    

Ответы

Ответ 1

Я бы подключил masonry. И в "бутстрапе", и в "susy", проблемы выравнивания блоков
с разной высотой есть и будут. А "masonry" справится.

Также рекомендую по возможности избавиться от "compass" - он перестал активно развиваться
пару лет назад. Если нужна альтернатива - попробуйте bourbon.