Conditional CSS for iOS / Android? Meteor + Ratchet

mobile
1

Hi, I’d like to use the Ratchet CSS framework to style a mobile app.

Ratched offers an iOS and Android theme for their CSS. Just include one .css or the other.

How do I include these conditionally? The simplest thing that could work would be to just comment/uncomment before building.

Have you used a better way to have the app “detect” where it’s being built/run and link the right css file? Does it work well? Are there issues with juggling the css like this in Meteor?

There’s a Ratchet package in Atmosphere, but it just loads the ios version :-/

The files are in the project’s public folder.

Thanks!

Mike

2

Hi @michaelcole,

I would create a couple of helpers to detect iOS vs Android

Template.registerHelper('isIOS',function() {
    return ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
});

Template.registerHelper('isAndroid',function(){
    return navigator.userAgent.toLowerCase().indexOf("android") > -1;
});

and then use them in your app template to load the correct CSS file into the .

{{#if isIOS}}
    <link rel="stylesheet" type="text/css" href="ios-stylesheet.css">
{{/if}}

If you are hosting the CSS files yourself and not on a CDN then you’ll need to put them into the /public folder so that meteor doesn’t bundle them automatically.

3

Nice! I knew it was easier than I thought. Thanks :slight_smile:

4

This didn’t worked for me as <head> doesn’t allow template tags.

5

FWIW, the Android theme is broken in Ratchet (I don’t remember why, but I think it had to do with icon menus). I decided to just use the iOS theme for now and skipped device detection.

6

Ratchet is a great repo. Too bad Connors is not maintaining it anymore.

I’ve used it for my first mobile app and I’m pleased with the overall experience. I used only css though. Not the js part.

7

Art is never finished, it must be abandoned. Yeah, I like the css to and also skipped the js.

I think Bootstrap 4 may tackle some of these issues.

8

I liked the idea of a css made only for mobile and I didn’t like others like F7, OnsenUI, Ionic, etc.

Indeed I was concern with near native performance. Finally I settled down for Native Page Transitions from Telerik. It’a Cordova plugin.

Imho it’s the safest bet someone may make today. Page transitions are native, thus with no performance issues.

Planning also to try React Native in the near future and see first hand what this buzz is all about.

For now I’m quite happy with my current set of tools for mobile dev in meteor.