How to use a free bootstrap template (e.g., from startbootstrap.com) in meteor. I mean where the resources- html file, css folders and js folders of the free template should be put and what packages are needed to add/remove in meteor project file? I have tried it several times but got errors and the program crashes each time. I also transfer the script and link tags from section to section, but it did not work.
Just add the css of the template to the client of your Meteor project. Also, try using the nemo64:bootstrap package for Bootstrap. This will add some files to your project automatically, one of which will say is editable at the top. You can put your custom css in that file.
You can put the relevant html, css, and js files anywhere on the client. (Sticking it inside a folder called client will do that).
Image and font files should go in a folder called public.
You will need to make meteor templates from the HTML files. As is they will be missing any <template name="foo"> tags.
The css files can go anywhere under /client and they will automatically be added to the project. These are the easy ones.
The js files are the harder ones. If you put these under /client they will be wrapped by Meteor and will not have global scope. In all probability they won't work at all. You can put them under /public and modify your head.html file to include them to get around that problem. Odds are there won't be very many js functions in the free template anyway so you might want to read through them and see which ones you really need and then convert those to be proper template helpers or global functions on the client.
Related
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
I've been having trouble implementing templates bought in themeforest in a meteor app.
I'm wondering, what would the best way to implement a template into a meteor app.
Two ways that I think of right now are:
(Tedious way)
Place javascript in Compatibility folder and try to name them in specific alphabetic order in order to get them to work properly.
Place css in client/lib folder and try to name them in specific alphabetic order in order to get them to work properly.
Place fonts and images in the public folder.
The second way (I haven't tested it yet) is to place the template files in the public folder and just link them manually (the old/non-meteor way) in the index.html file.
Now I'm not sure if these are the correct ways to do this and I would like some information regarding this issue.
Thanks!
I've done this myself with a themeforest theme.
Put the theme's css file under /client - it doesn't need to be in /public
Use the class names your theme uses in your templates. Typically a theme will have 3x what you really need so this ends up being much less work than it might seem. If your theme is built on bootstrap then it's even easier.
My theme used fontello a lot for icons, I had to recreate the folder hierarchy under client/fonts and then make sure the cross-references were correct.
Typically themeforest themes don't use js that much, I completely ignored all the js that came with my theme and created what I really needed in Meteor.
I am using Magnolia CMS 5.3.4, the STK, and freemarker (FTL) template scripts.
Some components I have defined relies on specific javascript files. Right now, what I do is that I include these javascript files in the main.ftl template script. I am looking for a way to get them included only if the specific component is present on the page.
I tried to use the jsFiles property in Template Definitions, but it seems it works only for page template definition.
The jsFiles property indeed works only for pages not for components. This is because Magnolia wants to include those files in header already, rather than loading them in middle of the body when component gets rendered.
As a general practice I would anyway recommend combining your js files into one (look at for example plugin loader in resources on how this is done) and set longer time for caching such file so that browser downloads all the script just once for the whole site rather then page by page. The bigger js file you are sending over the more overhead you are cutting off from requesting separate files and better the compression of content for transport will work.
HTH,
Jan
My default ASP.NET MVC 4 project has bundles created for JQuery and JQuery UI that is referenced in the pages.
I want to change this to use an absolute link from a CDN instead of relative on my web server.
I thought it could be as simple as just changing the url's in the bundles to point to the CDN urls. I understand why this won't work because bundles essentially bundle everything up into one file. These cases, I only have one file though.
I'm wondering. What is the best practice here. Basically, I want the code to exist in my layout or even individual pages that directs the view to load the script tags for these scrips. Then I can manage which script tags are included. The same way we do it with bundling, but I want it to work by doing the bundling and also do any other alternative script tags instead of the bundle. This way I can swap in and out depending on how I feel I want to manage my scrips at any one time. Let's say I want to add another js file to the bundle some day, or I want to include another script that will have it's script tag rendered on every page. I want a central place to do this.
Thoughts?
The problem is like this:
We're trying to implement a versioning scheme for our CSS and wherever we have accessed CSS through href (like \themes\ssss\abc.css) we append this link with a build number programatically (such as \themes\ssss\abc.css?1011) so that with new build the client gets the latest css files.
The problem is coming in themes. For e.g. under App_Themes we created a theme folder with the name MyTheme; now wherever this theme is used we need the CSS for this theme to be replaced by latest build files. How to do that?
why don't you create a new theme folder on each build/deploy?
Something similar to \themes\ssss-1011\abc.css.
Add some extra hash to your css url ("#somethingnew"). You can also you tools like SquishIt. It also can minify you css/js files.