WV UI Framework Terms

Blocks

Blocks are simply the building block css rules that get applied to Panels in studio to build out the structure of a view. Examples of blocks are:

header

container

rail

section

card

row

column

Adjustors

Adjusters are CSS rules or classes built into the Framework to allow you to effect certain properties of a Block. The properties they effect usually can not be changed from the Styles tab in the Designer UI, so adding these adjusters is meant to increase efficiency. I have tried to develop them in ways that would be easy to remember or deduce while designing. For Example: In the class list we see: left, rail, gap-medium, and pad-medium.

rail is base Block.

left applies additional properties indicated the rail is located on the left.

gap-medium effects the space between child elements that are nested in the rail.

pad-medium effects the space around the child elements to the left, right, top and bottom.

In the second example we see: align, stretch, and row.

row is the base block

align, or the ‘align-items’ property in CSS, determines how the child elements will be aligned.

stretch is possible value for the align-items property and causes the child elements to stretch or grow to the full size of the row.

Short-Hand Adjustors

Short-hand rules help eliminate small errors and make the framework more flexible. Later, we will discuss the grid and using rows and columns, but to simplify: column widths are defined by adjusters as seen in this example “five columns”. Short hand comes into play because the same rules applied to ‘columns’ are applied to ‘column’. If you forget the ‘s’ in columns it will not affect the outcome. The grid has 12 columns, so to create a column that is one third of the space available, any of the following would work: