Using Materialize in lieu of Bootstrap

So, in Spark, I am wanting to replace bootstrap with Materialize. I'm still getting used to Gulp and how that works, wondering if I have this process right:

I have installed Materialize-css using NPM
in resources\assets\less\app.less comment out @import "node_modules/bootstrap/less/bootstrap";
I created a new folder and file resources\assets\sass\app.scss and in it I put: @import "node_modules/materialize-css/sass/materialize";
In gulpfile add: mix.sass('app.sass') is that everything I need to do for the CSS?

For the javascript part I am not really sure what to do, I see under resources\assets\js there is a bootstrap.js file, and in it there is:

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

Also, is this a bad idea? I like the look of materialize but I am not sure how well it works on mobile devices. When I was exploring the framework on my ipad there were a few instances where the sample elements didn't render correctly. maybe I should just stick with bootstrap, expecially inside a spark app?

Any thoughts, advice, further instruction is greatly appreciated. Thanks in advance to an who answer.

ejdelmonico

9 years ago

Level 53

Well, bootstrap is heavily relied upon by the Spark framework. It would be futile to try and change. Even if you managed to change it over, you would not be able to update without difficulties. However, You could use what ever you wanted for the front-end. And, there is a few .less files that you could change the look a bit to match your front-end.

mniblett

9 years ago

Level 5

@ejdelmonico said: However, "You could use what ever you wanted for the front-end."

Isn't bootstrap only concerned with the front end anyway? But maybe you mean, the UI for the user, as opposed to the UI for the administrator? In other words, leave all the Spark components set up with bootstrap but change to Materialize on all the ones I create. The issue with this is there would be a lot of conflicting names (which might actually make it easier to migrate from one css framework to the other), although maybe there is a way to deal with this I'm unaware of.

I will probably just stay with bootstrap.

ejdelmonico

9 years ago

Level 53

In Spark, bootstrap is only used for the views that are produced by the back-end. You can use whatever you want for the welcome and other pages to your app. I do that now by using a separate elixir task for say main.js and main.css which are used only for the views not associated with Spark. In short, you can use Materialize for the non-Spark views...you don't even have to use Vue for those pages either.

Adrian Smith

7 years ago

Level 3

It would be nice if there was an easy way to migrate Spark to materializecss.

Please or to participate in this conversation.