Identify Components to Create - ariel-fer/Araena GitHub Wiki

[[TOC]]

Identifying Components

It is important to separate the template to use for creating our styling vs the components we need to create to display the content. Sometimes both could come from the same website but not always.

For our purpose, we have used www.polyglot-outsourcing.com as a website we will use to replicate, but using the template found in www.blackrock.com/aladdin.

Some components from Polyglot to be replicated: image.png

Set devices

Some components require not only Desktop vs mobile views, but also tablet or even a certain view for mobile landscape. Wide-screen can also be another option. This section relies on defining this at the beginning since this will be crucial to provide a proper matching between the original component and the one to be developed using the template. Tasks defined next must include as many devices as defined here.

  • Wide-screen
  • Desktop
  • Tablet
  • Mobile landscape
  • Mobile

Template elements

This will specifically mention what elements will be added from the template (either Style guide or custom-built) in order to build the entire component. These will be placed as part of the Proposal in the task.

In the example below, based on a component from Polyglot we provide a good component example that can be used as base from the template:

Polyglot component image.png

Component from the template to be used as base image.png

Add Comments

If there are any topics that must be taken into account between the original component and the new one based on the template, must go here.

Example:

  • Flexbox, Title and paragraphs will be used from this component.
  • Background color must be a another color from white. Using Yellow as alternative.
  • Buttons will be replaced by Main button from Aladdin image.png

Define reusable components.

Add a new note to those components that should be reused, a description stating it will be created as a webflow component.

Set spacing requirements.

Layout spacing

Layout spacing determines how gaps are positioned between various elements, primarily focusing on the overall structure of the design. Here are some steps to follow in order to capture these spaces

  • Find spaces between various elements on the template
  • Take note of the margin or padding used and the class name
  • Take a picture with the inspector marking spacing
  • Complete table with similar structure to this
Template class Atribute Value Value to REM

Example image29.png

Template class Atribute Value Value to REM
rel-content-wrapper margin-top 58px 3.625REM
rel-content-wrapper margin-right 20px 1.25REM

Elements spacing

Element spacing involves setting the gaps around each part, ensuring that the spaces surrounding specific elements are arranged appropriately

  • Find spaces inside elements on the template
  • Take note of the margin or padding used and the class name
  • Take a picture with the inspector marking spacing
  • Complete table with similar structure to this
Template class Atribute Value Value to REM

Example image27.png

Template class Atribute Value Value to REM
description padding-right 13px 0.8125REM
description padding-top 16px 1REM
⚠️ **GitHub.com Fallback** ⚠️