Open edX responsive theme using Bootstrap
CSS HTML JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Build Status Dependencies Status Dev Dependencies Status

Open edX responsive theme using Bootstrap.


About this Open edX theme

This theme is developped originally for IONISx.

As it’s based on Bootstrap, it used Less (instead of Sass – which is used by Open edX). It is very simply customizable, you just need to change a few Less variables (see /src/less/variables.less).

Getting started

First of all, you need to know that the CSS output of the Less files is included in the repository. It’s not a very good practice, but it simplifies the (already cumbersome) deployment workflow of Open edX.

This is so you will never need to install any of the development dependencies in your production environment.

If you want to use this theme, and customize it, I recommend that you fork it, update it, build the CSS output, and push it all in.

Development environment

First, install grunt-cli and bower globally (or not) in order to have the required build tools.

npm install -g grunt-cli bower

Then fetch the local depedencies.

npm install
bower install

Finally, run grunt to build the theme’s source files. grunt will watch for changes and re-build the output automatically.

Run grunt build for a one time build.
Run grunt test to lint and check the code style your source files as well.

Production environment

As said earlier, DO NOT run npm install nor bower install on your production environemnt (this will require you to install nodejs, npm and bower, and why would you need that for a bunch of static files?

Just drop the files into /edx/edxapp/themes/$WHATEVER using your deployment tools. If you’re using Open edX’s configuration ansible playbooks, you’ll just need to set

edxapp_theme_version: your-tag
edxapp_theme_name: $WHATEVER     # from earlier
edxapp_use_custom_theme: true

See Open edX’s documentation on custom theming for more information.