Set default colors in materialize

1

I wonder if you have how to set a default color in the materialize framework, such as example is done in Material Design . This would avoid inserting the color of an element into each

Thank you in advance.

    
asked by anonymous 01.11.2016 / 20:39

1 answer

1

To do this you'd better use a css preprocessor type Sass , which materializes you from the support.

Then just download the source in the Materialize sass , you'll have it inside the folders fonts , js and sass , which is the folder that imports.

Inside the sass folder you will have the folder components and inside 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 customized version of materialize

If you do not know this technology, it is easy to learn, I started just 1 month ago and I'm already getting better.

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

I'll leave an example with Gulp :

If you do not know, study the basics of gulp a bit, but advancing

  • Download node
  • Then download gulp-cli : npm install gulp-cli -g
  • If your project is not a project managed by npm , a npm init and follow the instructions to create package.json
  • Download 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 named gulpfile.js
  • Paste this block of code into 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
});
    
01.11.2016 / 21:13