What can be done to make changing colors easier?

[markseuffert]

One of the first things that I do for a website is taking an existing stylesheet and adjust it. Changing font is not difficult, you choose one and modify the top of a stylesheet. Changing colors is more work, you need to modify the CSS at different places, swear and listen to Ramstein. Maybe this can be improved with SASS/SCSS support... anyone has some experience using it?

What can be done to make changing colors easier?

[dominikwilkowski]

There are many different CSS preprocessors out there that are passionately fought over. I don't think there is an advantage over another other than personal preferences and ego stuff :)
Just as a reference:
Bootstrap is written in LESS
There are great libraries for Stylus and SASS and so on...

The one thing we can all agree on though is that preprocessors are a great tool for maintaining a bigger codebase and part of a professional workflow.

More to read for real world use:
Githubs CSS
Lonely Planet CSS
Codepens CSS

[markseuffert]

Thanks Dominik!

I wonder which CSS preprocessor is most popular, is there a big difference between LESS, Stylus and SASS? Anyone can recommend a PHP library that would work with Yellow, e.g. stable and not too big?

[dominikwilkowski]

Hey.

Well, my personal opinion is not to make any assumption on how devs want to work. I would keep this out of the framework as anyone can easily run their preferred preprocessors and feed it into the front-end code.

To which library is more popular I would say Less and SCSS but who knows.
These are traditionally implemented in NodeJS or Ruby and I'd be keen to see what the speed is on PHP if there even are any libs out there for PHP :)

Perhaps the best way to tackle this is to give users a grunt or gulp build in which they can elect to run whatever they want to. I'd be willing to bet that most front end devs have their own task runner setup anyway. For everyone else, preprocessors might be a bit too much anyway.

[dcschmid]

Personally i used the gulp task runner, it was clean and simple. Have anyone interessed on my gulp configuration file?

[dominikwilkowski]

👍

[dcschmid]

Gulp tutorial

Before the start install node.js

1. Install Gulp globally:
   npm install gulp -g
2. Then install gulp locally to the project:
   npm install gulp --save-dev

I personally used the following plugins:

gulp-autoprefixer - Parse CSS and add vendor prefixes to CSS rules
gulp-bless - CSS post-processor which splits CSS files suitably for Internet Explorer < 10
gulp-combine-media-queries - Combine matching media queries into one media query definition. Useful for CSS generated by preprocessors using nested media queries.
gulp-concat - Concatenates files
gulp-cssjoin - Extend and join css @import loaded file
gulp-csso - Minify CSS with CSSO
gulp-imagemin - Minify PNG, JPEG, GIF and SVG images
gulp-less - Less Compiler for Gulp
gulp-livereload - Gulp plugin for livereload
gulp-newer - Only pass through newer source files
gulp-rename - Rename files
gulp-uglify - Minify files with UglifyJS
gulp-util - Utility functions for gulp plugins

1. Install the plugins to the project and save them to devDependencies in package.json:
   npm install gulp-autoprefixer gulp-autoprefixer gulp-bless gulp-combine-media-queries gulp-concat gulp-cssjoin gulp-csso gulp-imagemin gulp-less gulp-livereload gulp-newer gulp-rename gulp-uglify gulp-util --save-dev
2. Now create the gulpfile.js in the root folder of the project and add the folowing code:

// Include main components
var gulp = require('gulp');
var gutil = require('gulp-util');
var lr = require('tiny-lr');

// Include CSS components
var less = require('gulp-less');
var prefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
var cmq = require('gulp-combine-media-queries');
var cssjoin = require('gulp-cssjoin');
var bless = require('gulp-bless');

// Include JS components
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// image components
var imagemin = require('gulp-imagemin');

// Include utilities
var path = require('path');
var rename = require("gulp-rename");
var notify = require('gulp-notify');
var newer = require('gulp-newer');
var livereload = require('gulp-livereload');
var psi = require('psi');
var server = lr();

//Less Compilation
gulp.task('less', function () {
gulp.src([
'assets/styles/less/default.less' // I have create here a new folder for all assets (Less/images/js and the created minified files)
])
.pipe(cssjoin())
.pipe(less({ paths: [ path.join(__dirname, 'less', 'includes') ] }).on('error', gutil.log))
.pipe(cmq({log: true}))
.pipe(prefixer('last 10 version'))
.pipe(rename({suffix: '.min'}))
.pipe(csso())
.pipe(bless())
.pipe(gulp.dest('assets/styles/min/'))
.pipe(livereload(server));
});

//JS compilation
gulp.task('js', function () {
gulp.src([
'assets/js/source/default.js'
])
.pipe(newer('assets/js/min/main.min.js'))
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify({mangle: true}).on('error',gutil.log))
.pipe(gulp.dest('assets/js/min/'))
.pipe(livereload(server));
});

//Image optimation
gulp.task('images', function () {
gulp.src('assets/images/source/*/')
.pipe(newer('assets/images/min/'))
.pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
.pipe(gulp.dest('assets/images/min/'))
.pipe(livereload(server));
});

//Watch for LESS, JS and Image changes and run the respective compilers automatically
gulp.task('watch', function () {
server.listen(35729, function(err){
if (err) return console.error(err);

gulp.watch('assets/styles/less/**/*.less', ['less']);
gulp.watch('assets/js/**/*.js', ['js']);
gulp.watch('assets/images/**/*', ['images']);

});
});

//Default Task
gulp.task('default',['less', 'js', 'images']);

1. Now you can run "gulp watch", then it will be runs the tasks automatically. Or you can run the named task with "gulp less" for the less tasks.
   Its very extensible it have a lot of plugins for gulp js under http://gulpjs.com/plugins/.

[annaesvensson]

I have some good news, we switched to configurable colors in CSS.

You can define text colors and backgrounds at the top of a stylesheet, which should make it super easy to customise a theme. It works with CSS variables. The next step is to add light and dark mode support to available themes, then we should be ready for everyday life.