Spacing utilities

Mytril provides a set of spacing properties that allow you to easily control the margin, padding, and gap of elements using simple CSS classes. These property are flexible and can be applied across different breakpoints, making layout adjustments straightforward and efficient.

The spacing classes in Mytril follow a consistent naming convention: {property}{direction}-{size}. Here’s a breakdown:

The property applies the type of spacing:

• m - applies margin
• p - applies padding
• g - applies gap

The direction designates the side the property applies to:

• t - applies the spacing for margin-top and padding-top
• b - applies the spacing for margin-bottom and padding-bottom
• l - applies the spacing for margin-left and padding-left
• r - applies the spacing for margin-right, padding-right, and row-gap
• x - applies the spacing for margin and padding -left and-right
• y - applies the spacing for margin and padding -top and-bottom
• a - applies the spacing for margin, padding and gap in all directions

The size defines the spacing amount and is expressed in rem units. Here’s a list of available sizes:

To apply margin or padding, you can combine the property, direction, and size to target specific elements.

<div class="p-4 m-2">
	<!-- This div has padding of 1rem and margin of 0.5rem -->
	Content
</div>

This would apply 1rem of padding on all sides and 0.5rem of margin.

Mytril also supports responsive spacing, allowing you to adjust spacing at specific screen sizes using breakpoints. The format is: {breakpoint}:{property}-{direction}-{size}.

Breakpoints:

• sm - Small (640px and up)
• md - Medium (768px and up)
• lg - Large (1024px and up)
• xl - Extra-large (1280px and up)
• xxl - Extra-extra-large (1536px and up)

For example:

<div class="md:mx-4 lg:px-2">
	<!-- Applies 1rem horizontal margin at medium screens, and 0.5rem padding at large screens -->
	Responsive content
</div>

In addition to the predefined classes, developers can also leverage CSS root variables for more granular control over spacing values.

.custom-class {
	padding: var(--spacing-4);
	margin: var(--spacing-2);
}

This provides even more flexibility in tailoring your layouts.

• m-{size}: Margin on all sides
• p-{size}: Padding on all sides
• g-{size}: Gap for flexbox or grid layouts
• t, b, l, r, x, y, a: Directional modifiers for top, bottom, left, right, horizontal, vertical, and all sides.

By using Mytril’s spacing properties, you can create highly customizable, responsive layouts with minimal effort.