Formsort
Search…
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
Rounds the corners of an element's outer border edge
Sets the color of an element's border
Sets width of an element's border
Adds a shadow effect around an element's frame
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
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
Sets the weight (i.e. boldness) of the font. The weights available are determined by the font-family that is set
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.
Copy link