Adding mobile CSS styles to your app
In order to further spruce up our app, we will be leveraging on the CSS libraries of TopCoat. You can get TopCoat CSS libraries from http://topcoat.io/. We also need to change our index.html file a bit more in order to leverage on the styles provided by TopCoat.
For a start, replace the stylesheet which points to Bootstrap CDN with the following code:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-mobile-light.css">After this, just before
<div ng-view class="todos"></div>, prepend the following code:<div class="topcoat-navigation-bar"> <div class="topcoat-navigation-bar__item center full"> <h1 class="topcoat-navigation-bar__title">Todos</h1> </div> </div>
This is to give a universal header that we commonly see in mobile apps.
After these changes, your
index.htmlfile should look like this:<!doctype html> <html ng-app="todoApp...
