# Asgardeo Style Guide

The Asgardeo Style Guide introduces a set of conventions to be followed when a developer contributes to Asgardeo portals. 
It is much easier to understand a complex product or a codebase when a set of guidelines are in place ensuring 
consistency. Therefore, through this style guide a set of guidelines, that comprises of file naming conventions, code 
formatting styles, UI design guidelines, etc., are provided.

## Table of Content

- Introduction
- Source files fundamentals
- Basic file structure
- Code formatting
- Asgardeo forms
- Accessibility support
- Using custom components
- Performance
- Developer guidelines
- [UI design guidelines](https://github.com/wso2-enterprise/asgardeo-app-extensions/blob/master/docs/ui-design-guide.md)


## Introduction

This document serves as the complete definition of Asgardeo’s coding standards for source code and UI design conventions 
for the portals that are implemented. The main objective of introducing this is to maintain the consistency of products 
from the code base to the visual representation. 

However, this document focuses primarily on the hard-and-fast rules that we follow universally, and avoids giving 
advice that isn't clearly enforceable. Especially when it comes to the code formatting, file naming conventions, and 
accessibility support criteria. The UI design guidelines will be helpful for the developers who will introduce new 
UI components or enhance the existing UI elements in the products. The guide discusses various UI/UX aspects including 
the element styles (colors, paddings, borders, etc.), element placements, usage of the custom UI components, etc.

## Asgardeo Forms

The @wso2is/form library that we use in the Asgardeo portals cater to all the requirements that are 
identified when it comes to its use-cases. This helps to govern the styles of the form elements, and the behavioral 
patterns of the forms used in the Asgardeo products. Follow [these guidelines](https://github.com/wso2/identity-apps/blob/master/docs/FORMS.md) 
to implement a form in the Asgardeo portals more efficiently, maintaining consistency of the UI aspects as well as the 
code base that are introduced in the Asgardeo forms.
