Styling an Application
By Nicola D'Andrea and Mikaela Robertson 22 November 2019 Techies
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 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:
Introduction to Harmony
How to access harmony and view harmony styling, description of the architecture and how the files communicate with each other.
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.