CSS Reference

The Formsort studio has many CSS properties that can be manipulated to customize your flow - here is a reference to help get your bearings.

Property	Definition
margin	The space around the outside of the border of the element
padding	The space between the content and the border of the element
border-radius	Rounds the corners of an element's outer border edge
border-color	Sets the color of an element's border
border-width	Sets width of an element's border
box shadow	Adds a shadow effect around an element's frame
min-height	Sets the minimum height of an element
min-width	Sets minimum width of an element
max-width	Sets the maximum width of an element
transform	Let's you rotate, scale, skew, or translate an element
text-alignment	Sets the horizontal alignment of the content inside a block
opacity	The degree to which the content behind and element can be seen
font-size	Sets the size of the font. For responsive design, rem units are recommended
font-weight	Sets the weight (i.e. boldness) of the font. The weights available are determined by the font-family that is set
line-height	Sets the space between lines of text

CSS Length Units

Formsort recommends using a handful of the CSS length units when defining the dimensions of a component (margin, padding, font size, etc.)

Property	Definition
rem	Relative to the base font size. This allows responsiveness if there are differing base font sizes for different viewports. Ex: 1.5rem of a base font size of 16px will be 24px (1.5 x 16 = 24).
vw	Relative to 1% width of the viewport. 100vw = 100% width of the viewport.
vh	Relative to 1% height of the viewport. 100vh = 100% height of the viewport.
%	Relative to the size of the parent element. Setting 100% on a width property will allow that component to take 100% of the available space.
px	Pixel: 1px = 1/96th of 1in. Pixels are unresponsive, so it is considered an absolute value. If the content max width setting is 500px, it will be 500px regardless of changes in the viewport size (you can use dimension variables to create responsiveness, however) Useful for setting an absolute value for a component, i.e. a base font size or the width/height of a component.