Web UI

Mockups

Main page

Object page

Finance page

Profile page

comming soon...

Grid

Base grid

All sizes must be multiples of base grid step. Including margins, paddings, icon sizes, etc. No one element can not be smaller then one grid cell. Exceptions are allowed, but must be well-grounded and its number should be minimal.

• $grid-step: 8px

Column system

There are two types of grid:

• Float grid. Behaves like the Bootstraps .container-float. Includes 12 columns whose width are equal and depends on container width.
• Static grid. Columns width are equal and static Number of columns depends on container width. Columns width is static.

Typography

All text height and line height must be multiples of grid step.

In the future, it may be necessary to make the third type of grid whose width depends on screen width, adding offsets on left and right side (like Bootstraps .container)

[https://pastebin.com/fBXCenuf](Grid generator script)