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.
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.
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
gulp-cli
: npm install gulp-cli -g
npm
, a npm init
and follow the instructions to create package.json
gulp
, gulp-sass
and gulp-watch
npm install gulp --save-dev
npm install gulp-sass --save-dev
npm install gulp-watch --save-dev
gulpfile.js
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
});