Link Existing HTML and CSS files into Meteor Project

Question

I want to integrate an lengthy already made form possessing both a css and html file into my existing meteor project. How would I do something like that? Is it possible to do something like this:

<template name = "premadeForm">
    somehow link with other html and css files
</template>

and then integrate that template into my application:

{{> premadeForm}}

I could be going about this in an unreasonable way. Thanks for the help.

score 2 · Answer 1 · answered Mar 27 '14 at 00:30

2

If you place the css file under the public folder, for example at /public/main.css you can link to it as yourapp.tld/main.css

And then you would have to create a link tag on the template with the src pointing to that URL. I am not sure if you will be able to load it in the header, but maybe in the body works fine for what you need.

Hope this helps!

answered Mar 27 '14 at 00:30

p4bloch

267
1
7

This only solves half of the problem. The question of how to include the existing HTML file(s) still remains. – Christian Fritz Mar 27 '14 at 00:37

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

The easiest way is to just copy/paste the HTML into your premadeForm template. CSS file can be dropped into the client folder and it will just work.

If you need to keep it separate you can load them yourself using the 'public' folder method that @p4bloch described. Putting them in the public folder makes them accessible from the client but doesn't automatically push them down. So you then need to load them yourself using an ajax call:

Assuming the files are directly in the 'public' folder:

Load HTML on-demand:

$.get( "yourform.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

Source: https://api.jquery.com/jQuery.get/

Load CSS on-demand:

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "yourcss.css"
}).appendTo("head");

Source: Load external css file like scripts in jquery which is compatible in ie also

edited May 23 '17 at 12:22

Community

1
1

answered Mar 27 '14 at 13:37

alanning

5,198
2
34
33

Thanks. I ended up just copy and pasting. However the new .css file messes of my previous set classes, such as input is defined different for the premadeform than for my original app. Is there a way to keep the css defined only for the premadeform template? – Nate Mar 27 '14 at 17:55
No easy way that I know of. Best to just namespace your css definitions: ".premadeform-header { font-size:1.2em; }" – alanning Mar 27 '14 at 19:51
Say in my premadeform I have modified the .css of the tag. However I only want the changes to only apply to the premadeform. Should `.premadeform-table { }` work for the css definition? Would I also have to change the html to `
`? I am confused about how the implementation would work.
– Nate Apr 03 '14 at 15:58
@Nate, any css class that is unique to the premadeform would be sufficient. You can also apply more than one class to an element. So for example, your table could be ``.
– alanning Apr 04 '14 at 18:50

Link Existing HTML and CSS files into Meteor Project

2 Answers2