A NativeScript plugin to deal with Declarative UI and Platform specific CSS

This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me [email protected].

What this does is automatically add "android" or "ios" to the current Page's cssClass variable, this allows you to do

Declarative UI:
<Page><Label class="awesome" text="Awesome"></Page>

CSS:
.ios .awesome { background-color: blue; }
.android .awesome { background-color: green; }

Automatically on iOS the color would be blue, on Android the color would be green.

tns plugin add nativescript-platform-css

To use the module you just require() it:

require( "nativescript-platform-css" );

Notice: You do NOT need to keep a reference to it; and you only need to load it once. I recommend you add it to your app.js file (or main.ts if Angular) and forget about it.

It will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.

Well, guess what Cascading means in CSS?
Yes, this means this works now:

StackLayout {
  background-color: red;
}

.android StackLayout {
  background-color: green;
}

StackLayout {
  background-color: red;
}

/deep/ .android StackLayout {
  background-color: green;
}

Or, I was recently informed that :host is a better way to do this as it has potentially less side effects.

StackLayout {
  background-color: red;
}

.android :host StackLayout {
  background-color: green;
}

So on ios the background would be red, on a android the color is green. Please note, in Angular you MUST prefix the rule with /deep/ or preferably :host for it to work correctly!

You can set ALL the normal CSS values this way include width, height, font-size. This allows you to reuse the majority of your css without having to have separate files.

This plugin in addition to doing the simple .android or .ios; will also create a .iosXXX or .androidXXX (where XXX is the DPI of the screen). On iOS there is a fixed number of sizes, on Android you can enable sizeGroupings which will evaluate each device and put them inside a range of sizes to make it easier to handle screen sizes. .sizeGroupings(true) = Enable (This features defaults to being disabled). The default groupings are [1280,1024,800,600,540,480,400,360,320]. If you want to have your own size groupings, you can do .sizeGroupings([size1,size2,size3,...]). The size groupings needs to be in largest to smallest, if you are using your own. The way it determines size groupings is that say the screen is 1100dpi, it would then get the grouping .android1280 because it is smaller than 1280 but bigger than 1024. Finally, it also sets the name of the device in the css; so Iphone X, will be iphonex. The device name will be lower cased, and anything not A-Z or 0-9 will be stripped out of the name.

So it sets three (or four) separate css classes on startup of each page; you can use any (or all) of them to use as css rules.

• .android | .ios
• .androidXXX | .iosXXX
• .phone | .tablet
• .notch - has a notch
• .softnav - if softnav is showing.

Please note these are calculated each page load.

Example: ios ios480 iphone6s phone android android1024 samsunggalaxytab5 tablet softnav

The demo will show you the css class names it generated.

There is also a related plugin called NativeScript-orientation that automatically will do the same type of CSS coolness for dealing with device orientation.

• Dave Coffin
• Steve McNiven-Scott
• Jonathan Salomon