Form - ariel-fer/Araena GitHub Wiki

[[TOC]]

NOTE: Examples defined in this page come from ibm.com form

Identify elements

What needs to be identified are the following elements:

  • Label
  • Text Field
  • Dropdown
  • Text Area

In case one of this elements were missing on template form, make sure of replace it with the element tag to see its behavior. Example: Convert input on textarea image.png image.png image.png image.png

Id Image Element name
1 image.png Label
2 image.png Text Field
3 image.png Dropdown
4 image.png TextArea

List properties

Do's

  • font sizes, weight, line heights
  • letter-spacing
  • border sizes

Dont's

  • Colors of any kind (borders, background, text): will be done in a different section
  • paddings & margins: will be done in a different section
  • heights & widths: should not have width or height. widths will be defined in layout elements.

Label

Make sure you check not only Desktop but other views in case properties change!

Property Value
font-size 0.875REM
letter-spacing 0.1 REM
font-weight 400
line-height 1.125REM

Text Field

Make sure you check not only Desktop but other views in case properties change!

Property Normal Focus Incomplete
outline 2px 2px 2px
font-size 0.875REM 0.875REM 0.875REM
letter-spacing 0.1 REM 0.1 REM 0.1 REM
height 3REM 3REM 3REM
width 100% 100% 100%
border(s) none none none

Dropdown

Make sure you check not only Desktop but other views in case properties change!

Property Normal Focus
outline 2px 2px
font-size 0.875REM 0.875REM
letter-spacing 0.1 REM 0.1 REM
height 3REM 3REM
width 100% 100%
border(s) none none

Text Area

Make sure you check not only Desktop but other views in case properties change!

Property Normal Focus
outline 2px 2px
font-size 0.875REM 0.875REM
letter-spacing 0.1 REM 0.1 REM
height 3REM 3REM
width 100% 100%
border(s) none none

List all values

To have in mind:

  • list all values in an excel, grouped by property
  • Convert values to rem to have a single measurement
  • remove duplicates
  • Order them from low to high
1 2 3
font-size 1rem 2rem 2.5rem
line-height 1 1.1 rem 1.5
weight 300 400 300
letter-spacing 0.1 REM 0.1 REM 0.1 REM
height 3REM 3REM 3REM
width 100% 100% 100%
border(s) none none none
⚠️ **GitHub.com Fallback** ⚠️