# Conventions

### GIT convention.

* Please don't commit your `package-lock.json` until & unless you are not adding a new package.
* Please create a new feature branch from `develop` not from `master`, and also create a pull request to `develop` not to `master`.

### Naming convention.

* Use camelCase for defining variable as `const`, `let`.
* Use camelCase for `className`.
* Use camelCase for function and method names.
* Use camelCase for property names and local variables.
* Use PascalCase for defining name of `Component` & and `file` that holds that component.
* Use `ignitus-PascalCase` for `directories`. e.g - `ignitus-CoreTeam`.

### Iconography convention.&#x20;

* Use SVG Icons defined in `ignitus-Icons`, if you don't find the icon you want to use download its SVG from `font-awesome/Material-icons`, please don't forget to give them credits by leaving a comment in the file.
* Only use the Material Rounded Icons and don't add from any other outside websites. In case, you do not find that icon in the list, please ask the maintainer.

### Types convention.

* Please name Types in `PascalCase`. e.g - [Types](https://github.com/Ignitus/Ignitus-client/blob/master/src/ignitus-AboutPage/ignitus-CoreTeam/types.ts) `TeamItemProps` is written in `PascalCase`.
* Do not export `types` or `functions` unless you need to share it across multiple components.
* Do not introduce new types or values to the `global namespace`.

### Directory Structure convention. 📁

[![](https://camo.githubusercontent.com/54feb72fc6bf16fafea1c2d5c623022315e75ed6/68747470733a2f2f692e696d6775722e636f6d2f4662446d6d47532e706e67)](https://imgur.com/FbDmmGS)

### Strings convention.

* Use 'single quotes' for strings.

### ES6 convention. [<img src="https://emojis.slackmojis.com/emojis/images/1520330049/3616/js.png?1520330049" alt="js random" data-size="line">](https://slackmojis.com/emojis/3616-js/download)

* Use `arrow functions` => over anonymous function expressions.
* Always surround loop and conditional bodies with curly braces.

### Readability & Formatting convention.

* Please move all `relative imports` after `absolute imports`.
* Please don't use `IDS` in `html` tags.
* Please use semantic `classNames` that makes some sense about the content inside them.
* Please use `rem` everywhere instead of `em`, `px`, `vw`.
* Colours should be written in `hexadecimal` form and should be picked from `colors.ts`, if it is not present there then create a new `const` for that color.
* Please avoid `inline-styles`.
* CSS properties should be ordered in alphabetical order.

> ```
> background,
> border,
> border-radius,
> color,
> font-size,
> font-weight,
> padding,
> ```

### Error [<img src="https://emojis.slackmojis.com/emojis/images/1563481441/6025/meow_shocked.png?1563481441" alt="meow shocked blob cats" data-size="line">](https://slackmojis.com/emojis/6025-meow_shocked/download)

* If you get any err similarly to this Node `SASS` could not find a binding for your current environment, try switching node version to `v8.16.2`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ignitus-docs.gitbook.io/ignitus/documentation/contributing-conventions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
