---
description: >-
  A set of conventions (sometimes arbitrary) about how to write code for this
  project.
---

# 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`.
