Hey guys,
I recently purchased a MaterializeCSS theme and am trying to use it on Meteor, but am facing some issues (not related to the theme itself, but rather to the integration with my Meteor project). The visuals are all broken (just plain text appears).
My questions are:
1 - The theme comes with a static HTML folder with all the pages and a JS folder that renders/initializes components. How should I “integrate” the theme files in my Meteor project so that I can apply routing AND perform JS tasks on them (such as template events/helpers)?
2 - The theme comes with Materialize and jQuery and all HTML pages have a and a tag referencing their CSS and JS files. However, Meteor has its own Materialize and jQuery package (that I am using). What is recommended: To delete the Meteor packages, delete the references from the theme, or keep both?
Theme: https://preview.themeforest.net/item/materialize-material-design-admin-template/full_screen_preview/11446068
Thanks a lot!
Well you need to rewrite the html templates into Blaze, React or what ever else are you using on the front-end. MaterializeCSS and what you bough has been designed for a static webpage, so you need to put it into your templates. Moving all the css/sass into your client folder will do for that part. As for js get the packages from npm or atmosphere, there should not be any <script src="..." /> in your html code for this thing.
1 Like
Thanks for the answer! Can I ask you a few more questions?
What has been done
I added the theme folder to my client folder (imports/ui), downloaded all the packages that were referenced through and removed all the tags. However, it is still not working… visuals are broken and from what I can see, Materialize itself is working, but the theme is simply not being called.
1 - Should I remove the tags and substitute them by something else, too? (the one’s calling .css files)
2 - Should I use Meteor’s materialize:materialize package (through Atmosphere) or download Materialize from NPM directly? What about jquery, use Meteor’s or download directly?
3 - I am using Blaze. I decided to separate my HTML code in two parts: On the “client” folder there is an index.html with the < head > and < body > tags. In the < head > tag there are all < meta > and < link > tags. The < body > tag is empty. Then, inside the “imports/ui” folder I have a body.html file with a Blaze < template > rendering the < header >, < main > and < footer >. The main tag renders dynamically whatever content is directed by the router.
Does this structure make sense or would you suggest changes? Might this be the source of the problems I am facing?
Thanks!
I have to say… I am feeling really lost here. There are hundreds of JS files and packages on the theme folder and I don’t know what I should do about them. Also: Do I need some kind of pre-processing for the theme to work? (do something with SCSS, Grunt?)
If you could enlighten me here, I would be very thankful!
Hi,
I havent worked with blaze for sometime, but I think this might helo you get on track.
- Take all the css files and put them inside the
/client folder (I suppose those css files include materialize)
- Take 1 of the page templates you want to use and put it inside of your blaze template, only what is inside the body (no meta, links, scripts or anything else should go on blaze templates as far as I remember, those are loaded automatically from client folder)
- Im not sure about the js files, havent used materialize. But at this point you should have the page being displayed.
/imports/ui wont load the css or any file if you dont import them, so put what ever you want to be eagerly loaded in the /client folder or use the /imports folder but you will have to import everything yourself.
I think that structure is not good for a project, but for testing and learning wont hurt. Check out the Meteor guide for blaze for more details on the structure.
You will only need a preprocessor if the files are not .css, I think those templates come with .css files.
2 Likes