# Classes

Bruut outputs a lot of CSS classes for you to work with in the HTML. At the same time, you can @apply all these helpers to use in your own components.

As a general rule: add -- before the classname for the apply rule. The @apply rules will be overwritten by Webpack and the SCSS compiler for the correct properties in the output CSS. For pseudo classes (hover:..., tablet:...) you can use the 'default' and a mixin for breakpoints:

@use "~bruut-sass" as bruut;

.example {
	&:hover {
		@apply --is-color-alpha-100;
	}

	@include bruut.breakpoint(tablet) {
		@apply --is-color-alpha-120;
	}
}

# Border

Available in sizes 0 - 10 and for each Breakpoint:

• .is-border-size-[size]
• .is-border-top-size-[size]
• .is-border-right-[size]
• .is-border-bottom-[size]
• .is-border-left-[size]

Example:

<div class="is-border-size-4 tablet:is-border-size-2"></div>

# Color

Available for each color in the $colors Sass map and for each Breakpoint:

• .is-color-[color]-[shade]
• .hover:is-color-[color]-[shade]
• .is-background-[color]-[shade]
• .hover:is-background-[color]-[shade]
• .is-border-[color]-[shade]
• .hover:is-border-[color]-[shade]

Shade 100 is the provided hex value for the color name in $colors. All other classes are color scaled based on this value (> 100 shades are darker, < 100 shades are lighter variants).

Example:

<div class="is-color-bravo-100 is-background-bravo-20 hover:is-background-bravo-40 tablet:is-background-bravo-40"></div>

Also, there are classes for the following colors: black, contrast, success, warning, info, error. There aren't shades available for these colors:

• .is-color-[color]
• .hover:is-color-[color]
• .is-background-[color]
• .hover:is-background-[color]
• .is-border-[color]
• .hover:is-border-[color]

Example:

<div class="is-color-success hover:is-color-black"></div>

For every provided color in the $colors and the black, contrast, success, warning, info, error, there are opacity colors 10, 20, 30, 40, 50, 60, 70, 80, 90 available as well:

• .is-background-[color]-opacity-[opacity]

Example:

<div class="is-background-charlie-opacity-50"></div>
<div class="is-background-black-opacity-30"></div>

# Flex

Available for each flex class in the $flex Sass map and for each Breakpoint:

• .is-flex
• .is-inline-flex
• .is-flex-vertical
• .is-x-left
• .is-x-center
• .is-x-right
• .is-x-space-between
• .is-x-space-around
• .is-y-top
• .is-y-center
• .is-y-baseline
• .is-y-bottom
• .is-multiline
• .is-flex-shrink
• .is-flex-narrow
• .is-flex-grow
• .is-y-self-top
• .is-y-self-center
• .is-y-self-bottom

Example:

<div class="is-flex is-y-center tablet:is-y-bottom"></div>

# Icon

• .icon

# Image

• .is-cover

Example:

<img class="is-cover" src="../dist/img/beeld/image.jpg" alt="../img/beeld/image.jpg">

# Lists

• .is-ul-stripped

Example:

<ul class="is-ul-stripped"><li>Listitem</li></ul>

# Opacity

Available in variants 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100:

• .is-opacity-[variant]
• .hover:is-variant-[variant]

Example:

<div class="is-opacity-40 hover:is-opacity-100"></div>

# Pointer

Available for each Breakpoint:

• .has-no-events
• .has-events

Example:

<button class="has-no-events small:has-events"></button>

# Position

Available for each Breakpoint:

• .is-relative
• .is-absolute
• .is-fixed
• .is-top-0
• .is-right-0
• .is-bottom-0
• .is-left-0
• .is-height-100
• .has-transform-x new
• .has-transform-y new
• .has-transform-xy new

Example:

<div class="is-relative small:is-fixed small:is-top-0"></div>

# Radius

Available for each radius in the $dimensions Sass map and for each Breakpoint:

• .has-radius-#{$size}
• .has-radius-top-#{$size}
• .has-radius-right-#{$size}
• .has-radius-bottom-#{$size}
• .has-radius-left-#{$size}

Example:

<div class="has-radius-2"></div>
<div class="has-radius-top-round"></div>
<div class="has-radius-circle"></div>

# Ratio

Creates a container with a specific ratio. The default is 16:9 (56.25%). You can adjust the ratio by adding a inline style with a custom --ratio property to the .ratio container:

Example:

<div class="ratio" style="--ratio: 50%;">
	<img ...>
</div>

# Rhythm

Available for each rhythm in the $dimensions Sass mapp and for each Breakpoint:

• .has-rhythm-#{$size}
• .has-horizontal-rhythm-#{$size}

Example:

<div class="has-rhythm-3"></div>
<div class="tablet:has-rhythm-4"></div>

# Shadow

Available for each shadow in the $shadow Sass map:

• .has-shadow-#{$i}

Example:

<div class="has-shadow-1"></div>

# Spacing

Available for for each spacing in the $dimensions Sass map and for each Breakpoint:

• .p-#{$size}
• .pt-#{$size}
• .pr-#{$size}
• .pb-#{$size}
• .pl-#{$size}
• .py-#{$size}
• .px-#{$size}
• .m-#{$size}
• .mt-#{$size}
• .mr-#{$size}
• .mb-#{$size}
• .ml-#{$size}
• .my-#{$size}
• .mx-#{$size}
• .m-minus-#{$size}
• .mt-minus-#{$size}
• .mr-minus-#{$size}
• .mb-minus-#{$size}
• .ml-minus-#{$size}
• .my-minus-#{$size}
• .mx-minus-#{$size}

Example:

<div class="p-5 small:px-3 mobile:pt-2"></div>

# Text

• .has-no-decoration
• .has-underline
• .is-uppercase
• .is-lowercase
• .is-italic
• .is-nowrap new

Available for left, center, right and for each Breakpoint:

• .is-text-#{$alignment}

Example:

<div class="is-text-left small:is-text-center"></div>

Available for each size in the $text Sass map and for each Breakpoint:

• .is-text-size-#{$size}updated

Example:

<div class="is-text-size-8 small:is-text-4"></div>

Available for each weight in the $text Sass map:

• .is-weight-#{$weight}

Example:

<p class="is-weight-400"></p>

# Visibility

Available for each Breakpoint:

• .is-visible
• .is-hidden
• .has-no-overflow
• .is-visually-hidden

Example:

<p class="small:is-visible"></p>
<p class="small:is-hidden"></p>

# Z-index

Available for 0,1,2,3,4,5,6,7,8,9,10:

• .is-z-#{$size}
• .is-z-minus-#{$size}

<div class="is-relative is-z-5"></div>