Search code examples
wordpressbowermaterializeroots-sage

Steps to add Materialize bower package to Sage theme?

I'm trying to add Materialize to this modified sage wordpress theme it is sage with bootstrap removed along with stylus and lostgrid added. [That link is repo without materialize that I'm attempting to add Materialize to.]

I've added these changes yet the materializecss and js don't seem to be available.

  "dependencies": {
    "materialize": "^0.97.7"
  },
  "overrides": {
    "materialize": {
      "main": [
        "./css/materialize.css",
        "./js/materialize.js"
      ]
    }
  }

You can see the commit here. [This is a repo with materialize added to the bower.json.]

What more has to be done to add a bower package to a sage theme or what am I doing wrong?

According to this page / comment the only step required is what I have done in bower.json.

Solution

  • I'm not seeing any Bower libraries added to your bower.json in the repo you linked to, so step 1 is to enter your theme dir and $ bower install materialize --save. Note that I performed this on a fresh install of Sage after I removed all Bower packages and overrides (I also commented all the @import directives in main.scss that come after the wiredep block to safely remove any remnants of Bootstrap's SCSS variables). If you decide to skip to the end of my answer and just use my bower.json file as your own then you'll just need to enter your theme dir and run $ bower install.

    After installing Materialize via Bower you should be able to run gulp and see evidence of Materialize, but there are a few issues we need to resolve:

    1. The main property of the Materialize project points to a CSS file and a minified JS file, both of these are not ideal and we will override them.

    2. That first issue above also means when you load your site after running gulp you'll see console 404s because we need to override the fonts too.

    This is the final bower.json file I ended up with:

    {
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <[email protected]>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "materialize": "^0.97.7"
  },
  "overrides": {
    "materialize": {
      "main": [
        "./dist/js/materialize.js",
        "./sass/materialize.scss",
        "./fonts/**/*"
      ]
    }
  }
}

    You will also need to add this to your main.scss file before the wiredep block:

    $roboto-font-path: "../fonts/";

    The overrides can be improved to use just the individual SCSS components you need instead of all of them. The same goes for the JS source (although the JS files definitely need to be included in a specific order, there are a lot of them and I haven't seen a list anywhere of how they need to be ordered).

    EDIT

    If you want to include the JS files individually then I've figured out the order, just beware of dependencies if you remove anything and test thoroughly.

    {
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <[email protected]>"
  ],
  "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/**/*"
      ]
    }
  }
}