Define components to create - ariel-fer/Araena GitHub Wiki

[[TOC]]

Each task defines a component to build for a website.

Steps

1- Definition

Definition must include the following information:

  • Title must be [Name of the page] - [Component name]. This helps group components from the same page together.
  • There will be 2 sections:
  • Component: pictures from both desktop and mobile views from the component will be posted
  • Desktop pictures to be used must be using 1280px width size.
  • Mobile pictures must be taken from a real phone
  • If there are any other devices to take into account, to provide pictures here.
  • Links must be provided for both the template and the original component (if applicable)
  • Example of the task description must be as following:

image.png

2- Proposal

Proposal is where it is defined how it will be done, based on the template to be used, the content to be added, and what type of structure will be used to layout the content. If template is available, it is best use to provide desktop and mobile pictures of a similar component that can be used as baseline. It must be provided as folowing.

  • c-section
    • c-container
      • flexbox - horizontal/vertical - gap
        • left box - padding-right - border-right
          • c-title-2
          • c-text-2
        • right box - padding-left
          • image

3- After-development

After development is done and tests were run, Task needs to be updated to showcase results. A new note must be added to include:

  • Pictures showing results in Desktop and Mobile view. Pictures must be taken:
    • Enabling first X-ray on Webflow so all element boxes can be seen so its easier to identify potential problems right away.
    • Show from side to side of the designer, even if there are blank spaces.
  • Comments, if there are any. These must only show any compromises that had to be taken that do not exactly match with the task description.

Structure of the note must be as follow:

  • Desktop [Component picture]
  • Mobile [Component picture]
  • Comments

Example:

Desktop

image.png

Mobile

image.png

Comments:

  • Spacing between elements has been adjusted to an approximate size given the variables defined.
  • Even after applying font family like the template, text still doesn't look exactly.

⚠️ **GitHub.com Fallback** ⚠️