Form - ariel-fer/Araena GitHub Wiki
[[TOC]]
NOTE: Examples defined in this page come from ibm.com form
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
Id | Image | Element name |
---|---|---|
1 | ![]() |
Label |
2 | ![]() |
Text Field |
3 | ![]() |
Dropdown |
4 | ![]() |
TextArea |
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.
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 |
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 |
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 |
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 |
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 |