7 Styling NativeScript apps

 

This chapter covers

  • Using CSS to style NativeScript apps
  • Displaying images that visually appear the same size on various-sized mobile devices
  • Accounting for varying DPI densities when displaying images

Developing mobile apps isn’t about just the technical know-how. Mobile app development is also about creating beautiful apps, with a great user experience and stunning visuals. In other words, apps let mobile developers highlight their creative capabilities. Up until this point in the book, I’ve been focused on creating content and the technical side of organizing the UI; let’s be honest: the Tekmo app looks bland. I’ve ignored making the UI look appealing, and instead focused on functionality. It’s time for a change.

For an app to feel highly functional, the UI needs to be visually appealing. Think about it: how many apps are in the Google Play and iTunes stores? Millions of apps with tens of billions of downloads. How do you differentiate your app from the millions of other apps? What makes your app special? Well-designed and thoughtful functionality is one step, and a compelling UI is another.

7.1   Using cascading style sheets

7.1.1   Styling basics

7.1.2   Using global CSS styles

7.1.3   Styling a grid layout with page-specific CSS

7.2   Adding images to an app

7.2.1   Using the Image element

7.2.2   Challenges with displaying images on mobile devices

7.2.3   Solutions to DPI density differences

7.2.4   Displaying multi-resolution images in NativeScript apps

7.2.5   Styling images

7.3   Summary

7.4   Exercises

7.5   Solutions