Develop Reference

Trouble using Zurb Foundation with ECharts

I'm new to using Zurb Foundation and I'm having trouble to combine it with the ECharts library. Because of some "dirty testing" in the dist folder I'm pretty sure this is possible to achieve.
I couldn't find any useful instructions for including additional JavaScript in Foundation projects.
It seems the ECharts script gets loaded but it doesn't work, there's this error:
ReferenceError ("echarts is not defined") occurring on calling echarts.init( ... )
What did I do:
I've put the echarts.min.js file into the /src/assets/js/ folder of my project.
the file is referenced in the head section of my layout file as described here https://echarts.apache.org/en/tutorial.html
I also added a reference to echarts.min.js in the config.yml file of my project.

MEAN app: Can't find theme in Angular material

So I just discovered Angular material. I wanted to set it up, but the browser can't load the Angular material theme. It gives me the following error:
Could not find Angular Material core theme. Most Material components
may not work as expected. For more info refer to the theming guide:
https://material.angular.io/guide/theming
And,
Resource interpreted as Stylesheet but transferred with MIME type
text/html:
"http://localhost:3200/node_modules/#angular/material/prebuilt-themes/indigo-pink.css".
First, here is the structure of my project:
As you can see I added a element with a link to the indigo-pink theme in the index.hbs file. Before that I tried to import the theme into my styles.css file in the public folder with
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
Both ways ended up giving me the same above error. Does someone see what I'm doing wrong?

You definitely cannot refer to node_modules in the index.html. #import would be the correct way. Looks like you're using Webpack and not Angular CLI which would make this work automatically, so you need to find a Webpack plugin that handles #import and bundles the styles together, or if you have one, fix your webpack config. Try: https://github.com/webpack-contrib/css-loader

Draft.js styles not working

I'm trying to use Draft.js with the Image plugin. Here are my problems.
I manage to get it to work, but the styles aren't loaded and the editor takes the whole page and the buttons aren't styled.
I load the styles from the provided CSS
import './Draft.css';
import editorStyles from './editorStyles.css';
import 'draft-js-image-plugin/lib/plugin.css';
But it doesn't do anything.
I'm working with Create React App, so style-loader and css-loader should be working fine.
Thanks for the help.

About styles in draft-js-image-plugin/lib/plugin.css. It looks like a mistake in the plugin documentation. We can read there:
The plugin ships with a default styling available at this location in
the installed package:
node_modules/draft-js-image-plugin/lib/plugin.css
But if we check this file in our node_modules directory, we see that this file is empty. No any styles.
About other styles. Check that you have Draft.css and editorStyles.css files and this files located in the same directory that your component. Do you have some errors in the console? It would be great if you provide full your code.

MeteorJS file in template

I'm working on Meteor app, and we just received a HTML/CSS design, with a custom min.js for a slider, and I would add it in my templates and I don't know how to do it ..

You have to add all the required html, javascript and css files in the package.js file api.addFiles section.
api.addFiles(['css/file1.css', 'js/file2.js','file3.html'], 'client');

Missing something trying to get bootstrap included into meteor as a local git submodule

I'm trying to install a local copy of bootstrap into a meteor project to make it easier to customise it.
I was using the bootsrap-3 smart package and it was working pretty well, so removed that, created the directory tree and files described in Use Twitter Bootstrap 3 RC1 with Meteor and executed meteor add bootstrap which displayed the text from the summary string, but, no bootstrap is included in the project.
I added bootstrap with
git submodule add git://github.com/twitter/bootstrap.git public/bootstrap
and adjusted the paths appropriately in the packages/bootstrap/package.js file (even tried absolute paths to try and get it to work).
package.js looks like
Package.describe({
summary: "Load locale bootstrap scripts"
});
Package.on_use(function(api) {
api.add_files('../../public/bootstrap/dist/js/bootstrap.min.js', 'client');
});
I'm missing something, but struggling to find it.
Peter

You could stick to the standard way of creating packages by just putting Bootstrap 3's css, fonts, and js directories at the top-level of your package directory, and link to them like this in package.js:
api.add_files('css/bootstrap.css', 'client');
api.add_files('js/bootstrap.min.js', 'client');
...
If you care about the icons, add the fonts the same way. Then, create an override css file which loads last, overriding the paths to the icons in the Bootstrap css. An example of this override file is in Meteor's official Bootstrap 2 package, here. Also see the package.js file from the same, here (though I think you could skip using NPM to concatenate the path names).

One easy way to add bootstrap is just to place the files in your client directory, probably at client/lib. That is the simplest way if you are going to maintain and customise the files yourself. You will probably want both the .css and .js from bootstrap.
For a package, I would look at bootstrap3-less. It can be added with meteorite and gives you the less files which you can customise. If that doesn't suit you then you can at least see how the package.js there looks and how the package is organised.