I’ve read a couple of posts that indicate that some CSS frameworks do not have UMD in core and may lead to issues when integrating with Javascript frameworks and modules.
Would you explain what is meant by this (hopefully in simplistic language as am new to javascript).
As I understand (all I know) is that there are 2 current module specifications (Commonjs and AMD) - with an attempt to unify to UMD.
In what way does UMD affect a CSS framework and also the integration with other JS frameworks?
Does it mean for example that the modules in the CSS framework can not be used by JS frameworks
or that you can not use plug-ins?
Hi @StevenReeves, well CSS is never in UMD as that’s a JS module definition.
UMD tries to infer in which module environment it is getting included by checking some variables. Most commonly that would be: if module and module.exports exist it uses commonJS, if define() exists uses AMD, and otherwise it exposes itself to the global window object.
However this doesn’t apply to CSS – CSS “modules” are just regular CSS files that can be included via the @import rule. Now JS frameworks that include CSS directly (i.e. from within the JS) usually do so with a special loader that is integrated in the build process, and compiles to JS that generates the CSS (or extracts the CSS to separate bundles).
But all that is not related to a particular module definition in any way. Can you maybe give an example of a CSS framework that is not supposed to work with UMD?
On slant site comparing bootstrap with foundation:
Foundation 6:
Con
Not UMD pattern in core
This problem will bring attention when used with Angular, React and other JS framework. It is important to know that they create app version of this framework.
I am trying to determine the best CSS framework to use with Angular 6 (b/w Bootstrap and Foundation).
You’re probably just overthinking it. You can use any CSS framework you want, it doesn’t have to be divvied up into modules. Just include the css file like you always have with any page. If you want to restrict it, then you can just encorpate the CSS build into your project build and cut out the parts you don’t want. Both Foundation and BS make this easy.
Many thanks for reply.
I do have a follow on but’s it’s not exactly related - so feel free to ignore.
BS and Foundation both seem to depend on JS - although I don’t think one has to use the JS part - but can just use the CSS. Would you know whether the JS part tends to be used as part of Angular or other JS frameworks as I’ve read there can be issues with using jquery/javascript along with Angular - since they render components in a different way. I’m not sure yet whether the CSS by itself is sufficient?
For Bootstrap, the CSS is sufficient. The JS parts only add a little bit of extra functionality, like Modals and Tooltips, but the core of it’s there.
You may be able to find an package that builds them in the Angular 2+ way and removes the jQuery dependency. You can do this for React using Reactstrap, which I’ve used and it works really well.
I haven’t used Foundation in years, but I imagine it follows the same methodology.
Yes that statement about UMD can only refer to the JS parts then… but it’s actually questionable if the JS that comes with bootstrap / foundation would work well with a framework in the first place. It’s more meant as standalone widgets, and might likely interfere with angular’s internal workings.
And even if it does not, the jQuery dependency would be kind of overkill together with angular… you might have a look at some pure angular implementations though, such as ng-bootstrap for example.