Skip to content

Latest commit

 

History

History
88 lines (54 loc) · 3.17 KB

README.md

File metadata and controls

88 lines (54 loc) · 3.17 KB
Raw

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

It supports Redmine V4.

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

Screenshots (can be older than head)

Overview Roadmap Issues Issue Wiki

Changelog

  • Fixes for Redmine V4 : removed edit/preview tab since it is now implemented by V4, unfortunately upstream is still using a CSS and did a lot of changes ...
  • 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.