CSS and assets

Our good friend at the start-up (now dubbed Chatastrophe--what have you done?) has tapped a designer to provide some basic assets for us. These include a send icon for our chat box, and a logo for the application. You're not a fan of the style, but c'est la vie.

Let's go ahead and download the image files from https://github.com/scottdomes/chatastrophe-assets. You can download them by clicking on the Clone or Download button, and then selecting Download as Zip. Then, unzip those into the public folder, in a new folder called assets (all asset files should thus be in chatastrophe/public/assets).

Before we continue, we can ensure that our assets look okay by testing them in our index.html. Above <h1>, let's put in an img tag, with the src set to /img/logo.png, and an ID as test-image:

<img src=”assets/icon.png” id=”test-image”/>

Here's what it should look like:

This is even more beautiful.

The last thing we need to do is add our CSS. By the luck of the gods, all of our CSS has been mysteriously prepared for us, saving us the cumbersome task of styling our application. All we have to do is pull in assets/app.css.

We include it in our index.html with a link tag:

We should see an immediate change to our page. The background should be a gradiant, and the image should now have a slightly pulsing animation:

It worked! That does it for our main assets. Let's move on to some improvements to our HTML.