Container

Read all container utilities

Overview

Containers are the outer element used for setting boundaries and grouping multiple content. Container can be fluid or fixed.

Fluid layouts will stretch and fill all the available space when layout width is 100% and the viewport is resized.

Meanwhile, the fixed layout will keep fixed to specific value and don't adapt to viewport size.

Name	Class selectors	Viewport	Max-width	Padding
Extra-small (xs)	.container-xs	300px	320px	20px
Small (sm)	.container-sm	576px	540px	32px
Medium (md)	.container-md	768px	720px	48px
Large (lg)	.container-lg	960px	920px	24px
Extra-large (xl)	.container-xl	1200px	1180px	72px

How it works

Ravenbright comes with responsive containers which offers you to select the existing or create new breakpoints.

<!--this section will have the extra large max-w-->
<section class="container container-xl py-24">
  <h2>Extra large container</h2>
</section>

<!--this section will have the medium max-w-->
<section class="container container-md py-24">
  <h2>Medium container</h2>
</section>

.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  @mixin screen-xs-up {
    padding-left: var(--rbrh-spacing-7);
    padding-right: var(--rbrh-spacing-7);
  }
  @mixin screen-sm-up {
    padding-left: var(--rbrh-spacing-9);
    padding-right: var(--rbrh-spacing-9);
  }
  @mixin screen-md-up {
    padding-left: var(--rbrh-spacing-8);
    padding-right: var(--rbrh-spacing-8);
  }
  @mixin screen-lg-up {
    padding-left: var(--rbrh-spacing-10);
    padding-right: var(--rbrh-spacing-10);
  }
  @mixin screen-xl-up {
    padding-left: var(--rbrh-spacing-14);
    padding-right: var(--rbrh-spacing-14);
  }
  @mixin screen-xxl-up {
    padding-left: 0;
    padding-right: 0;
  }
}

Customize

You can also customize the padding of each container by modifying this code in container.css

:root {
  --rbrh-screen-sm: 36rem;
  --rbrh-screen-md: 48rem;
  --rbrh-screen-lg: 67.5rem;
  --rbrh-screen-xl: 85.375rem;
    --rbrh-screen-xxl: 100rem;
}

.container-sm {
  max-width: var(--rbrh-screen-sm);
}
.container-md {
  max-width: var(--rbrh-screen-md);
}
.container-lg {
  max-width: var(--rbrh-screen-lg);
}
.container-xl {
  max-width: var(--rbrh-screen-xl);
}
.container-2xl {
  max-width: var(--rbrh-screen-xxl);
}