Container
Read all container utilitiesOverview​
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);
}