Styling an Application

Introduction

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 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 SCSS 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 custom tiles and importing custom SCSS
  Styling a custom tile, how to create a new file and import it as a part of your project.