Commit 5b35c97a authored by Owen Leonard's avatar Owen Leonard Committed by Wm. Nick Clemens

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: default avatarClaire Gravely <claire.gravely@bsz-bw.de>
Signed-off-by: Josef Moravec's avatarJosef Moravec <josef.moravec@gmail.com>
Signed-off-by: default avatarKyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Katrin Fischer's avatarKatrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Wm. Nick Clemens's avatarNick Clemens <nick@bywatersolutions.com>
parent 537c3098
......@@ -2,3 +2,5 @@
/blib/
/Makefile
/pm_to_blib
node_modules/
koha-tmpl/intranet-tmpl/prog/css/maps/
options:
formatter: stylish
files:
include: '**/*.scss'
rules:
# Extends
extends-before-mixins: 1
extends-before-declarations: 1
placeholder-in-extend: 1
# Mixins
mixins-before-declarations: 1
# Line Spacing
one-declaration-per-line: 1
empty-line-between-blocks: 1
single-line-per-selector: 1
# Disallows
no-attribute-selectors: 0
no-color-hex: 0
no-color-keywords: 1
no-color-literals: 0
no-combinators: 0
no-css-comments: 0
no-debug: 1
no-disallowed-properties: 0
no-duplicate-properties: 1
no-empty-rulesets: 1
no-extends: 0
no-ids: 0
no-important: 1
no-invalid-hex: 1
no-mergeable-selectors: 1
no-misspelled-properties: 1
no-qualifying-elements: 1
no-trailing-whitespace: 1
no-trailing-zero: 1
no-transition-all: 1
no-universal-selectors: 0
no-url-domains: 1
no-url-protocols: 1
no-vendor-prefixes: 1
no-warn: 1
property-units: 0
# Nesting
declarations-before-nesting: 1
force-attribute-nesting: 1
force-element-nesting: 1
force-pseudo-nesting: 1
# Name Formats
class-name-format: 0
function-name-format: 1
id-name-format: 0
mixin-name-format: 1
placeholder-name-format: 1
variable-name-format: 1
# Style Guide
attribute-quotes: 1
bem-depth: 0
border-zero: 1
brace-style: 1
clean-import-paths: 1
empty-args: 1
hex-length: 0
hex-notation: 0
indentation:
- 1
- size: 4
leading-zero: 1
max-line-length: 0
max-file-line-count: 0
nesting-depth:
- 1
- max-depth: 4
property-sort-order: 1
pseudo-element: 1
quotes:
- 1
- style: double
shorthand-values: 0
url-quotes: 1
variable-for-property: 1
zero-unit: 1
# Inner Spacing
space-after-comma: 1
space-before-colon: 1
space-after-colon: 1
space-before-brace: 1
space-before-bang: 1
space-after-bang: 1
space-between-parens: 0
space-around-operator: 1
# Final Items
trailing-semicolon: 1
final-newline: 1
/* eslint-env node */
/* eslint no-console:"off" */
let gulp;
try {
gulp = require( "gulp" );
} catch(e) {
console.error("You are missing required Node modules; run `npm install`.");
process.exit(1);
}
const gutil = require( "gulp-util" );
const sass = require("gulp-sass");
const cssnano = require("gulp-cssnano");
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const STAFF_JS_BASE = "koha-tmpl/intranet-tmpl/prog/js";
const STAFF_CSS_BASE = "koha-tmpl/intranet-tmpl/prog/css";
const OPAC_JS_BASE = "koha-tmpl/opac-tmpl/bootstrap/js";
const OPAC_CSS_BASE = "koha-tmpl/opac-tmpl/bootstrap/css";
var sassOptions = {
errLogToConsole: true,
precision: 3
}
gulp.task( "default", ['watch'] );
// CSS processing for development
gulp.task('css', function() {
return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
.pipe(sourcemaps.init())
.pipe(sass( sassOptions ).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest( STAFF_CSS_BASE ));
});
// CSS processing for production
gulp.task('build', function() {
return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
.pipe(sass( sassOptions ).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(gulp.dest( STAFF_CSS_BASE ));
});
gulp.task('watch', function(){
gulp.watch( STAFF_CSS_BASE + "/src/**/*.scss", ['css'] );
});
\ No newline at end of file
This diff is collapsed.
{
"name": "koha",
"description": "Koha is distributed under the GNU GPL version 3 or later.",
"main": "gulpfile.js",
"directories": {
"doc": "docs",
"test": "test"
},
"dependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.1",
"gulp-util": "^3.0.8"
},
"devDependencies": {},
"scripts": {
"build": "node_modules/.bin/gulp build",
"css": "node_modules/.bin/gulp css",
"watch": "node_modules/.bin/gulp watch"
},
"repository": {
"type": "git",
"url": "git://git.koha-community.org/koha.git"
},
"author": "",
"license": "GPL-3.0"
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment