Today
Ankara, 22 May

24º

My list
  • Perform usability testing for P15 MVP
    -Public pages -Product pages
  • Buy puzzle set from Amazon
    Ravensburger Seurat, 2000
  • Morning Run
  • Morning Run
Favorites
You

Hey M. hope you are well. Our idea is accepted by the board. Now it’s time to execute it.

3 mins ago

we did it! 🤠

3 mins ago
Micheal J.

That’s really good!

3 mins ago
You

But it’s important to ship MVP ASAP

3 mins ago
Micheal J.

I’ll be looking at the process then, just to be sure 🤓

3 mins ago
You

That’s awesome. Thanks!

3 mins ago
Menu Type

Color Scheme

Topbar Mode

Menu Mode

Input Style

Theme Colors

Spacing

PrimeFlex provides various spacing utilities to modify an element's layout.

Classes

The classes modify the margins and use the p-m{position}-{value} syntax whereas for responsive values p-m{position}-{breakpoint}-{value} format is used.


<div class="p-mb-2"></i>
<div class="p-mt-4"></i>
<div class="p-m-1 p-m-lg-2"></i>
Position

Position can either be either of the 4 sides, the x-y axis or blank for the shortand of all sides.

  • t: top
  • b: bottom
  • l: left
  • r: right
  • x: left and right
  • y: top and bottom
  • blank: all sides
Value

Value field varies from 0 to 6 where default value of the $spacer is 1rem. The special auto value is used to center elements using auto margins.

  • 0: $spacer * 0
  • 1: $spacer * .25
  • 2: $spacer * .5
  • 3: $spacer * 1
  • 4: $spacer * 1.5
  • 5: $spacer * 2
  • 6: $spacer * 3
  • auto: auto margin
Breakpoint

Breakpoints define how the spacing should be depending on the screen size.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens .e.g monitors
Use Case 1

Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap they are displayed on top of each other whereas with spacing this issue can easily be resolved.

Without Spacing
With Spacing
Use Case 2

Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves separately in stacked mode, reduce the dimension of the window to view the difference.

Without Spacing
With Spacing