Step 7

We've got all the bits and pieces in place with the exception of the main ingredient: connecting to and using the SIS API. There is, additionally, an issue with the presentation of the app: it looks like the Internet in its early years!

It will not be difficult to make the app visually more appealing. I, however, want to take this as an opportunity to tell you about CSS libraries. There are several libraries out there which you can use, for free, by including a few fils to your project. These libraries will make it easy for you to design slick and professional looking applications.

Here are some of the popular CSS libraries:

I will use a library called bootswatch which is based off bootstrap. There are several ready made themes; you can select one that you like and download the CSS file for it.

I downloaded the CSS file for the Litera theme: bootstrap.css and added the file to the project directory.

You must now update the link to the CSS file from inside the index.html:

-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="bootstrap.css" />

To have the styling attributes affect the html elements, we must assign class attributes corresponding to the CSS selectors to our elements. One approach to figure out what class attributes can be used is to inspect the "preview" page for the Litera theme. For example, I learned by inspecting, that I must add the following class attribute to the search button to make it look slick!

-    <button id="searchBtn">Search</button>
+    <button class="btn btn-primary" id="searchBtn">Search</button>