Book Image

TypeScript Blueprints

By : Ivo Gabe de Wolff
Book Image

TypeScript Blueprints

By: Ivo Gabe de Wolff

Overview of this book

TypeScript is the future of JavaScript. Having been designed for the development of large applications, it is now being widely incorporated in cutting-edge projects such as Angular 2. Adopting TypeScript results in more robust software - software that is more scalable and performant. It's scale and performance that lies at the heart of every project that features in this book. The lessons learned throughout this book will arm you with everything you need to build some truly amazing projects. You'll build a complete single page app with Angular 2, create a neat mobile app using NativeScript, and even build a Pac Man game with TypeScript. As if fun wasn't enough, you'll also find out how to migrate your legacy codebase from JavaScript to TypeScript. This book isn't just for developers who want to learn - it's for developers who want to develop. So dive in and get started on these TypeScript projects.
Table of Contents (16 chapters)
TypeScript Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Styling the app


The app can be styled using CSS. Not all CSS properties are supported, but basic settings like fonts, colors, margin, and padding work. We can add a stylesheet in the app adding the following code before application.start():

application.cssFile = "style.css"; 

We will change the style of the following parts of the app:

In app/style.css, we will first give the ActionBar a background color:

ActionBar { 
  background-color: #237691; 
  color: #fefefe; 
} 

Tip

The stylesheet must be added in the app folder, instead of src. NativeScript will only load files inside app. TypeScript files are compiled into that folder, but the stylesheet should already be located there.

We will add some margin to the labels in the list and details page:

Label { 
  margin: 10px; 
} 

The main page is now properly styled, as shown in the following screenshot:

We can also style the label on the detail page, which we gave a class name. We make the text in the label bigger...