Newtonian Particle Motion

    @fylgja/container

    1.1.3 • Public • Published

    Container component

    NPM version license

    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 import
    @import "@fylgja/container";

    @layer support

    If you need support for @layer, use the following import;

    @use "@fylgja/container" with ($enable-container-layer: true);
    // Or via PostCSS import
    @import "@fylgja/container/layer";

    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.

    $enable-container-layer: false !default;
    
    $container-layer-name: components !default;
    
    $container-size: 1280px !default;
    $container-padding-y: 0 !default;
    $container-padding-x: 1.25rem !default;

    Install

    npm i @fylgja/container

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    50

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    5.01 kB

    Total Files

    9

    Last publish

    Collaborators

    • grimlink