If we’re being honest, our app currently doesn’t look quite representative. So, we’re going to change that in order to make it a bit nicer. Most of the changes that we’re going to make will be in the CSS files. However, if you talk with any web designer these days they will tell you that using purse CSS is, well, outdated. Ionic, as awesome as it is, has a support forSASS⁸⁹. So, in order to take advantage of the variables, nesting, mixins and all other great stuff that SASS provides, we’re going to prepare our project to use SASS by entering the following command in the Terminal/Command prompt:
ionic setup sass
Along with some other npm install related output, you should see something like this:
⁸⁸https://en.wikipedia.org/wiki/User_experience ⁸⁹http://sass-lang.com/
1 Successful npm install
2 Updated C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial\www\index.html
3
4 Ionic project ready to use Sass!
5 * Customize the app using scss/ionic.app.scss
6 * Run ionic serve to start a local dev server and watch/compile Sass to CSS
7
8 [14:56:01] Using gulpfile ~\Desktop\IonicTesting\Ionic_3rdTutorial\gulpfile.js
9 [14:56:01] Starting 'sass'...
10 [14:56:02] Finished 'sass' after 1.76 s
11
12 Successful sass build
13 Ionic setup complete
Our main starting point in changing how our application looks like is the scss/ionic.app.scss
file. It’s contents is short, and even though you may not have used SASS before, I’m sure it will look logical to you:
1 /*
2 To customize the look and feel of Ionic, you can override the variables
3 in ionic's _variables.scss file.
4
5 For example, you might change some of the default colors:
6
7 $light: #fff !default;
8 $stable: #f8f8f8 !default;
9 $positive: #387ef5 !default;
10 $calm: #11c1f3 !default;
11 $balanced: #33cd5f !default;
12 $energized: #ffc900 !default;
13 $assertive: #ef473a !default;
14 $royal: #886aea !default;
15 $dark: #444 !default;
16 */
17
18 // The path for our ionicons font files, relative to the built CSS in www/css
19 $ionicons-font-path: "../lib/ionic/fonts" !default;
20
21 // Include all of Ionic
22 @import "www/lib/ionic/scss/ionic";
As you can see, here we can override the default Ionic colors. Since you most probably have programming background, I’m sure you realize how important and useful SASS is.
When, for example, you want to change the color you only need to change it in one place in one variable, without having to trace it through all the files and change the certain color in all the places that it is used.
Also, here you can see that we’re including (better said importing) the other Ionic SASS files, which are nicely structured in different files. You don’t have to worry about multiple files because the gulpfile task produces a single minified version of the CSS on every save. I encourage you to check out the contents of the gulpfile.js file and see for yourself.
On the image below you can see what I came up with after changing few of the CSS rules (and a slight addition to our HTML template that I’ll address additionally):
I’m sure that more design-inclined readers will come up with way more slick design than this and I encourage you to share your images/scss changes with the rest of us, and I promise to incorporate the best one in the version of the book (with the proper credits, of course).
Now we’re going to go through the parts that were changed so that you can follow along in your example and see for yourself. But, before you start doing the changes you’ll need to add the following link code to yourindex.htmlfile just below the<title>tag in order to load the CSS file generated
through SASS (we removed this in the second chapter):
<link href="css/ionic.app.css" rel="stylesheet">
As for the changes, here is the final content of the templates/calculator.html file: <ion- view title="SuperSimple Calculator"> <ion-content padding="false" class="has-header" scroll="false"> <section class = "home-container"> <div class="myInputRow"> <form> <input type="text" placeholder="0" ng-model="result" class="myResultInput" /> </form> </div> <div class="button-bar row"> <button class="button button-stable button-block"
ng-click="btnClicked('7')">7</button> <button class="button button-stable button- block" ng-click="btnClicked('8')">8</button> <button class="button button-stable button- block" ng-click="btnClicked('9')">9</button> <button class="button button-energized button-block" ng-click="btnClicked('/')">/</button> </div> <div class="button-bar
row"> <button class="button button-stable button-block" ng-click="btnClicked('4')">4</button> <button class="button button-stable button-block" ng-click="btnClicked('5')">5</button> <button class="button button-stable button-block" ng-click="btnClicked('6')">6</button> <button class="button button-energized button-block" ng-click="btnClicked('*')">x</button> </div> <div class="button-bar row"> <button class="button button-stable button-block" ng-click="btnClicked('1')">1</button> <button class="button button-stable button- block" ng-click="btnClicked('2')">2</button> <button class="button button-stable button- block" ng-click="btnClicked('3')">3</button> <button class="button button-energized button-block" ng-click="btnClicked('-')">-</button> </div> <div class="button-bar
row"> <button class="button button-assertive button-block" ng-click="btnClicked('C')">C</button> <button class="button button-stable button-block" ng-click="btnClicked('0')">0</button>
<button class="button button-positive button-block" ng-click="btnClicked('=')">=</button> <button class="button button-energized button-block" ng-click="btnClicked('+')">+</button> </div> </section> </ion-content> </ion-view> Here is the breakdown of the changes that I
made:
• I first removed the<span class="input-label">Result</span>and edited theformelement
to just contain the following line of code:
<form><input type="text" placeholder="0" ng-model="result" class="myResultInput"></form>
• Notice the added classmyResultInputon theinputelement
• Also, notice thescroll="false"on theion-contenttag, which disables content scrolling
• I changed the title to SuperSimple Calculator from just Calculator on theion-viewtag
• Then I wrapped thisformelement in adivelement with the classmyInputRow
• Next, on the everydivelement with the classbutton-barI added the classrow
• Finally, I wrapped this whole content in thedivelement with classhome-container
1 .myResultInput {
2 font-size: 36px !important;
3 text-align: right !important;
4 width: 100%; 5 line-height: 36px !important; 6 height: 54px !important; 7 padding: 10px !important; 8 } 9 10 .home-container {
11 display: -webkit-flex;
12 -webkit-flex-direction: column;
13 height: 100%; 14 } 15 16 .home-container > .row { 17 -webkit-flex: 2; 18 padding: 0px !important; 19 } 20 21 .home-container > .myInputRow{
22 -webkit-flex: 1 !important;
23 }
Flexbox is used here as a basis in making the layout which fills the whole content horizontally. You can learn more about it fromthis Ionic specific tutorial⁹⁰, or you can learn more about Flexbox in general fromthis tutorial⁹¹.
Next, in thelib/scss/_variables.scssfile I changed the values of the following variables:
1 $button-block-margin: 0px !default;
2 $button-font-size: 32px !default;
3 $button-height: 70px !default;
Finally, in thelib/scss/_button-bar.scssfile I changed the value of the following rule inside the button-bar .buttonrule:
border-width: 1px;
This way we now have an interface which fills the whole available content.
⁹⁰http://www.joshmorony.com/how-to-create-complex-layouts-in-ionic/ ⁹¹https://css-tricks.com/snippets/css/a-guide-to-flexbox/