Table of Contents
The container component is wrapper component, to make all child elements fit better in the page.
npm install @fylgja/container
Then include the component in to your code via;
@use "@fylgja/container"; // Or via PostCSS import @import "@fylgja/container";
If you need support for
@layer, use the following import;
@use "@fylgja/container" with ($container-layer: "components"); // Or via native CSS import, also supported by PostCSS import @import "@fylgja/container" layer(components);
To use the container create element with the class
The container is pretty straight forward, its power is found in its customization via CSS variables.
Allowing for smaller of bigger containers when needed.
A more content max width based solution, can be made via;
<div class="container" style="--container-size: 65ch;">..</div>
Making your content better readable for your users when needed.
As with almost all of our components, CSS variables can be configured to add your own look/style.
Want direct control on the base styles, Here are the following SCSS variables can you modify.
$container-size: 1280px !default; $container-padding-y: 0 !default; $container-padding-x: 1.25rem !default;