Margins and padding

Add margins or padding to declutter content, making it easier to absorb.

Best practices

• Add margins or padding in place of <br/> codes.
• Avoid adding margins or padding before and after headers to respect layout standards.
• Use sparingly.

Available sizes

Our five available sizes offer flexibility while respecting our layout standards. In these examples, the light grey colour shows the html element; the dark grey colour shows the spacing applied evenly around the html element.

Utility classes

Apply utility classes to add margins or padding. Use margins to create white space. To add spacing around your element’s content, use padding.

Example: Adding a 'small' uniform margin to a paragraph element:

  <p class="bocss-margin-small">Paragraph with small margin.</p>
  

Uniform spacing

Use these classes to add even spacing around your html element.

One-sided spacing

Add one or more one-sided utility classes if uneven spacing is desired.

Example of adding padding of size small to the top and left sides of an element:

<div class="bocss-padding-left-small bocss-padding-top-small">Example Element</div>

Developers

Mixins

A set of scss mixins is available within the framework allowing for user friendly spacing application. These mixins can be passed as either a size variable or a string (for example, 'small', 'medium'). If the variable or size isn’t within the framework, an scss compile error will appear.

@include bocss-padding($size)
@include bocss-padding-one-side($dimension, $size)
@include bocss-padding-horizontal($size)
@include bocss-padding-vertical($size)

@include bocss-margin($size)
@include bocss-margin-one-side($dimension, $size)
@include bocss-margin-horizontal($size)
@include bocss-margin-vertical($size)

Note: "$dimension" in one-sided spacing mixins can be "top", "left", "bottom", or "right"

Example: Using a mixin to apply 'small' padding to the left side of an element with a "example-element" class:

.example-element{
	@include bocss-padding-one-side('left', 'small');
}

Variables

Use the spacing size variables directly as a replacement for the units in scss. This ensures the spacing values remain up to date.

$bocss-spacing-xsmall
$bocss-spacing-small
$bocss-spacing-medium
$bocss-spacing-large
$bocss-spacing-xlarge

Example: Using a spacing variable to apply a uniform 'medium' margin to an element with an "example-element" class:

.example-element{
	margin: $bocss-spacing-medium;
}