[[TOC]]

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:

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

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

Component from the template to be used as base

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

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

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

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

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

Template class	Atribute	Value	Value to REM
description	padding-right	13px	0.8125REM
description	padding-top	16px	1REM