The TII Business portal layout should be based on the Ant Design Row and Col components which support a responsive grid design. They are also based on flex box, and can responsively resize, especially to different breakpoints.
xs, sm, md, lg, xl : Used for responsive col resizing based on different screen breakpoints
span : replaced by the breakpoint sizing
offset : use instead of empty columns
align : top, middle, bottom vertical alignments
The business portal has a standard sidebar size of 80px. This offset is covered in the SideBar component of ant design.
The Topbar is present on every page, and is used as a label/reference what section the user is on. Whenever the user has moved to a new page within the same navbar stack, they must indicate a way to move back through the topbar. Text within the topbar is always padded by 1.5em, as indicated through the className prop.
Content within the main page is always padded by a minimum of 4em on the x axis and 2em on the y axis. Secondary content that is navigable from the first accessible page can have a padding of greater than 4em on the x axis, but the y axis paddding should never change.
Margins, padding, and font sizes should never be determined through inline styles or styled components. Using classnames for margins, padding, and font sizes improved the modularity and debugging process of the application
Font sizes are always determined through SCSS, where the rfs library is used for responsive font resizing. Media queries support radical font resizing for medium screen breakpoints and below. If a change needs to be made on font resizing, then that change must be reflected in the scss file. Font size debugging may be performed through inline styles, but once the change has been made completely, the adjustment must be transferred over to the classname system.
Font Sizes Supported by TII (in px): 14, 16, 18, 20, 22, 24, 28, 32, 36, 48
Margins are always determined through scss. They are, by default, assigned using the em unit. The standard margin classNames are below:
ml : Left Margin
mr : Right Margin
mt : Top Margin
mb : Bottom Margin
mx : X-Margin
my : Y-Margin
m : Total Margin
Padding is always determined through scss. They are, by default, assigned using the em unit. The standard padding classNames are below:
pl : Left Padding
pr : Right Padding
pt : Top Padding
pb : Bottom Padding
px : X-Padding
py : Y-Padding
p : Total Padding
The font families used by TII are Lato and Roboto.
All headings OR large texts above the size of 24 must be displayed using the Lato font family. Main headings must be bolded. Subheadings must have normal weight.
All body and content text must be displayed using the Roboto font family. The main text must always have a normal font weight. Sub-text can use the light font weight. Company names may be bolded.
Topbar headings : 36
Page headings : 28
Subheadings : 20/24
Text : 16 (unless otherwise specified)
- Border radiuses are always 4px.
- The color scheme is based off cool gray