Style

It’s generally a good idea to aim for function before form in the development process, but the UI is the part of the application our users interact with and is a key ingredient of a successful solution. In this chapter, we will introduce a CSS-like style resource and build on the responsive design principles we introduced in the last chapter.

We will create custom QML components and modules to maximize code reuse. We will integrate Font Awesome into our solution to provide us with a suite of scalable icons and help give our UI a modern graphical look. We will tidy up the navigation bar, introduce the concept of commands, and build the framework for a dynamic, context-sensitive command bar.

We will cover the following topics in this chapter:

• Custom style resource
• Font Awesome
• Custom components
• Navigation bar styling
• Commands