Set colors patterns in materialize

Question

I wonder if you have how to set a color pattern in the materialize framework, as by example is made in Material Design. This would avoid inserting the color of an element in each one

Thanks in advance.

Answer 1

To do this you better use a pre-processor of css type Sass, that the materialize of the support.

Then just lower the source in Materialize’s Sass, Inside you’ll get it the folders fonts, js and sass, which is the folder that matters.

Inside the Sass folder you will have the folder components and within it will have the _color.scss, inside it will have all the colors of the framework, then just change and compile the materialize and you will have your version of materialize customized.

In case you don’t know this technique, it is easy to learn, I started only 1 month and I’m already managing to manage well.

Sass was made based on Ruby, so to compile it you will need the ruby on your machine or you can use the version Node also. I suggest you use version Node ai you can manage that the tasks of compiling the .scss. With Node I think better to use the Gulp, in case you already know and prefer also to use Grunt.

I’ll leave an example with Gulp:

If you don’t know, study the basics of Gulp a little, but in advance

• Download
• Then download the gulp-cli: npm install gulp-cli -g
• If your project is not a project managed by npm, of a npm init and follow the instructions to create the package.json
• Download the gulp, gulp-sass and gulp-watch
  • npm install gulp --save-dev
  • npm install gulp-sass --save-dev
  • npm install gulp-watch --save-dev
• Within your project create a file with the name of gulpfile.js
• Paste this code block inside your gulpfile.js

---

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  watch = require('gulp-watch');

gulp.task('compileSass', function() {
  gulp.src('materialize/sass/materialize') // aqui estou dizendo qual o arquivo principal de sass a compilar
    .pipe(
    sass({
      includePaths: ['materialize/sass'] // aqui estou mostrando quais pastas possuem os imports que meu arquivo principal usa
    })
      .on("error", sass.logError) // caso haja algum erro ele loga no console que você executar a task gulp
    )
    .pipe(gulp.dest('css')); // ele vai jogar o materialize compilado na pasta css
});

gulp.task('watch', function () {
  gulp.watch('materialize/sass/**/*.scss', ['compileSass']); 
  // aqui eu estou falando que o gulp vai "assistir" qualquer alteração em qualquer arquivo .scss 
     do meu projeto e a cada alteração ele vai compilar pra mim, é bom para desenvolver
});