Skip to content

CodeGuidelines And Conventions

Jump to bottom
Paarmita Bhargava edited this page Apr 12, 2020 · 10 revisions

GIT 🚨

  • 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.

Names ★

  • 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, ignitus-AboutPage.

Icons 🎨

  • 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 ★

  • Please name Types in PascalCase. e.g - Types TeamItemProps is written in PascalCase.

Folder Structure ★

Types

  • 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.

Strings

  • Use 'single quotes' for strings.

ES6 ☘️

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

Hound 🔨

  • Please resolve all suggestions by hound.

Readability & Formatting

  • 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

  • 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.

Design-kit (http://www.ignitus.org/interface)

IMP: Please use buttons, typography, colors, navigation components etc. defined in the design-kit. if you are building a whole new section, try to divide that into atoms, molecules, etc and add them in the design kit and use it from there.

Clone this wiki locally