NativeScript for Angular Styling Tips/Tricks

Learn how to style your app whether it's with standard CSS or with SASS. Also learn how to take full advantage of the default core theme to create your own custom themes.

Watch User Created Playlist (5)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Style NativeScript views using CSS

Style NativeScript views using the default core theme

Create a custom app theme using SASS for NativeScript

Modify status bar colors on iOS and Android with NativeScript

Use the nativescript-themes plugin to switch app themes on the fly

angular2 tutorial about Style NativeScript views using CSS

Style NativeScript views using CSS

2:05 angular2

Let’s learn how to style those native views with CSS and understand a few things that are unique to the native platforms regarding styling. A good majority of standard web CSS properties are supported with the addition of a few like horizontal-align that are unique to native platforms.

angular2 tutorial about Style NativeScript views using the default core theme

Style NativeScript views using the default core theme

2:35 angular2

The default core theme comes preinstalled and ready to go with every new project. Learn how to use some of the many helpful utility classes that are provided like common btn classes for Buttons, h1, h2, etc. Label classes and convenient p-10 or m-10 (shorthand margin/padding) classes ranging from 0 - 30. You can learn all about the rich options you get here: http://docs.nativescript.org/ui/theme

angular2 tutorial about Create a custom app theme using SASS for NativeScript

Create a custom app theme using SASS for NativeScript

3:38 angular2

Learn how to extend the SASS that ships with the nativescript-theme-core plugin to create your very own custom app theme. The setup takes advantage of common styling across iOS and Android as well as how to handle platform specific css. You can find a full list of SASS variables that can be overridden here: https://github.com/NativeScript/theme/blob/master/app/scss/_variables.scss You can also find a full list of baseline variable sets to base custom stylesheets within this section on the docs: http://docs.nativescript.org/ui/theme#color-schemes

angular2 tutorial about Modify status bar colors on iOS and Android with NativeScript

Modify status bar colors on iOS and Android with NativeScript

2:22 angular2

Learn how to programmatically change the status bar text color on iOS and Android as well as the background color. The lesson also covers how to adjust the text color to be dark on Android in cases where the status bar color may be light.

angular2 tutorial about Use the nativescript-themes plugin to switch app themes on the fly

Use the nativescript-themes plugin to switch app themes on the fly

3:18 angular2

Learn how use the nativescript-themes plugin to swap out entire stylesheets on the fly to provide theme switching for your app's users. Also covers how to ensure your app remembers which theme the user chose last before the app closed to apply their preferred theme next time they open it.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?