Fylgja component - Container

The container component is wrapper component, to make all child elements fit better in the page.

Installation  # 

npm install @fylgja/container

Then include the component in to your code via;

@use "@fylgja/container";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/container/container.css";

How to use  # 

To use the container create element with the class .container.

<div class="container">..</div>

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.

Config  # 

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;
Noticed a typo or is something unclear? Help us improve this page on GitHub.