Back to book

Styling an Application

Introduction to what Codebots use to style an application. Documentation of the language and also guidelines.


Codebots applications use a CSS extension called Sass. It adds power and elegance to the basic CSS. Sass empowers us to accomplish quality design at scale.

To learn more about working with Sass, we recommend the following resources:

  • Sass Documentation - everything you could possibly want to know about using Sass.
  • Sass Guidelines - an easy-to-follow (opinionated) styleguide on writing maintainable and scalable Sass.

In addition to Sass, Codebots also follows the BEM naming conventions to enabled efficient, large-scale styling. You can learn more about how we use BEM in the Naming Conventions library article.

It is also recommended that you read the Introduction to Harmony article after this one. It explains how to style your application and make the most of the base Sass code provided by the third-generation bots.

The recommended reading below is best read in order:

Recommend Reading

  • Introduction to Harmony
    How to access harmony and view harmony styling, description of the architecture and how the files communicate with each other.
  • Harmony Abstracts
    In depth explanation of abstract files and what each file does in the application.
  • Setting Up Variables
    What variables are. How to add custom colours and fonts to your application.
  • Custom Element Styling
    What elements are. Custom styling buttons and inputs.
  • Custom Component Styling
    What components are. Custom styling the collection component and the application's navigation.
  • Styling a Custom Tile
    Styling a custom tile, how to create a new file and import it as a part of your project.