MeteorJS file in template - javascript

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');

Related

Using laravel mix for production

What are the best practices of compiling files? Should i make 1 compiled js file with a lot of unused libraries on different pages? Or should i manually compile different files for different pages?
What I suggest is you can organize your JS and CSS into categories like this
frameworks.js - includes Jquery, Bootstrap JS etc
application.js - specific to your application
You can do the same thing with the css files
framework.css
application.css
I would take all of your application JS files like login.js, validation.js etc and compile those into application.js
Same idea with the css files.
All of your dependencies will be in one file and application specifc JS into your main application.js file

How to automatically link asset files that I add manually to my project (JS and CSS) to a template file

I have been using AngularJS for around 6 months now and have recently started using Yeoman and Grunt to help with my workflow.
Is there a way to have grunt update my index.html file for files/scripts that I add manually into my app folder?
I know that if I use the command:
$ yo angular:service New-Service
then a boilerplate file will be created and my index.html file will be updated to reference the new file.
Is there a way to have this functionality for files that I do not add with the syntax shown above?
Thanks for the help.
You are searching a linker. There are several grunt plugins to do this job :
- grunt-asset-linker
- grunt-sails-linker
Here is what you have to do :
Add a grunt task with (grunt-contrib-watch) to watch folders where files are added
Add a task with (E.g : grunt-asset-linker) to link all files from one or many folder to your index.html

CSS not loading for React Foundation Apps

I have installed React Foundation Apps according to the docs:
http://webrafter.com/opensource/react-foundation-apps/install
I had to fiddle with the webpack.config.js file to make it parse .jsx files but now the module is working, except that no CSS is added. I'm trying to use the Modal but it just shows up on the page with no styling applied.
What can I have missed?

What is templates/system directory in Joomla 1.5?

What is templates/system directory in Joomla 1.5? Is it system template or common directory for all templates? May I put some javascript widgets there?
templates/system directory in Joomla 1.5 is not a complete template which you can apply likewise other templates - beez or ja_purity.
If you place the templateDetails.xml file in the system directory, it will also be listed in the template manager and you can make this template as default too. But, this template is almost blank. Styles and images are very less. index.php file in this template is just including component.php file which is just importing css only.
Hope this clarify your doubts. :)

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.

Categories

Resources