Flowkit v2.0.0Getting Started

Units

Overview

The primary unit of the framework is REM. It’s used for sizing, spacing, and typography to ensure flexibility and accessibility. Other units are also used based on the use-case. Here is the list of all the units used:

CategoryUnitPrimary UsesDescription
ResponsiveREM
  • Typography
  • Spacing
  • Components
Scales with root font size (default: 16px)
EM
  • Button padding
  • Icon sizes
Scales with parent element’s font size
Layout%
  • Container widths
  • Max-widths
Relative to parent element’s size
FR
  • Grid columns
  • Grid layouts
Distributes available space in CSS Grid
ViewportVH/VW
  • Hero sections
  • Full-height layouts
Relative to viewport dimensions
DVH
  • Mobile layouts
  • Dynamic heights
Adjusts for mobile browser chrome
SpecialPX
  • Borders
  • Shadows
Fixed-size elements (use sparingly)
CQWFluid typographyCharacter-width-based unit for responsive typography. Requires heading-responsive_wrapper

Why do we use REM?

REM (short for “root em”) is the foundation of our unit system.

  • It scales based on the root <html> font size (by default 16px)
  • It makes spacing and typography fluid-responsive and consistent
  • It improves accessibility and user control

If 1rem = 16px, then:

REMPixels
0.5rem8px
1rem16px
2rem32px

You can override the base by embedding a rule in your Webflow project custom code:

1<style>
2  html { font-size: 20px; } /* 1rem now equals 20px */
3</style>
Pro Tip

To see the font size change reflected in the Webflow Designer, it’s best to place this code inside a Code embed element within a reusable Component. This ensures the override is included on every page of your project.

REM in Webflow

Webflow supports REM-based math directly in input fields. You can type formulas like 64/16 hit ↵ and get a result of 4. In Webflow PX is the default unit, you can switch to REM by clicking on units indicator and select REM, or simply add 64/16REM, hit ↵ and get 4 REM.

Style Guide