Repository: ocadotechnology/codeforlife-portal

Issue:
Sort out the Front end architecture of the project



Discussion:
**Current state:**

Five libraries/frameworks/plugins are currently installed on the project:
- **[Bootstrap](http://getbootstrap.com/)**, responsive front-end framework
- **[Foundation](http://foundation.zurb.com/)**, another responsive front-end framework
- **[Sass](http://sass-lang.com/)**, CSS extension tool
- **[Bourbon](http://bourbon.io/)**, lightweight tool set for Sass
- **[Treebeard](https://github.com/tabo/django-treebeard)**, library for tree implementations (most likely used for the CMS)

Foundation, Bootstrap, Sass and Bourbon are all used in the Rapid Router repository (and therefore used in the game.css file). Removing any of them could prove quite difficult.

However, in the actual Portal repository, none of them are being used. All the currently used CSS files for the Portal can be found in portal/static/portal/css/. Starting to use Sass for the Portal now shouldn't be hard, as all valid CSS is valid Sass. 

**Sass to CSS compiler?** See below.

**Bootstrap vs Foundation:** both are a responsive front-end framework. We might want to decide to go only for Bootstrap and get rid of Foundation. As stated above, Foundation is not currently used in the Portal repo whereas Bootstrap is, but it's worth keeping in mind that Foundation is used in the Rapid Router repo.

**Sass to CSS compiler:** Django Pipeline's [Sass Compiler](https://django-pipeline.readthedocs.io/en/latest/compilers.html#sass-compiler) has been implemented. It is also currently being used in the Rapid Router project.
Now any .sass file in portal/static/portal/sass will be converted to CSS automatically.


Resolving patch:
diff --git a/portal/autoconfig.py b/portal/autoconfig.py
--- a/portal/autoconfig.py
+++ b/portal/autoconfig.py
@@ -53,9 +53,22 @@
         'django_otp.plugins.otp_static',
         'django_otp.plugins.otp_totp',
     ],
+    'PIPELINE_COMPILERS': (
+        'pipeline.compilers.sass.SASSCompiler',
+    ),
+    'PIPELINE_CSS': {
+        'css': {
+            'source_filenames': (
+                'portal/sass/*.scss',
+            ),
+            'output_filename': 'portal.css',
+        },
+    },
+    'PIPELINE_CSS_COMPRESSOR': None,
     'INSTALLED_APPS': [
         'cms',
         'game',
+        'pipeline',
         'portal',
         'ratelimit',
         'django.contrib.admin',
@@ -78,6 +91,10 @@
     'LANGUAGES': [
         ('en-gb', 'English'),
     ],
+    'STATICFILES_FINDERS': [
+        'pipeline.finders.PipelineFinder',
+    ],
+    'STATICFILES_STORAGE': 'pipeline.storage.PipelineStorage',
     'MESSAGE_STORAGE': 'django.contrib.messages.storage.session.SessionStorage',
     'MIDDLEWARE_CLASSES': [
         'django.contrib.sessions.middleware.SessionMiddleware',
diff --git a/setup.py b/setup.py
--- a/setup.py
+++ b/setup.py
@@ -14,6 +14,7 @@
         'djangorestframework==3.1.3',
         'django-jquery==1.9.1',
         'django-autoconfig==0.3.6',
+        'django-pipeline==1.5.4',
 
         'pyyaml==3.10',
         'rapid-router >= 1.0.0.post.dev1',
@@ -55,6 +56,7 @@
         'Pillow==2.9.0',
         'django-reversion==1.9.3',
         'sqlparse',
+        'libsass',
       ],
     tests_require=[
         'django-setuptest',


Test patch: