Menu icon Foundation
Foundations dependency on Modernizr?

Hi Guys,

I have a question about the SASS work flow with Foundation 5.

I have noticed it's using Modernizr and i'm wondering how Foundation depends on this? Normally i would use a html5-shiv.js file to take care of IE and throw a condition around it so it only applies to ie9 or below.

I've inspected the modernizr.js file and it's substantially bigger so what is it doing beyond what shiv does? and what is it doing to other browsers? If is not wrapped in a conditional statement so whatever it's doing it's applying it across all browsers, is it excessive? Modernizr's description:

"Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser."

afaik, the only browser that is holding back at the minute is ie9 and below?

Another concern: In the interest of sticking to the awesome bower workflow, but keeping projects clean and free from bloat.. it feels counter productive, because if i go ahead and inspect the modernizr directory i can see it has cloned the entire repository... this again fees excessive, i could manually delete the unneeded files, but then updating a package through bower will simply replace them, if a project is long term it could become annoying.

When i compare this to the Fetch package in Sublime text 2, i'm struggling to see it's benefits.
I could setup a file fetch for modernizr.js and pull it in like so:
CMD + SHIFT + P, type "fetch file" press enter, type "modernizr" press enter

This will pull in the latest version from the source, press save. Job done...clean and simple.

I know i am not being forced to work this way, it is just curiosity over anything, i am relatively new to this work flow so it may just be that i am missing the point?

modernizrbowerworkflowFoundation

Hi Guys,

I have a question about the SASS work flow with Foundation 5.

I have noticed it's using Modernizr and i'm wondering how Foundation depends on this? Normally i would use a html5-shiv.js file to take care of IE and throw a condition around it so it only applies to ie9 or below.

I've inspected the modernizr.js file and it's substantially bigger so what is it doing beyond what shiv does? and what is it doing to other browsers? If is not wrapped in a conditional statement so whatever it's doing it's applying it across all browsers, is it excessive? Modernizr's description:

"Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser."

afaik, the only browser that is holding back at the minute is ie9 and below?

Another concern: In the interest of sticking to the awesome bower workflow, but keeping projects clean and free from bloat.. it feels counter productive, because if i go ahead and inspect the modernizr directory i can see it has cloned the entire repository... this again fees excessive, i could manually delete the unneeded files, but then updating a package through bower will simply replace them, if a project is long term it could become annoying.

When i compare this to the Fetch package in Sublime text 2, i'm struggling to see it's benefits.
I could setup a file fetch for modernizr.js and pull it in like so:
CMD + SHIFT + P, type "fetch file" press enter, type "modernizr" press enter

This will pull in the latest version from the source, press save. Job done...clean and simple.

I know i am not being forced to work this way, it is just curiosity over anything, i am relatively new to this work flow so it may just be that i am missing the point?


Karl Ward gave the most helpful answer for this post
Karl Ward about 5 years ago

If you open Foundation's custom.modernizr.js, you will find a comment at the top, something like this:

 /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-touch-shiv-mq-cssclasses-teststyles-prefixes-ie8compat-load
 */

Just copy the URL and you will get the Foundation Modernizr starting point. I am not sure you should remove more features than this default though ... Don't you think Foundation would remove them if they were sure they were not needed? You are probably playing a guessing game if you want to slim it more than this ...

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

Morenizr is used for feature detection and some polyfills.
There are not a lot of polyfill needed, since we don't support below IE9.
I know we use it for touch detection, but we're going to rewrite that functionality as custom for 5.3.

The files created by the CLI are meant to serve many purposes. The main purpose is to allow easy project creation and updating. We removed some of the redundancy in the latest release. Rather than deleting the files, you could just not upload them when your ready to deploy.

You could also skip the CLI and download here https://github.com/zurb/bower-foundation

Here are some of the bower component files and a description.
/js/vendor/
modernizr.js
- fastclick.js - You do not need to use fastclick.js, but is is included in the vendor folder as support is built into Foundation. Fast click removes the 300ms delay on click events in mobile environments and must be included in the header of the page.
- jquery.autocomplete.js - this file is not a dependency and was actually included by accident and will be removed in subsequent releases.
- jquery.cookie.js - this cookie extension to jQuery is an optional dependency of Joyride. If you want to use Joyride's cookie functionality you will need to include this library after jquery.
- jquery.js - use this copy of jQuery as the other will be removed in subsequent releases.
- placeholder.js - Placeholder.js is used as a polyfill for older browsers (IE9) to support input inline placeholders. This is not a dependency.

/js/foundation/
- foundation.js - this file is the Foundation library loader, it must be included before you include any of the individual components, it is not an expanded version of the foundation.min.js file.

Zachary Lyons about 5 years ago

So if I were to use a custom Modernizr build with the absolute minimum feature detections enabled, what feature detections would I need to keep?

Brett DeWoody about 5 years ago

I've wondered that myself @Zachary. If I wanted to build my own version of Modernizr to add tests for things like .webp images, which tests do I need to include?

Karl Ward about 5 years ago

If you open Foundation's custom.modernizr.js, you will find a comment at the top, something like this:

 /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-touch-shiv-mq-cssclasses-teststyles-prefixes-ie8compat-load
 */

Just copy the URL and you will get the Foundation Modernizr starting point. I am not sure you should remove more features than this default though ... Don't you think Foundation would remove them if they were sure they were not needed? You are probably playing a guessing game if you want to slim it more than this ...

Zachary Lyons over 4 years ago

I searched for 'Modernizr' in my project's foundation.min.js file. I see a couple references to Modernizr.touch, that's it. Also searched through foundation.min.css for each of the Modernizr body classes. In the CSS I found uses of .touch and .no-js.

I am now running a minimum-build version of Modernizr, no issues so far.
http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes

P.S. for future reference, I did this regex search in foundation.min.css and reviewed each result:
js|flexbox|no-flexboxlegacy|canvas|canvastext|webgl|no-touch|geolocation|postmessage|no-websqldatabase|indexeddb|hashchange|history|draganddrop|websockets|rgba|hsla|multiplebgs|backgroundsize|borderimage|borderradius|boxshadow|textshadow|opacity|cssanimations|csscolumns|cssgradients|no-cssreflections|csstransforms|csstransforms3d|csstransitions|fontface|generatedcontent|video|audio|localstorage|sessionstorage|webworkers|applicationcache|svg|inlinesvg|no-smil|svgclippaths

Rafi Benkual over 4 years ago

Modernizr is also used for the visibility classes - landscape, portrait.