We started this chapter admitting that our ultra-minimalistic UI/UX approach wouldn't work for a potentially shippable product that our Native Web Application should eventually become. Having acknowledged that fact, we added a LESS-based custom style sheet file to our project. Before doing that, for the benefit of those not familiar with the style sheet preprocessor approach, we spent some time enumerating some of the LESS main advantages.

Right after adding the first .less file to our project, we had to choose between keeping Bootstrap, switching it for an alternative client-side framework such as Foundation or Pure, or adopting to a full do-it-yourself approach. We briefly enumerated some pros and cons of each alternative, then we opted for keeping Bootstrap 3, mostly because of its great mobile-friendly grid system and ease of use.

In an attempt to distinguish our SPA look and feel from the default Angular template we replaced the default bootstrap skin with a bootswatch theme: in order to do that we had to perform some modifications on our NPM and Webpack configuration files to download and compile the new theme in the most appropriate way.

We then started to apply some Bootstrap and custom styling to the existing components. We started with the main app and NavMenu components, then quickly moved to the Home view and the QuizListComponent instances contained there; we also spent some valuable time learning the basics of CSS Encapsulation and Shadow DOM and how they can be enabled and disabled in Angular to set a limited scope on our styling rules.

Right after the Home view we focused on the QuizComponent and QuizEditComponent: once done, we chose to let the reader do the rest, not before giving him some useful advise about the styling rules to follow.

Now that our SPA finally got a decent look we can continue our journey into .NET Core and Angular, dealing with some advanced concepts such as data validation, authentication, unit testing and more: these will be the topics of the upcoming chapters.