Bug 19474: Convert staff client CSS to SCSS
authorOwen Leonard <oleonard@myacpl.org>
Tue, 13 Mar 2018 13:57:36 +0000 (13:57 +0000)
committerNick Clemens <nick@bywatersolutions.com>
Thu, 9 Aug 2018 15:12:20 +0000 (15:12 +0000)
commit5b35c97a841bd2a8a199dc81b70c12d1c1beb0a4
tree462074e9c621909a807b65024f57549eb5fb7b72
parent537c30984fcd1cf3dc2efef43545fba0803e6b99
Bug 19474: Convert staff client CSS to SCSS

This patch converts staff-global.css to Sass, using SCSS syntax. This
changes the build process for Koha to include installation and execution
of yarn to install npm dependencies and run SCSS -> CSS conversion.

To test, apply the patch and run the following:

$ sudo apt-get install nodejs npm [not necessary in kohadevbox]
$ sudo npm install -g yarn
$ yarn install
$ yarn build

Clear your browser cache if necessary and confirm that CSS styling
throughout the staff client looks correct.

The "yarn build" command triggers a gulp process which compiles SCSS to
CSS, adds automatic vendor-prefixing, and minifies the resulting CSS
file.

There is also a "yarn css" command available which might be used by
developers who are making changes to SCSS. This command does two things
differently:

1. Adds .css.map files which aid CSS debugging using in-browser
   inspector tools.
2. Compiles staff-global.css without minification. It can be useful to
   see unminified CSS during development, especially to see how SCSS
   compiles.

This patch adds a configuration file for sass-lint, .sass-lint.yml.
Currently this configuration is not used during the build process but
can be used in a code editor which supports linting.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
.gitignore
.sass-lint.yml [new file with mode: 0644]
gulpfile.js [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss [new file with mode: 0644]
package.json [new file with mode: 0644]
yarn.lock [new file with mode: 0644]