Styling the User Interface

We now have our running Aurelia application and know all the basic principles of JavaScript programming. Our Hello World! message appears on screen, but don't you think it is a little simple and static? In this chapter, we will explore how to add style to our application using modern tools such as SASS and LESS. Also, we will talk about the most important styling libraries used nowadays such as Bootstrap, Semantic UI, and Material Design. Finally, with all this previous learning, let's make our application look cool, awesome, and attractive by configuring our project to use the Aurelia-Materialize plugin. Some of the tools we are going to use for this purpose are:

• CSS preprocessors: SASS, LESS
• Task automation tools: Gulp
• CSS libraries: Bootstrap, Material Design, Semantic UI

Sounds exciting? We know yes, first we need to start talking about CSS, have you heard about it before? Don't worry, we will explain it in a brief but consistent way. Just CSS is not so awesome, so we will introduce you to some tools to make your style sheets awesome! Tools such SASS and LESS are very useful to these purposes, but we need to run some commands each time we need to use it, so we will also talk about task automation tools. No more manual repetitive commands! Finally, we don't need to reinvent the wheel. We have CSS libraries with different design templates, each one oriented to different concepts and purposes. Last, but not least, we will practice configuring our previously created application with all these awesome tools to make our development process more friendly and interesting. We are sure you will find this chapter really interesting and useful, so let's start!