Page Development - RoBorregos/roborregos-web GitHub Wiki

Developing components

For the development of views and components we are using Material UI as well as React Bootstrap and other npm react components.

It is recommended to first look if there is any component in these libraries that can be used to develop the view/component in the project.

Mapped components

For components that get created with JSONs (mapped with their info), it is recommended to do them as dynamically as possible, taking into account that the information may change.

Some examples are the Project's Content Component which creates a left-right pattern between the card projects and carousels, as well as the Members' Grid which uses Material UI Grid component.

Styling

Component styling must be done in a .css file, at the same level as the component being styled.

For responsivity, it's easier for the container components (upper/exterior components) to define size, so the internal components can adapt to it. Nevertheless, responsive designs must be managed by each component individually; This may be achieved by having different design views depending on the state, using a resize listener, or by CSS alone (recommended if the component designed does not have any state changes, such as the Header in all pages).

(TODO) Some CSS standards are:

  1. Use classes to apply style
  2. Use RGB or Hex for colors
  3. Use vh, vw and % for responsivity

Design

All designs are made in invision and Canva. You can see them here:

When documenting designs some points to take into account are:

  • If the design and animations implemented are possible to mimic by code
  • The color Palette (TODO)
  • Responsive views (normally just large and small view)

Content

Our web page is how we present ourselves to others! It is necessary to keep the web page updated (members, timeline, protect info, contact).

  • For static content: All content must be written on a Google Docs document for revision and syntax errors. One must not change the code before having the content written.
  • Updatable content (members, timeline): simply add it to the CSV/google spreadsheet and use the python scripts inside src/scripts to generate the JSONS

We are currently using JSONS for the content, so it is easier to design their structure in code; nevertheless, it must be reviewed before the PR with the design team, as well as other people involucrated (team members, executive committee, etc).