Redmine theme forked from the vanilla Redmine theme and converted to SASS
CSS JavaScript Shell
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
fonts added fonts Oct 10, 2016
javascripts fixed wiki preview selector Mar 22, 2017
screenshots updated screenshots Oct 21, 2016
src/sass cleanup fix Jul 25, 2017
stylesheets css update Jul 25, 2017
vendor/fontawesome/fonts added fonts Oct 10, 2016
.bowerrc init Oct 4, 2016
.gitignore redmine -> components Mar 3, 2017
README.md updated README Jul 25, 2017
bower.json init Oct 4, 2016
gulpfile.js private -> src Mar 3, 2017
init.sh use redmine images directory Mar 3, 2017
package.json npm package update Feb 23, 2017
scss-lint.json init Oct 4, 2016

README.md

This repository contains a SASS based Redmine theme forked from the vanilla theme (public/stylesheets/application.css).

It supports Redmine v3.4.

This work is licensed under CC by-nc-na license.

Screenshots (can be older than head)

Overview Roadmap Issues Issue Wiki

Changelog

  • Disabled header project list added on V3.4

Features

  • Project overview : show sub-projects as a vertical list
  • Wiki : use tabs for wiki edit form and preview, similar to github

Changes from the original

First steps:

  • applications.css was converted to SASS using sass-convert
  • and splitted according to sections

Ongoing changes :

  • improve readability on a 150 dpi screen (more spaces, larger font size)
  • convert icons to FontAwesome
  • replace inline values by variables

Design Rules

  • update first the most used parts of the Redmine interface
  • flat design and contrasted colours (look at material design)
  • use custom settings to help user to customise the stylesheet
  • only support modern browser
  • use the power of SASS
  • use jquery to patch the DOM (patched erb would break Redmine for other themes)

Difficulties

  • Redmine HTML code is prior to Bootstrap era and its semantic is not well defined. We can patch the DOM when it is mandatory, but it is a last resort.

What cannot be done ?

  • style issue status : status-1 status-2 ... classes are related to the Redmine instance setup, Redmine should implement a way to inject CSS from Administration, workaround is to patch at SASS or CSS level.

Redmine Links

How to install

Steps to install this theme :

  • clone the repository or unzip the archive in the public/theme directory of your Redmine instance,
  • copy images directory : cp -r ../../images/ .
  • check file permissions
  • theme's name is defined by the directory name
  • select this theme in Administration / Settings / Display / Theme

How to generate the stylesheet from scratch

It requires a standard web development stack (NodeJS, Bower).

First install NPM packages:

npm install

and Bower packages:

bower install

Run the shell script init.sh to copy images and fonts.

then run Gulp to generate the stylesheet:

gulp

Look at src/sass/redmine/_settings.scss to customize this theme.