Over a million developers have joined DZone.

Mobile Citizen Engagement App in Ionic 2: Part III

In this part, we will dress up the plain template to make the final application.

· Mobile Zone

The first parts of this series were focused on building a functional mobile application using Ionic 2 framework from a starter template project. Ionic leverages SASS to make theming a mobile application across device platforms easy. In this part, we will dress up the plain template to make the final application. 

SASS is a shortened acronym for Syntactically Awesome Style Sheets. SASS is an extension to CSS so it is fully compatible with CSS. What it does is it makes managing multiple CSS files simpler as it allows imports, variables, nesting, and many other capabilities. SASS has a preprocessing that converts a .scss file to the required .css output. The great thing with Ionic's build script already includes the SAAS preprocessing.

Ionic has a set of icons that are readily available for style sheets. This helps convey a message to the user about information they are looking at. Continuing on using pictures to convey a message we will put an image on the home page to convey the city's data that we queried is coming. So let's load a nice little picture of the Seattle skyline.

Here is a nice sample found doing an image search. This image will go into the project's /www/img/ folder. If the img folder doesn't exist create it. 

Image title

In the first part of the homepage, we had put a basic <ion-card> with some text and a query button.  So lets add a simple image tag to place this image on the home.html page. The HTML section looks like this:

    <img src="img/seattle.jpg"/>
    <div class="card-title">Seattle</div>
    <div class="card-subtitle">Permits</div>
 <div padding>
        <button ion-button block (click)="getPermits()">Search</button>

To create some style to this page, open the /src/pages/home/home.scss file. This will be the styling for just this page. There is a .scss file for the overall app that will be covered in a minute. For now, we are going to set the cards for this page so text is centered and within the image.

Modifying the page's .scss file allows the designer to override the overall theme for this page. The changes to make look like this in the home.scss file. 

page-home {
.card-background-page {

  ion-card {
position: relative;
text-align: center;

  .card-title {
position: absolute;
top: 36%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff;

  .card-subtitle {
font-size: 1.0em;
position: absolute;
top: 52%;
width: 100%;
color: #fff;

Next, apply this style class to the page's content change <ion-content> tag to use this class.

<ion-content class="card-background-page">

Now the page should render to the center of the image.

Ionic allows designers to set the overall theme of the application with a file called /src/theme/variables.scss. Ionic's components allow developers and designers to focus on design of their applications  and less about how the component will work for a particular platform. Example, the navigation bars between windows mobile, android and IOS are different. 

Ionic's themes allow designers to define and override styles for each platform. Each platform's style identified as:

Platformmode Details
iosiosstyle for iphone, ipad,  or ipod devices
androidmdMaterial Design for viewing on android devices
wpwpWindows phone

The style for each component is defined as variables that will override the component's style for all platforms or each specific platform.

In the /src/theme/variables.scss file for the application, the modification for the theme is the following listing.

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
@import "ionic.globals";

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

$text-color:        #000;
$background-color:  #fff;

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$light:                           #fff !default;
$stable:                          #394264 !default; // bg color dark
$positive:                        #7b7250 !default; // button 
$calm:                            #11c1f3 !default;
$balanced:                        #fcb150 !default; // spinner orange
$energized:                       #11a8ab !default; // top header cyan
$assertive:                       #BF3030 !default;
$royal:                           #50597b !default; // items

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #444,
  favorite:   #69BB7B

$background-color:           $stable;
$list-background-color:      $royal;
$toolbar-background:         $energized;
$toolbar-active-color:       $light;

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$button-ios-background-color:     $positive;
$card-ios-header-color:      $calm;

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$button-md-background-color:     $positive;
$card-md-header-color:      $calm;

// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
$button-wp-background-color:     $positive;
$card-wp-header-color:      $calm;

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.default";

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/

$ionicons-font-path: "../assets/fonts";
@import "ionicons";

The final resulting application should look like this:

Image title

With SASS and Ionic's framework, it was very easy and quick to make changes to the theme of the application. Ionic's server command line tool that allows designers to run the application and view changes in a desktop browser. As the .scss file changes are preprocessed  designers can adjust their themes and styles immediately without needing to recompile that application in a native emulator. 

You can see that building a hybrid mobile application can be quick and easy as many of the tools and libraries designers and web developers have been using for some time. For mobile applications that are commonly needed for extending business based applications the hybrid mobile application model definitely has come a long way.

Source on github: https://github.com/wiyou/citypermit

ionic ,mobile ,ux/ui design ,scss ,sass

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}