Adding modernizr

Hi everybody,

can anyone tell me how to add modernizr to sage? Step by step please. I tried for two days without results.

In my new Sage installation there isn’t modernizr.

Thank you.

2 Likes

This is what I did:

  1. Install the Modernizr command line tool by running: npm install -g modernizr
  2. Go to https://modernizr.com/download?setclasses and select the detections you would like.
  3. Click Build and click the Command Line Config | Download link
  4. Save the modernizr-config.json file in your assets/scripts/ directory.
  5. Browse to: /assets/scripts/ and run: modernizr -c modernizr-config.json
  6. Add the in step 5 generated modernizr script to your dependencies in the assets/manifest.json like this:
{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "files": [
        "scripts/modernizr.js"
      ]
    }
  },
  "config": {
    "devUrl": "http://example.dev"
  }
}
  1. Run gulp
  2. Enqueue your modernizr script in lib/assets.php before sage/js:
wp_enqueue_script('sage/modernizr', Assets\asset_path('scripts/modernizr.js'), [], null, true);

That should do it!
If you want to add or remove more detections, repeat step 2 - 5.

8 Likes

Thank you.

In this case modernizr.js is a separate file, right? Is it the best solution? Can modernizr stay inside main.js?

Yes it’s separate, but it always has been separate as far as I know.
I don’t think it’s an good idea to put it in your main.js, but you probably could by adding it as a vendor file in your manifest:

"main.js": {
  "files": [
    "scripts/main.js"
  ],
  "vendor": [
    "assets/scripts/modernizr.js"
  ],
  "main": true
},
1 Like

Ok, great.

Tell me another thing: if I would add owl-carousel2 and magnific popup inside Sage I must follow the same steps of adding modernizr?

Please help me.

Thank you

I have an error when I launch modernizr -c modernizr-config.json:

C:\Users\my-user\AppData\Roaming\npm\node_modules\modernizr\lib\build-query.js:22

property.replace(’-’, ‘_’);

TypeError: Cannot read property ‘replace’ of undefined

Please keep your thread about a single topic. Don’t keep asking for help with other issues. You also already asked about this in another thread.

You’re right. Can you help me? I try to work with bower but I don’t understand the steps. I read the manual without success.

Thank you in advance.

@Twansparant just a curiosity, why is not a good idea to put modernizr inside the main.js?
thanks

Sometimes you need a modernizr detection in your head and not in the footer, or you only need modernizr for IE9 <. If it’s in your main.js, you can’t enqueue it separately.

I needed to exclude modernizr.js from jshint to get it running, like described in this thread:

1 Like

First, thank you for topic. I did these steps above and gulp. There show a lot of errors on it.

Following picture:

Any solutions?

Yeah you should add the modernizr script to the jshint ignore list to prevent these errors

Thanks so much for this answer, very clear and easy to follow.

Due likely to an update in the Sage lib/ configuration since you posted this answer, the enqueue script commands have been moved to the lib/setup.php file, inside the assets function.
Just FYI

Cheers!

2 Likes

thanks so much for this answer.

I’m head banging trying to find out how to add the modernizr script to the jshint ignore file:

  1. where is jshint ignore
  2. what is code that I need to add.

Please and thanks!

.jshintignore is like .gitignore - you make a file in the root theme folder called .jshintignore and put the script you want to ignore in it like so:

If that doesn’t work you can use flags in your modernizr script like so:

... linted code ...
/* jshint ignore:start */
// Code here will be ignored by JSHint.
// Modernizr stuff here
/* jshint ignore:end */
... linted code ...
1 Like

Nothing to ad here :slight_smile:

Thank you! The .jshintignore did not work, but the flags did.

Isnt’t it eslint instead of jslint?