.finally(React)

English
Copyright © 2023-currentdotfinally, LLC

Spacing

An REM-based spacing framework

FinallyReact's spacing framework will be included when you import the main CSS file, most likely in a top level app file:

REM

FinallyReact is based entirely on REM sizes. By default, your app's html element will be given font-size: 100%. This means all typography classes which use REM will adapt to the browser's font-size. The default font-size on most browsers is usually 16px, which would make 1rem = 16px by default (try changing your browser's font-size setting and refresh this page to see what happens).
Browser font-size (px)
*
rem
=
px

Utility Classes

Whole Number Spacing

FinallyReact includes spacing classes between 0 and 100 (inclusive), for example:

  • m-4 would translate to 4rem of margin
  • p-1 would be to 1rem of padding
Fractional Spacing

You can also use fractional numbers, for example:

  • m-2-1/2 would translate to 2.5 rem of margin
  • m-1/10 would be 0.10 rem of margin

Valid fractional options:

  • 1/2, 1/3, 1/4, 1/5, 1/6, 1/7, 1/8, 1/9, 1/10
  • 2/3, 2/5, 2/7, 2/9
  • 3/4, 3/5, 3/7, 3/8, 3/10
  • 4/5, 4/7, 4/9

Margin and Padding

m-{#}
margin
mt-{#}
margin-top
mr-{#}
margin-right
mb-{#}
margin-bottom
ml-{#}
margin-left
mx-{#}
margin-left and margin-right
my-{#}
margin-top and margin-bottom
p-{#}
padding
pt-{#}
padding-top
pr-{#}
padding-right
pb-{#}
padding-bottom
pl-{#}
padding-left
px-{#}
padding-left and padding-right
py-{#}
padding-top and padding-bottom

Positioning

top-{#}
top
right-{#}
right
bottom-{#}
bottom
left-{#}
left

Negative Margin and positioning

Margin and position classes can be made negative by adding a hyphen as a prefix to classes.

Note: negative padding is not supported in CSS.

  • -m-4 would translate to -4rem of margin
  • -p-1-2/10 would translate to -1.2rem of padding
  • -left-1 would be -1rem of left position
-m-{#}
negative margin
-mt-{#}
negative margin-top
-mr-{#}
negative margin-right
-mb-{#}
negative margin-bottom
-ml-{#}
negative margin-left
-mx-{#}
negative margin-left and negative margin-right
-my-{#}
negative margin-top and negative margin-bottom
-top-{#}
negative left
-right-{#}
negative right
-bottom-{#}
negative bottom
-left-{#}
negative left