✅ This guide is aimed for developers from NexStack.

Basic Rules

• For CSS framework, only use Bootstrap. You can also use reactstrap which is a Boostrap component library.
• For spacings like margin and padding, use Bootstrap classes if possible
• For icons, only use react-icons (includes font awesome)
• For colors, always use color variables and media query breakpoints from globals.js - eg. var(—primary)
• Don’t use CSS from Figma!

CSS

Font Size

• For font-size, just use "rem" unit. Basically, 1 rem = 16px unless you change it on body like

  body {
    font-size: 14px;
  }
  

  So, you can write 1.25rem instead of 20px, and 2rem instead of 32px.

Responsiveness

• Try to not use "width" because it will add complexity when it comes to responsiveness. You can instead use Flexbox to adjust widths for layout system.
• If width is needed, max-width is recommended to be used instead because it will automatically make the elements shrink for small devices.
• For media query values, "min-width" is more recommended as we are developing with "mobile-first" approach. So,

  .profileCard {
  text-align: center;
  }
  @media (min-width: 640px) {
  .profileCard {
    text-align: left;
  }
  }
  

  This will center text on mobile, and left align it on screens 640px and wider.

Reusable media queries (with Emotion JS)

I've already set up media breakpoints in 'utils/breakpoints.js'.

You can import that like

import bp from '@/utils/breakpoints'

use like

titleText: css`
  color: #718096;

  @media (min-width: ${bp['sm']}) {
    color: green;
  }
`

Available keys = sm, md, lg, xl, xxl

VSCode Extensions

• Prettier (set Prettier as formatter in settings)
• Import Cost
• Better Comments
• ES7+ React/Redux/React-Native snippets
• Auto Import
• GitLens

Naming

• Mainly use camelCase for everything (variables, filenames, component prop names).
• Use PascalCase for component function names and component file names.

Component Naming:

Use the filename as the component name. For example, LoginForm.js should have a reference name of LoginForm. However, for root components of a directory, use index.js as the filename and use the directory name as the component name:

// bad
import Footer from ‘./Footer/Footer’;

// bad
import Footer from ‘./Footer/index’;

// good
import Footer from ‘./Footer’;

Props

Always use camelCase for prop names.

// bad
<Foo
  UserName="hello"
  phone_number={12345678}
/>

// good
<Foo
  userName="hello"
  phoneNumber={12345678}
  component={SomeComponent}
/>