What is the correct way to use Meteor with Modernizr?
I'd like to use modernizr-meteor, but don't know how it works or how to customize it. Do I simple get a custom build off modernizr, and then merge the js file with the latests yepnope.js
Since Modernizr needs a no-js class in the html, I can simply add the class in on startup.
in /lib/startup.js
Meteor.startup(function() {
$('html').attr('class', 'no-js');
});
The correct way to use 3rd party libraries with Meteor is to install them from Meteor's package repository, Atmosphere.
A search for Modernizr reveals two packages. As a rule, packages with mrt in the organization name (the part before :) were automatically migrated, and generally out of date. They should be flagged.
The other package looks like a decent (not ideal) candidate, so you'd run:
meteor add cwaring:modernizr
Related
I have the Less package loaded in my Meteor application and it is working fine. Now I need to allow the users of my app. to override my less variables. I have looked at :
less.modifyVars({
'#canvas': '#5B83AD'
});
but my app. is saying that 'less is not defined'. Can someone suggest how this can be done?
Less files can only be modified up to the point they're compiled to css files. This happens when you deploy your Meteor app.
It's not possible to change less variables at runtime. You would have to manipulate the DOM instead. Jquery is able to do this by targeting the DOM elements you want to change. You would have to tag them with a class.
An approach this way make work for you:
<div class="canvas"></div>
Then you could edit it at runtime using Jquery:
$(".canvas").css({background: '#5B83AD'});
Edit: I think the code you're refering to is the less.js client side file from https://github.com/less/less.js/. There's a bit more info under 'Client side usage' on http://lesscss.org/
This is a bit different from the Meteor less package, which is exclusively a server side compiler during development.
If you downloaded the less.js file (from https://github.com/less/less.js/archive/master.zip) and placed it in your /client/compatiblity folder you could use it in the way you wish. Keep in mind you may have to remove the Meteor less package since you want to load them raw, you will also need to reference them manually as Meteor will ignore the less once you remove the less package.
Searching on libraries for Stylus I've only found Nib.
I was wondering HOW TO install and use Nib on Meteor. The docs for Nib specify how to use it on pure Node.js; what is the procedure on Meteor?
Also: are there any other libraries for Stylus on Meteor? This info has been really hard to find since the meteor docs don't say anything.
The docs don't say this, but nib is automatically installed when you meteor add stylus. Note that you will still need to #import 'nib' at the top of any .styl files where you want the nib extensions.
As for the last part of your question, I'm not aware of other libraries for stylus. If you have something specific in mind, please update the question.
check out flexbox based grid system with autoprefixer: http://s-grid.meteor.com
You can also use it with Grunt scaffold: https://github.com/juliancwirko/s-grid-grunt and as a standalone npm package: https://www.npmjs.com/package/s-grid
There is also some other packages which uses nib, autoprefixer etc.: https://atmospherejs.com/?q=stylus
I can't seem to figure out how to remove jquery. I found this question How do I remove jquery from earlier this year, but I can't find any up to date information. Is it possible to remove jquery from meteor? meteor remove jquery says that jquery is not included in the project, but it is included in the generated html. I'd like to replace it with something a bit more lightweight like zepto.
At this moment this is probably not possible to do, as Meteor internals depend on JQuery. You can try to remove it and replace by Zepto, but most probably it won't work (this may change in a later release of Meteor).
jquery package is not included itself in a blank Meteor app. Instead, it's loaded by standard-app-packages. So to remove it, you need to remove standard-app-packages and then add all packages listed here, except of course JQuery.
I don't need jquery in my meteor app. When I type meteor remove jquery, answer is jquery: not in project.
But jquery is still attached in html.
Meteor internals (domutils) depends on JQuery, but I believe the plan is to remove that dependency at some stage:
See: https://groups.google.com/forum/?fromgroups=#!topic/meteor-talk/21y9NbM9v90
Domutils seems to be able to cope without jQuery if sizzle is present (see findAllBySelector).
Doing a quick scan of the code I didn't see any other uses (other than on the server side - in the less parser).
To remove/replace jQuery with another version (2.x or 3.x).
Clone jquery package from official sources into your project folder /packages.
Replace contents of jquery.js with anything.
Downloaded package will have a higher priority and will be used instead of original one. Do on your own risk.
This is how I remove jQuery from Meteor.
Make sure your code really doesn't depend on jQuery before doing this. Also adding any Meteor packages depending on jQuery won't work as expected anymore (e.g: materialize:materialize).
So, if you want to make sure jQuery is removed from Meteor no matter what, just put
Package.describe({
summary: "Remove jQuery from meteor",
name: "jquery",
version: '1.999.999',
});
into packages/jquery/package.js. No need to clone. No need to add any other files.
Check your .meteor/versions file for the entry:
jquery#1.999.999
to confirm it worked.
In the Meteor FAQs http://meteor.com/faq/how-do-i-package-a-new-templating-system there is some information about adding a different (than the default Handlebars) templating system. Jade is the only other example explicitly called out elsewhere in the docs.
So is somebody already working on Jade? If not, is it feasible for me to start? Or is it still too early? e.g. :
The package API is rapidly changing and isn't documented, so you can't
make your own packages just yet. Coming soon.
I've been trying to love Handlebars in my current Ember.js project, but for me nothing is as elegant as Jade.
We would love to see Jade integration. Use packages/handlebars as a template.
The basic strategy is to wire the output of the template engine into Meteor.ui.render which is how we implement live page updates. As long as your template returns HTML, that'll work. Any time a Jade template references a Meteor.Collection document or Session variable, Meteor will register that dependency so that knows to rerender the template when the data changes.
Even better, though, is to also use Meteor.ui.chunk and Meteor.ui.listChunk. These will limit the amount of recalculation Meteor has to do when there's a change. For example, if you are rendering a list of documents using {{#each}} in Handlebars-speak, there's no reason to recalculate the whole template when a new document enters the result set. We just render one HTML chunk for the new document, and insert that right into the DOM. That's listChunk in action.
So you'll likely find that instrumenting just if/unless and for/each in Jade gets you a long way there.
Just be aware, package development is not as documented as the other parts of the system. So don't hesitate to ask more specific questions as you go.
meteor >= 0.8.0
Using the mquandalle:jade package has been officially recommended.
meteor <= 0.7.2
If you are not using CoffeeScript, you should check out jade-handlebars. As of this writing, there is an issue where CoffeeScript template files seem to need to be wrapped inside a Meteor.startup function which caused other issues for me.
If you are using CoffeeScript, you should check out my Cakefile. The details are all in the description, but the short version is that it automatically adds/removes/updates html files alongside your jade files. I ended up adding *.html to my .gitignore, which only works if you are not mixing html and jade in the same project. It's a bit of a hack but so far it's working fine for me.
Just publish my first meteor smart package on Atmosphere!
Use Jade+Handlebars instead of HTML+Handlebars
https://atmosphere.meteor.com/package/jade-handlebars
Just got jade templating working with my Meteor projects! And it is actual jade not jade-handlebars or some half form of jade. It is great but it needs Meteor UI which is currently in a development release called blaze-rc1. So it does not work with Meteor 0.7 at the moment.
do 'mrt add jade'
&
Run your meteor project using 'mrt --release blaze-rc1'
https://github.com/mquandalle/meteor-jade/
If you have coffeescript and jade files in the same folder add _ to the beginning of the file name so it loads jade files before the coffeescript file, otherwise it will not work correctly.
mrt add jade
in client/views/templates/hello.jade you could do something like this:
template(name="hello")
h1 hello world!
{{greeting}}
input(type="button" value="click")
start you app with mrt