responsive css

[martunta]

Looks like bootcards are using different css files depending on device os/size. And for that to work, all three - ios, android and desktop css files have to be included separately in the project. Otherwise nice side menu does not show up once you open the web app in the phone browser (or simulate phone in chrome dev tools) and everything defualts to defualt bootstrap collapse.

I have no idea how to solve that in meteor, as meteor compiles every css into one file and thats it. Looks like https://github.com/pcuci/bootcards also has had the same problem, as ios and android files are comented out.

And you must have noticed that as well, as you have ios file only for cordova.

And stackoverflow also shows that there are no good answers to this question: http://stackoverflow.com/questions/10610279/meteor-how-to-serve-multiple-css-for-different-media-types http://stackoverflow.com/questions/27263232/how-to-conditionally-load-bundle-css-files-in-meteor-1-0?rq=1

If full responsive potential of bootcards is not used, then it seems like a waste :/ probably have to include css files manually in public/ keep only js files in package.

Maybe you have any other ideas how to solve this?

[martunta]

no, including css manually from public/ does not seem to work either. looks like bootcards responsive magic keeps them all loaded at the same time, not like intended.

[markleusink]

Not much magic involved there. For the bootcards demo app I'm checking the user agent string on the Node server to determine what stylesheet to include (see https://github.com/bootcards/demoapp/blob/36e535a92851a7826787423e3961629ff9889ca1/app.js around line 100).

Of course you can also check that in the client (browser): see https://github.com/bootcards/xcomponents/blob/master/src/main.js around line 50.