i'm trying add materialize modified sage wordpress theme sage bootstrap removed along stylus , lostgrid added. [that link repo without materialize i'm attempting add materialize to.]
i've added these changes yet materializecss , js don't seem available.
"dependencies": { "materialize": "^0.97.7" }, "overrides": { "materialize": { "main": [ "./css/materialize.css", "./js/materialize.js" ] } } you can see commit here. [this repo materialize added bower.json.]
what more has done add bower package sage theme or doing wrong?
according page / comment step required have done in bower.json.
i'm not seeing bower libraries added bower.json in repo linked to, step 1 enter theme dir , $ bower install materialize --save. note performed on fresh install of sage after removed bower packages , overrides (i commented @import directives in main.scss come after wiredep block safely remove remnants of bootstrap's scss variables). if decide skip end of answer , use bower.json file own you'll need enter theme dir , run $ bower install.
after installing materialize via bower should able run gulp , see evidence of materialize, there few issues need resolve:
the
mainproperty of materialize project points css file , minified js file, both of these not ideal , override them.that first issue above means when load site after running
gulpyou'll see console 404s because need override fonts too.
this final bower.json file ended with:
{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "ben word <ben@benword.com>" ], "license": "mit", "private": true, "dependencies": { "materialize": "^0.97.7" }, "overrides": { "materialize": { "main": [ "./dist/js/materialize.js", "./sass/materialize.scss", "./fonts/**/*" ] } } } you need add main.scss file before wiredep block:
$roboto-font-path: "../fonts/";
the overrides can improved use individual scss components need instead of of them. same goes js source (although js files need included in specific order, there lot of them , haven't seen list anywhere of how need ordered).
edit
if want include js files individually i've figured out order, beware of dependencies if remove , test thoroughly.
{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "ben word <ben@benword.com>" ], "license": "mit", "private": true, "dependencies": { "materialize": "^0.97.7" }, "overrides": { "materialize": { "main": [ "./js/initial.js", "./js/jquery.easing.1.3.js", "./js/animation.js", "./js/velocity.min.js", "./js/hammer.min.js", "./js/jquery.hammer.js", "./js/global.js", "./js/collapsible.js", "./js/dropdown.js", "./js/leanmodal.js", "./js/materialbox.js", "./js/parallax.js", "./js/tabs.js", "./js/tooltip.js", "./js/waves.js", "./js/toasts.js", "./js/sidenav.js", "./js/scrollspy.js", "./js/forms.js", "./js/slider.js", "./js/cards.js", "./js/chips.js", "./js/pushpin.js", "./js/buttons.js", "./js/transitions.js", "./js/scrollfire.js", "./js/date_picker/picker.js", "./js/date_picker/picker.date.js", "./js/character_counter.js", "./js/carousel.js", "./sass/materialize.scss", "./fonts/**/*" ] } } } 
Comments
Post a Comment