component

Spacing

Rosetta includes margin, padding, and gap helpers classes to modify spacing between elements. Breakpoints modifiers

Sizes

Here are the sizes for all spacing helpers on a based 16px font size:

Suffix rem px
*-none 0 0
*-xss .75rem 12px
*-xs 1.25rem 20px
*-sm 2.5rem 40px
*-md 3.75rem 60px
*-lg 5rem 80px
*-xl 7.5rem 120px

Margin & Padding

Rosetta provides margin and padding in all directions:

  • *-top for top

  • *-righ for right

  • *-bottom for bottom

  • *-left for left

  • *-x for left and right

  • *-y for top and bottom

These suffix needs to be combined with margin/padding prefix:

  • for margin-top, use margint-top-<value>

  • for padding-bottom, use padding-bottom-<value>

  • for padding-right, use padding-right-<value>

  • for margin in all sides, use margin-<value>

  • for padding in all sides, use padding-<value>

  • for padding in the Y axis, use padding-y-<value>

...and so on.

  • E.g margin and padding
1
2
3

Gap

For CSS Grid and Flexbox you can use the gap helper combined with a size suffix:

  • E.g gap-sm: 10px
1
2
3
4

Variables 

  :root {
    --space-none: 0;
    --space-xxs : .75rem;   // 12px
    --space-xs  : 1.25rem;  // 20px
    --space-sm  : 2.5rem;   // 40px
    --space-md  : 3.75rem;  // 60px
    --space-lg  : 5rem;     // 80px
    --space-xl  : 7.5rem;   // 120px
  }